기술면접-컴퓨터공학(웹)-2

1. 클로저란?

내부 함수가 외부 함수의 context에 접근할 수 있는 것을 말합니다. 불필요한 전역 변수를 줄여 실수를 방지하고, 코드 재사용성을 높이기 위해 사용합니다.

 

2. var, let, const의 차이?

var, let, const 모두 변수를 선언하는 방식입니다.

var는함수 스코프를 따르며, 변수가 선언되기 전에 사용되더라도 오류가 발생하지 않고 undefined로 처리됩니다. 또한 변수의 값이 중복 선언 되더라도 오류가 발생하지 않습니다.

 

let은 블록 스코프를 따르며,  TDZ(Temporal Dead Zone) 가 존재하여 변수가 선언되기 전에 접근하면 ReferenceError가 발생합니다. 또한 변수의 값이 중복 선언되면 SyntaxError가 발생합니다.

 

const 는 let과 동일한 속성을 지니지만,  한 번 할당된 값을 변경할 수 없습니다. 하지만 객체나 배열이 가리키는 메모리의 주소값을 변경할 수 없지만, 그 내부의 속성이나 요소는 변경할 수 있습니다.

 

3. 깊은 복사와 얕은 복사 차이?

얕은 복사는 참조에 의한 할당으로 데이터의 메모리 주소를 전달하는 방식으로 하나의 데이터를 공유합니다. 따라서 복사된 객체나 배열의 내부 요소를 변경하면 원본에도 영향을 미칩니다.

깊은 복사는 배열의 모든 요소를 복사해 새로운 객체나 배열을 만듭니다.  따라서 복사된 객체나 배열의 내부 요소를 변경해도 원본에 영향을 미치지 않습니다.

 

4. 자바스크립트에서 프로토타입이란?

객체지향 언어인 자바스크립트에서 상속을 구현하기 위해 사용됩니다. 프로토타입을 활용하면 코드의 재사용성을 높일 수 있습니다. ES6 이후에는 class와 extends 키워드를 통해 상속을 보다 명시적으로 정의할 수 있게 되었습니다.

 

5. 타입 스크립트 사용 경험은? 왜 사용하는 것 같은지?

정적 타입을 지원하기 때문에 컴파일 단계에서 오류를 잡을 수 있습니다. 이는 자바스크립트의 단점을 보완해줍니다.

타입을 미리 지정해주기 때문에 메모리를 절약할 수 있습니다. 또한 컴파일 과정에서 ES6+ 문법을 ES5 또는 ES3로 변경해주어 브라우저 호환성 문제를 해결할 수 있습니다.

 

6. require 와 import 의 차이?

모두 외부 파일 또는 라이브러리를 로드할 때 사용합니다. require는 코드의 어느 지점에서나 호출이 가능하고, import는 최상단에서만 실행이 가능합니다. 대신 import는 from을 통해 필요한 모듈만 불러올 수 있습니다.

 

7. 호이스팅이란?

변수 또는 함수의 선언이 해당 스코프의 최상단으로 끌어올려지는 것 처럼 보이는 현상을 말합니다. 자바스크립트 엔진은 코드를 실행하기 전, 렉시컬 환경 내에 있는 메모리에 변수, 함수 선언을 추가합니다. 따라서 변수, 함수 선언을 만나기 전에 접근이 가능한 현상을 볼 수 있습니다.

 

8. 리액트의 라이프사이클이란?

리액트의 라이프사이클은 컴포넌트가 생성되고 업데이트되며 파괴되는 과정입니다.

Class component의 생명주기는 크게 마운트, 업데이트, 언마운트 단계가 있습니다. 각 단계마다 componentDidMount, shouldComponentUpdate, componentDidUpdate, componentWillUnmount 등의 함수가 있습니다. 

Class component에서의 상태 로직을 재사용 어려움,  Class의 코드 구성의 복잡성 때문에 hook이 등장합니다.hook은 Functional component 에서 사용이 가능하며, useState, useEffect, useRef, useMemo, useCallback, useReducer 등이 있습니다.

 

9. 클래스형 컴포넌트와 함수형 컴포넌트의 차이?

클래스형 컴포넌트는 ES6의 class 문법을 사용합니다. render() 함수를 이용해 렌더링을 진행하며, 생명 주기 함수들을 사용할 수 있습니다. 하지만, constructor, this, binding 등 지켜야 할 규칙이 많아 코드가 길고 복잡합니다.

함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기가 편합니다. 또한 메모리 자원을 덜 사용하며(인스턴스화 불필요, 라이프 사이클 메서드 기능 불필요로 인한 적은 객체 생성(가비지 컬렉션의 대상)),  빌드 후 파일 크기가 더 작습니다.

 

10. 리액트에서 상태 관리 방법?

함수형 컴포넌트에서 상태를 관리하는 방법에는 useState, useReducer를 사용하는 방법이 있습니다. 전역적인 상태를 관리하는 방법에는 Context API를 사용하거나, Redux, Recoil 등 상태 관리 라이브러리를 사용하는 방법이 있습니다.

 

11. Props와 State의 차이?

Props는 컴포넌트 간에 전달되는 데이터이며, 전달받은 props를 직접 수정할 수 없습니다. 부모 컴포넌트에서 변경되면 해당 컴포넌트와 그 자식 컴포넌트들에게만 영향을 미칩니다.

State는 컴포넌트 내부에서 관리되는 데이터입니다. 읽기/쓰기가 가능하며, 상태가 변경되면 해당 컴포넌트와 그 자식 컴포넌트들에게 영향을 미칩니다.