1. ES6의 주요 기능들에 대해 설명해주세요.
• let, const : 변수 선언에 사용되며 블록 스코프를 가짐
• 화살표함수 : 간결한 함수 표현을 가능하게 하며 this 바인딩을 고정
• 클래스 : 객체 생성을 위한 간편한 구문 제공
• 모듈 : 모듈화 된 코드 사용으로 재사용성 확대
• Promise : 비동기 작업을 하는데 사용되는 객체
• 디스트럭처링 : 배열이나 객체에서 값을 쉽게 추출 가능
• 기본 매개변수 : 함수의 매개변수에 기본값 할당 가능
• 템플릿 리터럴 : 문자열을 보다 간편하게 작성 가능
• 스프레드 연산자 : 배열과 객체의 요소를 쉽게 전개 가능
• Map, Set, WeakMap, WeakSet: 새로운 자료구조 제공
 

2. const, let, var의 차이점은 무엇인가요?
• const : 변수 선언 후 재할당 불가, 블록 스코프, (호이스팅이 발생하지 않는건 아님)
• let : 변수 선언 후 재할당 가능, 블록 스코프, (호이스팅이 발생하지 않는건 아님)
• var : 변수 선언 후 재할당 가능, 함수 스코프, 호이스팅 발생
 

3. 화살표 함수(Arrow Function)의 특징을 설명해주세요.
• 간결한 문법으로 함수 정의
• this가 상위 스코프의 값으로 고정됨 (function 으로 선언한 함수는 this가 자신이 속한 객체를 가르킴)
• argument 객체를 사용할 수 없음
• 생성자로 사용할 수 없음
 

4. 프로미스(Promise)와 async/await의 차이점을 설명해주세요.
• Promise
• 비동기 작업을 처리하는데 사용되는 객체
• then, catch, finally 등의 메서드를 사용
• async/await
• 프로미스를 기반으로 하여 동기적인 코드형태로 비동기 작업을 처리
• try-catch 블록을 사용하여 에러 처리
 

5. 클래스(Class)와 생성자(Constructor)에 대해 설명해주세요.
• Class : 객체 생성을 위한 템플릿으로 생성자와 메서드를 포함할 수 있음.
• Constructor : 클래스의 인스턴스를 생성하고 초기화하는 메서드, 클래스 내에서 한 번만 사용할 수 있으며, new 연산자와 함께 호출됨.
 

6. JavaScript의 비동기 처리 방식을 설명해주세요.
• 이벤트 루프를 통해 콜스택과 콜백 큐 사이에서 작업을 조율
• 주요 비동기처리 방식은 콜백함수, 프로미스, async/await, * 이있음
 

7. 모듈(Module)과 import, export에 대해 설명해주세요.
• 모듈화 : 코드를 독립적인 단위로 분리하여 재사용성을 확대하고 관리를 용이하게 하는 방법
• import : 다른 모듈에서 정의된 변수, 함수, 클래스등을 현재 모듈에서 사용할 수 있도록 불러오는 것
• export : 현재 모듈에서 정의된 변수, 함수, 클래스 등을 다른 모듈에서 사용할 수 있도록 내보내는 것
 

8. JavaScript의 이벤트 루프(Event Loop)와 작동 원리를 설명해주세요.
• 이벤트루프는 콜 스택에 있는 작업들을 실행하고 콜백 큐에 있는 작업들을 처리하여 비동기 작업을 가능하게 함
• 콜 스택에 있는 작업이 완료되면, 이벤트 루프는 콜백 큐에 있는 작업을 콜 스택으로 이동시키고 실행함
• 이 과정은 프로그램이 종료될 때까지 반복됨
 

9. 디스트럭처링(Destructuring)에 대해 설명해주세요.
• 디스트럭처링은 배열이나 객체에서 값을 쉽게 추출할 수 있는 문법
• 객체 디스트럭처링 : 객체의 키 값을 기준으로 변수에 할당
• 배열 디스트럭처링 : 배열의 인덱스 값을 기준으로 변수에 할당
 

10. 리액트의 가상 DOM(Virtual DOM)이란 무엇이고, 왜 사용하는지 설명해주세요.
• 가상 DOM은 실제 DOM의 가벼운 사본으로 변경 사항을 빠르게 계산하고 배치하는데 사용됨
• 변경사항이 발생하면, 가상 DOM에서 먼저 변경을 처리한 후, 실제 DOM에 최소한의 변경만 반영해 성능을 최적화함
• 이를 통해 불필요한 DOM 변경을 줄이고 성능이 향상될 수 있음

11. 리액트의 라이프사이클 메서드(Lifecycle Methods)를 설명해주세요.
• 라이프사이클 메서드는 컴포넌트의 생성, 업데이트, 제거 등의 주요 단계에서 호출되는 함수.
• 주요 라이프사이클 메서드로는 constructor, componentDidMount, componentDidUpdate, componentWillUnmount 등이 있습니다.
 

12. 리액트의 상태(State)와 속성(Props)의 차이점을 설명해주세요.
• State : 컴포넌트의 내부에서 관리되며, 변경 가능한 데이터,
• State 변경은 useState(초깃값 할당) 과 setState 로만 가능
• Props : 부모컴포넌트로부터 전달받는 데이터
 

13. 컴포넌트 간의 데이터 흐름을 관리하기 위해 리액트에서 어떻게 사용하는지 설명해주세요.
• 부모-자식 컴포넌트간의 데이터 전송은 Props 로 전달
• 전역상태관리 라이브러리(Redux 등)나 React에 내장된 Context Api 사용가능
 

14. 리액트의 키(Key) 속성의 목적과 중요성을 설명해주세요.
• 키는 배열을 ‘렌더링’할 때 각 요소를 식별하는 고유한 값
• 키를 사용하면 리액트가 변경 사항을 효과적으로 처리할 수 있음. 이를 통해 성능을 최적화 하고 불필요한 업데이트를 방지
 

15. 고차 컴포넌트(Higher-Order Components, HOCs)란 무엇인가요? 사용하는 이유는 무엇인가요?
• HOC는 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수
• HOC를 사용하면 컴포넌트 간의 공통 기능을 재사용할 수 있음
 

16. 리액트의 컨텍스트(Context) API와 사용 목적을 설명해주세요.
• 컨텍스트 API는 전역 상태를 관리하기 위한 리액트의 내장 기능.
• 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때, 중간에 있는 컴포넌트들을 건너뛰고 전달할 수 있음.
• createContext, useContext와 같은 함수를 사용하여 컨텍스트를 생성하고, 소비.
 

17. 리액트의 훅(Hooks)에 대해 설명해주세요. 어떤 종류의 훅이 있나요
• 훅(Hooks)은 함수형 컴포넌트에서 상태와 라이프사이클 기능을 사용할 수 있게 해주는 기능.
• useState, useEffect, useRef 등의 훅을 사용하여 상태 관리와 라이프사이클 기능을 구현할 수 있음.
• 커스텀 훅(Custom Hooks)을 만들어 재사용 가능한 로직을 관리할 수 있습니다.

1. 리액트 성능 최적화를 위해 사용하는 도구와 기법에 대해 설명해주세요.

• 가상 DOM을 사용하여 불필요한 DOM 업데이트를 줄입니다.
• 리액트는 가상 DOM을 사용하여 실제 DOM에 직접 접근하는 것보다 훨씬 빠른 속도로 변경 사항을 처리.
• 가상 DOM에서 변경 사항을 먼저 계산한 후, 최소한의 변경만 실제 DOM에 반영하여 성능을 향상.

• PureComponent 또는 React.memo를 사용하여 불필요한 렌더링을 방지합니다.
• PureComponent는 클래스 컴포넌트에서 사용되며, 얕은 비교(Shallow Comparison)를 통해 불필요한 렌더링을 방지 가능.
• React.memo는 함수형 컴포넌트에서 사용되며, 전달된 속성(props)이 변경되지 않았다면, 리렌더링을 방지하여 성능 향상.
 

• 디바운싱(Debouncing) 또는 스로틀링(Throttling)을 사용하여 이벤트 처리를 최적화합니다.
• 디바운싱: 일정 시간 동안 이벤트가 지속적으로 발생할 경우, 마지막 이벤트가 발생한 시점부터 일정 시간이 경과한 후에 한 번만 처리하는 기법.
• 주로 검색어 입력 같은 경우에 사용.
• 스로틀링: 일정 시간 동안 이벤트가 지속적으로 발생할 경우, 일정 간격으로 이벤트를 처리하는 기법.
• 스크롤 이벤트 등 연속적인 이벤트 처리에 사용.

• 코드 스플리팅(Code Splitting)과 레이지 로딩(Lazy Loading)을 사용하여 초기 로딩 시간을 줄입니다.
• 코드 스플리팅: 큰 코드 덩어리를 작은 단위로 나누어 필요한 시점에 로딩하는 기법.
• 이를 통해 애플리케이션의 초기 로딩 속도를 향상.
• 레이지 로딩: 필요한 시점에 컴포넌트나 리소스를 로드하는 기법.
• 초기 로딩 시점에 모든 컴포넌트와 리소스를 로드하지 않고, 사용자가 필요한 기능에 접근할 때 로드하여 성능을 향상.
리액트에서는 React.lazy 함수를 사용하여 레이지 로딩을 구현 가능.

JS 심화

1. 실행 컨텍스트와 호이스팅
• 실행 컨텍스트는 코드가 실행되는 환경을 의미 하며
• 변수, 함수의 선언
• 스코프체인
• this 바인딩
등의 정보를 포함
• 호이스팅은 변수화 함수의 선언이 실행컨텍스트의 생성 단계에서 메모리에 할당되는 현상을 말함
• 이로 인해 선언 전에도 변수나 함수를 사용할 수 있지만, 값이 할당되지 않아 undefind로 리턴됨
• 값의 할당은 원래 위치에서 발생
 

2. 클로져란

• 클로저는 내부 함수가 외부의 함수에 접근할 수 있는 기능.

• 이를 통해 자바스크립트에서 비공개 변수를 흉내낼 수 있음.

• 클로저를 사용해 상태를 유지하거나 캡슐화를 구현할 수 있으며, 이벤트처리, 타이머, 비동기프로그래밍에서 사용됨

1. 이벤트 버블링과 캡쳐링

• 이벤트 버블링 : 하위 요소에서 상위 요소로 이벤트가 전파되는 현상 - 상위 요소에서 하위 요소 이벤트를 한번에 처리 가능

• 이벤트 캡쳐링 : 상위 요소에서 하위 요소로 이벤트가 전파되는 현상 - 하위 요소의 이벤트를 상위 요소에서 먼저 처리 가능

1. 프로토타입 체인
• 프로토타입 체인은 객체간의 상속 관계를 구현하기 위해 사용되는 메커니즘.
• 객체의 프로토타입을 따라 계속 탐색하여 속성이나 메서드를 찾을때까지 체인을 따라 올라감
• 이를 통해 코드 재사용과 상속을 구현할 수 있으며, 자바스크립트의 객체 지향 프로그래밍을 가능하게 함.
 

2. 자바스크립트 비동기 처리 방식:
• 콜백 함수: 비동기 작업이 완료되면 실행되는 함수를 전달하는 방식. 중첩이 많아지면 가독성이 떨어지는 콜백 지옥에 빠질 수 있음.
• 프로미스: 비동기 작업의 결과를 대표하는 객체로, 성공과 실패를 처리하는 메서드를 제공. 체이닝을 사용하여 가독성을 향상시킬 수 있음.
• async/await: 프로미스를 기반으로 하는 문법으로, 동기식 코드 작성 방식과 유사하게 비동기 작업을 처리할 수 있음. 가독성이 높으며 에러 처리가 용이.

1. 스코프와 클로저의 관계
• 스코프는 변수의 접근 범위를 정의하며, 전역 스포크와 함수 스코프가 있음.
• 클로저는 내부 함수가 외부 함수의 스코프에 접근할 수 있는 기능으로, 스코프 체인을 따라 변수를 찾을 때 사용됨.
• 클로저를 통해 외부 스코프의 변수를 참조하고 상태를 유지할 수 있음

1. 얕은 복사와 깊은 복사
• 얕은 복사 : 객체의 최상위 속성만 복사하는 방식, 내부의 객체 또는 배열등은 참조 형태로 복사
• 이로 인해 원본과 사본이 내부 객체를 공유
• 깊은 복사 : 객체의 모든 속성을 재귀적으로 복사하는 방식
• 내부의 객체 또는 배열도 별도의 새로운 객채로 복사됨.
• 차이점은 내부 객체의 복사 방식에 있음