RYUNGFOLIO

POTATO-MARKET

모바일 애플리케이션 당근마켓을 재구성한 중고거래 서비스 [감자마켓]

기한

2023/03/03 - 2023/04/21

규모 / 인원

팀 프로젝트 (Front-End 5명)

역할

Front-End

사용 기술

React 앱 개발 효율성을 높이기 위한 수단으로 빠른 개발 서버와 번들링 속도를 제공하는 Vite.js를 채택했습니다.
전역 상태 관리를 단순하고 직관적으로 구현하기 위해 Recoil을 선택했습니다.
전원 프론트엔드 개발자로 구성되어 있기에 맞닥드린 한계를 이겨내기 위하여 serverless DB 솔루션인 Firebase를 선택했습니다. Firestore, Storage, Authentication 등 내장 기능을 적극 활용하여 백엔드 기능을 대체했습니다.

📍 로그인 및 회원가입 기능 구현: Firebase Authentication을 활용하여 사용자의 uid 관리. 새로운 유저의 추가 또는 기존 유저의 로그인 기능을 지원. 로그인이 완료된 유저의 회원 정보는 recoil-persist로 전역 저장하여 local storage에서 관리; 닉네임, 비밀번호, 이용약관 선택 등에 대해서 유효성 검사 진행; browser-image-compression 라이브러리를 이용한 사용자의 프로필 사진 파일 최적화 우선 진행. 이후 화면 렌더링 및 DB 전송 로직 정립
📍 마이페이지 기능 구현: 사용자의 uid를 활용한 탈퇴 및 개인 정보 제거 기능 구현. 탈퇴한 사용자의 프로필 이미지와 게시물 등으로 인한 사이드 이펙트 대응; 사용자의 프로필 이미지 변경 및 제거, 회원 정보 수정 기능 구현
📍 성능 개선 리팩토링: 이미지 최적화를 위한 vite-plugin-imagemin 등의 라이브러리 도입 및 WebP로의 포맷 변환 로직 적용; 최초 렌더링 시 모든 페이지를 렌더링하지 않고 사용할 컴포넌트만 불러올 수 있도록 lazy 함수를 활용한 코드 스플리팅 적용; 접근성 검토를 통한 lighthouse 점수 개선 (as-is: 70 to-be: 90)
📍 타입스크립트 마이그레이션 연습: 타입 안정성을 확보하기 위한 방법으로 TypeScript에 대해 팀원들과 함께 학습. 서브 브랜치를 활용하여 마이그레이션 시도