미리보기

Traffic Analysis: 무전 신호 수신 데이터를 실시간으로 수집·분석하여 발신 위치를 추적하고, 신호 패턴과 타이밍을 지속적으로 모니터링하는 트래픽 분석 솔루션

• 백엔드와 프론트엔드 코드가 혼재되어 있던 jQuery 기반의 Genetelella 프로젝트를 React로 마이그레이션

• React 기반의 컴포넌트 사용으로 재사용성을 높이고, TypeScript 도입으로 코드 안정성 확보

• 기존 fetch로 작성된 코드를 Axios 라이브러리를 사용하여 코드를 더 간단하게 리팩토링하여 코드의 유지보수성과 가독성을 높임

• CORS 정책으로 쿠키가 요청에 제대로 포함되지 않았던 문제를 프록시 설정을 통해 해결함으로써 User 객체가 Session 데이터에 정상적으로 담기게 함

Virtualization을 이용하여 대량의 카드 리스트 구현

• 무한스크롤로 구현된 리스트에서 일정 개수 이상에서 프레임드롭 현상이 나타나는 것을 발견

• 대량의 데이터를 렌더링할 때 DOM 부담을 최소화하고 렌더링을 최적화하기 위해서 TanStack Virtual을 이용하여 렌더링되는 DOM 요소를 10개 내외로 줄임

• 약 2천개의 데이터 로드 시 메모리 사용량 48% 감소(183MB → 94.7MB)

SSE(Server-Sent Events)를 활용한 실시간 알림 수신

• EventSource Web API를 사용하여 한 번의 구독 후 실시간으로 알림을 받으며, 연결이 끊어졌을 경우 헤더에 자동으로 마지막 이벤트 ID를 담아 재요청할 수 있도록 처리

• SSE를 사용하여 사용자가 업적을 달성할 경우 실시간으로 알림을 수신하고, 사용자가 직접 작성한 팁을 메인화면에서 랜덤으로 공유하게 함으로써 사용자가 흥미를 느끼고 지속적이고 적극적인 참여가 가능하게 유도

Axios 인스턴스를 활용한 토큰 관리

• AccessToken이 만료되었음에도 토큰을 재발급하는 API 호출과 로그인 페이지로 리다이렉트가 되지 않는 상황 발생

• API 호출시 사용하는 axios instance에서 요청 인터셉터에서 처리하고 있던 axiosError 분기 처리 코드를 응답 인터셉터로 이동하여 해결

Shadcn/ui Calendar 컴포넌트 의존성 충돌 해결

• Shadcn/ui Calendar 컴포넌트가 사용하는 react-day-picker 8.10.1이 React 19 및 date-fns 4.1.0과 호환되지 않는 문제를 발견

• 공식 문서를 참고하여 react-day-picker를 최신 버전(9.6.7)으로 업그레이드하고 변경된 속성들을 직접 커스텀하여 의존성 충돌 없이 지출/수입 내역을 한 눈에 보여주는 캘린더 컴포넌트를 생성

데이터 시각화 컴포넌트 구현

• Recharts 라이브러리를 활용해 소비 통계를 직관적인 도넛 차트로 시각화하는 재사용 가능한 컴포넌트를 구현

카카오톡 공유하기 기능

• Kakao Developers에서 제공하는 공유하기 API를 사용하여 실제 카카오톡 친구를 서비스에 초대할 수 있고, 함께 챌린지를 진행할 수 있게 하여 사용자의 접근성을 높임

Next.js App Router 아키텍처 활용

• 직관적인 페이지 구조를 사용하고 중첩 레이아웃을 활용하여 공통 UI를 효율적으로 관리

서버 상태 관리 및 최적화

• TanStack Query로 효율적인 서버 데이터 관리 구현, Query Key를 세분화하여 중복된 데이터 요청을 방지하고, 데이터 변경 시점에 invalidateQueries를 활용하여 캐시된 데이터를 항상 최신 정보로 유지

전역 상태 관리를 통한 클라이언트 상태 관리 시스템 구축

• Zustand를 활용한 전역 상태 관리로 모달 컨트롤 및 모달 데이터를 효율적으로 관리
  Props-drilling 방지 및 컴포넌트 간 결합도 감소로 코드 유지보수성 향상과 불필요한 리렌더링 최소화를 통한 성능 최적화

React-Hook-Form과 Zod를 사용한 필드 관리

• 다수의 입력 필드를 공통으로 사용하며, 각 필드에 유효성 검사 진행

• React-Hook-Form 라이브러리를 사용하여 상태를 직접 생성하여 관리하지 않고 간단하게 입력필드 구현

• Zod formSchema를 활용해 타입 안전성 확보, 선언적인 유효성 검사와 적절한 에러 메시지 커스터마이징을 통하여 복잡한 로직 단순화

보안 라우팅 아키텍처 구현

• 로그인 여부에 따라 접근할 수 있는 PrivateRouter, PublicRouter 컴포넌트를 활용한 세션 인증 기반 라우팅 시스템 구축으로 권한에 따른 페이지 접근 제어 및 보안 강화

• 보안 라우팅 컴포넌트를 모듈화하여 관리함으로써 새로운 페이지 추가 시에도 보안 정책을 바로 적용 가능하게끔 설계

Shadcn/ui 를 이용한 디자인 시스템 구축

• select, dropdown menu 등 다양한 컴포넌트를 커스터마이징하여 일관된 디자인 시스템을 구현하고 사용자 경험(UX)을 최적화
  재사용 가능한 컴포넌트를 생성하여 개발자 경험(DX) 상승

사용자 중심 UI/UX 설계

• 에러 상황 별로 상세 에러 메시지 토스트 알림을 구현하여 명확한 피드백을 제공

• Tailwind 브레이크 포인트를 활용하여 다양한 디바이스에 자동 대응하는 반응형 레이아웃 설계로 사용자 접근성 향상

협업 툴을 활용한 효율적인 개발 프로세스

• 백엔드 개발자와 Swagger 및 Notion 기반 API 명세서 공유를 통한 체계적인 서버-클라이언트 연동

• Figma를 활용한 디자인 시스템 구축으로 일관성 있고 확장 가능한 UI/UX 컴포넌트 설계 및 Storybook을 통해 피드백을 반영하는 협업 프로세스 구현

GitHub PR 및 이슈 템플릿 적용

• PR 템플릿과 이슈 템플릿을 직접 제작하여 팀원들과의 협업 효율성 증대

• 기능 개발 내용과 에러 해결 과정을 명확하게 정리하고 공유하여 팀 전체의 개발 흐름을 투명하게 관리하고 의사소통을 간소화

Next.js 14의 SSR을 활용한 초기 페이지 로딩 최적화 및 하이브리드 데이터 Fetching 전략

• 서버에서 초기 데이터를 prefetch한 후 dehydration 과정을 거쳐 클라이언트에 전달 후, 클라이언트 사이드의 queryClient와

  연결하여 서버와 클라이언트 간 데이터를 유기적으로 관리

짧은 시간 중복되는 API 요청에 대해 debounce를 이용하여 과도한 API 호출 제어

• 리액트 훅 라이브러리의 useDebouceValue를 사용하여 마지막 입력 후 500ms 동안 입력이 없으면 API를 호출하게 함 이를 통해 이메일 필드 api 호출횟수 80% 이상 감소

단위/E2E 테스트 구축 및 관리 및 UI 컴포넌트 테스트 자동화

• Jest를 활용한 단위 테스트와 Playwright를 이용한 E2E 테스트를 구축하여 코드 품질을 향상시키는 테스트 환경 조성

• Storybook으로 공통 컴포넌트 및 페이지 별 UI를 문서화하고, 로그인/회원가입 테스트 자동화

AWS 클라우드 마이그레이션 및 서버 복구

• 프로젝트 종료 후 서버 다운 상황에서 AWS RDS와 EC2를 활용하여 데이터베이스와 서버를 마이그레이션하고 시스템을 성공적으로 복구