미리보기

대규모 데이터 검색 경험 개선을 위한 Notion-style 필터 구현

• API 요청 스펙을 살펴본 결과, 필터 페이로드가 유니온 타입 구조를 가지고 있었고 이 구조를 프론트엔드 상태에서 사용하면 복잡한 분기 처리가 필요할 것으로 예상되었습니다.

• 이에 따라, 프론트엔드에서 상태 구조를 API 스펙과 분리하고 변환 함수를 구현해 일관된 데이터 구조로 필터 상태를 처리할 수 있도록 개선했습니다. 그 결과, 이후 API 요청 스펙이 변경되더라도 프론트엔드 상태 관리에 미치는 영향을 최소화해 프론트엔드의 유연성을 확보하고, 독립적으로 유지보수할 수 있는 구조를 만들었습니다.

• 또한, 변환 로직의 단위 테스트와 필터 UI의 통합 테스트를 작성해 예상치 못한 동작을 조기에 발견하고 리팩토링 후에도 기능을 빠르게 검증할 수 있도록 했습니다.

D3를 이용한 선언적 차트 컴포넌트 구현

• 커스텀 스타일링이 필요해 UI 라이브러리 없이 D3만을 활용해 차트 컴포넌트를 구현했습니다.

• D3를 이용한 리액트 컴포넌트를 구현하는 방법을 조사하는 과정에서, 대부분의 자료가 useEffect를 활용한 명령형 방식에 집중되어 있었습니다. 하지만 이 방식은 메서드 체이닝이 반복되어 가독성이 떨어지고, 컴포넌트 마운트 이후 차트가 그려져 깜빡임이 발생했습니다.

• 사용자가 처음 방문하는 인덱스 페이지(대시보드)를 구성하는 대부분의 요소가 차트였고, 마운트될 때마다 발생하는 깜빡임이 초기 사용자 경험에 부정적인 영향을 미쳤습니다. 또한, 인터랙션에 따라 UI가 동적으로 변경되어야 하는 요구사항이 있었는데, 명령형 방식에서는 메서드 체이닝이 복잡하게 얽혀 있어 로직을 이해하기 어려웠고, 추후에 유지보수하기 어렵다고 판단했습니다.

• D3 소스 코드를 분석해 메서드의 동작 방식과 DOM에 어떻게 렌더링 되는지 파악하고, 선언적 렌더링 패턴을 적용해 차트 컴포넌트를 구현했습니다. 그 결과, 코드가 직관적으로 개선되었으며 부드러운 사용자 경험을 제공할 수 있었습니다.

Vanilla-extract -> Tailwind CSS 마이그레이션

• Vanilla-extract의 sprinkles는 사전에 정의된 모든 유틸리티 스타일이 빌드 시 포함되어 CSS 파일 크기가 불필요하게 증가했고, 스타일 충돌을 병합할 도구가 없었습니다. 유틸리티 스타일 사용에는 긍정적이었지만, 작은 커뮤니티와 부족한 레퍼런스로 인해 장기적인 유지보수가 어렵다고 판단하여 기술 스택을 변경했습니다.

• Tailwind CSS는 사용된 클래스만 포함해 CSS를 최적화하며, 강력한 생태계를 갖고 있어 다양한 라이브러리 및 플러그인이 지원되고 있었습니다. 이에 따라 마이그레이션을 진행해 CSS 파일 크기를 최적화하고, 유지보수성을 개선했습니다.

랜딩페이지 성능 최적화

• Google tag manager 같은 서드파티 스크립트로 인한 메인 스레드 부하를 줄이기 위해 Partytown을 도입했습니다.

• 서드파티 스크립트를 Web Worker에서 실행함으로써 PageSpeed Insights 기준 모바일 성능 점수를 50점에서 89점으로 개선했습니다.

Tree shaking 최적화: 페이지마다 JS 번들 크기를 최소 20%에서 최대 60%까지 줄였습니다.

• 일부 페이지에서 JS 번들 크기가 500KB를 초과하면서 최적화가 필요하다고 판단했습니다.

• 먼저, Next.js Bundle Analyzer를 이용해 클라이언트 번들을 분석한 결과, 클라이언트에서 사용되지 않는 next-auth 관련 번들 파일이 포함되어 있음을 확인했습니다. 

• 프로젝트 소스 코드를 살펴본 결과, getServerSession을 가져와 사용하면서 typeof window로 분기 처리를 했음에도 불구하고 관련 모듈이 클라이언트 번들에 포함되었습니다.

• 원인을 파악하기 위해 next-auth@4의 최종 JS 번들 코드, 빌드 설정과 package.json을 분석한 결과, 빌드 시 ESM을 CJS로 변환하고 있었고 CJS 모듈을 내보내면서도 ESM 환경에서 named import를 사용할 수 있도록 구성되어 있어 Tree Shaking이 적용되지 않고 있었습니다. 

• 이를 해결하기 위해 ESM을 지원하는 next-auth@beta 버전을 사용하는 방법과 getServerSession 모듈을 ESM으로 감싸는 방법을 검토했습니다. 마이그레이션 비용은 크지 않았지만, 중요한 인증 로직에 베타 버전을 도입하는 것은 리스크가 크다고 판단하여 적은 코드 수정으로 해결 가능한 후자 방법을 선택했습니다.

• 그 결과, 불필요한 서버 코드가 클라이언트 번들에서 제거되었고, JS 번들 크기를 최대 60%까지 줄였습니다.

코드 품질 향상 주도 (리팩토링 작업, 코드 컨벤션 정립)

• 스꾸딩 동아리에 복귀 후 컨벤션 부재로 인한 코드 품질 저하와 기술 부채 누적 문제가 가장 시급한 문제라고 판단했습니다. 이는 팀원 교체가 잦고, 짧은 임기 동안 코드 품질에 대한 명확한 기준 없이 기능 개발에 집중한 결과였습니다. 이를 해결하지 않으면 장기적으로 유지보수성이 악화될 위험이 컸기 때문에 최우선 과제로 삼고 해결을 추진했습니다.

• 여러 리팩토링 작업을 제안하고 스프린트 계획에 포함해 우선순위를 정해 진행했습니다. 단일 책임 원칙에 따라 컴포넌트를 기능별로 세분화하고, 합성 컴포넌트 패턴을 적용하여 다양한 요구 사항과 확장에 유연하게 대응할 수 있도록 설계했습니다. 그 결과, 코드의 가독성과 유지보수성이 전반적으로 향상되었습니다.

• 반복적으로 발생하는 문제를 수집해 이를 팀의 컨벤션으로 체계화했습니다. ESLint 규칙을 활용해 팀 내 코드 스타일을 통일하고, ESLint로 다룰 수 없는 React와 TypeScript 컨벤션은 팀원들이 쉽게 이해할 수 있도록 잘못된 사례와 올바른 사례를 포함해 작성했습니다.

TanStack Query 도입

• 기존 useEffect 기반 데이터 페칭 로직에서는 비동기 상태 관리의 중복 코드가 발생했고, 캐시 기능이 없어 네트워크 지연이나 불안정한 환경에서 원활한 사용자 경험을 제공하지 못했습니다.

• 이를 해결하기 위해 TanStack Query를 도입하여 비동기 상태 관리를 단순화하고, SWR 전략을 활용해 캐시된 데이터를 즉시 보여주면서 최신 데이터로 갱