[기술 면접] JavaScript

Posted on Jul 20, 2021 #기술 면접   #JavaScript  

---

🧁 기술 면접 대비를 위한 공부 2..

---

Virtual-DOM

DOM을 추상화한 가상의 객체. DOM이란 HTML 문서를 파싱하여 문서의 구성 요소들을 객체로 구조화한 것이다.

virtual-DOM은 렌더링의 비효율적인 문제, DOM의 복잡도 증가로 인한 유지 보수가 어려워지는 문제 등을 해결하기 위한 기술이다.

Vritual-DOM에 변경 내역을 한번에 모으고(버퍼링) 실제 DOM과 차이를 판단한 후, 구성 요소의 변경된 부분만 찾아 바꾼 후, 그에 따른 렌더링을 한 번만 하면 된다.

브라우저의 렌더링 과정(what happens when type google)

1. 사용자가 특정 페이지에 접속하여 HTML을 서버로부터 내려받으면, 브라우저의 렌더링 엔진에서 이를 파싱한다.
2. HTML을 파싱하면서 DOM 트리를 만들게 되는데, 이때 Link 태그를 만나 StyleSheet를 내려받게 될 경우 CSS 파싱을 통해 CSSOM(CSS Object Model) 트리를 만든다.
3. 이 둘을 결합하여 렌더 트리를 만들고 레이아웃 작업을 통해 사용자에게 그려줄 영역을 계산한 뒤 화면에 뿌려준다.
4. 이때 위 과정을 진행하며 Javascript를 만나면, 렌더링 엔진이 아닌 자바스크립트 엔진이 컨트롤을 넘겨받고 결과값을 준다. 이때 DOM 파싱은 중단된다.
5. 자바스크립트의 실행이 완료되면 다시 HTML 파서로 제어 권한이 넘어가고 브라우저가 중지된 시점부터 DOM 파싱을 재개한다.

생성된 DOM 노드의 레이아웃 수치 변경 시 영향을 받은 모든 노드의 수치를 재계산 하여 렌더 트리를 재생성하는 과정을 Reflow 과정이라고 하며, 이 과정이 끝난 후 재생성된 렌더 트리를 다시 그리는 것을 Repaint라고 한다. (reflow가 이루어졌다고 항상 repaint 되는 것은 아니다. 배경색 등 레이아웃 수치에 영향을 끼치지 않는 것은 repaint만 진행)

script 태그의 위치

브라우저는 동기적으로 HTML, Css, Javascript를 처리한다. 때문에 script 태그의 위치에 따라 블로킹이 발생하여 DOM 생성이 지연될 수 있음을 의미한다. 때문에 body 요소의 가장 아래에 script 태그를 위치시키는 것이 좋다.

• HTML 요소들이 스크립트 로딩 지연으로 인해 렌더링에 지장을 받지 않아 페이지 로딩 시간 단축
• DOM이 완성되지 않은 상태에서 자바스크립트가 DOM 요소에 접근 시 참조 오류 발생

Hoisting

호이스팅이란, 함수 안에 있는 선언들을 모두 끌어올려 해당 함수 유효 범위의 최상단에 선언하는 것이다.

클로저란?

클로저는 반환된 내부 함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여, 그 스코프 밖에서 호출되어도 스코프에 접근할 수 있는 함수이다.

즉, 자신을 감싸고 있는 바깥 함수의 변수에 접근할 수 있는 내부의 함수를 모두 클로저라 하며, 클로저의 사용을 통해 전역 변수의 사용을 억제할 수있고, OOP의 장점 중 하나인 캡슐화가 가능하므로 데이터 은닉화가 가능하다.

모든 함수는 각자의 실행 컨텍스트에 스코프 체인을 가지고 있는데, 외부 함수에 대한 실행이 종료되어도 스코프 체인은 유지된다는 원리를 통해 클로저의 구현이 가능하다.

실행 컨텍스트

실행 컨텍스트란, 실행 가능한 코드가 실행되는 환경이다. 실행중인 코드가 실행 컨텍스트에 스택처럼 쌓이며 실행 환경을 가지게 된다.

this

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다.

Restful API

REST란 HTTP URI를 통해 자원을 명시하고, HTTP Method를 통해 자원에 대한 CRUD Operation을 적용하는 것을 의미한다.

API란 데이터와 기능의 집합을 제공함으로써 프로그램 간 상호작용을 촉진하며, 정보 교환을 가능하도록 하는 것을 의미한다.

따라서 REST API란 REST를 기반으로 API 서비스를 구현한 것이다.

Promise와 Callback의 차이점

둘 다 자바스크립트의 비동기 처리를 위해 사용되는 패턴이다. Callback의 경우 함수의 처리 순서를 보장하기 위해 함수를 중첩되게 사용하는 경우가 발생해 콜백 지옥이 발생한다는 단점과, 에러 처리가 힘들다는 단점이 있다.

이러한 단점을 해결하기 위해 ES6에서부터 Promise를 정식으로 사용한다.

Async, Await이란? Promise와의 차이점은?

Promise를 더욱 쉽게 사용할 수 있도록 하는 ES8 문법이다. 함수 앞부분에 async 키워드를 추가하고 함수 내부에서 promise 앞부분에 await 키워드를 사용하면 된다.

이 경우 promise…then 보다 코드가 간결해지며, 에러 처리의 경우 try…catch를 사용한다.

자바스크립트 최적화

자바스크립트는 가비지 컬렉션을 사용해 최적의 성능을 보장받을 수 있도록 하는데, 다음과 같은 경우에 메모리 누수가 발생할 수 있다.

1. 전역 변수로 인한 메모리 누수: 전역 변수는 가비지 컬렉션이 불가능한 영역이다.
2. 잊혀진 타이머 또는 콜백 함수로 인한 메모리 누수: setIntrval을 Clear해주지 않은 한 계속 동작할 것이다.
3. 클로저
4. DOM: DOM 노드를 객체의 데이터로 저장하는 경우, 해당 데이터 구조에서 DOM 노드를 참조하지 못하게끔 해야 메모리 릴리즈가 가능하다.

Mutable과 Immutable

mutable은 바뀔 수 있는 변수 타입. immutable은 그 반대의 개념. 자바스크립트에서 Object와 Array만 Mutable한 타입이고, 다른 원시 타임의 경우 immutable하다.

비동기 콜백

자바스크립트는 싱글 스레드 언어로, 단일 호출 스택이 있다. 따라서 한 번에 하나의 일만 처리할 수 있따. 만약 브라우저에서 무거운 처리를 진행하려고 하면 단일 스레드로 인해 작업이 블로킹될 수 있다. 즉 먹통이 될 수 있다.(기능 또는 UI가 멈춤)

이를 극복하기 위한 해결 방안이 바로 비동기 콜백이다. 싱글 스레드 언어임에도 여러 작업을 동시에 할 수 있는 것은 브라우저가 Web APIs와 같은 것들을 제공하여 비동기 작업을 가능하게 하기 때문이다.

함수를 동기 호출하게 되면 호출 스택에 쌓여 순차적으로 실행된다. 이때, AJAX나 setTimeout, DOM event 함수를 실행하면, 자바스크립트 엔진은 호출 스택에서 Web APIs로 보내고 정해진 시간 또는 이벤트가 발생한 순간에 순차적으로 Callback queue(Task Queue)에 적제한다. Callback 큐에 적재된 함수들은 호출 스택에 쌓여 있던 태스크들이 모두 처리될 경우, 차례로 스택에 쌓여서 실행된다.

이러한 순환이 이벤트 루프(Event Loop)이다. 자바스크립트에서는 이를 통해 동시성을 지원한다.

https://velog.io/@lucas/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%A9%B4%EC%A0%91-%EC%A4%80%EB%B9%84#iterator%EA%B3%BC-generator%EC%9D%84-%EC%84%A4%EB%AA%85%ED%95%B4%EC%A3%BC%EC%84%B8%EC%9A%94

---

# 카테고리

• BOJ 36
• Algorithm 12
• CodingTest 11
• Web 9
• Javascript 8
• Vue 7
• React 7
• DBProject 4
• Python 3
• Tech-interview 3
• Express 3
• Next 3
• Github 2
• Django 2
• C 1
• C++ 1
• WebGame 1

---