Next.js 주니어 기술면접
새 면접Q. Next.js에서 Hydration의 개념을 설명하고, Hydration 과정에서 발생할 수 있는 Hydration Mismatch 에러의 원인과 해결 방법을 설명해주세요.
서버에서 렌더링된 HTML과 클라이언트에서 렌더링되는 결과가 다를 때 발생하는 문제를 생각해보세요.
Hydration은 서버에서 렌더링된 정적 HTML에 클라이언트 측 JavaScript를 연결하여 인터랙티브하게 만드는 과정입니다. Hydration Mismatch는 서버와 클라이언트의 렌더링 결과가 다를 때 발생하며, 주로 Date.now()나 Math.random() 같은 비결정적 값, 브라우저 전용 API(window, localStorage), 조건부 렌더링에서 발생합니다. 해결 방법으로는 useEffect를 사용해 클라이언트에서만 실행되도록 하거나, suppressHydrationWarning 속성을 사용하거나, 서버와 클라이언트에서 동일한 초기값을 사용하는 방법이 있습니다. 특히 시간 관련 데이터는 서버에서 props로 전달받아 사용하는 것이 안전합니다.
- • Hydration은 정적 HTML에 JavaScript를 연결하는 과정
- • 서버와 클라이언트의 렌더링 결과 불일치가 원인
- • useEffect나 suppressHydrationWarning으로 해결
- • 비결정적 값 사용 시 주의 필요
실시간 시계나 사용자 로그인 상태 표시 등 클라이언트 데이터를 렌더링할 때 Hydration Mismatch를 방지해야 합니다.
suppressHydrationWarning을 남용하면 어떤 문제가 발생할 수 있을까요?
Q. 데이터베이스 정규화의 개념과 1차, 2차, 3차 정규화의 차이를 설명하고, 과도한 정규화가 실무에서 오히려 성능 문제를 일으킬 수 있는 이유를 설명해주세요.
정규화는 데이터 중복을 제거하는 과정이지만, JOIN 연산이 많아지면 조회 성능에 영향을 줄 수 있습니다.
데이터베이스 정규화는 데이터 중복을 제거하고 무결성을 보장하기 위해 테이블을 분리하는 과정입니다. 1차 정규화는 각 컬럼이 원자값을 가지도록 하고, 2차 정규화는 부분 함수 종속을 제거하며, 3차 정규화는 이행적 함수 종속을 제거합니다. 하지만 과도한 정규화는 여러 테이블을 JOIN해야 하므로 조회 성능이 저하될 수 있습니다. 실무에서는 읽기가 많은 경우 의도적으로 비정규화(denormalization)를 적용하여 자주 함께 조회되는 데이터를 한 테이블에 두기도 합니다. Next.js API에서 복잡한 JOIN 쿼리보다 단순한 쿼리가 더 빠른 응답을 제공할 수 있습니다.
- • 정규화는 데이터 중복 제거와 무결성 보장
- • 1차는 원자값, 2차는 부분 종속 제거, 3차는 이행 종속 제거
- • 과도한 정규화는 JOIN 증가로 성능 저하
- • 실무에서는 읽기 성능을 위해 비정규화 활용
전자상거래 사이트에서 주문 내역 조회 시 상품명을 매번 JOIN하는 대신 주문 테이블에 상품명을 중복 저장하여 조회 속도를 개선합니다.
Next.js 프로젝트에서 사용자 프로필과 게시글 데이터를 함께 자주 조회한다면, 어떤 비정규화 전략을 적용할 수 있을까요?
Q. Next.js 애플리케이션에서 페이지를 이동할 때마다 메모리 사용량이 계속 증가하는 현상이 발생했습니다. 이러한 메모리 누수(Memory Leak)가 발생하는 주요 원인과 이를 디버깅하고 해결하는 방법을 설명해주세요.
컴포넌트가 언마운트될 때 정리되지 않은 리소스들을 찾아보세요.
메모리 누수는 주로 컴포넌트가 언마운트될 때 이벤트 리스너, 타이머, 구독(subscription)이 정리되지 않아 발생합니다. setInterval이나 setTimeout을 사용한 후 clearInterval, clearTimeout을 호출하지 않거나, addEventListener를 removeEventListener 없이 사용하거나, WebSocket이나 외부 라이브러리 구독을 해제하지 않으면 메모리 누수가 발생합니다. 디버깅은 Chrome DevTools의 Memory 탭에서 Heap Snapshot을 비교하거나 Performance 탭으로 메모리 증가 패턴을 확인합니다. 해결 방법은 useEffect의 cleanup 함수에서 모든 리소스를 정리하고, 비동기 작업 중 컴포넌트가 언마운트되면 상태 업데이트를 중단하는 플래그를 사용하는 것입니다.
- • 이벤트 리스너, 타이머, 구독이 정리되지 않으면 메모리 누수 발생
- • Chrome DevTools의 Memory 탭으로 디버깅
- • useEffect cleanup 함수에서 리소스 정리 필수
- • 비동기 작업 중 언마운트 시 상태 업데이트 방지
실시간 채팅 기능에서 WebSocket 연결을 정리하지 않으면 페이지 이동 후에도 연결이 유지되어 메모리와 네트워크 리소스가 낭비됩니다.
React 18의 StrictMode에서 useEffect가 두 번 실행되는 것이 메모리 누수 디버깅에 어떻게 도움이 될까요?
아직 댓글이 없습니다. 첫 번째 댓글을 남겨보세요!