TIL) Section 4 기술 면접 준비

정우시·2022년 10월 18일

코드스테이츠

2. 코드스테이츠

목록 보기

50/52

오늘은 Section 4의 마지막날입니다. Section 4에 나온 내용을 토대로 기술 면접에 나올법한 것들을 정리하였습니다.

질문

JavaScript

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

호이스팅은 함수 안에 있는 선언들을 모두 끌어 올려 해당 함수 유효 범위의 최상단에 선언하는 것을 말합니다.
Temporal Dead Zone(TDZ)는 선언 전에 변수를 사용하는 것을 허용하지 않는 개념상의 공간입니다.
var, function, import의 선언은 TDZ의 영향을 받지 않습니다. 특히 var는 암묵적으로 undefined로 초기화 된 상태에서 자바스크립트 코드를 읽기 때문에, TDZ에서 에러가 나지 않습니다.
const, let, class는 Temporal Dead Zone에 영향을 받습니다. 즉 const, let, class는 선언 전에 변수를 사용하는것을 허용하지 않습니다. 그렇기 때문에 호이스팅은 되지만 참조할 메모리가 없어 Reference Error가 발생합니다.
따라서 예기치 못한 에러를 피하기 위해서는 var를 지양하고 let 또는 const를 사용하는 것이 좋습니다.

브라우저 렌더링

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

먼저 브라우저라는 것은 인터넷에 접속할 때 사용하는 크롬, 사파리, 파이어폭스 등을 말합니다.

HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. (Parsing)
두 Tree를 결합하여 Rendering Tree를 만든다. (Style)
Rendering Tree에서 각 노드의 위치와 크기를 계산한다. (Layout)
계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다. (Paint)
레이어를 합성하여 실제 화면에 나타낸다. (Composite)

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

리플로우

생성된 DOM 노드의 레이아웃 수치 변경 시 영향 받은 모드 노드의 수치를 다시 계산하여 렌더 트리를 재생성하는 과정으로 DOM 요소의 기하학적 속성이 변경될 때, 브라우저 사이즈가 변할 때, 스타일시트가 로딩되었을 때 발생하는 변화들을 다시 계산해주는 과정을 뜻하며, 레이아웃이라고도 한다.

리페인트

리플로우 과정이 끝난 후 생성된 렌더 트리를 다시 그리는 과정으로 변경된 요소를 실제로 화면에 그려주는 작업을 뜻한다. 또한 리플로우가 발생하면 필연적으로 리페인트가 실행되며 리플로우보다는 상대적으로 훨씬 가벼운 작업이다.

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

반응형 웹이란?

한 가지의 웹사이트로 다양한 종류의 기기에 최적화된 화면을 보여주는 것이다.

장점

하나의 템플릿만을 사용해 다양한 사용자와 기긱에 대응할 수 있어 개발이 간편하다는 장점을 가진다.
화면 크기가 해상도에 상관없이 웹 사이트를 잘 보여준다.
어느기기, 어떤 접속 환경에서도 url이 같다.
최신 웹 표준을 따른다.
트래픽 관리도 용이하다.

단점

브라우저와 호환성에 문제가 있을 수 있다.
디자인 자유도 떨어지고 100% 맞춤 디자인이 어렵다.
로딩속도, 이미지 리사이징 등의 문제로 인해 성능 문제 있을 수 있다.

⭐️ 자바스크립트 엔진의 콜 스택(Call Stack, 호출 스택)이 무엇인지 설명할 수 있나요?

콜 스택이란 프로그램에서 우리가 어디에 있는지를 기본적으로 기록하는 데이터 구조입니다. 동작 방식은 다음과 같습니다. 함수를 실행하면 해당 함수의 기록을 스택 맨 위에 추가(Push) 합니다. 우리가 함수를 결과 값을 반환하면 스택에 쌓여있던 함수는 제거(Pop) 됩니다.
자바스크립트의 특징으로 우선 자바스크립트는 단일 스레드 프로그래밍 언어이므로, 단일 콜 스택이 있습니다. 단일 콜 스택은 한 번에 하나의 일(Task)만 처리할 수 있습니다.

번들링과 웹팩

⭐️ 번들링은 왜 필요한가요?

번들링은 기능별로 모듈화했던 자바스크립트 파일들을 묶는 것을 말하는 것으로, 대표 예시로는 웹팩이 있습니다.
번들링을 이용할 경우 이전에는 각 파일마다 서버에 요청을 하여 자원을 얻어와야했던 반면, 같은 타입(html, css, js) 등 파일을 묶어서 요청/응답을 받아 네트워크 비용이 감소한다.
다양한 모드가 지원되면서 최적화, 코드 압축 등 작업 지원한다.
웹팩의 주요 구성 요소 중 하나인 로더가 일부 브라우저에서 지원이 되지 않는 ES6 형식의 자바스크립트 파일을 ES5로 변환하여 사용가능, 다른 모든 브라우저에 대해서도 커버 가능하다.

React

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

Virtual DOM은 무엇인가?

자바스크립트가 html을 조작하기 편하도록 만들어진 객체를 허상으로 만든 것이다.

순서

1.real dom으로부터 virtual dom을 만든다.(virtual dom은 메모리 상에 존재하는 하나의 객체다)
2.변화가 생기면 새로운 버전의 virtual dom을 만든다.
3.old 버전의 virtual dom과 new 버전의 virtual dom을 비교한다.(diff algorithm)
4.비교 과정을 통해서 발견한 차이점을 real dom에 적용한다.

Virtual DOM의 장점

효율적인 "비교" 알고리즘(Diffing Algorithm)으로 Virtual DOM에서 사용하는 "비교" 과정은 실제 DOM의 작업량을 실질적으로 줄여준다. 그리고 이 과정에서 변경 사항을 식별하기 위해 이전의 Virtual DOM과 현재 Virtual DOM 상태를 비교하는 일이 필요하다.
단순하고 성능향상에 도움이 된다.
리액트 없이 사용 가능이 가능하다.
상태 변경을 생각하지 않고 애플리케이션 빌드할 수 있다.
가볍다.

⭐️ Class Component와 Function Component의 차이점이 무엇인가요?

클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 상대적으로 복잡한 ui 로직을 갖고 있다.
반대로 함수형 컴포넌트는 state를 사용하지 않고 단순하게 데이터를 받아서 ui에 적용한다.

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

리액트 함수 최상위에서만 hook을 호출해야 한다.
오직 react함수 내에서 hook을 호출해야 한다.
useState 나 useEffect 같은 훅들이 여러 번 사용될 수 있는데, 리액트는 이 훅들을 호출되는 순서대로 저장해 놓는다.

운영체제

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

네, NodeJS 는 기본적으로 Javascript 의 이벤트 루프를 메인 스레드로 활용하기 때문에 "싱글 스레드"이다.

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

자바스크립트 런타임에서는 비동기를 지원하지 않지만, 동시성을 보장하는 비동기와 논블로킹 작업은 자바스크립트 엔진을 구동하는 런타임 환경(브라우저, Node.js)에서 지원합니다. 자바스크립트는 코드를 그대로 실행하기만 하면 됩니다.

⭐️ Event Loop에 대해 설명할 수 있나요?

자바스크립트는 싱글스레드 언어로 자바스크립트 엔진은 하나의 콜 스택을 가지고 있기 때문에 한번에 하나의 동작만을 처리할 수 있다.
그런데 브라우저가 동작하는 것을 보면 많은 부분이 동시에 처리 되는 것처럼 느껴지게 된다. 이와 같이 자바스크립트의 동시성을 지원하는 것이 이벤트 루프입니다.
자바스크립트의 코드가 실행되면 비동기 호출에 대한 처리를 브라우저에서 web API로 넘기고 동기적인 처리를 콜 스택에 담아 먼저 처리하게 된다.
이후에 비동기 호출에 대한 처리가 끝나면 web API는 비동기 호출의 콜백 함수를 task queue에 담게 되고 Event Loop는 콜 스택이 비어있는지 확인하고, 콜 스택이 비어 있다면 task queue에 있는 함수를 call stack으로 넘겨주는 역할을 수행한다.

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

프로그램에서 더 이상 사용하지 않는 메모리를 자동으로 정리하는 것으로 언어로는 자바, C#, 자바스크립트가 있습니다.

자료구조

⭐️ Stack과 Queue의 차이점은 무엇인가요?

스택과 큐의 차이점을 말하라고 하면, 스택은 후입선출(LIFO), 큐는 선입선출(FIFO)라고 말한다. 후입선출은 가장 늦게 넣은 데이터가 가장 빨리 나가는 것. 선입선출은 가장 빨리 넣은 데이터가 가장 빨리 나간다는 뜻이다.

⭐️ Tree와 Graph의 차이점은 무엇인가요?

그래프는 노드(하나의 점)와 노드 간을 연결하는 간선으로 구성된 자료 구조이다. 이를 통해 연결된 노드 간의 관계를 표현할 수 있는 자료구조이다.
트리는 그래프와 같이 노드와 노드간을 연결하는 간선으로 구성된 자료구조이다. 그러나 트리는 그래프 중에서도 특수한 케이스에 해당하는 자료구조이다. 사이클이 존재하지 않는 방향 그래프이다. 이러한 특성 때문에 '최소 연결 트리'라고 부르기도 한다.

	그래프	트리
방향성	방향, 무방향	방향만
사이클	순환, 비순환, 자기순환	비순환만
루트노드	루트 개념 없음	한 개의 루트 존재
부모-자식	부모-자식 개념없음	1개의 부모노드(루트 제외)
모델	네트워크 모델	계층 모델
간선 수	자유	N-1개

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

이진 탐색이란 데이터가 정렬돼 있는 배열에서 특정한 값을 찾아내는 알고리즘이다.
배열의 중간에 있는 임의의 값을 선택하여 찾고자 하는 값 X와 비교한다. X가 중간 값보다 작으면 중간 값을 기준으로 좌측의 데이터들을 대상으로, X가 중간값보다 크면 배열의 우측을 대상으로 다시 탐색을 하게 된다.
동일한 방법으로 다시 중간의 값을 임의로 선택하고 비교함 해당 값을 찾을 때까지 이 과정을 반복하게 된다.