기술면접

Jiwon Yoo·2023년 6월 8일
1

JavaScript

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

A: 호이스킹이란 변수(혹은 모든 식별자)의 선언이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트의 고유 특징이다.

let,const와 var의 호이스팅 방식에는 차이가 있다. var의 경우 선언 단계와 함께 undefined로 초기화되므로 초기화 코드를 만나기 전부터 참조가 가능하지만, let, const로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행되기 때문에,스코프에 변수를 등록하지만 초기화 단계는 변수 선언문 코드에 도달했을때 이루어지기 때문에 초기화 이전에 변수에 접근하려고 하면 참조 에러(Reference Error)가 발생한다.

이때 스코프의 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없는데, 이를 일시적 사각지대, Temporal Dead Zone이라고 한다. let과 const는 호이스팅이 되기는 하지만 초기화가 이루어지지 않은 상태 (Uninitialized)에서 호이스팅이 되기 때문에 초기화 단계를 만나기 전에는 참조할 수가 없으며 일시적 사각지대 (TDZ)가 생기는 것이다.

React

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

A: 트리 구조로 된 DOM은 JavaScript와 같은 스크립팅 언어가 접근하고 탐색하는 속도가 빠르기 때문에 변경 및 업데이트 속도 또한 빠르다고 할 수 있다. DOM이 변경되고 업데이트가 되는 과정에서 이에 대한 레이아웃 재연산을 수행하는 리플로우, 그리고 이를 화면에 그려내는 Repaint 과정을 거치게 되는데, 이때 변화가 필요 없는 부분도 변경되면서 잦은 리플로우 발생으로 인해 성능을 떨어뜨리는 문제를 야기하게 되었다.

React에는 DOM 객체에 대응하는 Virtual DOM 객체가 있다. 상대적으로 무거운 DOM에 비하여 React의 가상 DOM 객체는 자바스크립트 객체로 이루어져 있기 때문에 실제 DOM 객체와 동일한 속성을 가지고 있음에도 “훨씬 가벼운 사본”이라고 표현할 수 있다. Virtual DOM은 실제 DOM과 동기화되어, 상태가 변경될 때마다 가상 DOM을 새로 생성하여 이전 상태와 비교한다. 그리고 변경이 필요한 부분만 실제 DOM에 반영하여 업데이트하므로, 전체 UI를 다시 그리지 않아도 된다. 때문에 Virtual DOM을 활용하면 실제 DOM 조작을 최소화하는 것으로 성능 최적화를 할 수 있다.

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

A: Class Component와 Function Component의 역할은 동일하다. 차이점이 있다면 클래스 컴포넌트의 경우 state 및 라이프사이클 기능을 사용할 수 있고, 함수형 컴포넌트는 선언하기가 좀 더 편하고 메모리 자원을 덜 사용하는 장점이 있다는 것이다. 과거에는 state 및 라이프사이클 기능을 사용할 수 없다는 단점이 있었는데 이어한 단점은 리액트 훅이 도입되면서 해결되었다.
현재는 React 공식 문서에서도 함수형 컴포넌트와 훅(hook)을 함께 사용할 것을 권장하고 있다.

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

A: 첫째, 리액트 함수의 최상위에서만 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 예상한 대로 동작하지 않을 수 있다. 둘 째, 오직 리액트 함수 내에서만 사용되어야 한다. 리액트 함수형 컴포넌트나 커스텀 Hook이 아닌 다른 일반 JavaScript 함수 내에서는 정상적으로 작동하지 않는다.

자료구조

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

A: stack은 데이터(data)를 순서대로 쌓는 자료구조이다. 입력과 출력이 하나의 방향, 즉 스택의 최상단에서만 이루어지는 제한적 접근만 가능하다. 이런 Stack 자료구조는 후입선출(LIFO, Last In First Out)의 구조로 되어 있습니다.
Queue는 줄을 서서 기다리다, 대기행렬이라는 뜻으로 Stack과 반대되는 개념을 갖는다. 먼저 들어간 데이터(data)가 먼저 나오는 선입선출(FIFO, First In First Out) 특징을 갖고 있으며, 입력의 방향과 출력의 방향이 각각 고정되어 있어 데이터를 입력할 시에는 큐의 끝에서(tail), 데이터를 출력할 때는 큐의 맨 앞에서(head) 진행된다.

  • 둘은 어떤 관계일까?
    상호보완적 관계이다. 싱글 스레드인 JS은 한 번에 한 줄의 코드만 실행할 수 있기 때문에 시간이 걸리는 코드들은 stack에서 바로 처리하지 않고 queue에 쌓이게 된다. stack이 깨끗하게 비어진 뒤 queue에서는 선입선출의 구조로 코드를 다시 stack으로 올리고 실행되게 된다. 따라서 브라우저는 시간이 걸리는 코드들이 읽히기 전에 다른 코드들이 읽을 수 있기 때문에 화면 랜더링 속도를 올릴 수 있다.

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

A: Tree는 단방향 그래프의 한 구조로, 하나의 뿌리로부터 가지가 사방으로 뻗은 형태를 띈다. 트리 구조는 데이터가 바로 아래에 있는 하나 이상의 데이터에 한 개의 경로와 하나의 방향으로만 연결된 계층적 자료구조이다. 이렇게 계층적으로 표현이 되고, 아래로만 뻗어나가기 때문에 트리 구조는 사이클(cycle)이 없다.

Graph는 여러 개의 점이 서로 복잡하게 연결된 관계를 표현한 자료구조이다. Graphs는 노드와 노드를 연결하는 엣지로 구성되어 있어 순환, 비순환 모두 존재 가능하다. 또한 트리 구조와 달리 Graph는 방향, 무방향 둘 다 존재한다.

Tree는 Root Node라는 개념이 존재하고, 계층적 구조를 가지고 있기 때문에 부모-자식 관계가 존재하지만 Graph는 Root Node 개념 자체가 존재하지 않기 때문에 부모-자식 관계가 존재하지 않는다.

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

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

타입스크립트

TypeScript는 정확히 무엇이며 JavaScript와 어떻게 다른가요?

A: TypeScript는 마이크로소프트에서 개발한 JavaScript의 상위 집합(Superset) 언어다. JavaScript에 정적타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어로, JavaScript가 발전하면서 생긴 단점을 보완하기 위해 등장했다. JavaScript는 동적 타입 언어로서, 변수의 타입을 명시적으로 선언하지 않고도 사용할 수 있는 반면, TypeScript는 정적 타입 언어로서 변수의 타입을 명시적으로 선언해야 한다.

TypeScript는 JavaScript의 기능을 모두 포함하면서 타입 주석과 타입 추론, 인터페이스, 제네릭 등 추가적인 기능을 제공한다. TypeScript를 사용함으로써 개발자는 코드의 가독성과 유지보수성을 향상시킬 수 있다. 컴파일 시간에 오류를 발견하고 예방할 수 있으며, 개발 도중 타입 관련 경고를 제공하여 런타임 에러를 방지할 수 있다.

TypeScript를 사용할 때 어떤 장단점이 존재하나요?

A: TypeScript의 장점으로는:
1. JavaScript 문법을 포함하여 개발됐기 때문에 JavaScript 코드가 100% 호환되며, 코드를 더 쉽고 강력하게 작성할 수 있게 만들어 준다.
2. 사용자 입력값이 올바르지 못하게 사용됐을 때. 잘못된 값이 전달된다면 미리 삭제할 수 있다.
3. 웹 브라우저에서 발생할 수 있는 에러를 사전에 확인할 수 있다.
4. JavaScript의 경우 동적 타입 언어(Dynamic type language)를 기반으로 운영되기 때문에 런타임 속도는 빠르지만, 타입 안정성이 보장되지 않는 문제를 갖고 있다. 그런 부분을 TypeScript가 타입을 미리 지정하고, 타입의 안정성이 향상되면서 생산성을 동시에 향상할 수 있게 된다.
5. 객체 기반을 지원하는 JavaScript는 상속, 다형성 등을 지원하지 않는 문제를 갖고 있지만 TypeScript는 객체지향 프로그래밍을 하므로 상속, 클래스, 인터페이스 등을 활용할 수 있게 된다.

TypeScript의 단점으로는:
1. 개발 규모가 방대해질 때 작은 타입 하나를 설정하기 위해서 너무 과한 코드 규칙이 생겨날 수 있다.
2. TypeScript는 복잡한 초기 설정을 진행하면서도 100% 완벽한 에러를 제어하고, 통제할 수 있는 것은 아니다.
3. Learning curve가 존재하기 때문에 간단한 프로젝트의 경우. 기존 JavaScript를 활용하여 빠르게 만들 수 있음에도 각종 환경으로 프로젝트가 지연돼서 생산성 효율이 오히려 낮아질 수 있다.

TypeScript의 인터페이스를 설명해 주세요.

A: TypeScript에서 인터페이스(Interface)는 일반적으로 타입 체크를 위해 사용이 된다. 인터페이스는 변수, 함수, 클래스에 사용할 수 있으며, 인터페이스에 선언된 프로퍼티 또는 메서드의 구현을 강제하여 일관성을 유지하도록 한다.

인터페이스 생성 시 interface 키워드를 이용하여 생성하며, 대문자로 시작하는 것이 네이밍 컨벤션이다. 변수, 함수, 클래스에 사용할 수 있고, extends라는 키워드를 사용하여 기존에 존재하던 인터페이스를 상속해 확장이 가능하다.

profile
새싹 개발자 🌱

0개의 댓글