면접관이 이 한 문장으로 확인하려는 것들. 각 갈래를 알면 답의 뼈대가 잡혀요.
팀 프로젝트에서 React로 실시간 채팅 목록을 구현할 때, 새 메시지가 오면 리스트 전체가 불필요하게 다시 렌더링되는 문제를 겪었습니다. 처음에는 원인을 몰라 콘솔 로그로 렌더링 시점을 하나씩 추적했고, 결국 key 값을 인덱스로 쓰고 있던 것이 원인임을 발견했습니다. 메시지 고유 id로 key를 바꾸자 렌더링 횟수가 눈에 띄게 줄었고, 스크롤 버벅임도 사라졌습니다. 이 경험으로 React의 렌더링 최적화가 단순 문법이 아니라 데이터 구조 설계와 맞닿아 있다는 것을 배웠습니다.
Vue로 장바구니 기능을 만들 때 배열 항목의 속성을 직접 수정했는데 화면이 갱신되지 않는 문제가 있었습니다. 처음에는 버그라고 생각해 몇 시간을 콘솔 로그로 값만 확인했지만 변화가 없었습니다. 결국 공식 문서를 처음부터 다시 읽으며 Vue의 반응형 시스템이 특정 방식의 변경만 감지한다는 것을 알게 됐습니다. Vue가 제공하는 배열 변경 메서드로 코드를 고치자 문제가 즉시 해결됐고, 이후 팀 위키에 이 사례를 정리해 남겼습니다. 이 경험을 계기로 프레임워크를 쓸 때 결과만 흉내 내지 않고 내부 동작 방식을 먼저 이해하는 습관을 갖게 됐습니다.
React로 만든 검색 결과 페이지에서 입력할 때마다 화면이 버벅이는 문제가 있었습니다. 개발자 도구의 프로파일러로 렌더링 시간을 측정해보니 매 입력마다 필터링 로직 전체가 다시 실행되고 있었습니다. 저는 입력값에 디바운스를 적용하고 무거운 연산은 메모이제이션으로 감싸 불필요한 재계산을 줄였습니다. 적용 후 입력 지연이 눈에 띄게 사라졌고, 팀원들에게도 이 방식을 공유했습니다. 성능 문제는 감이 아니라 도구로 직접 측정해야 정확한 원인을 찾을 수 있다는 것을 배웠습니다.
같은 실수가 반복돼요. 이것만 피해도 절반은 갑니다.
진짜 면접은 두 번째 질문부터예요. 이 답 뒤에 따라올 법한 것들.