반응형
Q. 호이스팅과 TDZ
// Q. Hoisting과 Temporal Dead Zone이 어떻게 연관되어 있는지 설명하세요.
A1. Hoisting(호이스팅) :
함수선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 것을 의미합니다.
A2. Temporal Dead Zone(직역: 일시적인 사각지대 | TDZ) :
const, let, class ... 구문의 유효성에 영향을 미치는 중요한 개념이며,
스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 의미한다.
간단하게 표현하자면 TDZ는 선언 전에 변수를 사용하는 것을 허용하지 않는다.
반대로 var 변수는 선언 전에도 사용할 수 있기 때문에 var 사용은 피하는 것이 좋다.Q. Virtual DOM
// Q1. Virtual DOM(가상 DOM)이 무엇인가요?
A. 가상 DOM은 Real DOM의 가벼운 사본과 같습니다.
실제 DOM과 동기화되어, 상태가 변경될 때마다 가상 DOM을 새로 생성하여 이전 상태와 비교합니다.
그리고 변경이 필요한 부분만 실제 DOM에 반영하여 업데이트하므로, 전체 UI를 다시 그리지 않아도 됩니다.
쉽게 설명하면 Real DOM은 집안을 구성하는 가구들이고,
Virtual DOM은 그 집안처럼 꾸며놓은 미니어처입니다.
가상 DOM은 미리 가구를 미니어처로 배치해 놓고,
실제로 배치하는 것과 같습니다.
// Q2. virtual DOM(가상 DOM)의 장점은 무엇인가요?
A. 장점 : 업데이트 시간과 비용을 절약할 수 있습니다.
Q. 클래스형 컴포넌트와 함수형 컴포넌트의 차이
// Q. Class Component(클래스형 컴포넌트)와 Function Component(함수형 컴포넌트)의 차이점이 무엇인가요?
A. 함수형 컴포넌트는 클래스형 컴포넌트에 비해 훨씬 더 직관적이고, 가독성이 높고, 코드 작성 또한 쉽습니다.
React Hook은 클래스형 컴포넌트에서는 동작하지 않으며,
함수형 컴포넌트에서는 동작합니다.
Q. React Hook의 사용 규칙
// Q. React Hook의 사용 규칙에 대해 설명하세요.
A. 1) 리액트 함수의 최상위에서만 호출해야 합니다.
- 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 예상한 대로 동작하지 않을 우려가 있습니다.
2) 오직 리액트 함수 내에서만 사용되어야 합니다.
- 이는 리액트 함수형 컴포넌트나 커스텀 Hook이 아닌 다른 일반 JavaScript 함수 안에서 호출해서는 안 된다는 의미입니다.Q. Stack과 Queue 차이점
// Q1. Stack(스택)과 Queue(큐)의 차이점은 무엇인가요?
A. Stack(스택 / 직역: 쌓다, 포개지다) :
한 단어로 표현하자면 후입선출(나중에 들어간 것이 먼저 나온다)이고,
간단히 설명하면 프링글스 과자입니다.
프링글스 과자를 먹을 때 맨 위의 과자를 먼저 빼서 먹을 수 있습니다.
data 입력과 출력이 하나의 방향이기에 Stack 구조 내에서 특정 데이터를 조회할 수 없으며,
Stack의 최상단에서 data를 한 번에 한 개의 데이터만 저장하고 꺼낼 수 있습니다.
그 때문에 데이터를 저장할 때나 검색할 때 항상 스택의 최상단에서만 행위가 이루어지며
이에 따라 데이터를 저장하고 검색하는 프로세스가 매우 빠릅니다.
Queue(큐 / 직역: 줄을 서서 기다리다, 대기행렬) :
한 단어로 표현하자면 선입선출(먼저 들어간 것이 먼저 나온다)이고,
간단히 설명하면 톨게이트입니다.
톨게이트에 가장 먼저 진입한 차량이 가장 먼저 톨게이트를 통과합니다.
나중에 진입한 차량은 먼저 도착한 차량이 모두 빠져나가기 전까지는 톨게이트를 빠져나갈 수 없습니다.
data 입력하는 곳과 출력하는 곳이 각각 정해져 있습니다. (입력하는 곳 1개, 출력하는 곳 1개)
데이터를 하나씩 넣고 뺄 수 있으며, 데이터를 넣을 때에는 큐의 맨 뒤로 넣을 수 있고,
데이터를 뺄 때에는 큐의 맨 앞에서 하나씩 뺄 수 있습니다.
Q. Tree와 Graph 차이점
// Q1. Tree와 Graph의 차이점은 무엇인가요?
A. Tree(나무) :
나무를 거꾸로 뒤집어 놓은 듯한 모습을 가지고 있는 관계를 표현한 자료구조입니다.
Tree는 그래프의 여러 구조 중 단방향 그래프의 한 구조이며, 계층적 자료구조 입니다.
하나의 데이터 아래에 여러 개의 데이터가 존재할 수 있는 비선형 구조이고,
아래로만 뻗어나가기 때문에 사이클(Cycle)이 없습니다.
트리구조의 순회방법은 4가지 있습니다.
- 전위순회, 중위순회, 후위순회, 레벨순회
Graph(그래프) :
여러 개의 점이 서로 복잡하게 연결된 관계를 표현한 자료구조입니다.
Q. 이진트리
// Q1. 이진트리(Binary tree)에 대해 설명해주세요.
A. 자식 노드가 최대 두 개인 노드로 구성된 트리입니다.
이진트리는 자료의 삽입, 삭제 방법에 따라
정 이진트리(Full binary tree), 완전 이진트리(Complete binary tree), 포화 이진트리(Perfect binary tree)로 나뉩니다.
정 이진트리(Full binary tree) : 각 노드가 0개 혹은 2개의 자식 노드를 갖습니다.
포화 이진트리(Perfect binary tree) : 정 이진트리이면서 완전 이진트리인 경우입니다. 모든 리프 노드의 레벨이 동일하고, 모든 레벨이 가득 채워져 있는 트리입니다.
완전 이진트리(Complete binary tree) : 마지막 레벨을 제외한 모든 노드가 가득 차 있어야 하고, 마지막 레벨의 노드는 전부 차 있지 않아도 되지만 왼쪽이 채워져야 합니다.
// Q2. 이진 탐색 방법에 대해 설명해주세요.
A. 이진 탐색의 속성이 이진트리에 적용된 특별한 형태의 이진트리입니다.
모든 왼쪽 자식의 값이 루트나 부모보다 작고, 모든 오른쪽 자식의 값이 루트나 부모보다 큰 값을 가지는 특징이 있습니다.
예를 들면 Up&Down 게임과 같습니다.반응형
Q. 타입스크립트
// Q. TypeScript는 정확히 무엇이며, JavaScript와 어떻게 다른가요?
A. JavaScript에 정적타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어입니다.
Q. 타입스크립트 장단점
// Q. TypeScript를 사용할 때 어떤 장단점이 존재하나요?
A. 장점 :
1) TypeScript는 정적타입 검사 기능을 제공하며, 코드의 가독성과 유지 보수성을 높여줍니다.
이를 통해 개발자는 런타임 에러를 최소화하고, 코드 작성 시간을 단축하며, 협업 시 코드의 가독성을 높일 수 있습니다.
2) TypeScript는 ES6의 문법을 포함한 최신 JavaScript 문법을 지원하며,
인터페이스(Interface), 제네릭(Generic), 데코레이터(Decorators) 등의 기능을 제공하여
객체 지향 프로그래밍을 보다 쉽게 할 수 있도록 도와줍니다.
Q. 타입스크립트의 인터페이스
// Q. TypeScript의 인터페이스를 설명해 주세요.
A. 인터페이스(Interface)는 일반적으로 타입 체크를 위해 사용이 됩니다.
인터페이스는 변수, 함수, 클래스에 사용할 수 있으며,
인터페이스에 선언된 프로퍼티 또는 메서드의 구현을 강제하여 일관성을 유지하도록 하고,
인터페이스 이름을 대문자(네이밍 컨벤션)로 시작하도록 작성합니다. (ex: User)
기술 면접 준비(4)를 알아보는 시간이었습니다.
틀린 내용은 댓글로 알려주시면 감사하겠습니다.
반응형
