JavaScript에서 변수 선언 방식인 var, let, const 의 차이점에 대해 알아보자. 1. 변수 선언 방식 우선, var는 변수 선언 방식에 있어서 큰 단점을 가지고 있다. var name = 'bathingape' console.log(name) // bathingape var name = 'javascript' console.log(name) // javascript 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다. 이는 유연한 변수 선언으로 간단한 테스트에는 편리 할 수 있겠으나, 코드량이 많아 진다면 어디에서 어떻게 사용 될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있다. 그래서 ES6 이후, 이를 보완하기 위해 추가 된 변수 선..

다른 언어들과의 차이점 (1) class기반 vs prototype기반 자바스크립트는 동적인 언어이고, 프로토타입을 기반으로한 객체지향 언어이기 때문이다. class 기반의 언어(C++)는 객체의 형식이 정의된 class라는 개념을 가지고 그것을 이용해 객체를 찍어낸다. 반면 프로토타입 기반 언어는 class의 개념이 없으며, 객체 prototype의 위임 과정을 통해 상속이 된다고 한다. 따라서, class 기반 언어는 class를 이용해 새로운 객체를 뽑아내고, 프로토타입 기반 언어는 객체끼리의 chaining을 통해 동적으로 표현된다. 그리고 이 객체의 내용을 동적으로 수정도 할 수 있다. (2) 동기 vs 비동기 자바스크립트는 동기적인 특성을 가졌고 작성 순서대로 실행 일반적으로 C++언어를 작성..

연속적인 비동기 패턴을 다룰때 가장 전통적인 방식인 콜백 패턴의 단점을 보완하기 위해 Promise가 나왔다. Promise를 사용하면 코드의 indent가 계속 깊어지는 콜백 헬 문제를 해결하면서 코드를 좀 더 읽기 좋게 만든다는 점에서 아주 훌륭한 패턴이라고 할 수 있다. 근데 Promise가 진짜 유용한 이유는 따로 있다. 우선 콜백 패턴이 왜 복잡한지부터 살펴보자. 콜백 패턴의 복잡성 const add5 = (number, callback) => { setTimeout(() => callback(number + 5), 1000); }; const add10 = (number, callback) => { setTimeout(() => callback(number + 10), 1000); }; con..

Closure (클로저) 함수가 자신이 선언됐을 때의 환경인 스코프를 기억하여 자신이 선언됐을 때의 환경 밖에서 호출되어도 그 환경에 접근할 수 있는 함수를 뜻한다. (함수가 실행되는 위치가 어디인지는 관계가 없다. ) 렉시컬 스코프 스코프는 함수를 호출할 때가 아니라 함수를 어디에 선언하였는지에 따라 결정이 된다. 이를 렉시컬 스코핑이라고 한다. var x = 1; function foo() { var x = 10; bar(); } function bar() { console.log(x); } foo(); // 1 bar(); // 1 언뜻보면 foo에서 실행이 되어 x가 foo 내부의 x를 가리킬 것 같지만 실제 bar가 선언됐을 당시의 x인 1을 가리키게 된다. 이처럼 렉시컬 스코프는 함수를 어디서..

제어할 태그 선택하기 html의 body를 선택해서 제어하고싶다. javascript select tag by css selector 구글링하기 https://developer.mozilla.org/ko/docs/Web/API/Document/querySelectorAll Document.querySelectorAll() - Web API | MDN Document 메소드 querySelectorAll() 는 지정된 셀렉터 그룹에 일치하는 다큐먼트의 엘리먼트 리스트를 나타내는 정적(살아 있지 않은) NodeList 를 반환합니다. developer.mozilla.org 예문에는 document.querySelector("body") 셀렉터 뒤에 괄호안에 쌍따옴표를 쓰는것으로 나오는데 강의에서는 'body..

CSS 기초 3 . 은 class를 의미하고 #은 id를 의미한다 고용보험 이 부분은 클라스 영향도 받고 id영향도 받는다 class는 그루핑(학교로치면 학급) id는 한가지를 식별(학번, 겹치면안됨) class 선택자로 주고싶은 효과를 광범위하게 주고, 예외처리를 하고 싶은 태그들을 id선택자로 지정해서 디자인을 바꾼다. 레이어처럼 class위에 id를 얹는다 느낌 span{} : html안의 모든 span태그에 적용 우선순위 : id > class > span