React 미드레벨 CS 기초 면접

GET, PUT, DELETE는 멱등성을 가지며 같은 요청을 여러 번 해도 결과가 동일하지만, POST와 PATCH는 멱등성이 보장되지 않습니다. PUT은 리소스 전체를 교체하는 용도로 사용하며 모든 필드를 포함해야 하고, PATCH는 리소스의 일부만 수정할 때 사용합니다. 예를 들어 사용자 프로필 전체를 업데이트할 때는 PUT을, 특정 필드(예: 닉네임)만 변경할 때는 PATCH를 사용합니다. React에서 폼 전체 제출은 PUT, 개별 필드 자동 저장은 PATCH로 구현하는 것이 적절합니다.

메시지 ID를 키로 하는 Map 또는 정규화된 객체 구조를 사용하는 것이 효율적입니다. 배열의 경우 특정 메시지 검색이 O(n)이지만, Map은 O(1)에 접근 가능합니다. 메시지 순서는 별도로 ID 배열을 유지하거나 LinkedList 구조를 활용할 수 있습니다. 읽음 상태 업데이트 시 배열은 해당 인덱스를 찾고 불변성을 유지하며 복사해야 하지만, Map은 직접 해당 메시지만 업데이트할 수 있어 성능상 유리합니다. 수천 개의 메시지가 있을 때 특히 차이가 두드러집니다.

JavaScript의 Array.sort()는 V8 엔진 기준으로 TimSort(Merge Sort와 Insertion Sort의 하이브리드)를 사용하며, 평균 O(n log n)의 시간 복잡도를 가집니다. 안정 정렬은 동일한 값을 가진 요소들의 상대적 순서를 유지하는데, 다중 조건 정렬 시 중요합니다. 예를 들어 먼저 날짜로 정렬한 후 우선순위로 정렬할 때, 안정 정렬이 아니면 같은 우선순위 내에서 날짜 순서가 깨질 수 있습니다. React에서 테이블 컴포넌트의 다중 컬럼 정렬이나 정렬된 상태를 유지하며 필터링할 때 안정 정렬이 필수적입니다.

N+1 쿼리 문제는 부모 데이터 N개를 조회한 후, 각 부모마다 관련 자식 데이터를 조회하여 총 N+1번의 쿼리가 발생하는 현상입니다. REST API에서는 적절한 JOIN이나 include 파라미터로 필요한 데이터를 한 번에 가져오도록 엔드포인트를 설계해야 합니다. GraphQL에서는 DataLoader를 사용해 배칭과 캐싱으로 해결할 수 있습니다. 프론트엔드에서는 브라우저 개발자 도구의 Network 탭에서 동일 패턴의 반복적인 요청을 확인하고, React Query의 devtools로 쿼리 패턴을 분석하여 백엔드 팀에 피드백할 수 있습니다.

JavaScript 메모리 누수의 주요 원인은 해제되지 않은 이벤트 리스너, 타이머, 클로저에 의한 참조 유지, 전역 변수 남용 등입니다. React에서는 useEffect에서 cleanup 함수를 누락하거나, unmount된 컴포넌트에서 setState 호출, 큰 데이터를 참조하는 클로저 등이 문제됩니다. Chrome DevTools의 Memory 탭에서 Heap Snapshot을 여러 시점에 찍어 비교하고, Detached DOM 노드나 계속 증가하는 객체를 찾아낼 수 있습니다. Allocation Timeline으로 메모리 할당 패턴을 시각화하여 문제 지점을 특정할 수 있습니다.