🔥 프론트엔드 개발 면접 정리: JavaScript, React, TypeScript, Next.js, 성능 최적화 총정리

---

📌 1. JavaScript 면접 질문 & 답변

✅ Q1. JavaScript의 실행 컨텍스트(Execution Context)란?

• **실행 컨텍스트(Execution Context)**는 JavaScript 코드가 실행될 때 생성되는 환경이다.
• Call Stack을 사용해 실행 컨텍스트를 관리하며, 함수 실행이 끝나면 스택에서 제거된다.

📌 실행 컨텍스트의 구성 요소

1. 전역 실행 컨텍스트 (Global Execution Context) → 코드 실행 시 가장 먼저 생성됨
2. 함수 실행 컨텍스트 (Function Execution Context) → 함수가 실행될 때마다 새로운 실행 컨텍스트 생성
3. 콜 스택(Call Stack) → 실행 컨텍스트를 관리하는 데이터 구조 (LIFO, 후입선출)

---

✅ Q2. JavaScript는 싱글 스레드인가요?

• JavaScript는 싱글 스레드 기반으로 동작한다.
• 하지만, 비동기 처리(setTimeout, Promise, async/await)를 통해 이벤트 루프(Event Loop)를 활용하여 효율적으로 동작한다.

📌 비동기 예제

console.log("Start");
setTimeout(() => console.log("Async Task"), 1000);
console.log("End");

📌 출력 결과

Start
End
(1초 후) Async Task

👉 싱글 스레드이지만 비동기 처리를 통해 여러 작업을 효과적으로 수행할 수 있다.

---

📌 2. React 면접 질문 & 답변

✅ Q3. React의 Virtual DOM이란?

• **Virtual DOM(가상 DOM)**은 실제 DOM을 조작하기 전에 변경 사항을 메모리에 저장하고, 최소한의 업데이트만 실제 DOM에 반영하는 방식이다.
• React는 Virtual DOM을 사용하여 불필요한 렌더링을 줄이고 성능을 최적화한다.

📌 Virtual DOM 동작 과정

1. 상태(State)가 변경되면 새로운 Virtual DOM이 생성된다.
2. 이전 Virtual DOM과 새로운 Virtual DOM을 비교(diffing)한다.
3. 변경된 부분만 실제 DOM에 적용한다 (Reconciliation).

---

✅ Q4. React에서 key 속성이 중요한 이유는?

• React에서 리스트를 렌더링할 때 key를 사용하면 성능이 최적화된다.
• key는 리스트가 변경될 때 React가 빠르게 비교(diffing)하는 기준이 된다.
• 배열의 index를 key로 사용하면, 중간 요소가 추가될 때 성능 저하 발생 가능.

📌 올바른 key 사용 예제

const items = [
  { id: "a1", name: "Item A" },
  { id: "b2", name: "Item B" },
  { id: "c3", name: "Item C" },
];

return (
  <ul>
    {items.map((item) => (
      <li key={item.id}>{item.name}</li> // ✅ 고유한 ID 사용
    ))}
  </ul>
);

---

📌 3. TypeScript 면접 질문 & 답변

✅ Q5. interface와 type의 차이는?

특징 interface type

확장 가능 여부	✅ extends 사용 가능	❌ & 사용 필요
선언 병합	✅ 가능	❌ 불가능
유니온 타입	❌ 불가능	✅ 가능

📌 예제

interface Person {
  name: string;
  age: number;
}

type Status = "success" | "error" | "loading";

---

📌 4. Next.js 면접 질문 & 답변

✅ Q6. getServerSideProps와 getStaticProps의 차이는?

비교 항목 getServerSideProps (SSR) getStaticProps (SSG)

실행 시점	매 요청 시 실행	빌드 시 한 번 실행
속도	느림 (실시간 서버 요청)	빠름 (정적 HTML 제공)
데이터 갱신	실시간 반영 가능	빌드 후 변경 어려움 (ISR 사용 가능)

📌 ISR (Incremental Static Regeneration) 적용 예제

export async function getStaticProps() {
  const res = await fetch("https://api.example.com/posts");
  const data = await res.json();

  return {
    props: { posts: data },
    revalidate: 60, // 60초마다 갱신
  };
}

✅ ISR을 사용하면 정적 페이지도 일정 주기로 업데이트 가능!

---

📌 5. 웹 성능 최적화 면접 질문 & 답변

✅ Q7. 웹 성능을 향상시키기 위한 방법은?

• 네트워크 최적화 → 이미지 최적화(WebP), CDN 사용, Gzip 압축
• 렌더링 최적화 → React.memo, useMemo, useCallback 사용
• 데이터 최적화 → React Query, GraphQL 활용
• UX 최적화 → Lazy Loading, Preload 적용

📌 React Query로 API 캐싱 적용

import { useQuery } from "@tanstack/react-query";

const fetchData = () => fetch("https://api.example.com/data").then(res => res.json());

const Component = () => {
  const { data, isLoading } = useQuery(["data"], fetchData);

  if (isLoading) return

Loading...

;
  return

{data.title}

;
};

---

🔥 결론

✅ JavaScript 실행 컨텍스트, 싱글 스레드 개념 정리
✅ React의 Virtual DOM, key 속성의 중요성 이해
✅ TypeScript의 interface vs type 차이 구분
✅ Next.js의 SSR(getServerSideProps) vs SSG(getStaticProps) 차이 이해
✅ 웹 성능 최적화 및 React 렌더링 최적화 기법 숙지