기술면접 준비(4)

JS

• Hoisting과 Temporal Dead Zone이 어떻게 연관되어 있는지 설명하세요.

호이스팅은 모든 선언들을 끌어올려 해당 스코프의 최상단에 선언하는 것을 의미한다. 하지만 이때 모든 값을 전부 끌어올리는 것이 아니라, 선언만 끌어올려진다.
TDZ는 선언 단계부터 초기화 시작 전까지의 구간을 뜻하는데, 자바스크립트에서 변수는 선언, 초기화, 할당 이런식으로 3단계를 거쳐 생성된다. 즉 var같은 경우 선언과 초기화가 동시에 진행되기 때문에 호이스팅될 때 참조가 가능하지만, let이나 const의 경우 선언과 초기화가 따로 진행되기 때문에 TDZ가 있는 경우 메모리가 할당되지 않아 접근할 수 없게 된다.

브라우저 렌더링

• 브라우저 렌더링 방식에 대해 설명하세요.
  브라우저는 첫번째로 HTML과 CSS 파일을 파싱해서 각각 Tree를 만든다. 이 트리는 DOM과 CSSOM 이라고 부른다. 그리고 두 트리를 결합하여 rendering tree를 만들고, 렌더링 트리에서 각 노드의 위치와 크기를 계산한 뒤 그 값을 이용해 실제 픽셀로 변환하고 레이어를 만든다.
  그리고 그 레이어를 합성하여 화면에 나타낸다.

• 리플로우와 리페인트에 대해 설명하세요.
  노드에 무엇이 추가되거나, 스타일이 달라지거나, 브라우저 크기를 조절하는 경우에도 viewport가 변경되어 Reflow와 Repaint가 발생한다.
  스타일이나 DOM 내부를 변경하는 DOM API가 사용됐다면, DOM은 변경을 감지하고 브라우저 작동 과정을 반복하여 렌더링을 다시 하게 된다. 그냥 속성과 메서드를 사용했다는 이유만으로 리플로우가 발생하는 것들이 있는데, 대표적으로 innerText, height, width 속성들이 있다.
  속성 말고도 대표적인 리플로우의 원인은 폰트의 변화나 내용 변화, JS를 통한 DOM 동적 변화 등이 있다.

• 반응형 웹은 무엇이고 장단점에 대해 설명하세요.
  반응형 웹이란 디바이스나 디스플레이 종류에 반응하여 그에 맞도록 적절하게 UI 요소들이 유기적으로 배치되도록 설계된 웹을 말한다. 반응형 웹으로 인해 웹사이트를 사용하는 사람들에게 모든 기기에서 최적화된 웹사이트를 제공할 수 있게 되었고 PC버전과 모바일버전 구분을 하지 않아도 됨으로써 시간과 비용을 많이 절감할 수 있었다.
  가장 큰 장점은 한 파일에서 관리를 할 수 있어 유지보수가 간편하고, 모바일 점유율의 증가, 마케팅 유리, 모바일 버전과 웹 버전의 도메인을 따로 두지 않아도 되기 때문에 검색 엔진 최적화같은 장점이 있다.

• 자바스크립트 엔진의 콜 스택이 무엇인지 설명할 수 있나요?
  콜스택은 자바스크립트 코드가 실행되며 생성되는 실행 컨텍스트를 저장하는 자료구조이다. 현재 어떤 함수가 동작하고 있는지, 그 함수 내에서 어떤 함수가 동작하는지, 다음에 어떤 함수가 호출되어야 하는 지 등을 제어하고, 스택이 할당된 공간보다 많은 공간을 차지하면 stacl overflow 에러가 발생한다.

번들링과 웹팩

번들링은 웹 페이지를 배포하기 위해 필요한 파일들을 묶는 것이다. 단순히 HTML, CSS, JS 파일을 모으는 것이 아닌, 파일간의 충돌을 방지하고 성능과 보안을 향상시키는 등의 다양한 기능을 포함한다. 웹앱의 크기가 커지면 유지보수가 쉽도록 여러 파일로 분리해야 하는데, 이때 분리된 파일 각각을 모듈이라고 하고 파일을 모듈로 나누어 관리하는 것을 모듈 시스템이라고 한다.
번들링을 통해 나눠놓은 파일을 굳이 다시 합치는 이유는 웹 앱의 로딩속도와 성능 문제 때문이다. 번들링을 통해 파일을 압축하고 병합하는 작업을 진행하여 파일 개수를 줄이는 것이다.
하지만 자바스크립트는 기본적으로 모듈 시스템을 지원하지 않아 분리된 jS 파일들의 전역변수가 중복되는 문제가 발생할 수 있다. 이러한 한계를 극복하기 위해 모듈 번들러가 등장했고 번들러 중 가장 많이 사용되는것은 웹팩으로, 정적 모듈 번들러이다.

리액트 virtual DOM

React에서는 virtual dom을 사용한다. 실제 DOM을 조작하는 방식이 아닌 실제 DOM을 모방한 가상의 DOM을 구성해 원래 돔과 비교해서 달라진 부분만 리렌더링 시켜주는 방식으로 작동을 한다.
실제 DOM을 조작하지 않는 이유는 브라우저가 화면을 그리는데 필요한 모든 요소가 들어있기 때문이다. 리액트는 부드러운 UX를 사용자에게 제공하기 위해 변경사항만 빠르게 파악하고 리렌더링 하기 위해 가상 DOM을 만들어 비교하는 방식을 채택했다.

Class Component와 Function Component의 차이점

클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 상대적으로 UI 로직이 복잡하다.
함수형 컴포넌트는 state를 사용하지 않고 데이터를 props로 UI에 뿌려준다. 필요에 따라 hook을 사용하며 로직의 재사용이 가능해 함수형 컴포넌트와 훅을 주로 사용하고 있다.

첫번째로 선언 방식이 다르다. 클래스형 컴포넌트는 class키워드로 상속하고, this 키워드 사용이 필요하다.
함수형 컴포넌트는 state와 lifecycle 관련 기능 사용이 불가했지만 hook을 통해 해결할 수 있었다.

운영체제

• Node.js는 싱글 스레드?
  싱글 스레드란 하나의 스레드만을 사용하여 여러 작업요청을 처리하는 방법인데 Node.js는 자바스크립트의 이벤트 루프를 메인 스레드로 활용하기 때문에 싱글 스레드이다. 하지만 기본 작업 외에 특정한 작업을 수행하거나 추가 스레드가 필요한 경우 새로운 스레드를 생성하여 실행할 수 있는 멀티쓰레드 프로세스이기도 하다.

• JavaScript는 싱글 스레드입니다. 어떻게 싱글 스레드 방식으로 비동기 호출을 할 수 있는 지에 대해 설명할 수 있나요?
  자바스크립트의 비동기 처리는 브라우저가 수행한다. 대표적인 비동기 함수인 setTimeOut() 의 경우 자바스크립트의 엔진만으로는 이 비동기 함수를 처리할 수 없기 때문에 브라우저에게 비동기 처리를 위임한다.
  자바스크립트의 런타임은 브라우저 혹은 Node.js인데, 여기에서는 여러개의 스레드가 사용될 수 있어 자바스크립트에게 스레드를 지원해주기 때문에 가능하다.

• 이벤트 루프
  브라우저 기본 구조에는 heap, web APIs, callback queue, event loop 가 있는데 이벤트 루프는 콜스택이 다 비워지면 콜백 큐에 존재하는 함수를 하나씩 call stack으로 옮기는 역할을 한다.

• 가비지 컬렉션이란 무엇이며, 가비지 컬렉션을 가진 언어에는 무엇이 있나요?
  메모리 관리 기법 법 중 하나로 프로그램이 동적으로 할당했던 메모리 영역 중에서 필요없게 된 영역을 해제하는 기능이다.
  즉, 동적 할당된 메모리 영역 가운데 어떤 변수도 가리키지 않는 메모리 영역을 탐지하여 자동으로 해제하는 기법이다. 이 기능을 가진 언어(혹은 엔진)는 자바, C#, 자바스크립트 등이 있습니다.

자료구조

• Stack과 Queue의 차이점은 무엇인가요?
  스택은 데이터를 차곡차곡 쌓아올린 형태의 자료구조로, 가장 마지막에 삽입된 자료가 가장 먼저 삭제되는 후입선출 구조를 가지고 있다. 줄여서 LIFO 라고 부른다.
  큐는 스택과 다르게 먼저 들어온 것이 먼저 나가는 선입선출 구조로 줄여서 FIFO 라고 부른다. 한쪽 끝에서는 삽입 작업이, 한쪽 끝에서는 삭제 작업이 나뉘어서 이루어지고 있다.

• Tree와 Graph의 차이점은 무엇인가요?
  - 하나의 트리에는 두 개의 정점 사이에 하나의 경로 만 존재하는 반면 그래프는 노드 사이에 단방향 및 양방향 경로를 가질 수 있습니다.
  - 트리에는 정확하게 하나의 루트 노드가 있으며 모든 자식은 단 하나의 부모 만 가질 수 있습니다. 반대로 그래프에서 루트 노드의 개념은 없습니다.
  - 그래프에는 루프와 자체 루프가있을 수 있지만 트리에는 루프와 자체 루프가있을 수 없습니다.
  - 그래프는 루프와 자체 루프를 가질 수 있기 때문에 더욱 복잡합니다. 대조적으로 나무는 그래프에 비해 단순합니다.
  - 트리는 선주문, 순차 및 후행 기술을 사용하여 가로 지릅니다. 다른 한편, 그래프 트래버 설에서는 BFS (Breadth First Search)와 DFS (Depth First Search)를 사용합니다.
  - 나무는 n-1 개의 모서리를 가질 수 있습니다. 반대로, 그래프에는 미리 정의 된 수의 에지가 없으며 그래프에 따라 다릅니다.
  - 트리에는 계층 적 구조가 있지만 그래프에는 네트워크 모델이 있습니다.

• 이진탐색트리에 대해
  이진 탐색은 정렬된 리스트에서 검색 범위를 줄여 나가면서 검색 값을 찾는 알고리즘입니다.
  이진 탐색은 정렬된 리스트에만 사용할 수 있다는 단점이 있지만, 검색이 반복될 때마다 검색 범위가 절반으로 줄기 때문에 속도가 빠르다는 장점이 있습니다