브라우저의 동작 순서는? (어려움)
사용자가 브라우저를 통해 웹 사이트에 접속하면 브라우저는 DNS를 통해 웹 서버의 IP 주소를 파악한다. 브라우저는 이렇게 파악한 IP 주소에 있는 서버와 3 Way Handshake를 완료하고 서버에 데이터를 요청하는 HTTP Request를 한다. 그리고 서버로부터 데이터를 받는데, 이를 HTTP Response라고 한다. 서버로부터 받은 데이터에 HTML을 파싱해 DOM tree를 만들다가 중간에 스타일 태그가 나오면 CSS를 파싱해 CSSOM tree를 생성한다. 파싱 중간에 스크립트 태그가 나오면 JavaScript 엔진에 권한을 넘겨 JavaScript 코드를 파싱해 AST를 생성 후 실행한다. 그리고 DOM tree와 CSSOM tree를 합쳐 Render tree를 생성한다. 여기까지의 과정을 Construction이라고 한다. 그리고 렌더링 엔진은 Render tree에 있는 노드를 배치하고 UI 백엔드는 Render tree의 노드를 돌며 화면에 UI를 그린다. 마지막으로 노드의 레이어를 순서대로 구성하는 Composition 작업을 완료하는데, 여기까지의 과정을 Operation이라고 한다. 이후 최종적으로 브라우저는 사용자에게 화면을 출력한다.
호이스팅이란? (어려움)
var로 선언한 변수는 코드가 실제로 이동하진 않지만 최상위로 끌어올려진 것처럼 동작한다. 이를 호이스팅이라고 한다. (참고로 할당은 호이스팅되지 않는다.) let과 const도 호이스팅되지만 TDZ(Temporal Dead Zone)의 영향을 받는다. let과 const는 블록 스코프(Block scope)이다. 함수, if 문, for 문, while 문, try...catch 문 등이 블록 스코프에 해당한다. 블록 스코프는 모든 코드 블록 내부에서 선언된 변수는 코드 블록 내부에서만 유효하며 외부에서는 접근할 수 없다. 따라서 코드 블록 내부에서 선언한 변수는 지역 변수이다. 한편 var는 함수 스코프(Function scope)이다. 함수 스코프는 함수 내부에서 선언된 변수만 지역 변수가 된다. 그래서 if 문 안에서 var로 선언한 변수는 if 문 밖에서도 사용 가능하다. 함수, if 문, for 문이 함수 스코프에 해당한다. 현재는 var가 거의 사용되지 않는다. let과 const가 TDZ의 영향으로 코드를 예측 가능하게 하고 잠재적 버그를 줄여주기 때문이다. 한편 var도 함수 내부에서 선언되면 함수 밖에서 사용할 수 없다. var가 유일하게 벗어날 수 없는 스코프가 함수라고 생각하면 된다.
코딩앙마, 자바스크립트 중급 강좌 #1 - 변수, 호이스팅, TDZ(Temporal Dead Zone)
클로저란 무엇이고 원리와 사용 이유는?
클로저(closure)란 함수와 해당 함수가 선언된 렉시컬 환경의 조합이다. 함수가 생성될 당시의 외부 변수를 기억해 생성 이후에도 계속 접근 가능하다. 전역 변수 사용을 억제하고, 정보 은닉화를 위해 사용한다.
코딩앙마, 자바스크립트 중급 강좌 #11 클로저(Closure) 5분만에 이해하기
this의 용법에 대해 아는 대로 말해보기
this 키워드는 함수를 호출할 때 결정된다. 전역 범위에서 사용될 때 this는 전역 객체를 가리킨다. 함수에서 사용될 때도 전역 객체를 가리킨다. 객체에 속한 메서드에서 사용될 때는 그 메서드의 객체(점 앞에 명시된 객체)를 가리킨다. 객체에 속한 메서드 내부의 함수에서 사용될 때는 전역 객체를 가리킨다. 생성자에서 사용될 때는 생성자로 인해 생성된 새로운 객체를 가리킨다. this 관련 메서드로는 call(), apply(), bind()를 쓸 수 있다.
const test = {
prop: 42,
func: function() {
return this.prop;
},
};
console.log(test.func());
// expected output: 42
class Person {
constructor(name) {
this.name = name;
}
introduce() {
console.log(`Hello, my name is ${this.name}`);
}
}
const otto = new Person("Otto");
otto.introduce(); // Hello, my name is Otto
코딩앙마, 자바스크립트 중급 강좌 #2 - 생성자 함수
드림코딩, 자바스크립트 7. 오브젝트 넌 뭐니? | 프론트엔드 개발자 입문편 (JavaScript ES6)
카버의 코딩일기, this 키워드 - call, apply, bind
브라우저 저장소의 종류는? 각각의 차이점은?
먼저 쿠키는 key-value 형태의 만료 기한이 있는 브라우저 저장소이다. 이 단점을 보완해 로컬/세션 스토리지가 만들어졌다. 로컬 스토리지는 클라이언트 데이터를 영구 저장(예: 자동 로그인)하고, 세션 스토리지는 브라우저를 닫으면 데이터가 삭제(예: 비로그인 장바구니)된다. 쿠키는 로컬 스토리지와 세션 스토리지에 비해 용량이 매우 작고, 암호화 기능이 없어 정보 유출 위험이 있다.
노마드 코더, 세션 vs 토큰 vs 쿠키? 기초개념 잡아드림. 10분 순삭!
이벤트 버블링과 이벤트 캡처링이란?
이벤트 버블링은 특정 요소에 이벤트가 발생할 때, 해당 요소의 자식부터 부모까지 이벤트가 호출되는 방식이다. HTML 구조 특성상 자식 요소에 발생한 이벤트가 상위 부모 요소에 영향을 미치는 것이다. 이벤트 캡처링은 이벤트 버블링과 정반대 개념으로, 밖에서 안, 부모에서 자식으로 이벤트가 호출되는 방식이다. 이벤트 버블링이나 캡처링을 차단하고 싶은 경우 event.stopPropagation()을 호출하면 이벤트 전파를 막고 해당 이벤트만 실행할 수 있다. 한편 이벤트 캡처링은 그렇게 중요한 개념은 아니다. 왜냐하면 이벤트 캡처링의 경우 인터넷 익스플로러의 이전 버전에서 지원되지 않기 때문에 이벤트 캡처링을 사용하는 경우가 매우 드물기 때문이다. 다만 이벤트가 전달되는 흐름을 설명할 때는 유용하다.
코딩앙마, 자바스크립트 DOM & EVENT #6 이벤트 버블링, 이벤트 위임
생활코딩, JavaScript - 이벤트전파 (1/3) : 소개
생활코딩, JavaScript - 이벤트전파 (2/3) : 캡처링
생활코딩, JavaScript - 이벤트전파 (3/3) : 버블링
TypeScript란?
TypeScript는 JavaScript의 상위 확장 버전인 오픈 소스 프로그래밍 언어이다. 정적 타입으로 컴파일 단계에서 오류를 발견하는 장점이 있고, 강력한 OOP를 지원한다. Babel과 같은 별도의 컴파일러 사용 없이도 ES6의 새로운 기능을 기존 JavaScript 엔진에서 실행 가능하다. 명시적인 타입 지정은 코드 가독성을 높이고 디버깅을 쉽게 한다.
SSR과 CSR의 차이점은?
SSR(Server Side Rendering)은 사용자가 웹 페이지에 접근할 때, 서버에 개별 페이지에 대한 데이터만을 요청한 뒤, HTML과 JSON 파일 등을 다운로드해 화면에 렌더링하는 방식이다. CSR(Client Side Rendering)은 SPA에서 사용되는 방식으로, 클라이언트에서 HTML을 반환하고, JavaScript가 동작하면서 데이터만을 주고받아 클라이언트에서 렌더링을 진행한다. (다시 말해 CSR에서 서버는 단지 JSON 파일을 보내주는 역할만 하고, HTML을 그리는 역할은 클라이언트에서 JavaScript로 수행한다.) 이로 인해 초기 로딩 속도의 경우 SSR은 CSR보다 다운로드 데이터가 적어 빠르지만, CSR은 최초 모든 JavaScript 파일을 다운로드해서 느리다. SSR은 서버와 자주 응답(데이터가 바뀔 때마다 서버에 요청)하기 때문에 서버에 부담을 주고, UX(전체 페이지 리프레시)가 단점이다. CSR은 데이터 요청 시에만 서버와 응답해 서버에 주는 부담이 적다. SEO 관점에서 SSR은 HTML 정보가 포함(SEO에 사용되는 meta 태그들이 미리 정의된 상태)되어 있기 때문에 유리하고, CSR은 HTML 파일이 비어 있어 구글을 제외한 크롤러가 검색 데이터를 수집할 수 없으므로 불리하다.
드림코딩, 서버사이드 렌더링 (개발자라면 상식으로 알고 있어야 하는 개념 정리 ⭐️)
Zygimantas Sniurevicius, Explaining SSR & CSR in Javascript
var, let, const의 차이점은?
var는 변수의 재선언과 재할당 모두 가능하다. 호이스팅(var로 선언한 모든 변수는 코드가 실제로 이동하진 않지만 최상위로 끌어올려진 것처럼 동작)되어 변수 선언 전에 참조할 수 있다. let은 변수 재선언은 불가능하지만 재할당은 할 수 있다. 변수 선언 전에 참조는 할 수 없지만 변수를 선언할 때 반드시 할당할 필요는 없다. const는 변수의 재선언과 재할당이 모두 불가능하다. 변수 선언 전에 참조할 수 없고, 변수 선언과 할당을 동시에 해야 한다.
var x = 1;
if (x === 1) {
var x = 2;
console.log(x);
// expected output: 2
}
console.log(x);
// expected output: 2
let x = 1;
if (x === 1) {
let x = 2;
console.log(x);
// expected output: 2
}
console.log(x);
// expected output: 1
const number = 42;
try {
number = 99;
} catch (err) {
console.log(err);
// expected output: TypeError: invalid assignment to const `number'
// Note - error messages will vary depending on browser
}
console.log(number);
// expected output: 42