Section 4 기술 면접 준비

JavaScript

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

React

• Virtual DOM이 무엇이고, Virtual DOM이 어떤 면에서 좋은가요?
• Class Component와 Function Component의 차이점이 무엇인가요?
• React Hook의 사용 규칙에 대해 설명하세요.

자료구조

• Stack과 Queue의 차이점은 무엇인가요?
• Tree와 Graph의 차이점은 무엇인가요?
• 이진 탐색 방법에 대해 설명할 수 있나요?

타입스크립트

• TypeScript는 정확히 무엇이며 JavaScript와 어떻게 다른가요?
• TypeScript를 사용할 때 어떤 장단점이 존재하나요?
• TypeScript의 인터페이스를 설명해 주세요.

---

위의 질문 목록중 카테고리 별 하나씩 선택하여 답변을 준비해볼 것이다 

 

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

Hoisting 과 Temporal Dead Zone 은 변수 선언과 초기화의 순서에 영향을 주는 JavaScript의 동작과 관련된 개념입니다.
호이스팅은 var, let, const, function, class 키워드 등을 사용해서 선언하는 모든 식별자(변수, 함수, 클래스 등)이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징입니다.
우선 let,const와 var의 호이스팅 방식의 차이를 봐야합니다.
var의 경우 선언 단계와 함께 undefined로 초기화되므로 초기화 코드를 만나기 전부터 참조가 가능합니다.
반면에, let, const로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행됩니다. 즉, 스코프에 변수를 등록하지만, 초기화 단계는 변수 선언문 코드에 도달했을때 이루어지기 때문에 초기화 이전에 변수에 접근하려고 하면 참조 에러(Reference Error)가 발생합니다.
따라서 스코프의 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없는데, 이를 Temporal Dead Zone이라고 합니다.
따라서, let과 const는 호이스팅이 되기는 하지만 초기화가 이루어지지 않은 상태 (Uninitialized)에서 호이스팅이 되기 때문에 초기화 단계를 만나기 전에는 참조할 수가 없으며 일시적 사각지대 (TDZ)가 생기는 것입니다.

TDZ에 대해선 처음 들어보았기 때문에 여러가지 서치가 필요했습니다 ... ! 과거 선배분 중 답변이 마음에 들어 인용하였습니다 

https://velog.io/@jeju_daun/JS-Hoisting%EA%B3%BC-Temporal-Dead-Zone

 

 

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

리액트 훅(Hook)은 함수형 컴포넌트에서 상태 관리와 다른 리액트 기능을 사용하기 위해 제공되는 함수입니다.
훅의 사용규칙으로는 
첫번째로 최상위에서만 호출되어야 합니다.리액트 컴포넌트 함수 내에서 훅을 호출할 때는 조건문, 반복문, 중첩된 함수 등과 같은 제어문 내부에서 호출하지 말아야 합니다. 훅은 컴포넌트의 상태와 생명주기에 관련된 정보를 추적하고 관리하기 위해 호출됩니다. 따라서 훅을 최상위에서 호출하지 않으면 예상치 못한 동작이 발생할 수 있습니다.
두번째로 훅은 함수 컴포넌트 내에서만 호출되어야 합니다  클래스 컴포넌트에서 훅을 사용하는 것은 허용되지 않습니다.
세번째 훅의 이름은 "use"로 시작해야 합니다 .  이는 리액트 엔진에 의해 훅으로 인식되어 훅의 규칙을 따르게 됩니다. 예를 들어 useState, useEffect, useCustomHook과 같이 훅의 이름은 일반적으로 "use"로 시작해야 합니다.
네번째 훅은 훅 자체 내에서만 호출되어야 합니다. 예를 들어, 이벤트 핸들러나 타임아웃 콜백 내부에서 훅을 사용하는 것은 허용되지 않습니다. 이러한 경우에는 커스텀 훅을 사용하여 로직을 추출하고 훅을 컴포넌트 최상위에서 호출하는 것이 좋습니다.

 

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

스택(Stack)과 큐(Queue)는 데이터를 저장하고 관리하는 자료구조입니다. 주요한 차이점은 다음과 같습니다:
스택은 후입선출(LIFO, Last-In-First-Out) 구조를 가지고 있습니다. 마지막에 삽입된 데이터가 가장 먼저 제거됩니다. 큐는 선입선출(FIFO, First-In-First-Out) 구조를 가지고 있습니다. 가장 먼저 삽입된 데이터가 가장 먼저 제거됩니다.
스택은 데이터를 삽입하는 작업을 "push"라고 하며, 데이터를 제거하는 작업을 "pop"이라고 합니다. 가장 위에 있는(top) 데이터에만 접근할 수 있습니다. 큐는 데이터를 삽입하는 작업을 "enqueue"라고 하며, 데이터를 제거하는 작업을 "dequeue"라고 합니다. 가장 앞(front)에 있는 데이터에만 접근할 수 있습니다.
스택은 주로 임시 데이터를 저장하고 복원하는 데 사용됩니다. 함수 호출 스택(Call Stack)이나 뒤로 가기 기능(undo) 등에서 활용될 수 있습니다. 큐는 주로 작업을 대기열로 관리하는 데 사용됩니다. 예를 들어, 작업 큐(Task Queue)로 비동기 작업을 처리하거나, 우선순위 큐(Priority Queue)로 작업을 우선순위에 따라 처리하는 등의 용도로 사용될 수 있습니다.
스택은 배열(Array)이나 연결 리스트(Linked List)로 구현할 수 있습니다. 배열을 사용하면 인덱스를 통해 상수 시간에 접근할 수 있으나 크기가 제한적일 수 있습니다. 연결 리스트를 사용하면 동적으로 크기를 조정할 수 있습니다. 큐도 배열이나 연결 리스트로 구현할 수 있습니다. 배열을 사용하면 크기가 제한적일 수 있으며, 연결 리스트를 사용하면 크기를 동적으로 조정할 수 있습니다.
스택과 큐는 각각 특정한 상황에 적합한 자료구조이며, 데이터의 삽입과 제거 순서에 따라 선택해야 합니다.