프론트엔드 개발 포트폴리오 | 프로젝트 정리 공유 서비스
내일배움캠프 4기 웹 개발 과정 React 트랙 수료생 최종 프로젝트 'Codefolio'를 소개합니다.
Aug 16, 2023
⭐️부트캠프 프로젝트를 한곳에서 정리하고 피드백을 받아보자!
프로젝트의 SA, 최종 프로젝트 정리 및 회고 등 여러곳에 흩어져 있던 정보들을 한 곳에 모아놓고,
다양한 사람들의 피드백을 받아 볼 수 있는 공간입니다.
- CodeFolio Demo
🛠️ Service Architecture
📂 Tech Stack
정적인 페이지가 많은 서비스 특성상 SSR을 쉽게 구현할 수 있는 Next.js를 사용합니다.
Next와 잘 어울리는 배포 시스템인 Vercel을 이용합니다.
빠른 백엔드 구축을 위해 BaaS 서비스인 Supabase를 사용합니다.
로컬 상태관리를 위해 react스러운 상태관리를 제공하는 recoil을 사용합니다.
서버 상태관리를 위해 각종 편리한 유틸을 제공해 주는 react-query를 사용합니다.
CSS in JS를 사용하기 위해 styled-components를 사용합니다.
✅ 핵심 기능
포트폴리오 게시 기능 (md editor 지원)
포트폴리오 댓글 및 칭찬뱃지 기능
⚠️ 트러블 슈팅
디테일 모달 로딩속도 및 사용자 경험 개선
초기버전에서 디테일 모달을 불러올 때 약 1.6초정도의 로딩시간이 소요되었습니다.
기존 현상에서 아래의 문제점들을 생각 해 보았는데요
- 로딩 시간 동안 데이터가 들어오지 않아 UI적으로 보기 좋지 않음
- 데이터가 들어오며 레이아웃이 변경되면서 일어나는 레이아웃 시프트
- 각종 데이터들을 한곳에서 처리하지 않고, 각각의 컴포넌트가 따로 처리하며 데이터가 한번에 로딩되어지지 않음
그래서 저희는 아래와 같이 리팩토링 했습니다.
- 로딩 시간동안 로딩 스피너를 보여줌
- 각종 컴포넌트들이 따로 불러오던 데이터를 가장 상위의 컴포넌트에서 한번에 패칭해 온 후 전체 컴포넌트에 뿌려줌
리팩토링 후 페이지에 데이터가 모두 불러오질 때 까지의 시간은 총 0.6초가 소요되었고 기존과 비교해서 약 60%의 성능 개선 효과를 볼 수 있었습니다.
좋아요, 북마크 Optimistic update
서버 state를 local에서 관리하고 있지 않아, 기존의 좋아요, 북마크 기능은 사용자 인터렉션 → 서버 POST 요청 → refetch → 화면 변화의 순으로 진행되었는데, 약 1200ms정도의 레이턴시가 있었습니다.
개선 전 좋아요
좋아요의 인터렉션이 늦게 반응하는 것이 UX적으로 좋지 못하다는 생각이 들어, react-query의 Optimistic update를 적용하기로 하였고, 적용 결과 약 400ms정도 후 컴포넌트가 반응하였습니다.
개선 후 좋아요
좋아요, 북마크, 뱃지기능 throttle 적용
유져가 인터렉션을 발생시킬 때, 실수 또는 고의로 여러번 반복해서 이벤트를 발생시킬 경우 서버와의 통신이 기하급수적으로 늘어날 수 있습니다. 이 부분을 미연에 방지하고자 lodash에서 제공해주는 throttle 기능을 활용 해 500ms내의 이벤트는 최초의 이벤트를 제외하고는 무시할 수 있도록 구성하였습니다.
AS-IS
TO-BE
Share article
Subscribe to our newsletter