🧠 1. 클로저(Closure) & 프로토타입(Prototype)
🎯 주제 1: 클로저
❓ 면접관:
클로저가 뭔가요? 실무에서 어떻게 활용되는지도 포함해서 설명해주세요.
✅ 지원자:
클로저는 함수가 선언될 때의 스코프를 기억해서, 함수 실행 이후에도 해당 스코프의 변수에 접근할 수 있게 해주는 개념입니다.
이를 통해 변수의 은닉화가 가능하고, 예를 들어 반복문 내에서 비동기 콜백의 변수 값 유지, React의 useState 내부 구현에서도 사용됩니다.
💡 추가 꼬리질문:
클로저를 사용하면 메모리 누수가 발생할 수 있다는 이야기도 있던데요, 이유가 뭘까요?
✅ 답변 포인트:
클로저는 외부 변수를 참조하고 있기 때문에, 해당 변수가 가비지 컬렉터(GC)의 대상이 되지 않아 메모리가 해제되지 않을 수 있습니다.
이벤트 핸들러 내부에서 클로저를 사용하고 이를 해제하지 않으면 누수가 발생할 수 있기 때문에, 적절한 정리(unsubscribe 등)가 필요합니다.
🎯 주제 2: 프로토타입
❓ 면접관:
자바스크립트에서 프로토타입이란 무엇이고, 어떤 상황에서 활용되나요?
✅ 지원자:
자바스크립트는 클래스 기반이 아닌 프로토타입 기반 상속을 사용합니다.
객체는[[Prototype]]이라는 숨겨진 링크를 통해 상위 객체의 속성을 상속받을 수 있고,Object.create()또는 생성자의prototype속성을 통해 구현됩니다.
💡 꼬리질문:
__proto__와prototype의 차이를 설명해보세요.
✅ 답변 포인트:
__proto__는 객체 인스턴스가 가지는 내부 링크로 실제 프로토타입 체인을 나타내고,
prototype은 생성자 함수가 가진 속성으로 해당 함수로 만들어진 인스턴스들이 상속받는 기준이 되는 객체입니다.
💡 꼬리질문:
React 프로젝트에서 프로토타입을 마주칠 일이 있을까요?
✅ 답변 포인트:
직접적으로 다룰 일은 드물지만, JavaScript 엔진의 기본 동작 원리를 이해하고 싶을 때나,
Object.prototype.toString같은 메서드를 사용할 때 프로토타입을 간접적으로 이해해야 합니다.
⚛️ 2. Virtual DOM & 리렌더링
🎯 주제 1: Virtual DOM
❓ 면접관:
Virtual DOM은 어떻게 작동하고, 어떤 장점이 있나요?
✅ 지원자:
Virtual DOM은 메모리 상에 존재하는 가상의 DOM 트리로, 상태가 변경되면 실제 DOM을 직접 조작하지 않고 가상 DOM에서 변경을 계산(diff)합니다.
이후 최소한의 변경만을 실제 DOM에 반영함으로써 성능 최적화를 유도합니다.
🎯 주제 2: 리렌더링 & 상태 업데이트
❓ 면접관:
상태가 100번 바뀌면, React는 100번 리렌더링 하나요?
✅ 지원자:
아닙니다. React는 내부적으로 batching이라는 기능을 통해 하나의 이벤트 루프 안에서 발생한 상태 변경들을 한 번에 처리합니다.
따라서 여러 번의 상태 변경도 실제로는 하나의 렌더링 사이클로 병합됩니다.
💡 꼬리질문:
batching이 적용되지 않는 상황도 있나요?
✅ 답변 포인트:
네, React scope 밖에서 호출되는 setState, 예를 들어
setTimeout,Promise.then, 또는 이벤트 리스너 바깥에서는 batching이 적용되지 않을 수 있습니다.
하지만 React 18부터는 자동 배치 기능이 도입되어 대부분의 경우 batching이 자동으로 적용됩니다.
🎯 주제 3: key의 역할
❓ 면접관:
React에서 key의 역할은 무엇이며, key를 잘못 지정하면 어떤 일이 벌어지나요?
✅ 지원자:
key는 리액트가 리스트를 렌더링할 때 각 요소를 고유하게 식별하는 값입니다.
key가 일관되지 않거나 index로만 지정할 경우, DOM 재사용이 잘못 이뤄져 불필요한 렌더링이나 상태 꼬임이 발생할 수 있습니다.
💡 꼬리질문:
그럼 key는 항상 고유 ID로 지정해야 하나요?
✅ 답변 포인트:
이상적으로는 고유 ID가 좋습니다. 단, 리스트가 절대 바뀌지 않거나 index 사용이 부작용을 유발하지 않는 단순한 구조라면 index를 써도 무방합니다.
🌐 3. CORS & HTTP 메서드
🎯 주제 1: CORS
❓ 면접관:
CORS가 뭔가요? 단순히 '정책'이라고만 하지 말고 실동작에 기반해서 설명해보세요.
✅ 지원자:
CORS는 브라우저 보안 정책으로, 다른 출처(origin)의 리소스를 요청할 때 서버가 허용해야만 요청이 완료됩니다.
예를 들어 클라이언트가example.com이고 API가api.example.com이면, 브라우저는 요청 전에 OPTIONS 메서드로 사전 확인(Preflight)을 수행합니다.
💡 꼬리질문:
OPTIONS는 언제 발생하죠?
✅ 답변 포인트:
브라우저는 안전하지 않은 요청(PUT, DELETE)이나 커스텀 헤더, 혹은
Content-Type: application/json을 사용하는 POST 요청일 경우 OPTIONS를 먼저 전송해 서버가 이를 허용하는지 확인합니다.
🎯 주제 2: GET vs POST
❓ 면접관:
GET과 POST의 차이를 기술적 관점에서 설명해보세요.
✅ 지원자:
GET은 데이터를 쿼리스트링을 통해 전달하며 브라우저 캐시가 가능하고, URL 길이 제한이 있습니다.
반면 POST는 본문(body)을 통해 데이터 전송이 가능하며, 보안이나 양이 큰 데이터 전송에 적합합니다.
또한 GET은 멱등성(idempotent)이지만, POST는 그렇지 않습니다.
