Section 4. [기술 면접]

📌 JavaScript

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

A. 호이스팅은 var, let, const, funtion, class 키워드 등을 사용해 선언하는 식별자들이 코드의 맨 위로 끌어 올려진 것처럼 동작하는 것을 말합니다.

let, const와 var의 호이스팅 방식에는 차이가 있는데, var의 경우 선언 단계와 함께 undefined로 초기화 되므로 코드를 만나기 전부터 참조가 가능합니다.

반면에 let, const로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행되기 때문에 스코프에는 변수가 등록되지만, 변수 선언문 코드에 도달하기 이전에 변수를 참조하려고 하면 참조 에러가 발생합니다. 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 것을 Temporal Dead Zone 이라고 합니다.

let과 const는 호이스팅이 되기는 하지만 초기화가 이루어지지 않은 상태이기 때문에 초기화 단계를 만나기 전에는 참조할 수 없으며 일시적 사각지대인 TDZ가 생기는 것입니다.

---

📌 브라우저 렌더링

Q. 브라우저 렌더링 '방식'에 대해 설명하세요.

A. 브라우저는 크게 2가지 방식으로 렌더링 합니다. 

첫번째는 Sever Side Rendering, 두번째는 Client Side Rendering 방식 입니다.

SSR은 서버 쪽에서 렌더링 준비를 마친 상태로 클라이언트에 전달하는 방식으로, 초기 로딩 속도가 빠르지만 요청시마다 새로고침 해야한다는 단점이 있습니다.

CSR은 서버는 요청을 받으면 클라이언트에게 HTML과 JS를 보내주고 클라이언트가 렌더링하는 방식으로, 변경된 데이터만 가져올 수 있고 서버의 부하를 감소시킬 수 있습니다. 하지만 모든 파일이 다운로드 되고 렌더링이 끝나기 전까지 사용자가 볼 수 없다는 단점이 있습니다.

 

Q. 브라우저 렌더링 '과정'에 대해 설명하세요.

A. 사용자가 브라우저를 통해 웹 사이트에 접속하면, 브라우저는 서버로부터 HTML, CSS, JS 같은 웹사이트에 필요한 리소스를 다운 받습니다.

렌더링 엔진은 전달받은 HTML 문서를 파싱해서 DOM Tree를 구축하고, CSS 파일과 함께 포함된 스타일 요소를 파싱해 CSSOM Tree를 구축합니다.

DOM Tree 와 CSSOM Tree를 결합해 Render Tree를 구축하고, 레이아웃 과정을 거쳐 각 요소를 어디에 배치할 지 결정합니다.

레이아웃 과정이 끝나면 Render Tree를 기반으로 요소들을 화면에 그리는 Paint 과정을 거칩니다.

 

Q. 리플로우와 리페인트에 대해 설명하세요.

A. 웹 인터랙션으로 인해 렌더링 과정의 레이아웃을 반복해 수행하는 것을 리플로우, 페인트 과정을 반복해 수행하는 것을 리페인트라고 합니다.

 

Q. 반응형 웹은 무엇이고 장단점에 대해 설명하세요.

A. 반응형 웹이란 PC, 스마트폰, 태블릿 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 하나의 웹 사이트 입니다. 

장점으로는 하나의 URL을 가지고 있어 검색 엔진 최적화에 유리하며, 하나의 웹페이지로 운영하기 때문에 유지보수가 편리하다는 점이 있습니다.

단점으로는 디자인의 자유도가 떨어지며 100% 맞춤 디자인이 어렵고, 콘텐츠가 많고 레이아웃이 복잡할 수록 코드가 복잡해진다는 점이 있습니다.

 

Q. 자바스크립트 엔진의 콜 스택이 무엇인지 설명할 수 있나요?

A. 콜 스택이란 엔진이 구동되면서 실행 중인 코드를 추적하는 공간으로, 함수의 호출을 기록하는 스택입니다.

함수가 실행되면 콜 스택에 추가되고 실행이 끝나면 스택에서 제거됩니다.

---

📌 번들링과 웹팩

Q. 번들링은 왜 필요한가요?

A. 번들링은 웹 페이지를 배포하기 위해 필요한 파일들을 묶는 것 입니다.

번들링 과정을 거치지 않으면 다양한 상황이 일어나 어려움에 처할 수 있습니다. 예를 들어, 두개의 js 파일에서 같은 변수를 사용하고 있다면 변수 간 충돌이 일어날 수 있습니다. 파일 사이즈를 줄이기 위해 공백을 모두 지웠는데, 가독성이 너무 떨어져 코딩하기 힘들어 질 수 있습니다. 번들링은 이러한 문제를 해결해줄 뿐만 아니라 성능과 보안을 향상시키는 등 다양한 기능을 포함합니다.

대표적으로 웹팩이 존재하며, 웹팩은 배포하기 전 번들링 해주는 모듈 번들러 입니다.

 

📌 React

Q. Virtual DOM이 무엇이고, Virtual DOM이 어떤 면에서 좋은가요?

A. virtual DOM은 React에 있는 가상의 DOM 객체로, 실제 DOM의 사본 같은 개념입니다.

리액트는 실제 DOM에 접근해서 조작하는 대신 가상의 DOM 객체에 접근해서 변화 전과 후를 비교하고 바뀐 부분만 실제 DOM에 적용합니다. 때문에 실제 DOM처럼 브라우저 화면에 그리는 것이 아니기 때문에 속도가 훨씬 빠르고, 비용도 적게 듭니다.

 

Q. Class Component와 Function Component의 차이점이 무엇인가요?

A. 선언 방식의 차이, 기능적 차이가 있습니다. 클래스 컴포넌트는 class 키워드가 반드시 필요하며 Component로 상속받아야 합니다. 또한 render() 메소드가 만드시 필요합니다. 반면 함수형 컴포넌트는 일반 함수 처엄 선언이 매우 간편합니다.

클래스 컴포넌트는 메모리 자원을 함수형 컴포넌트보다 더 사용합니다.

(밑의 블로그를 참고했는데 어떻게 정리해야 잘 답변하는 것인지 모르겠다..)

https://heeeming.tistory.com/entry/React-%ED%81%B4%EB%9E%98%EC%8A%A4%ED%98%95-vs-%ED%95%A8%EC%88%98%ED%98%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%B0%A8%EC%9D%B4-class-vs-function-component

 

Q. React Hook의 사용 규칙에 대해 설명하세요.

A. 첫번째로, 리액트 훅은 리액트 함수의 최상위에서만 호출해야 합니다. 리액트는 훅을 호출되는 순서대로 저장해놓기 때문에 조건문이나 반복문 안에서 호출하게 되면 호출되는 순서를 저장하기 어려워집니다. 

두번째로, 리액트 훅은 리액트 함수 내에서만 사용되어야 합니다. 훅은 리액트의 함수 컴포넌트 내에서 사용되도록 만들어진 메소드이기 때무에 근본적으로 일반 js함수 내에서는 정상적으로 돌아가지 않습니다.

---

📌 운영체제

이 부분은 더 준비가 필요할 것 같다.

Q. Node.js는 싱글 스레드인가요?

A. node.js 자체는 싱글 스레드 방식이 아닙니다. 자바스크립트를 실행하는 부분에서만 싱글 스레드로 구성되어있고, 이 때의 작업 동시성은 이벤트 루프를 통해 구현할 수 있습니다.

이벤트 루프는 call stack이 다 비워지면 callback queue에 존재하는 함수를 하나씩 call stack으로 옮기는 역할을 합니다.

 

Q. JavaScript는 싱글 스레드입니다. 어떻게 싱글 스레드 방식으로 비동기 호출을 할 수 있는 지에 대해 설명할 수 있나요?

A. 자바스크립트 런타임에서는 비동기를 지원하지 않지만, 자바스크립트 엔진을 구동하는 런타임 환경(브라우저, Node.js)에서 비동기 작업을 지원합니다. 자바스크립트는 코드를 그대로 실행하기만 할 뿐, 런타임 환경에서 이벤트를 스케줄해주고 비동기 작업을 처리합니다.

 

Q. Event Loop에 대해 설명할 수 있나요?

A. JavaScript는 싱글 스레드 방식으로 돌아가지만 실제 자바스크립트가 구동되는 환경(브라우저, Node.js등)에서는 주로 여러 개의 스레드가 사용되기 때문에 필요한 장치가 이벤트 루프입니다. 

JavaScript event loop는 call stack이 비어있는 경우, task queue에서 대기하던 callback을 call stack으로 옮겨서 callback을 실행시켜주는 역할을 합니다.

 

Q. 가비지 컬렉션이란 무엇이며, 가비지 컬렉션을 가진 언어에는 무엇이 있나요?

A. 가비지 컬렉션은 프로그램에서 더 이상 사용하지 않는 메모리를 자동으로 정리하는 것입니다. 메모리를 비워주지 않게 되면 메모리 누수가 발생하며, 이로 인해 속도 저하, 강제 종료, 느린 응답 속도 등과 같은 문제가 발생할 수 있습니다. 

가비지 컬렉션 기능을 가진 언어에는 자바, C#, 자바스크립트 등이 있습니다.

---

📌 자료구조

Q. Stack과 Queue의 차이점은 무엇인가요?

A. 스택은 top 한 곳에서 삽입, 삭제가 이루어 지며 후입선출로 가장 마지막에 삽입한 데이터가 가장 빨리 나갑니다.

큐는 작업 구역이 한 곳인 스택과는 달리 한쪽 끝에서 삽입, 다른 쪽 끝에서 삭제가 이루어집니다. 후입선출이 아닌 선입선출로 가장 먼저 삽입된 자료가 가장 빨리 나갑니다.

 

Q. Tree와 Graph의 차이점은 무엇인가요?

A. 그래프는 방향이 있는 그래프와 방향이 없는 그래프가 존재하며 순환 혹은 비순환 구조를 이룹니다. 반면 트리는 그래프의 한 종류로, 순환이 존재하지 않는 방향그래프 입니다. 또한 그래프는 루프 개념이 없으며 트리는 하나의 루트 노드를 가집니다. 때문에 트리는 계층적 구조를 가지며 부모-자식 관계가 존재하지만, 그래프는 존재하지 않습니다.

 

Q. 이진 탐색 방법에 대해 설명할 수 있나요?

A. 이진 탐색은 데이터가 정렬되어 있는 배열에서 특정한 값을 찾아내는 알고리즘입니다. 배열의 중간에 있는 임의의 값을 선택해서 찾고자 하는 값과 비교하고, 찾고자 하는 값이 크면 우측 데이터를 대상으로, 작으면 좌측 데이터를 대상으로 다시 탐색합니다. 찾고자 하는 값을 찾을 때까지 해당 과정을 반복합니다.

매번 탐색 대상을 절반으로 줄여나가기 때문에 모든 값을 탐색해 비교하는 것보다 훨씬 실행 시간이 빠르며, O(logN)의 시간복잡도를 갖습니다.