미리보기

구현 기능

• 포트원 SDK를 통해 다양한 결제 옵션을 제공하여 결제 편의성 향상
• 티켓 정보를 로컬 스토리지에 저장하여 장바구니 상태가 유지되도록 구현
• 필터 및 정렬 옵션을 통해 이벤트 검색 기능 향상

React DevTools 프로파일러를 활용한 컴포넌트 렌더링 성능 개선

• 문제: 복잡한 사용자 인터페이스로 인해 컴포넌트 렌더링 시간이 비효율적으로 증가
• 해결: React DevTools 프로파일러로 컴포넌트 렌더링 병목 지점을 식별하고, 메모이제이션과 코드 스플리팅 기법을 적용하여 렌더링 속도를 50% 향상시킴

Bundle Analyzer로 빌드 최적화

• 문제: 애플리케이션의 초기 빌드 시간이 사용자 경험을 저하시키는 주요 요인으로 작용함
• 해결: Vite 환경에서 Bundle Analyzer를 사용하여 빌드 과정을 최적화하고, 불필요한 종속성을 제거 → 필수 리소스만 포함시켜 빌드 시간 47% 개선 (11.66초 -> 6.15초)

Lighthouse를 기반으로 LCP 성능 개선

• 문제: 페이지 로드 성능 저하로 사용자가 컨텐츠를 보기 위한 시간이 길어지는 문제가 발견됨
• 해결: Lighthouse 분석을 통해 주요 성능 병목 지점을 식별하고 이미지 리사이징 등을 통해 최적화해 LCP 63% 감소 (3.0초 -> 1.1초), 성능 점수 23% 증가시킴 (75점 -> 92점)

Github: https://github.com/soprue/eventrix
Service: https://eventrix.vercel.app/

구현 기능

• JWT를 사용하여 사용자 인증을 구현하고, 액세스 토큰을 통해 사용자의 로그인 상태를 유지
• Kakao Maps API를 활용해 사용자가 원하는 장소를 지도에서 선택하고, 해당 장소에 대한 후기를 등록할 수 있는 기능 구현
• ‘공유하기’ 팝업을 통해 콘텐츠 확산 및 사용자 참여도 증대

지도 기반 주소 검색의 성능 개선

• 문제: 사용자가 지도 상의 마커를 드래그할 때마다 주소 정보 조회 함수가 과도하게 호출되어 응답 시간이 느려지고 전체적인 성능 저하가 발생함
• 해결: 디바운스 기법을 적용하여 마커 이동 후 일정 시간이 지나기 전에는 주소 정보 조회 함수 호출을 중지함으로써 함수 호출 횟수를 대폭 감소시킴

단계적 폼 퍼널 관리로 효율성 증대

• 문제: 후기 등록 시 여러 단계로 이루어진 폼 처리 과정에서 다음 단계로의 전환과 데이터 관리가 복잡해지면서 사용자 경험이 저하됨
• 해결: React의 useState 훅을 사용하여 각 단계별로 폼 데이터를 관리하고, 각 단계의 진행 상태를 명확히 표시하는 내비게이션 시스템을 구현함

Jira를 활용한 프로젝트 관리

• 문제: 프로젝트 초기 단계에서 작업의 동시 진행으로 인해 팀원 간의 혼선과 업무 우선순위 설정의 어려움이 발생함
• 해결: Jira를 도입하여 프로젝트의 모든 태스크를 체계적으로 정의하고 관리함 → 정기적으로 진행되는 회의에서는 논의된 내용을 Jira에 기록하여 모든 팀원이 최신 프로젝트 상황을 명확히 파악할 수 있게 함으로써, 팀 협업의 효율성과 프로젝트 전반의 품질을 향상시킴

Github: https://github.com/eodya/eodya-frontend

구현 기능

• Zustand를 활용해 모달 상태를 전역에서 관리하여 효율적으로 모달 컴포넌트를 관리할 수 있게 함

• 재사용 가능한 공통 컴포넌트 설계로 코드 중복 감소 및 유지보수성 향상

모노레포 도입

• 문제: 기존의 코드베이스에서 UI 컴포넌트와 비즈니스 로직이 혼합되어 있어 유지보수와 확장 작업이 어려웠음

• 해결: 모노레포 구조를 도입하기로 결정하고, Next.js와 TypeScript에 최적화된 터보레포를 도구로 사용하여 프로젝트를 여러 패키지로 분할함 → 디자인 킷과 서비스 애플리케이션을 분리하여 각각 독립적으로 관리 및 확장이 가능하도록 하여 전체 프로젝트의 유지보수성과 확장성을 크게 개선함

Open Graph 메타데이터 최적화

• 문제: 소셜 미디어 플랫폼에서 공유될 때 페이지 메타데이터가 적절히 표현되지 않아, 사용자의 클릭 유도가 저하되는 문제가 발생함

• 해결: Next.js 14의 generateMetadata 함수를 활용하여, Open Graph 프로토콜을 사용해 메타데이터를 구체적으로 정의하고 최적화함

디자인 시스템과 React Hook Form 통합

• 문제: 프로젝트 초기에 구축한 디자인 시스템의 컴포넌트들이 React Hook Form의 폼 관리 요구 사항과 호환되지 않아, 폼 관리에 있어 일관성과 효율성이 떨어짐

• 해결: 기존 디자인 시스템 컴포넌트들을 확장하여 React Hook Form과의 통합을 개선함 → 폼 필드, 유효성 검사 상태 및 에러 메시지를 표시할 수 있도록 컴포넌트의 프로퍼티를 수정하고, 사용자 입력 관리와 상태 추적을 보다 간편하게 처리할 수 있도록 기능을 강화함

Github: https://github.com/sfac-team-5/team-5-sfaclog

회사 웹사이트 리뉴얼 및 포트폴리오 사이트 개발

• 회사 대표 웹사이트 리뉴얼: 오래된 디자인과 비효율적인 UX를 개선하여 반응형 디자인과 직관적인 메뉴 구조를 도입 → 페이지별 방문자 수와 체류 시간 30% 증가
• 포트폴리오 사이트 개발: 회사의 성과와 프로젝트를 한눈에 볼 수 있도록 카테고리별로 구성하여 사용자 경험을 극대화한 포트폴리오 사이트 구축

자료 구조와 알고리즘에 대한 심도 있는 공부를 했으며, 성능 최적화에 집중한 프로젝트를 진행했습니다. 이를 통해 코드의 효율성과 성능을 높이는 방법을 체득했습니다.

디자이너와의 협업을 통해 짧은 시간 내에 효율적으로 협업하는 방법을 배웠으며, 디자인과 사용자 경험(UX)의 중요성을 깊이 이해하게 되었습니다. ‘SFACLOG’로 팀 프로젝트 우수팀에 선정되었습니다.

'디지털 격차'를 주제로 한 해커톤에 참여하였으며, 교내에서 리액트 스터디를 진행하여 리액트의 동작 원리 등 기초 지식을 체계적으로 익힐 수 있었습니다.