이 질문 뒤에 면접관이 확인하려는 것은 따로 있습니다.
대량 데이터를 프론트엔드에서 다룰 때 가장 먼저 고민한 것은 모든 데이터를 한 번에 렌더링하지 않는 것이었습니다. 수만 건의 리스트를 한 번에 그리면 브라우저가 버벅이는 것을 직접 경험했기 때문입니다. 그래서 가상 스크롤(virtual scrolling) 방식을 도입하였는데, 화면에 보이는 항목만 렌더링하고 나머지는 계산만 해두는 방식입니다. 이것만으로도 성능이 크게 개선되었습니다. 데이터가 많을수록 화면에 보여주는 것과 메모리에 올려두는 것을 분리하는 설계가 중요하다는 것을 배웠습니다. 단순히 기능을 구현하는 것을 넘어, 사용자 경험을 유지하는 것이 프론트엔드 개발의 핵심입니다.
대량 데이터 시각화에서는 어떤 라이브러리를 쓰느냐보다 어떻게 쓰느냐가 더 중요했습니다. Chart.js를 쓰다가 데이터가 많아지자 렌더링이 느려졌는데, `Canvas` 기반으로 직접 그리는 방식으로 바꿨어요. 처음엔 어렵게 느껴졌지만, DOM 조작을 줄이면 속도가 크게 달라진다는 걸 직접 확인했습니다. 또 차트 데이터를 서버에서 집계해서 전달하는 방식으로 클라이언트 부하도 줄였어요.
클라이언트와 서버 역할을 나누는 것이 대량 데이터 처리의 핵심이에요. 화면에 필요한 것만 전달하고, 나머지는 서버에서 처리하게 하는 설계가 더 현실적이에요. 클라이언트는 보여주는 역할에 집중하게 해야 성능이 유지됩니다.
대량 데이터를 다룰 때는 프론트에서 모든 걸 처리하려 하지 않는 것이 중요합니다. 처음에 API에서 전체 데이터를 다 받아와서 클라이언트에서 필터링하다가, 데이터가 늘어나면서 응답 속도가 느려지는 문제를 겪었어요. 그 이후엔 필터 조건을 쿼리 파라미터로 넘겨서 서버에서 필터링된 결과만 받아오는 방식으로 바꿨습니다. 데이터 흐름을 어디에서 처리할지 설계하는 것이 성능의 핵심이라는 걸 그때 배웠어요.
데이터 레이어 분리 설계가 없으면 기능이 늘어날수록 성능이 저하됩니다. 프론트엔드 개발에서도 아키텍처적 사고가 중요하다는 걸 느꼈어요. 기능보다 구조가 먼저라는 걸 배웠습니다.
답변에서 흔히 빠지는 것들 — 빠져 있으면 꼬리질문이 깊어집니다.
이 질문에 이어 쿠팡 프론트엔드 면접관이 던질 가능성이 높은 후속 질문.
이 페이지의 질문·답변·꼬리질문은 유사 직군 채용 시장의 공개된 면접 후기·커뮤니티 게시물을 분석해 구성한 학습 자료입니다. 특정 회사가 실제로 이 질문을 출제했다는 것을 보장하지 않으며, 모든 예시는 우문현답이 직접 작성한 창작물입니다. 해당 회사의 공식 입장과는 무관합니다. 회사 측의 정정 요청이 있을 경우 24시간 이내에 응답·수정합니다.