[JS/React/FrontEnd] 프론트엔드 면접문제 part1 정답
1. 자바스크립트의 기본 데이터 타입은 무엇인가요?
정답 :
기본 데이터 타입: String, Number, Boolean, Null, Undefined, BigInt, Symbol.
2. 변수 선언 시 var, let, const의 차이점은 무엇인가요?
정답:
var: 함수 레벨 스코프, 호이스팅 발생, 재선언 및 재할당 가능.
let: 블록 레벨 스코프, 호이스팅 발생(선언 시 초기화 이전 접근 불가), 재선언 불가능, 재할당 가능.
const: 블록 레벨 스코프, 호이스팅 발생(선언 시 초기화 이전 접근 불가), 재선언 및 재할당 불가능.
3. 호이스팅(hoisting)이란 무엇인가요? 예시를 들어 설명해 주세요.
정답:
호이스팅: 변수와 함수 선언이 실행 컨텍스트의 선언 단계에서 메모리에 저장되어, 코드 실행 전에 사용할 수 있는 현상.
4. 자바스크립트에서 프로토타입 기반 상속(prototype-based inheritance)과 클래스 기반 상속의 차이점은 무엇인가요?
정답:
프로토타입 기반 상속: 객체 간 상속, 프로토타입 체인을 통해 메소드와 속성을 공유. 클래스 기반 상속: 클래스 간 상속, 명시적으로 클래스를 확장하여 메소드와 속성을 상속받음.
5. 자바스크립트의 실행 컨텍스트(Execution Context)와 스코프 체인(Scope Chain)에 대해 설명해 주세요.
정답:
실행 컨텍스트: 코드 실행에 필요한 정보를 담는 객체. 스코프 체인: 실행 컨텍스트에서 변수와 함수의 접근 순서를 결정하는 체인 구조.
6. 콜백 지옥(callback hell)이란 무엇이고, 어떻게 해결할 수 있나요?
정답:
콜백 지옥: 콜백 함수가 중첩되어 가독성이 떨어지는 현상. 해결 방법: Promises, async/await 사용.
7. 이벤트 버블링(Event Bubbling)과 이벤트 캡처(Event Capturing)에 대해 설명해 주세요.
정답:
이벤트 버블링: 이벤트가 발생한 요소부터 상위 요소로 전파되는 현상. 이벤트 캡처: 상위 요소에서 하위 요소로 이벤트가 전파되는 반대 현상.
8. 디바운싱(Debouncing)과 스로틀링(Throttling)의 차이점을 설명하고, 언제 사용되는지 알려주세요.
정답:
디바운싱: 연속된 이벤트를 일정 시간 동안 그룹화하여 마지막 이벤트만 실행하는 기법으로, 고성능 스크롤 이벤트나 검색창 글자 입력 등의 상황에서 유용합니다. 스로틀링: 이벤트가 일정 시간 간격으로 한 번씩만 실행되도록 하는 기법으로, 스크롤 이벤트 처리나 자동 완성 기능 등의 상황에서 사용됩니다.
9. Promises와 async/await의 차이점과 장단점을 설명해 주세요.
정답:
Promises: 비동기 작업의 결과를 나타내는 객체. async/await: Promises를 더 간결하게 사용할 수 있는 문법으로, 동기식 코드 작성 방식을 사용하여 비동기 코드를 처리.
10. 클로저(Closure)란 무엇이며, 어떻게 사용되나요?
정답:
클로저: 내부 함수가 외부 함수의 변수에 접근할 수 있는 기능. 이를 통해 private 변수를 생성할 수 있다.
11. 자바스크립트에서 this 키워드의 동작 방식을 설명해 주세요.
정답:
this: 실행 컨텍스트에 따라 동적으로 바뀌는 키워드로, 함수 호출 시점에서 결정됩니다. 일반적인 경우에는 다음과 같은 동작 방식을 갖습니다.
전역 컨텍스트: this는 전역 객체를 가리킵니다(window 객체 또는 global 객체).
객체의 메서드에서: this는 해당 메서드를 호출한 객체를 가리킵니다.
생성자 함수에서: this는 생성자 함수를 통해 생성된 새로운 객체를 가리킵니다.
이벤트 핸들러에서: this는 이벤트가 발생한 DOM 요소를 가리킵니다.
화살표 함수에서: this는 화살표 함수가 생성된 곳의 실행 컨텍스트의 this를 가리킵니다.
12. 이벤트 위임(Event Delegation)에 대해 설명하고, 어떤 경우에 사용되는지 알려주세요.
정답:
이벤트 위임: 하위 요소에 발생한 이벤트를 상위 요소에서 처리하는 기법으로, 리소스를 절약하고 동적으로 요소가 추가될 때 이벤트 리스너를 지속적으로 추가할 필요가 없습니다.
13. 동기(Synchronous)와 비동기(Asynchronous) 프로그래밍의 차이점을 설명하고, 자바스크립트에서 어떻게 사용되는지 예시를 들어 설명해 주세요.
정답:
동기: 코드가 순차적으로 실행, 결과 반환 후 다음 작업 실행. 비동기: 코드 실행 결과를 기다리지 않고 다음 작업 실행, 콜백 함수나 프로미스를 통해 결과 처리.
14. 순수 함수(Pure Function)란 무엇인가요? 그리고 순수 함수를 사용하는 이유와 장점은 무엇인가요?
정답:
순수 함수: 입력 값에 의해서만 결정되는 출력 값을 반환하며, 외부 상태를 변경하지 않는 함수입니다. 순수 함수를 사용하는 이유와 장점은 코드의 가독성, 예측 가능성, 테스트 용이성 및 병렬 처리의 쉬움 등이 있습니다.
15. 자바스크립트에서 가비지 컬렉션(Garbage Collection)이란 무엇이며, 어떻게 동작하나요?
정답:
가비지 컬렉션: 자바스크립트 엔진에서 자동으로 할당된 메모리를 관리하는 메커니즘으로, 더 이상 사용되지 않는 객체를 메모리에서 해제하여 메모리 누수를 방지합니다. 가장 일반적인 가비지 컬렉션 알고리즘은 '표시-삭제(Mark-and-Sweep)' 알고리즘이며, 객체 간 참조 관계를 통해 도달할 수 없는 객체를 가비지로 판단하여 메모리에서 제거합니다.