JavaScript 인터뷰에서 탁월한 성과를 거두는 데 필요한 지식과 자신감을 갖추도록 설계된 이 포괄적인 가이드에 오신 것을 환영합니다. 이 문서는 기본적인 JavaScript 개념과 고급 패러다임부터 실용적인 코딩 과제 및 시스템 설계 원칙에 이르기까지 광범위한 주제를 꼼꼼하게 다룹니다. 신진 개발자이든 숙련된 엔지니어이든 이 자료는 비동기 JavaScript, 프레임워크 (React, Angular, Vue), 테스팅 및 모범 사례와 같은 주요 영역에 걸쳐 심층적인 질문과 답변을 제공합니다. 기술을 연마하고 일반적인 함정을 이해하며 모든 JavaScript 인터뷰 시나리오를 자신 있게 탐색할 준비를 하십시오.
null과 undefined의 차이점을 설명하세요.답변:
undefined는 변수가 선언되었지만 아직 값이 할당되지 않았거나, 속성이 존재하지 않음을 의미합니다. null은 '값이 없음' 또는 '비어 있음'을 의미하는 할당 값입니다. 이는 객체 값의 의도적인 부재를 나타내는 원시 값입니다.
this 키워드의 목적은 무엇인가요?답변:
this 키워드는 함수가 실행되는 컨텍스트를 참조합니다. this의 값은 함수가 호출되는 방식에 따라 달라집니다. 전역 객체, 객체 메서드, 생성자 또는 call(), apply(), bind()를 사용할 때 특정 객체를 참조할 수 있습니다.
답변:
호이스팅은 JavaScript 의 메커니즘으로, 컴파일 단계에서 변수 및 함수 선언이 포함된 범위의 맨 위로 이동됩니다. 이는 코드에서 선언되기 전에 변수와 함수를 사용할 수 있음을 의미하지만, 초기화는 호이스팅되지 않고 선언만 호이스팅됩니다.
답변:
클로저는 함수와 해당 렉시컬 환경이 함께 묶인 것입니다. 이를 통해 함수는 외부 함수가 실행을 마친 후에도 외부 (포함하는) 범위의 변수에 접근할 수 있습니다. 이는 데이터 프라이버시와 상태 저장 함수를 가능하게 합니다.
답변:
이벤트 루프는 JavaScript 의 동시성 모델의 기본 부분으로, 논블로킹 I/O 작업을 가능하게 합니다. 메시지 큐에서 작업을 지속적으로 확인하고 스택이 비어 있을 때 호출 스택으로 푸시하여 비동기 작업이 처리될 수 있도록 합니다.
==와 === 연산자의 차이점은 무엇인가요?답변:
==는 느슨한 동등 연산자로, 비교 전에 타입 변환을 수행합니다. ===는 엄격한 동등 연산자로, 타입 변환 없이 값과 타입을 모두 비교합니다. 예상치 못한 타입 변환 문제를 피하기 위해 일반적으로 ===를 사용하는 것이 좋습니다.
let, const, var는 범위 (scope) 와 호이스팅 (hoisting) 측면에서 어떻게 다른가요?답변:
var는 함수 범위이며 undefined 초기 값으로 호이스팅됩니다. let과 const는 블록 범위이며 호이스팅되지만 선언에 도달할 때까지 '일시적 사각지대 (temporal dead zone)'에 있으므로 선언 전에 접근할 수 없습니다. const는 즉시 초기화가 필요하며 재할당할 수 없습니다.
답변:
화살표 함수는 ES6 에서 함수 표현식을 작성하는 간결한 방법입니다. 주요 이점은 더 짧은 구문과, 가장 중요한 것은 자체 this 값을 바인딩하지 않는다는 것입니다. 대신 포함하는 렉시컬 컨텍스트에서 this를 상속하여 일반적인 this 바인딩 문제를 해결합니다.
답변:
프로토타입 기반 상속은 JavaScript 의 주요 상속 메커니즘입니다. 객체는 프로토타입 체인을 통해 다른 객체로부터 속성과 메서드를 상속받을 수 있습니다. 객체에서 속성에 접근할 때 해당 객체에서 직접 찾을 수 없으면 JavaScript 는 속성을 찾거나 null에 도달할 때까지 프로토타입 체인을 따라 올라갑니다.
답변:
동기 JavaScript 는 코드를 순차적으로 한 번에 한 줄씩 실행하며, 현재 작업이 완료될 때까지 추가 실행을 차단합니다. 비동기 JavaScript 는 콜백, Promise 또는 async/await를 사용하여 일반적으로 메인 스레드를 차단하지 않고 백그라운드에서 작업을 실행할 수 있도록 하여 논블로킹 I/O 와 더 나은 응답성을 가능하게 합니다.
답변:
이벤트 루프는 JavaScript 의 동시성 모델에서 중요한 부분입니다. 메시지 큐에서 작업 (예: setTimeout 또는 네트워크 요청의 콜백) 을 지속적으로 확인하고, 호출 스택이 비어 있을 때 스택으로 푸시합니다. 이 논블로킹 메커니즘을 통해 JavaScript 는 메인 스레드를 차단하지 않고 비동기 작업을 처리할 수 있습니다.
null과 undefined의 차이점은 무엇인가요?답변:
undefined는 변수가 선언되었지만 아직 값이 할당되지 않았거나, 속성이 존재하지 않음을 의미합니다. null은 '값이 없음' 또는 '비어 있음'을 의미하는 할당 값입니다. 이는 객체 값의 의도적인 부재를 나타내는 원시 값입니다.
답변:
클로저는 함수와 해당 렉시컬 환경 (외부 상태에 대한 참조) 이 함께 묶인 것입니다. 이를 통해 외부 함수가 실행을 마친 후에도 내부 함수에서 외부 함수의 범위에 접근할 수 있습니다. 예를 들어, function outer() { let count = 0; return function inner() { count++; return count; }; }
답변:
프로토타입 기반 상속은 JavaScript 객체가 다른 객체로부터 속성과 메서드를 상속받을 수 있는 메커니즘입니다. 모든 JavaScript 객체에는 다른 객체에 대한 참조인 프로토타입 속성이 있습니다. 객체에서 속성에 접근하려고 할 때 해당 객체에서 찾을 수 없으면 JavaScript 는 속성을 찾거나 null에 도달할 때까지 프로토타입 체인을 따라 올라갑니다.
bind, call, apply 메서드의 목적을 설명하세요.답변:
이 메서드들은 함수의 this 컨텍스트를 명시적으로 설정하는 데 사용됩니다. call은 인수를 개별적으로 전달하여 함수를 즉시 호출합니다. apply도 즉시 호출하지만 인수를 배열로 받습니다. bind는 this 컨텍스트가 영구적으로 바인딩된 새 함수를 반환하지만 즉시 호출하지는 않습니다.
답변:
Promise 는 비동기 작업의 최종 완료 또는 실패와 그 결과 값을 나타내는 객체입니다. 이는 콜백 지옥 (callback hell) 을 피하고 .then() 및 .catch()를 사용하여 가독성을 향상시키는 등 전통적인 콜백에 비해 비동기 코드를 더 깔끔하게 처리할 수 있는 방법을 제공합니다.
==와 === 연산자를 구분하세요.답변:
==는 비교 전에 타입 변환을 수행하는 동등 연산자로, 피연산자를 동일한 타입으로 변환하려고 시도합니다. ===는 타입 변환 없이 값과 타입을 모두 비교하는 엄격한 동등 연산자입니다. 예상치 못한 동작을 피하기 위해 일반적으로 ===를 사용하는 것이 좋습니다.
답변:
이벤트 위임은 개별 자식 요소에 여러 리스너를 연결하는 대신 부모 요소에 단일 이벤트 리스너를 연결하는 기법입니다. 자식에서 이벤트가 버블링되면 부모 리스너가 이를 처리합니다. 이는 메모리 소비를 줄이고 특히 동적으로 추가된 요소에 대해 성능을 향상시킵니다.
답변:
호이스팅은 JavaScript 의 기본 동작으로, 선언을 현재 범위 (스크립트 또는 함수) 의 맨 위로 이동시킵니다. 변수 선언 (var) 은 호이스팅되고 undefined로 초기화되며, 함수 선언은 완전히 호이스팅됩니다. let 및 const 선언도 호이스팅되지만 초기화되지 않아 '일시적 사각지대 (temporal dead zone)'가 발생합니다.
답변:
일시적 사각지대 (TDZ) 는 let 또는 const 변수의 바인딩 생성과 선언 평가 사이의 기간입니다. 이 기간 동안 변수에 접근하려고 하면 ReferenceError가 발생합니다. 이는 변수가 제대로 선언되고 초기화되기 전에 사용하는 것을 방지합니다.
async/await의 목적을 설명하세요.답변:
async/await는 Promise 위에 구축된 문법적 설탕 (syntactic sugar) 으로, 비동기 코드가 동기 코드처럼 보이도록 하고 작동하도록 합니다. async 함수는 항상 Promise 를 반환합니다. await 키워드는 async 함수 내에서만 사용할 수 있으며, 대기 중인 Promise 가 완료될 때까지 (해결 또는 거부) 해당 함수의 실행을 일시 중지합니다.
답변:
새 메시지를 받으면 채팅 컨테이너의 DOM 에 추가합니다. 그런 다음, element.scrollTop = element.scrollHeight를 사용하여 컨테이너를 프로그래밍 방식으로 하단으로 스크롤하여 최신 메시지가 항상 보이도록 합니다.
답변:
일반적인 원인으로는 메모리 누수 (예: 제거되지 않은 이벤트 리스너), 과도한 DOM 조작 또는 대규모 데이터 페이로드 등이 있습니다. 브라우저 개발자 도구 (메모리 탭, 성능 탭) 를 사용하여 누수 또는 성능 병목 현상을 식별하고, 디바운싱/스로틀링, 목록 가상화 또는 requestAnimationFrame을 사용하여 최적화합니다.
답변:
Promise.all()을 사용합니다. 이 메서드는 Promise 배열을 받아 입력된 모든 Promise 가 해결되면 해결되고, 입력된 Promise 중 하나라도 거부되면 거부되는 단일 Promise 를 반환합니다. 이를 통해 결과를 처리하기 전에 두 API 호출이 모두 완료되도록 합니다.
localStorage와 sessionStorage, 쿠키 (cookies) 를 사용하는 시나리오를 설명하세요.답변:
localStorage는 브라우저 세션 간에 지속되는 데이터 (예: 사용자 기본 설정) 에 사용됩니다. sessionStorage는 현재 브라우저 탭 세션에만 지속되어야 하는 데이터 (예: 제출 전 양식 데이터) 에 사용됩니다. 쿠키는 인증 또는 추적을 위해 종종 모든 HTTP 요청과 함께 전송되는 소량의 데이터에 사용됩니다.
답변:
Map 또는 localStorage를 사용하여 클라이언트 측 캐시를 구현합니다. API 호출을 하기 전에 데이터가 이미 캐시에 있고 유효한지 (예: 만료되지 않았는지) 확인합니다. 그렇다면 캐시된 데이터를 반환하고, 그렇지 않으면 새 데이터를 가져와 저장한 다음 반환합니다.
답변:
개별 입력 필드에 onchange 또는 onblur 이벤트 리스너를 연결합니다. 입력이 변경되거나 포커스를 잃으면 해당 필드에 대한 특정 유효성 검사 규칙을 실행하고 유효하지 않은 경우 옆에 오류 메시지를 표시합니다. 최종 유효성 검사는 양식 제출 시 수행됩니다.
답변:
Web Workers 를 사용합니다. Web Workers 는 메인 실행 스레드와 분리된 백그라운드 스레드에서 스크립트를 실행할 수 있도록 합니다. 이를 통해 UI 차단을 방지하고 무거운 계산이 수행되는 동안 애플리케이션 응답성을 유지합니다.
답변:
filter 배열 메서드를 체인으로 연결합니다. 각 필터 기준은 배열에 대한 별도의 filter 호출이 되어 점진적으로 결과를 좁힙니다. 이를 통해 로직을 모듈화하고 기준을 쉽게 추가/제거할 수 있습니다.
keyup 이벤트에 '디바운스 (debounce)' 함수를 구현하여 타이핑하는 동안 과도한 API 호출을 방지해야 합니다. 어떻게 접근하겠습니까?답변:
함수와 지연 시간을 인수로 받는 디바운스 함수를 만듭니다. 이 함수는 호출될 때 기존 타임아웃을 지우고 새 타임아웃을 설정하는 새 함수를 반환합니다. 원래 함수는 지정된 지연 시간 후에 추가 호출 없이 실행됩니다.
답변:
IndexedDB 를 사용합니다. 이는 파일/블롭을 포함한 상당한 양의 구조화된 데이터를 클라이언트 측에 저장하기 위한 저수준 API 입니다. 비동기적이며 오프라인 데이터 지속성을 위한 강력한 데이터베이스와 유사한 시스템을 제공합니다.
reverse() 메서드를 사용하지 않고 문자열을 뒤집는 JavaScript 함수를 작성하세요.답변:
문자열을 끝에서 시작으로 반복하며 문자를 연결하거나, 배열로 변환한 후 배열을 뒤집고 다시 연결하여 문자열을 뒤집을 수 있습니다. 일반적인 접근 방식은 for (let i = str.length - 1; i >= 0; i--) { reversedStr += str[i]; } 입니다.
debounce(func, delay) 함수를 구현하세요.답변:
디바운싱은 함수가 마지막으로 호출된 후 지정된 지연 시간이 지나야만 실행되도록 보장합니다. 일반적으로 setTimeout을 사용하고 지연 시간 내에 함수가 다시 호출되면 이전 타임아웃을 지웁니다. 이는 크기 조정 또는 타이핑과 같은 이벤트에 유용합니다.
throttle(func, limit) 함수를 작성하세요.답변:
스로틀링은 함수가 지정된 시간 창 내에서 최대 한 번만 호출되도록 보장합니다. 일반적으로 setTimeout과 함수가 현재 '쿨다운' 중인지 추적하는 플래그를 사용합니다. 이는 스크롤 또는 마우스 이동과 같은 이벤트를 과도한 호출을 방지하는 데 유용합니다.
답변:
가장 효율적인 방법은 Set을 사용하여 고유한 값을 저장한 다음 Set을 다시 배열로 변환하는 것입니다. 또는 배열을 반복하고 indexOf 또는 includes를 사용하여 새 배열에 푸시하기 전에 중복을 확인할 수 있습니다.
deepClone(obj) 함수를 구현하세요.답변:
깊은 복사는 모든 중첩된 객체와 배열의 새 복사본을 가진 새 객체를 만들어 참조 문제를 방지합니다. 간단한 JSON 직렬화 가능한 객체의 경우 JSON.parse(JSON.stringify(obj))가 작동합니다. 더 복잡한 객체 (함수, 날짜 등) 의 경우 속성을 반복하고 복사하는 재귀 함수가 필요합니다.
[1, [2, 3], [4, [5]]]를 [1, 2, 3, 4, 5]로).답변:
재귀를 사용하여 중첩된 배열을 평탄화할 수 있습니다. 배열을 반복합니다. 요소가 배열이면 해당 배열에 대해 평탄화 함수를 재귀적으로 호출하고 결과를 연결합니다. 그렇지 않으면 요소를 결과 배열에 직접 추가합니다. Array.prototype.flat()은 최신 내장 솔루션입니다.
Promise.all 등가 함수를 구현하세요.답변:
Promise.all 등가 함수는 Promise 배열을 받아 입력된 모든 Promise 가 해결되면 해결되고, 입력된 Promise 중 하나라도 거부되면 거부되는 새 Promise 를 반환합니다. 모든 해결된 값을 배열에 수집하고 순서를 유지합니다. resolve 및 reject와 함께 Promise 생성자를 사용합니다.
답변:
두 문자열은 동일한 문자를 동일한 빈도로 포함하는 경우 애너그램입니다. 일반적인 접근 방식은 두 문자열을 알파벳순으로 정렬하고 비교하는 것입니다. 또는 각 문자열에 대해 빈도 맵 (해시 맵) 을 사용하고 맵을 비교합니다.
답변:
이는 카데인 알고리즘 (Kadane's Algorithm) 입니다. 배열을 반복하면서 현재 위치에서 끝나는 현재 최대 합과 지금까지 찾은 전체 최대 합을 추적합니다. 현재 합이 음수가 되면 0 으로 재설정합니다 (또는 모든 숫자가 음수이면 현재 요소로 재설정합니다).
답변:
이벤트 이미터에는 on(이벤트 구독), emit(이벤트 게시), 그리고 선택적으로 off(구독 취소) 와 같은 메서드가 필요합니다. 내부적으로 이벤트 이름을 키로, 리스너 함수 배열을 값으로 하는 맵을 유지합니다. emit은 이러한 함수를 반복하여 호출합니다.
null과 undefined의 차이점은 무엇인가요?답변:
undefined는 변수가 선언되었지만 아직 값이 할당되지 않았거나 속성이 존재하지 않음을 의미합니다. null은 할당 값으로, 변수에 '값이 없음' 또는 '없음'을 나타내도록 명시적으로 할당되었음을 의미합니다.
답변:
호이스팅은 JavaScript 의 기본 동작으로, 컴파일 단계에서 선언을 현재 범위 (전역 또는 함수 범위) 의 맨 위로 이동시킵니다. 이는 변수와 함수가 코드에서 선언되기 전에 사용될 수 있음을 의미하지만, 초기화가 아닌 선언만 호이스팅됩니다.
답변:
클로저는 주변 상태 (렉시컬 환경) 에 대한 참조와 함께 번들로 묶인 함수입니다. 이를 통해 함수는 외부 함수가 실행을 마친 후에도 외부 범위의 변수에 접근할 수 있습니다. 클로저는 데이터 프라이버시, 비공개 변수 생성 및 커링 (currying) 과 같은 함수형 프로그래밍 패턴 구현에 유용합니다.
답변:
이벤트 루프는 JavaScript 의 동시성 모델의 기본 부분으로, 논블로킹 I/O 작업을 가능하게 합니다. 메시지 큐에서 작업 (예: setTimeout 또는 AJAX 요청의 콜백) 을 지속적으로 확인하고 스택이 비어 있을 때 호출 스택으로 푸시하여 비동기 작업이 메인 스레드를 차단하지 않도록 합니다.
답변:
Promise 는 비동기 작업의 최종 완료 또는 실패와 그 결과 값을 나타내는 객체입니다. 콜백 지옥 (callback hell) 문제를 해결하여 비동기 코드를 더 읽기 쉽고 관리하기 쉬운 방식으로 처리할 수 있게 하며, 작업 체인 및 더 나은 오류 처리를 가능하게 합니다.
답변:
디바운싱은 특정 비활성 기간 후에만 함수가 호출되도록 보장합니다 (예: 검색 입력). 스로틀링은 함수가 호출될 수 있는 속도를 제한하여 지정된 시간 프레임 내에서 최대 한 번만 실행되도록 합니다 (예: 창 크기 조정 또는 스크롤 이벤트). 둘 다 함수 실행 횟수를 줄여 성능을 최적화합니다.
답변:
모듈 패턴은 공개 API 를 노출하면서 비공개 변수와 메서드를 캡슐화하는 데 사용되는 디자인 패턴입니다. 일반적으로 즉시 실행 함수 표현식 (IIFE) 을 사용하여 비공개 범위를 만듭니다. 이점으로는 전역 범위 오염 방지, 코드 구성 촉진, 데이터 프라이버시 달성 등이 있습니다.
let, const, var를 언제 사용해야 하나요?답변:
const는 값이 다시 할당되지 않을 변수 (상수 참조) 에 사용됩니다. let은 블록 범위 내에서 다시 할당될 수 있는 변수에 사용됩니다. var는 함수 범위이며 호이스팅 동작과 블록 범위 부족으로 인해 현대 JavaScript 에서는 일반적으로 피해야 합니다. 이는 예상치 못한 문제를 야기할 수 있습니다.
async/await의 목적은 무엇인가요?답변:
async/await는 Promise 위에 구축된 구문 설탕으로, 비동기 코드가 동기 코드처럼 보이도록 하고 작동하도록 합니다. async 함수는 항상 Promise 를 반환하며, await는 Promise 가 해결 (resolve 또는 reject) 될 때까지 async 함수의 실행을 일시 중지하여 가독성과 오류 처리를 개선합니다.
답변:
팩토리 패턴은 구체적인 클래스를 지정하지 않고 객체를 생성하기 위한 인터페이스를 제공합니다. 객체 생성 로직을 중앙 집중화하여 관리 및 확장을 더 쉽게 만듭니다. 간단한 사용 사례는 각 유형에 대해 new를 직접 사용하지 않고 입력 매개변수에 따라 다른 유형의 사용자 객체 (예: 'Admin', 'Guest', 'Editor') 를 생성하는 것입니다.
답변:
메모이제이션은 비용이 많이 드는 함수 호출 결과를 캐싱하고 동일한 입력이 다시 발생할 때 반환하는 최적화 기술입니다. 반복되는 입력이 있는 순수 함수에 특히 유용하며, 중복 계산을 방지하여 실행 시간을 줄이고 리소스 소비를 줄임으로써 성능을 개선합니다.
답변:
불변성은 객체 또는 데이터 구조가 생성되면 변경할 수 없음을 의미합니다. 기존 데이터를 수정하는 대신 원하는 변경 사항이 있는 새 데이터 구조를 만듭니다. 이 관행은 디버깅을 단순화하고 예상치 못한 부작용을 방지하며 함수형 프로그래밍 및 Redux 와 같은 상태 관리 라이브러리에서 중요합니다.
답변:
주요 도구는 브라우저에 내장된 개발자 도구 (Developer Tools) 이며, 특히 로그 및 오류 메시지를 위한 '콘솔 (Console)'과 중단점 (breakpoint) 설정, 코드 단계별 실행, 변수 검사를 위한 '소스 (Sources)' 또는 '디버거 (Debugger)' 탭입니다.
console.log()의 목적과 디버깅에 사용할 때를 설명하세요.답변:
console.log()는 브라우저 콘솔에 메시지, 변수 또는 객체를 출력하는 데 사용됩니다. 실행 중인 다양한 지점에서 변수 상태를 검사하고, 코드 경로를 확인하며, 실행을 중단하지 않고 데이터 흐름을 이해하는 데 매우 유용합니다.
답변:
중단점은 브라우저 개발자 도구의 '소스' 탭에서 줄 번호를 클릭하여 설정합니다. 중단점은 특정 줄에서 코드 실행을 일시 중지하여 호출 스택 (call stack), 범위 (scope) 및 해당 순간의 변수 값을 검사할 수 있게 해주므로 단계별 디버깅에 유용합니다.
답변:
'단계별 건너뛰기'(F10) 는 함수 호출을 포함한 현재 줄의 코드를 실행하고 함수의 내부 코드로 진입하지 않고 다음 줄로 이동합니다. '단계별 진입'(F11) 은 현재 줄에서 호출된 함수로 진입하여 내부 로직을 디버깅할 수 있게 합니다.
답변:
일반적인 오류에는 ReferenceError(정의되지 않은 변수), TypeError(잘못된 유형에 대한 연산), SyntaxError(잘못된 코드 구조) 가 있습니다. 디버깅에는 콘솔 메시지 확인, 변수 유형 및 값 검사, 중단점을 사용하여 실행 흐름을 실패 지점까지 추적하는 것이 포함됩니다.
async/await와 같은 비동기 JavaScript 코드를 어떻게 디버깅하나요?답변:
비동기 코드 디버깅은 종종 .then() 또는 catch() 블록 내부 또는 async 함수 내부에 중단점을 설정하는 것을 포함합니다. 개발자 도구의 '호출 스택'은 비동기 흐름을 추적하는 데 도움이 되며, console.log()는 Promise 가 해결되거나 거부될 때를 확인하는 데 사용할 수 있습니다.
답변:
debugger 문은 JavaScript 키워드로, 이 문을 만나면 실행이 일시 중지되고 해당 특정 줄에서 브라우저 개발자 도구가 열립니다. 이는 프로그래밍 방식의 중단점처럼 작동하며, UI 에서 수동으로 설정하지 않고 임시 중단점을 빠르게 삽입하는 데 유용합니다.
답변:
이 오류는 undefined인 변수의 속성에 액세스하거나 해당 변수에 대해 메서드를 호출하려고 할 때 발생합니다. 디버깅하려면 중단점이나 console.log()를 사용하여 undefined 값이 어디서 발생했는지 추적하고, 함수 반환 값, API 응답 또는 객체 초기화를 확인합니다.
답변:
메모리 누수는 종종 브라우저 개발자 도구의 '메모리 (Memory)' 탭을 사용하여 디버깅하며, 특히 힙 스냅샷 (heap snapshot) 을 찍고 비교하여 분리된 DOM 노드, 닫히지 않은 클로저 또는 과도한 이벤트 리스너를 식별합니다. 프로파일링 도구는 가비지 컬렉션되지 않는 객체를 찾는 데 도움이 됩니다.
답변:
호출 스택은 인터프리터가 여러 함수를 호출하는 스크립트에서 자신의 위치를 추적하기 위한 메커니즘입니다. 디버깅에서 호출 스택은 현재 실행 지점에 도달한 함수 호출 시퀀스를 보여주어 흐름을 이해하고 오류의 출처를 식별하는 데 도움이 됩니다.
답변:
라이브러리는 호출하고 제어하는 사전 작성된 코드 모음입니다 (예: jQuery, React). 반대로 프레임워크는 애플리케이션의 아키텍처와 흐름을 결정하고 필요할 때 코드를 호출합니다 (예: Angular, Vue). 핵심 차이점은 '제어의 역전 (inversion of control)'입니다.
답변:
가상 DOM 은 실제 DOM 의 경량 복사본입니다. React 는 이를 사용하여 직접적인 DOM 조작을 최소화하여 성능을 향상시킵니다. 상태가 변경되면 React 는 새 가상 DOM 을 이전 가상 DOM 과 비교하고, 실제 DOM 을 업데이트하는 가장 효율적인 방법을 계산한 다음, 필요한 변경 사항만 적용합니다.
답변:
React Hooks 는 함수 컴포넌트에서 React 상태 및 생명주기 기능에 '훅 (hook)'할 수 있게 해주는 함수입니다. 2019 년 React 16.8 에 도입되어 개발자가 클래스를 작성하지 않고도 상태 기반 로직을 작성할 수 있게 하여 코드 재사용성, 가독성 및 테스트 용이성을 향상시켰습니다.
답변:
Angular 에서 컴포넌트는 UI 의 기본 빌딩 블록으로, 템플릿, 스타일시트 및 TypeScript 클래스를 결합합니다. 모듈 (NgModules) 은 응집력 있는 기능 블록의 컨테이너로, 컴포넌트, 서비스 및 기타 코드를 구성하고 컴파일 범위를 정의합니다.
답변:
Angular 의 데이터 바인딩은 컴포넌트의 TypeScript 코드와 HTML 템플릿 간의 데이터를 동기화합니다. 주요 유형은 다음과 같습니다: 보간법 {{}}(컴포넌트에서 뷰로 단방향), 속성 바인딩 [](컴포넌트에서 뷰로 단방향), 이벤트 바인딩 ()(뷰에서 컴포넌트로 단방향), 양방향 바인딩 [()](속성 바인딩과 이벤트 바인딩 결합).
답변:
Vue 의 반응성 시스템은 데이터 속성의 변경을 자동으로 추적하고 해당 변경이 발생할 때 DOM 을 효율적으로 업데이트합니다. getter 와 setter 를 사용하여 변경을 감지하고 가상 DOM 을 사용하여 효율적으로 패치함으로써 UI 가 애플리케이션 상태와 동기화되도록 합니다.
답변:
대규모 React 애플리케이션의 경우, 일반적인 상태 관리 솔루션에는 더 간단한 전역 상태를 위한 Context API 와 더 복잡하고 예측 가능한 상태 관리를 위한 Redux 또는 Zustand 와 같은 라이브러리가 포함됩니다. 이러한 솔루션은 중앙 집중식 저장소와 애플리케이션 전체 데이터 흐름을 관리하기 위한 패턴을 제공합니다.
답변:
생명주기 훅은 개발자가 컴포넌트의 생성, 마운트, 업데이트 및 언마운트와 같은 특정 단계에서 코드를 실행할 수 있게 해주는 특수 메서드입니다. 초기화, 데이터 가져오기, DOM 조작 및 정리 작업을 위한 제어 지점을 제공합니다.
답변:
Vue.js 는 단순성, 쉬운 학습 곡선 및 유연성으로 인해 자주 선택되며, 소규모 프로젝트나 기존 프로젝트에 통합하는 데 이상적입니다. React 는 방대한 생태계와 커뮤니티로 인해 크고 복잡한 SPA 에 선호됩니다. Angular 는 내장된 기능과 구조화되고 의견이 분명한 프레임워크를 요구하는 엔터프라이즈급 애플리케이션에 적합합니다.
답변:
SPA 의 라우팅은 전체 페이지 새로고침 없이 다른 '페이지' 또는 뷰 간의 탐색을 허용합니다. URL 을 특정 컴포넌트 또는 뷰에 매핑하여 URL 에 따라 콘텐츠를 동적으로 업데이트함으로써 사용자 경험을 원활하게 제공하며, 이는 기존의 다중 페이지 웹사이트를 모방합니다.
답변:
비동기 JavaScript 를 사용하면 프로그램이 메인 스레드를 차단하지 않고 장기 실행 작업 (예: 네트워크 요청) 을 실행할 수 있습니다. 이는 반응성 있는 사용자 인터페이스를 유지하고 애플리케이션이 멈추는 것을 방지하여 전반적인 사용자 경험을 개선하는 데 중요합니다.
답변:
이벤트 루프는 JavaScript 의 동시성 모델 (concurrency model) 의 기본 부분입니다. 호출 스택 (call stack) 이 비어 있는지 지속적으로 확인합니다. 비어 있다면 메시지 큐 (task queue) 에서 첫 번째 메시지를 가져와 실행을 위해 호출 스택에 푸시하여 논블로킹 I/O 작업을 가능하게 합니다.
답변:
Promise 는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다. 이는 전통적인 콜백 (callback) 에 비해 비동기 코드를 더 깔끔하게 처리할 수 있게 해주며, .then() 및 .catch()를 사용하여 비동기 작업을 체이닝 (chaining) 함으로써 '콜백 지옥 (callback hell)'을 해결합니다.
async/await와 Promise 를 구분하세요.답변:
async/await는 Promise 위에 구축된 문법적 설탕 (syntactic sugar) 으로, 비동기 코드가 동기 코드처럼 보이게 하고 작동하게 합니다. Promise 는 체이닝을 위해 .then() 및 .catch()를 사용하는 반면, async/await는 try/catch 블록을 사용하여 오류를 처리하고 await를 사용하여 Promise 가 해결될 때까지 실행을 일시 중지합니다.
Promise.all()과 Promise.race()를 언제 사용해야 하나요?답변:
Promise.all()은 반복 가능한 (iterable) 모든 Promise 가 성공적으로 해결된 후에 진행해야 할 때 사용됩니다. 어떤 Promise 라도 거부되면 거부됩니다. Promise.race()는 반복 가능한 Promise 중에서 가장 먼저 완료 (해결 또는 거부) 되는 하나의 Promise 에만 관심이 있을 때 사용됩니다.
async/await 함수에서 오류를 어떻게 처리하나요?답변:
async/await 함수에서의 오류는 동기 코드와 유사하게 표준 try...catch 블록을 사용하여 처리됩니다. await 표현식 내의 거부된 Promise 는 catch 블록에서 잡을 수 있는 오류를 발생시킵니다.
async/await가 이를 어떻게 완화하나요?답변:
'콜백 지옥'(또는 '피라미드 오브 둠') 은 여러 개의 중첩된 비동기 콜백으로 인해 코드를 읽고 유지 관리하기 어려워질 때 발생합니다. Promise 와 async/await는 비동기 작업을 위한 더 평평하고 선형적인 구조를 제공하여 가독성과 오류 처리를 개선함으로써 이를 완화합니다.
답변:
매크로태스크 (예: setTimeout, setInterval, I/O) 는 이벤트 루프 주기당 하나씩 처리됩니다. 마이크로태스크 (예: Promise 콜백, queueMicrotask, MutationObserver) 는 현재 스크립트 실행 후 다음 매크로태스크 전에 처리됩니다. 즉, 보류 중인 모든 마이크로태스크는 다음 매크로태스크 전에 실행됩니다.
fetch API 의 목적은 무엇인가요?답변:
fetch API 는 웹 브라우저와 Node.js 에서 네트워크 요청 (예: HTTP 요청) 을 만들기 위한 현대적이고 Promise 기반의 인터페이스를 제공합니다. 네트워크를 통해 리소스를 가져오는 데 XMLHttpRequest보다 더 강력하고 유연한 대안입니다.
await 없이 async 함수를 설명할 수 있나요?답변:
await 키워드가 없는 async 함수는 여전히 Promise 를 반환합니다. 그러나 일반 동기 함수처럼 작동하며 반환된 값을 즉시 Promise 로 해결합니다. async 키워드는 주로 함수가 궁극적으로 Promise 를 반환할 것임을 나타냅니다.
답변:
주요 유형은 단위 테스트 (Unit), 통합 테스트 (Integration), 그리고 엔드투엔드 (End-to-End, E2E) 테스트입니다. 단위 테스트는 개별 컴포넌트를 격리하여 검증하고, 통합 테스트는 컴포넌트 간의 상호 작용을 확인하며, E2E 테스트는 전체 시스템에 걸친 사용자 흐름을 시뮬레이션합니다.
답변:
TDD 는 테스트를 먼저 작성하고, 해당 테스트를 통과하는 데 필요한 최소한의 코드를 작성하는 개발 방법론입니다. 이 주기 (Red-Green-Refactor) 는 코드가 테스트 가능하도록 보장하고, 설계를 개선하며, 변경 사항에 대한 즉각적인 피드백을 제공합니다.
답변:
단위 및 통합 테스트에는 Jest 와 Mocha 가 매우 인기가 있습니다. E2E 테스트에는 Cypress 와 Playwright 가 널리 사용됩니다. React 컴포넌트 테스트에는 React Testing Library 와 Enzyme 가 일반적으로 사용됩니다.
답변:
CI/CD 파이프라인은 일반적으로 리포지토리에서 코드를 가져오고, 종속성을 설치하고, 테스트를 실행하고, 애플리케이션을 빌드한 다음, 스테이징 또는 프로덕션 환경에 배포하는 단계를 포함합니다. GitHub Actions, GitLab CI 또는 Jenkins 와 같은 도구가 이 프로세스를 자동화합니다.
답변:
스테이징 환경은 배포 전 최종 테스트에 사용되는 프로덕션 환경의 복제본입니다. 이를 통해 팀은 실제 사용자에게 영향을 주지 않고 프로덕션과 유사한 환경에서 기능, 성능 및 안정성을 검증할 수 있습니다.
답변:
시맨틱 버전 관리 (MAJOR.MINOR.PATCH) 는 릴리스의 변경 유형을 나타냅니다. MAJOR 는 호환되지 않는 변경, MINOR 는 새 기능 (하위 호환), PATCH 는 버그 수정 (하위 호환) 을 의미합니다. 이는 사용자가 업데이트의 영향을 이해하고 종속성을 효과적으로 관리하는 데 도움이 됩니다.
답변:
롤백 전략은 새로운 배포가 심각한 문제를 일으킬 경우 애플리케이션의 이전 안정적인 버전으로 신속하게 되돌릴 수 있게 해줍니다. 이는 다운타임과 사용자에게 미치는 영향을 최소화하며, 종종 이전 빌드를 쉽게 사용할 수 있도록 유지함으로써 달성됩니다.
답변:
CI 는 코드 변경 사항을 중앙 리포지토리에 자주 병합하고, 그 뒤에 자동화된 빌드 및 테스트를 수행하는 것을 포함합니다. CD 는 CI 를 확장하여 코드 변경 사항을 프로덕션 릴리스 준비 상태로 자동 준비하고 제공하며, 종종 수동 승인 단계를 거칩니다. 지속적 배포 (Continuous Deployment) 는 프로덕션으로의 릴리스를 완전히 자동화합니다.
답변:
스냅샷 테스트는 종종 Jest 와 함께 사용되며, 렌더링된 컴포넌트의 출력 또는 데이터 구조를 캡처하여 이전에 저장된 스냅샷과 비교합니다. 이는 특히 리팩토링 중에 UI 컴포넌트가 의도치 않게 변경되지 않도록 하는 데 유용합니다.
답변:
환경별 구성 (예: API 키, 데이터베이스 URL) 은 일반적으로 환경 변수 (environment variables) 를 사용하여 관리됩니다. 이러한 변수는 대상 환경 (개발, 스테이징, 프로덕션) 에 따라 애플리케이션 빌드 또는 런타임에 주입되어 올바른 설정을 보장합니다.
답변:
수평 확장은 리소스 풀에 더 많은 머신 (예: 더 많은 서버) 을 추가하여 부하를 분산하는 것을 의미합니다. 수직 확장은 단일 머신의 리소스 (CPU, RAM) 를 늘리는 것을 의미합니다. 일반적으로 수평 확장이 더 유연하고 복원력이 뛰어납니다.
답변:
CDN 은 지리적으로 분산된 프록시 서버 및 데이터 센터 네트워크입니다. 정적 콘텐츠 (이미지, CSS, JS) 를 최종 사용자에게 더 가깝게 캐싱하여 웹 성능을 향상시키고, 지연 시간을 줄이며, 원본 서버의 부하를 감소시킵니다. 이를 통해 콘텐츠 전송 속도를 높이고 사용자 경험을 향상시킵니다.
답변:
로드 밸런서는 단일 서버에 과부하가 걸리지 않도록 여러 서버에 걸쳐 들어오는 네트워크 트래픽을 분산합니다. 상태 확인 (health checks) 및 트래픽 리디렉션을 통해 병목 현상을 방지하고 장애 허용 (fault tolerance) 을 제공함으로써 애플리케이션의 가용성, 확장성 및 안정성을 향상시킵니다.
답변:
대량의 비정형 또는 반정형 데이터를 처리하거나, 높은 확장성 및 유연성이 필요하거나, 빠른 개발 주기가 필요한 경우 NoSQL 을 선택합니다. SQL 데이터베이스는 복잡한 트랜잭션, 강력한 데이터 일관성 및 잘 정의된 스키마에 더 적합합니다.
답변:
마이크로서비스는 애플리케이션을 작고 독립적인 서비스들의 모음으로 구축하는 소프트웨어 아키텍처 스타일입니다. 장점으로는 독립적인 배포, 확장성, 기술 다양성이 있습니다. 단점으로는 운영 복잡성 증가, 분산 데이터 관리, 서비스 간 통신 오버헤드 등이 있습니다.
답변:
최종 일관성은 특정 데이터 항목에 더 이상 업데이트가 발생하지 않으면, 해당 항목에 대한 모든 읽기 작업이 결국 마지막 업데이트된 값을 반환하는 일관성 모델입니다. 이는 즉각적인 일관성보다 가용성 및 파티션 허용 (partition tolerance) 을 우선시하며, NoSQL 데이터베이스에서 흔히 볼 수 있습니다.
답변:
캐싱은 기본 소스에서 데이터를 검색하는 시간을 줄이기 위해 자주 액세스되는 데이터를 더 빠르고 임시적인 저장 계층에 저장하는 것입니다. 일반적인 전략으로는 '쓰기 스루'(write-through, 캐시와 데이터베이스에 동시에 쓰기), '쓰기 백'(write-back, 캐시에 쓰고 비동기적으로 데이터베이스에 쓰기), '캐시 어사이드'(cache-aside, 애플리케이션이 캐시 읽기/쓰기 관리) 등이 있습니다.
답변:
수평 확장된 애플리케이션에서 세션 관리는 모든 서버 인스턴스가 세션 데이터에 액세스할 수 있도록 Redis 또는 Memcached 와 같은 공유 외부 저장소가 필요합니다. 스티키 세션 (sticky sessions, 로드 밸런서가 항상 사용자 요청을 동일한 서버로 라우팅) 을 사용할 수도 있지만 유연성이 떨어집니다.
답변:
메시지 큐는 분산 시스템의 여러 부분 간의 비동기 통신을 촉진합니다. 서비스를 분리하고, 피크 시간 동안 요청을 버퍼링하며, 안정적인 메시지 전달을 보장하여 시스템의 복원력, 확장성 및 응답성을 향상시킵니다.
답변:
멱등성 작업은 한 번 실행하든 여러 번 실행하든 동일한 결과를 생성하는 작업입니다. 예를 들어, DELETE 요청은 리소스를 한 번 제거해야 하며, 이후 동일한 DELETE 요청은 시스템 상태를 더 이상 변경하지 않아야 합니다. 이는 안정적인 분산 시스템에 매우 중요합니다.
답변:
CAP 이론은 분산 데이터 저장소가 일관성 (Consistency), 가용성 (Availability), 파티션 허용 (Partition tolerance) 세 가지 속성 중 두 가지만 보장할 수 있다고 말합니다. 관계형 데이터베이스는 일반적으로 일관성과 가용성 (CA) 을 우선시하는 반면, NoSQL 데이터베이스는 종종 가용성과 파티션 허용 (AP) 또는 일관성과 파티션 허용 (CP) 을 우선시합니다.
JavaScript 면접을 준비하는 것은 어렵지만 보람 있는 경험이 될 수 있습니다. 이 문서는 기본 개념, 고급 주제 및 실제 시나리오를 다루는 일반적인 질문과 효과적인 답변에 대한 견고한 기반을 갖추도록 돕는 것을 목표로 했습니다. 이러한 질문을 성실히 검토하고 기본 원리를 이해함으로써 숙련도와 자신감을 보여주기 위한 중요한 단계를 밟았습니다. 잘 준비된 지원자는 답변을 아는 것뿐만 아니라 그 이면의 "이유"를 이해한다는 것을 기억하십시오.
JavaScript 개발자의 여정은 지속적인 학습과 적응의 과정입니다. 이 가이드가 면접에 대한 귀중한 통찰력을 제공하지만, 진정한 숙달은 꾸준한 연습, 프로젝트 구축 및 끊임없이 진화하는 JavaScript 생태계에 대한 최신 정보를 유지하는 것에서 비롯됩니다. 성공적이든 아니든 모든 면접에서 배우는 기회를 받아들이고 성장의 동력으로 삼으십시오. 계속 코딩하고, 계속 탐색하고, JavaScript 로 만들 수 있는 것의 경계를 계속 넓혀가십시오.
