프론트엔드 기술면접 답변 정리 (javascript)

챗 지피티와 함께 준비한 면접 준비 2 (자바스크립트편)

JavaScript

1. 실행 컨텍스트(Execution Context)

• 실행 컨텍스트는 JavaScript 코드가 실행되기 위해 필요한 환경 정보를 담은 객체입니다. 실행 컨텍스트는 변수, 함수 선언, 스코프 체인, this 등의 정보를 가지고 있으며, 코드 실행 중에 필요한 값을 관리하고 식별자 해결을 위해 사용됩니다.

2. 호이스팅(Hoisting)

• 호이스팅은 JavaScript에서 변수 및 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 동작을 말합니다. 즉, 변수와 함수 선언이 코드의 상단으로 옮겨지는 것처럼 동작하며, 선언 이전에 참조가 가능합니다. 단, 변수의 경우 선언 이전에는 초기화되지 않아서 undefined가 할당되고, 함수의 경우는 전체 함수가 호이스팅되므로 어디서든 호출 가능합니다.

3. 클로저(Closure)와 스코프(Scope)

• 클로저는 함수가 정의될 당시의 환경을 기억하여, 함수가 정의된 위치에서 외부 변수에 접근할 수 있는 기능을 말합니다. 클로저는 함수와 그 함수가 선언된 렉시컬 스코프와의 조합으로 생성됩니다. 스코프는 변수와 함수에 접근할 수 있는 범위를 말하며, 클로저를 통해 외부 스코프의 변수에 접근할 수 있습니다.

4. 화살표 함수와 일반 함수의 차이:

• 화살표 함수(Arrow Function): 간결한 문법으로 함수를 선언하는 방식입니다. 일반 함수와 달리, 자신의 this, arguments, super 를 바인딩하지 않고, 상위 스코프의 값을 그대로 사용합니다. 또한, 함수 바디가 단일 표현식인 경우 자동으로 반환합니다.
• 일반 함수(Normal Function): 함수 선언문이나 함수 표현식으로 정의되는 일반적인 함수입니다. 자신의 스코프에 바인딩된 this, arguments, super를 사용할 수 있습니다.

5. this

• this는 JavaScript에서 실행 컨텍스트 내에서 현재 객체를 참조하는 특별한 키워드입니다. this는 함수를 호출한 방법에 따라 동적으로 결정됩니다. 일반 함수 호출 시에는 this가 호출한 객체를 참조하며, 화살표 함수에서는 자신을 감싸는 가장 가까운 함수의 this를 참조합니다.

6. call(), apply(), bind()의 차이점:

• call(): 함수를 호출하면서 this 값을 특정 객체로 지정하고, 인자를 개별적으로 전달하는 메소드입니다.
• apply(): 함수를 호출하면서 this 값을 특정 객체로 지정하고, 인자를 배열로 전달하는 메소드입니다.
• bind(): 함수에 this 값을 영구적으로 바인딩하는 새로운 함수를 생성하는 메소드입니다. 기존 함수와 달리 즉시 호출되지 않고, 호출 시에 this 값을 고정시킨 새로운 함수가 반환됩니다.

7. 자바스크립트 비동기 처리(callback, promise, async/await):

• 콜백(callback): 비동기 작업이 완료되면 호출되는 함수로, 콜백 함수를 통해 비동기 작업의 결과를 처리합니다. 하지만 콜백 헬(callback hell)과 같은 코드의 복잡성과 가독성 문제가 발생할 수 있습니다.
• 프로미스(Promise): 비동기 작업의 결과를 나타내는 객체로, 비동기 작업이 성공 또는 실패하는 경우에 대한 처리를 체이닝하여 구현할 수 있습니다. .then()과 .catch() 메소드를 사용하여 비동기 작업의 결과를 처리합니다.
• async/await: 비동기 함수를 동기적인 코드처럼 작성할 수 있도록 하는 문법적인 설탕입니다. async 키워드로 함수를 정의하고, 내부에서 await 키워드를 사용하여 비동기 작업이 완료될 때까지 기다린 후 결과를 반환합니다.

8. Promise와 async/await의 차이점:

• Promise는 비동기 작업의 결과를 처리하는데 사용되는 객체이며, .then()과 .catch()를 사용하여 비동기 작업의 성공과 실패를 처리합니다.
• async/await는 Promise를 기반으로 동작하며, 비동기 작업을 동기적인 코드처럼 작성할 수 있도록 합니다. async 함수 내부에서 await 키워드를 사용하여 비동기 작업의 결과를 기다린 후 결과를 반환합니다.

9. 이벤트 루프(Event Loop)

• 이벤트 루프는 JavaScript가 비동기 작업을 처리하는 메커니즘입니다. 이벤트 루프는 Call Stack, Web APIs, Callback Queue의 조합으로 구성되며, Call Stack이 비어있을 때 Callback Queue에 있는 콜백 함수를 Call Stack으로 이동시켜 실행합니다. 이벤트 루프는 비동기 작업의 완료 및 콜백 함수의 실행을 관리하여 JavaScript의 단일 스레드 환경에서도 비동기 처리를 가능하게 합니다.

10. 마이크로태스크 큐와 태스크 큐의 차이점:

• 마이크로태스크 큐(Microtask Queue): Promise의 .then()이나 async/await의 await 키워드를 사용하여 등록된 마이크로태스크들이 대기하는 큐입니다. 이벤트 루프의 태스크 큐보다 우선순위가 높아서 먼저 처리됩니다.
• 태스크 큐(Task Queue): setTimeout, DOM 이벤트 등의 비동기 작업의 콜백 함수들이 대기하는 큐입니다. 마이크로태스크 큐보다 우선순위가 낮아서 마이크로태스크 처리가 완료된 후에 처리됩니다.

11. Promise와 setTimeout 우선 순위

• Promise의 .then()은 마이크로태스크 큐에 등록되므로, setTimeout의 태스크 큐보다 우선 순위가 높습니다. 따라서, Promise의 .then()이 먼저 실행되고 그 후에 setTimeout의 콜백 함수가 실행됩니다.

12. 이벤트 버블링과 캡처링:

• 이벤트 버블링(Event Bubbling): DOM 요소에서 이벤트가 발생했을 때, 해당 요소에 연결된 이벤트 핸들러가 실행된 후 부모 요소로 이벤트가 전파되는 현상을 말합니다. 이벤트가 최상위 요소까지 전파되며, 각 요소의 이벤트 핸들러가 실행됩니다.
• 이벤트 캡처링(Event Capturing): 이벤트 캡처링은 이벤트 버블링의 반대 개념으로, 최상위 요소부터 시작하여 이벤트가 발생한 요소까지 이벤트가 전파되는 현상입니다. 이벤트가 발생한 요소까지 이벤트가 전파되며, 각 요소의 이벤트 핸들러가 실행됩니다.

13. event.target과 event.currentTarget의 차이점:

• event.target: 이벤트가 발생한 요소를 가리킵니다. 실제로 이벤트가 발생한 요소를 참조합니다.
• event.currentTarget: 이벤트 핸들러가 연결된 요소를 가리킵니다. 이벤트가 발생해도 항상 이벤트 핸들러가 연결된 요소를 참조합니다.

14. var, let, const의 차이점:

• var: 함수 스코프를 가지며, 변수를 중복 선언할 수 있고, 호이스팅되는 특징이 있습니다. 또한, 블록 스코프를 무시하는 경우가 있어서 전역 변수로 선언되기도 합니다.
• let: 블록 스코프를 가지며, 변수를 중복 선언할 수 없습니다. 호이스팅되지만 초기화 전에 사용할 경우 에러가 발생합니다. 값의 재할당이 가능합니다.
• const: 블록 스코프를 가지며, 변수를 중복 선언할 수 없습니다. 호이스팅되지 않고 반드시 선언과 동시에 초기화해야 합니다. 한 번 할당된 값은 변경할 수 없습니다.

15. 자바스크립트의 원시 타입:

JavaScript의 원시 타입은 다음과 같습니다

• 숫자(Number): 정수와 실수를 나타내는 숫자입니다.
• 문자열(String): 문자들의 시퀀스로 이루어진 값입니다.
• 불리언(Boolean): 참(True) 또는 거짓(False) 값을 나타냅니다.
• null: 값이 없음을 나타내는 특별한 값입니다.
• undefined: 값이 할당되지 않은 상태를 나타내는 특별한 값입니다.
• 심벌(Symbol): 고유하고 변경 불가능한 값을 나타내는 데이터 타입입니다.

16. ES6 문법:

ES6(ES2015)는 ECMAScript 2015의 줄임말로, JavaScript의 버전입니다. ES6에서 추가된 주요 기능은 다음과 같습니다:

• 화살표 함수(Arrow Function)
• 클래스(Class)
• 템플릿 리터럴(Template Literal)
• 디스트럭처링 할당(Destructuring Assignment)
• 확장된 객체 리터럴(Enhanced Object Literal)
• let, const (블록 스코프 변수 선언)
• 모듈(Module)
• 프로미스(Promise)
• 확장된 매개변수 문법(Extended Parameter Handling)
• for...of 루프

17. forEach()와 Map()의 차이:

• forEach(): 배열의 각 요소에 대해 제공된 함수를 실행합니다. 반환값이 없으며, 주로 배열의 요소를 순회하면서 부수 효과를 일으키기 위해 사용됩니다.
• Map(): 배열의 각 요소에 대해 제공된 함수를 실행하고, 그 결과를 새로운 배열로 반환합니다. 기존 배열은 변경되지 않으며, 반환된 새 배열을 활용할 수 있습니다. Map()은 새로운 배열을 생성하는 불변성(Immutability)을 지향하는 함수형 프로그래밍의 원칙에 부합합니다.

18. Sass/Scss/css-in-js:

• Sass/Scss: Sass(구 버전) 및 Scss(새 버전)는 CSS의 확장 문법으로, 변수, 믹스인, 중첩 규칙 등을 포함한 여러 기능을 제공하여 CSS 코드의 재사용성과 유지보수성을 향상시킵니다. Sass/Scss는 전처리기로 동작하여, Sass/Scss 파일을 CSS로 변환하는 작업이 필요합니다.
• CSS-in-JS: CSS-in-JS는 JavaScript 안에서 CSS를 작성하는 방식으로, React와 같은 프레임워크에서 주로 사용됩니다. JavaScript 코드 내에서 CSS를 작성하고, 런타임에 동적으로 스타일을 적용할 수 있습니다. CSS-in-JS는 컴포넌트 단위로 스타일을 관리하고, 스타일과 컴포넌트를 결합하여 재사용 가능한 UI 컴포넌트를 작성하는 데 유용합니다.

19. AJAX

• AJAX(Asynchronous JavaScript and XML)는 JavaScript를 사용하여 비동기적으로 서버와 데이터를 교환하는 기술입니다. 페이지 전체를 새로고침하지 않고도 서버와 데이터를 주고받을 수 있어서 웹 애플리케이션의 동적인 기능을 구현하는 데 사용됩니다. AJAX는 XMLHttpRequest 객체를 통해 서버와 통신하며, JSON, XML, HTML 등의 형식으로 데이터를 주고받을 수 있습니다.

20. HTML이 렌더링 중에 자바스크립트가 실행되면 렌더링이 멈추는 이유

• 일반적으로 HTML 파싱과 렌더링은 JavaScript 실행을 기다리지 않고 진행됩니다. 그러나 <script> 태그가 <head> 태그에 포함되어 있거나, JavaScript 코드가 실행되는 동안 DOM 변경이 발생하면 브라우저의 렌더링이 중단될 수 있습니다. 이는 JavaScript가 DOM을 조작하고 렌더링 업데이트를 수행하는 동안 다른 작업을 수행하지 못하기 때문입니다. 이를 방지하기 위해 일반적으로 JavaScript 코드를 페이지 하단에 위치시키거나, 비동기로 스크립트를 로드하여 렌더링의 지연을 최소화합니다.

21. package.json에서 dependencies와 devDependencies의 차이점:

• dependencies: 애플리케이션 실행에 필요한 외부 라이브러리나 모듈의 의존성을 나타냅니다. 애플리케이션의 런타임에서 필요한 모듈들로, 실제 애플리케이션 배포 시에 포함됩니다.
• devDependencies: 개발 시에만 필요한 라이브러리나 도구의 의존성을 나타냅니다. 개발 환경에서 빌드, 테스트, 디버깅 등을 위해 사용되며, 실제 애플리케이션 배포 시에는 포함되지 않습니다.