목록front (29)
Coding Planet
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/JFaLD/btsyVaPZm1T/akFjJNVJG5TPgMPgpTv52k/img.png)
아래 포스트는 https://www.geeksforgeeks.org/introduction-to-less/의 내용을 번역, 요약, 발췌한 것입니다. | SASS란? SASS는 Syntactically Awesome Style Sheets의 약어이다. SASS는 변수, nesting, import, 믹스인, 상속 등의 고급 문법을 사용할 수 있다. 이렇게 작성된 문법은 프로그램에 의해 자동으로 CSS 파일로 컴파일되어 웹사이트에 적용된다. SASS에는 두 가지 유형의 문법이 있다. 1) SCSS(Sassy CSS): 현대적인 문법으로, CSS와 유사하며 `.scss` 확장자를 사용다. 2) Indented syntax(또는 sass): 오래된 문법으로, 들여쓰기를 기반으로 하며 `.sass` 확장자를 사용..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/czwyWI/btsy5cL4kLK/G8fXoFKygvz4I9XVssWYW0/img.png)
아래 포스트는 https://www.geeksforgeeks.org/introduction-to-less/의 내용을 번역, 요약, 발췌한 것입니다. | LESS란? LESS는 JavaScript를 기반으로 하는 동적 스타일 시트 언어로 스타일시트(Style Sheet)의 관리, 커스터마이징, 재사용성을 높혀준다. LESS는 크로스 브라우징에 유용하게 사용될 수 있으며 동작시 일반 CSS로 컴파일되기 때문에 사용이 간편하다. 이는 변수, 함수, 믹스인, 연산과 같은 기능을 제공하여 동적 CSS를 구축할 수 있게 해준다. LESS는 2009년 Alexis Sellier에 의해 디자인되었다. 첫 버전은 Ruby로 쓰여졌지만 이후 더 간단한 언어인 JavaScript로 대체되었다. | 왜 LESS를 써야하는가?..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/VS8Gq/btr3HRS9zW4/fazA2SGVAkkv5D2oOFZuh1/img.png)
💻구현하고자 하는 기능 to do list 만들 때 add 버튼을 클릭하고 나면 task가 추가된다. 이 때 추가 이후에도 텍스트가 그대로 남아있으면 다음 일정을 추가할 때 불편하다. add 버튼을 클릭하면 input의 text가 자동으로 없어지게하고 싶다. 💻 해결! task가 추가하는 add 함수에 input의 value값을 null로 지정한다
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/qFIjw/btr3J27JBfK/NBBYcXlrUZRjZBBLffe2N0/img.png)
💻구현하고자 하는 기능 체크리스트를 만들 때 체크버튼을 클릭하면 취소선이 생기고 다시 클릭하면 취소선이 없어지는 기능 💻 해결! type이 boolean인 isComplete() 함수에 부정형(!)을 취해준다 기존값이 true면 false, false면 true를 반환한다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/I0BJ3/btr3GRr2gJl/bmyeCH5D1Cg1jcljIvU2tK/img.png)
ES6는 템플릿 리터럴(Template Literal)이라고 하는 새로운 문자열 표기법을 도입했다. 템플릿 리터럴을 통해 문장열 입력을 복잡도를 크게 낮출 수 있다. 템플릿 리터럴은 일반 문자열과 비슷해보이지만 작은 따옴표('). 큰 따옴표(") 대신에 백틱(`)을 사용한다 1. 기존 ES5에서의 코드 function introduce(name, code){ alert("선택하신 제품 " + name + "의 코드는 " + code + "입니다. ") 2. ES6에서의 새로운 방법 function introduce(name, code){ alert(`선택하신 제품 ${name}의 코드는 ${code}입니다.`) 백틱은 키보드이 물결표시(~)에 있다. +를 이용해서 문자열을 잇다 보면 실수가 발생하는데 이..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/FnsSW/btr2uft3r3d/y7rI3kt1fvVRwkN8rkRA7K/img.png)
* var의 사용이 지양되어야 하는 이유 var의 사용이 지양되는지를 이해하기 위해서는 먼저 호이스팅과 변수의 적용 범위에 대한 이해가 필요하다. * 호이스팅(Hoisting): - 호이스팅이란 JavaScript의 인터프리터가 변수와 함수의 메모리 공간을 선언전에 미리 할당하는 것을 의미한다. - 실질적으로는 변수의 선언과 초기화를 분리한 것으로 선언을 코드의 최상단으로 옮기는 것이다. - 호이스팅으로 인해 var변수는 undifined로 변수를 초기화 한다. - var의 범위는 function-scope이기 때문에 function의 최상단으로 이동시킨다. * 변수의 적용범위(scope): 1) 함수 레벨 범위(Function-level Scope) - 함수 내에서 선언된 변수는 함수 내에서만 유효하며..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/oV4Zo/btr2hJwuYDs/yFKUysmhjlth6pXcZfByi0/img.png)
1. 변수의 종류 JavaScript는 변수 선언 시 자료형이 아닌 var, let , const, 미작성 중 하나를 골라서 사용한다 키워드 특징 var 변수, 변수명의 중복을 허용한다(덮어쓰기), 함수 레벨의 적용범위(scope)을 갖는다 let 변수, 변수명의 중복을 허용하지 않는다, 블록 레벨의 적용범위(scope)을 갖는다 const 상수, 변수명의 중복을 허용하지 않는다, 블록 레벨의 적용범위(scope)을 갖는다 2. 변수의 우선순위 우선순위 설명 1 순위 : const JS는 HTML 상에서 특정 요소를 선택해 지속적으로 추적하여 사용하는 경우가 많기 때문에 상수형 변수에 저장해 고정적으로 사용한다 2 순위 : let 3 순위 : var 요즘에는 var를 잘 쓰지 않는다. 덮어쓰기 가능하기 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/LriBf/btr2m3nNtZL/GKgRgdAkQfBZl5zzP2T2pK/img.png)
1. DOM(Document Object Model)이란? HTML(웹문서, 웹페이지) 문서를 객체 기반으로 표현한 것이다. HTML을 객체 기반으로 표현함으로써 프로그래밍이 용이해진다. (불러오기 등등) DOM의 객체 구조는 '노드 트리'라고도 불린다. HTML 문서에 작성된 내용을 트리구조(계층형으로 표현)로 나타냈을 때 각각의 태그, TEXT, COMMENT 등을 Node라고 한다. 아래와 같은 트리 구조를 띄고 있다. 2. Node와 Element의 차이 Node: 태그(요소 노드), 속성, 주석, 내용(텍스트 노드)를 모두 표현 Element: Node의 하위 개념으로 요소 노드만을 표현한다. 즉, 속성, 주석, 내용은 해당하지 않는다. 3. Node 탐색방법 1) 부모 Node 탐색 요소.pa..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/BO0hx/btr2u0pQrD5/3omMSRZ7xFkUOeEuzxGYhk/img.png)
1. JSON(Java Script Object Notation, 자바스크립트 객체 표기법)이란? JSON은 데이터 오브젝트를 전달을 하기위한 텍스트 형식의 개방형 표준 포맷이다 즉, JavaScript 객체를 텍스트화 시킨 것이다. 예시) JS 객체 : {"memberID":"user01", "memberPw":"pass01", "age":20} JSON 문자열: '{"memberID":"user01", "memberPw":"pass01", "age":20}' 2. 왜 JSON이 필요할까? JSON은 매우 간단한 형식을 가지고 있다. 괄호{} 내에 key:value 쌍으로 구성 {"key":value}되어 있다. 이 때, key는 반드시 문자열이다. value는 String, Number, Boolea..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/l65y0/btr2vVu1LNJ/aJ9dF3FdyF7KJIrRjV4TO0/img.png)
1. 객체(요소) 삽입 메서드 1) 선택자 요소 기준(A): 새로운 객체나 요소를 삽입하는 것에는 여러 방법이 있다. 삽입의 기준으로 삼은 요소(A)에 자식으로 대입하거나 형제요소로 대입할 수 있는데, 이를 삽입 전 명확히 해야한다. 2) 새로 생성할 요소 기준(B): 혹은 새로 삽입하려는 요소(B)를 기준으로 매개변수로 지정한 선택자(A) 요소에 자식이나 형제로 대입할 수 있다. 이러한 생성방법은 위의 방법과 그 순서가 반대이다. 2. 선택자 요소 기준(A) : append(), prepend(), after(), before() $(A).append(B): A요소 내 뒷 부분에 B를 추가(자식) $(A).prepend(B): A요소 내 앞 부분에 B를 추가(자식) $(A).after(B): A요소 뒷..