프론트엔드 개발자 기술 면접 질문 정리 (2)

1. JavaScript 동작 원리와 성능 최적화

debounce와 throttle의 차이와 사용 상황은?

• debounce: 마지막 이벤트 이후 일정 시간이 지나야 실행 (ex. 검색창 자동완성)
• throttle: 일정 주기마다 실행 (ex. 스크롤 이벤트)
• 핵심 차이는 debounce는 마지막에만 실행되고, throttle은 주기적으로 실행된다는 점

실행 컨텍스트란?

자바스크립트는 코드를 실행할 때 실행 컨텍스트(Execution Context)를 생성하고, 이 컨텍스트가 콜스택에 쌓이면서 코드를 실행합니다.

# 내부 구성 요소
- Variable Object (VO): 변수와 함수 선언 정보
- Scope Chain: 상위 스코프에 접근하는 체인
- this 바인딩: 실행 문맥에 따른 this 값

 

자바스크립트 코드가 런타임에서 어떤 순서로 실행되는지 예시를 들어 설명해주세요.

• 코드가 해석되면 전역 실행 컨텍스트 생성
• 함수 호출 시, 새로운 실행 컨텍스트가 스택에 쌓임
• 실행 후 스택에서 빠짐 (LIFO).

// 실행 순서 예시

function A() { B(); }
function B() { C(); }
function C() { console.log("done"); }
A();

• A → B → C 호출 → 실행은 C → B → A 순으로 완료 (후입선출 LIFO)

함수 선언 방식의 차이

 

• 선언식: 호이스팅 O, 코드 어디서든 호출 가능
• 표현식: 호이스팅 X, 할당된 이후부터 호출 가능
• 화살표 함수: this는 상위 스코프, arguments 없음

 

쿠키와 세션의 차이점

• 쿠키: 클라이언트(브라우저)에 저장, 유효기간 있음
• 세션: 서버에 저장, 브라우저 닫으면 보통 삭제됨.

XSS와 CSRF의 차이

• XSS (Cross-Site Scripting): 사용자가 입력한 스크립트가 실행됨
  → 예: 댓글에 <script> 삽입
• CSRF (Cross-Site Request Forgery): 사용자가 모르게 의도치 않은 요청을 보내도록 유도
  → 예: 로그인 상태에서 위조된 폼 전송

브라우저 렌더링 및 비동기 처리

자바스크립트는 싱글 스레드인데, API 요청 시 왜 메인 스레드가 멈추지 않나요?

• API 요청은 Web API에서 실행됨
• 완료되면 콜백 큐로 들어가서 이벤트 루프가 처리함.

여러 API 요청이 있을 때, 브라우저는 응답을 어떻게 매칭하나요?

• 요청마다 고유 ID/식별자(ex. URL, 요청 ID)가 붙음
• 응답은 해당 ID로 연결돼서 처리된다.

프로토타입

Prototype(프로토타입)은 자바스크립트에서 객체의 상속을 구현하기 위한 핵심 개념

• 자바스크립트의 모든 객체는 [[Prototype]]이라는 내부 참조를 가진다.
• 이 [[Prototype]]을 통해, 객체는 자신의 프로퍼티뿐 아니라, 상속받은 프로퍼티나 메서드에 접근할 수 있다.

---

2. React 렌더링 및 최적화

언제 리렌더링되는가?

• props 또는 state 변경 시
• 부모 컴포넌트가 리렌더링되면 자식도 영향받을 수 있음

불필요한 리렌더링 방지 방법

• React.memo() 사용: props가 바뀌지 않으면 컴포넌트 리렌더링 방지
• key가 유지되면 리스트 항목도 불필요한 렌더링 없음

useCallback과 useMemo의 차이점

• useCallback: 함수를 메모이제이션 (자식에게 함수 props 넘길 때 유용)
• useMemo: 계산된 값을 메모이제이션 (고비용 연산에 유용)

setState 여러 번 호출해도 한 번만 처리되는 이유

• React는 batch 처리를 통해 이벤트 루프 내 상태 변경을 한 번에 처리함

useState 상태를 직접 수정하면?

• 직접 수정해도 React는 변경을 감지하지 못해 리렌더링되지 않음
• 반드시 setState를 사용해야 UI에 반영됨

---

3. TypeScript

interface vs type 차이

• interface: 객체 구조에 특화, 확장/병합 가능
• type: 유니언, 튜플 등 복잡한 타입 표현 가능

제네릭(Generic)의 개념과 사용 예시

• 타입을 외부에서 주입받을 수 있는 변수
  → 다양한 타입을 재사용할 수 있는 유연한 함수/컴포넌트 구성 가능

// 예시

function log<T>(msg: T): void {
  console.log(msg);
}

---

4. 이벤트 루프 / Task Queue

마이크로 vs 매크로 테스크

• 마이크로 테스크가 먼저 실행됨
  → 예: Promise.then()
• 매크로 테스크는 그 이후 실행됨
  → 예: setTimeout, 이벤트 핸들러 등

버튼 클릭 이벤트는 어떤 큐에 들어가나요?

• 버튼 클릭은 매크로 테스크 큐에 들어간다.

마이크로 테스크 큐로 보내려면 어떻게 해야 하나요?

• Promise.resolve().then(...) 사용

---

5. 빌드 및 도구

Vite는 무엇을 하는가?

 

• 빠른 개발 서버 + HMR 지원
• ESM 기반으로 Webpack보다 빠른 번들링
• 특히 초기 로딩 속도가 빨라 대규모 프로젝트에 유리