미리보기

• Next.js 마이그레이션과 TypeScript, React-Query 도입으로 Vue 기반 프로젝트의 유지보수와 성능을 효율적으로 개선

• 데이터 기반 마케팅 솔루션 제공 B2B 서비스의 프론트엔드 개발을 전담하여, 지도 성능을 최적화하여 렌더링 시간을 40% 단축, 데이터 렌더링 최대치 증가

• 기존 사내 admin 페이지와 개발자 문서 페이지의 유지보수를 담당하며, vite로 마이그레이션 하여, 빌드 속도 60% 개선으로 개발 사이클 단축 및 생산성 향상

• 신규 프로젝트의 초기 설정부터 CI/CD 파이프라인 구축 및 배포 자동화까지 파이프라인에서는 node_modules를 캐시하여, install 시간 약 2분 절약

• 상황 및 문제점:

  • 기존 프로젝트는 Vue와 JavaScript 기반으로 작성되어 있었으며, 재직 중인 FE 개발자들은 Vue에 익숙하지 않음.

  • JavaScript 기반의 프로젝트는 유지보수에 어려움이 있을 것으로 판단됨.

• 해결 방안:

  • Next.js로 마이그레이션하고, TypeScript와 React-Query를 추가하여 기술 스택을 개선함.

• 진행 과정:

  • 마이그레이션은 기존 기능(hotfix와 feature)을 우선 처리한 후, 점진적으로 진행.

  • 기존 Vue 레이아웃 안에서 iframe을 사용하여 Next.js를 단계적으로 적용.

  • React-Query의 stale time을 조정하여 불필요한 API 호출을 줄이고, 성능을 최적화함.

  • SSG와 SSR을 상황에 맞게 사용하여 렌더링 최적화.

• 성과:

  • Vue에서 Next.js로 성공적인 마이그레이션을 통해 유지보수 시간 약 30% 단축, 확장성 향상.

  • TypeScript 도입으로 코드 안정성 향상 및 개발 생산성 증가.

  • React-Query로 API 호출 최적화를 통해 불필요한 API 호출 제거

  • 상용 중인 프로젝트에서 기능 중단 없이 기술 스택 전환 성공.

프로젝트 X: 지도 성능 최적화

• 프로젝트 개요:

  • 로플랫 X는 네이버 지도를 사용하여 지오팬스, 마커, 서클 등을 다루며, 기존에는 최대 100개의 데이터만 표현 가능했습니다. 그러나 고객사의 요청으로 최대 3천 개의 데이터를 처리하도록 수정이 필요했습니다.

• 상황 및 문제점:

  • 지도는 최대 100개의 인스턴스만 처리할 수 있었고, 500개 이상의 인스턴스를 그릴 때 심각한 성능 저하가 발생했습니다. 지도 이동 및 줌 레벨 변경 시 API 응답 후 데이터를 렌더링하는 과정에서 지연이 발생했습니다.

• 해결 방안:

  • 중앙 위치와 줌 레벨에 따라 보이는 인스턴스만 지도에 그리는 방식으로 최적화했습니다.

  • 클러스터링 기법을 도입하여 줌 레벨이 낮을 경우 인접한 인스턴스를 하나로 묶어 처리하고, 줌 레벨이 높아지면 개별적으로 표시하도록 구현했습니다.

  • 특정 크기의 인스턴스(circle 및 polygon)는 클러스터링에서 제외하여 정확한 데이터를 시각화 했습니다.

• 성과:

  • 100개의 제한을 극복하고 최대 3천 개의 데이터를 효율적으로 렌더링할 수 있도록 개선했습니다.

  • 클러스터링 도입으로 성능 저하 없이 500개 이상의 인스턴스를 처리할 수 있었으며, 지도의 사용성을 크게 향상시켰습니다.

  • 지도 렌더링 속도를 40% 단축하고, API 호출 효율을 개선하여 성능을 최적화 했습니다.

프로젝트 개요:

• Next.js 애플리케이션을 Google Cloud Platform (GCP)의 Cloud Build와 Cloud Run을 사용하여 Docker 기반으로 배포하여 배포 프로세스의 효율성과 확장성을 향상.

상황 및 문제점:

• 백엔드는 이미 GCP로 배포 관리되고 있는 상황에서, Vercel과 GCP로 관리 포인트가 나뉘어 관리의 복잡성이 증가.

• 웹 팀장님의 요청으로 Vercel에서 GCP로 이관하여 비용 효율성을 높이고 관리 포인트를 통합할 필요성 제기.

해결안:

• Next.js 애플리케이션을 Docker 컨테이너로 패키징.

• GCP의 Cloud Build를 사용하여 CI/CD 파이프라인 구축.

• Cloud Run을 사용하여 컨테이너 기반의 서버리스 환경에 애플리케이션 배포.

성과:

• Docker를 사용한 컨테이너화로 일관된 개발 및 배포 환경 구축.

• CI/CD 파이프라인 자동화로 배포 효율성 증가.

• Cloud Run을 통한 서버리스 환경에서의 비용 절감 및 운영 간소화.

사내 FE 개발 프로세스 개선

• 프로젝트 개요: 사내 프론트엔드 개발 프로세스를 개선하고, 규칙 있는 개발 환경을 구축하기 위한 프로젝트를 주도.

Firebase로 버전 관리 개선 (2024.03):

• 상황 및 문제점: 새로운 버전 배포 후에도 사용자가 알아차리지 못하는 문제 발생. 기존에는 Firebase 콘솔을 직접 수정해야 했음.

• 해결 방안: Firebase의 onSnapshot 기능을 사용해 실시간 버전 확인 및 알림 팝업 제공, admin 페이지에서 수정 가능하도록 구현.

• 성과: 버전 관리 자동화로 사용자 경험 향상 및 구 버전 사용 방지.

테스트 코드 추가 (2024.05):

• 상황 및 문제점: 새로운 기능 구현 시 예측하지 못한 에러 발생.

• 해결 방안: 주요 기능에 대해 E2E 및 통합 테스트를 도입. Jest, React Testing Library, Playwright를 사용하여 테스트 자동화.

• 성과: 테스트 자동화를 통해 예측하지 못한 에러를 사전에 발견하고, 코드 안정성 향상.

개발자 문서 자동화 (2024.07 ~ 2024.08):

• 상황 및 문제점: SDK 팀의 문서 업데이트가 수동으로 이루어져, 버그 및 불편함 발생.

• 해결 방안: Docusaurus를 사용하여 문서 자동화 및 SDK 개발자가 직접 문서를 수정할 수 있는 페이지 구성. Bitbucket API를 사용한 문서 배포 자동화.

• 성과: 문서 관리 자동화로 개발 생산성 및 오류 수정 속도 향상.

사내 Admin Page: Vite로 마이그레이션 (2024.09):

• 상황 및 문제점: CRA로 개발된 admin 페이지에서 HMR 성능 문제 및 빌드 속도 저하 발생.

• 해결 방안: Webpack 기반을 Vite로 마이그레이션하여 성능 개선.

• 성과: 빌드 시간 60% 단축 (기존 3분에서 1분으로 축소), HMR 성능 개선으로 개발 경험 향상.

Clarity와 GA를 통한 사용자 행동 분석 및 인사이트 도출 (2024.10)

• 상황 및 문제점: 사용자 행동을 정량적으로 분석할 수 있는 도구 부재로, 페이지별 사용자 경험에 대한 데이터 기반 의사결정 어려움.

• 해결 방안:

1. Microsoft Clarity를 도입해 사용자 클릭, 스크롤, 이탈 데이터 시각화 및 히트맵 분석.

2. Google Analytics를 활용해 유입 경로와 사용자 흐름 분석.

3. 페이지 성능과 UX 관련 데이터를 기반으로 개선점 도출 및 피드백 반복.

• 성과:

페이지별 사용자 경험 분석 보고서를 통해 사용자 이탈률 15% 감소 및 버튼 클릭 전환율 20% 향상.