프론트엔드 개발 포트폴리오 | 프로젝트 정리 공유 서비스

내일배움캠프 4기 웹 개발 과정 React 트랙 수료생 최종 프로젝트 'Codefolio'를 소개합니다.
Aug 16, 2023
프론트엔드 개발 포트폴리오 | 프로젝트 정리 공유 서비스

⭐️부트캠프 프로젝트를 한곳에서 정리하고 피드백을 받아보자!

 
프로젝트의 SA, 최종 프로젝트 정리 및 회고 등 여러곳에 흩어져 있던 정보들을 한 곳에 모아놓고,
다양한 사람들의 피드백을 받아 볼 수 있는 공간입니다.

🛠️ Service Architecture

notion image

📂 Tech Stack

정적인 페이지가 많은 서비스 특성상 SSR을 쉽게 구현할 수 있는 Next.js를 사용합니다.
정적인 페이지가 많은 서비스 특성상 SSR을 쉽게 구현할 수 있는 Next.js를 사용합니다.
Next와 잘 어울리는 배포 시스템인 Vercel을 이용합니다.
Next와 잘 어울리는 배포 시스템인 Vercel을 이용합니다.
빠른 백엔드 구축을 위해 BaaS 서비스인 Supabase를 사용합니다.
빠른 백엔드 구축을 위해 BaaS 서비스인 Supabase를 사용합니다.
로컬 상태관리를 위해 react스러운 상태관리를 제공하는 recoil을 사용합니다.
로컬 상태관리를 위해 react스러운 상태관리를 제공하는 recoil을 사용합니다.
서버 상태관리를 위해 각종 편리한 유틸을 제공해 주는 react-query를 사용합니다.
서버 상태관리를 위해 각종 편리한 유틸을 제공해 주는 react-query를 사용합니다.
CSS in JS를 사용하기 위해 styled-components를 사용합니다.
CSS in JS를 사용하기 위해 styled-components를 사용합니다.

✅ 핵심 기능

포트폴리오 게시 기능 (md editor 지원)

포트폴리오 댓글 및 칭찬뱃지 기능

 

⚠️  트러블 슈팅

디테일 모달 로딩속도 및 사용자 경험 개선

초기버전에서 디테일 모달을 불러올 때 약 1.6초정도의 로딩시간이 소요되었습니다.
notion image
기존 현상에서 아래의 문제점들을 생각 해 보았는데요
  1. 로딩 시간 동안 데이터가 들어오지 않아 UI적으로 보기 좋지 않음
  1. 데이터가 들어오며 레이아웃이 변경되면서 일어나는 레이아웃 시프트
  1. 각종 데이터들을 한곳에서 처리하지 않고, 각각의 컴포넌트가 따로 처리하며 데이터가 한번에 로딩되어지지 않음
 
그래서 저희는 아래와 같이 리팩토링 했습니다.
  1. 로딩 시간동안 로딩 스피너를 보여줌
  1. 각종 컴포넌트들이 따로 불러오던 데이터를 가장 상위의 컴포넌트에서 한번에 패칭해 온 후 전체 컴포넌트에 뿌려줌
 
notion image
리팩토링 후 페이지에 데이터가 모두 불러오질 때 까지의 시간은 총 0.6초가 소요되었고 기존과 비교해서 약 60%의 성능 개선 효과를 볼 수 있었습니다.

좋아요, 북마크 Optimistic update

서버 state를 local에서 관리하고 있지 않아, 기존의 좋아요, 북마크 기능은 사용자 인터렉션 → 서버 POST 요청 → refetch → 화면 변화의 순으로 진행되었는데, 약 1200ms정도의 레이턴시가 있었습니다.
notion image
개선 전 좋아요
 
좋아요의 인터렉션이 늦게 반응하는 것이 UX적으로 좋지 못하다는 생각이 들어, react-query의 Optimistic update를 적용하기로 하였고, 적용 결과 약 400ms정도 후 컴포넌트가 반응하였습니다.
 
notion image
개선 후 좋아요
 

좋아요, 북마크, 뱃지기능 throttle 적용

유져가 인터렉션을 발생시킬 때, 실수 또는 고의로 여러번 반복해서 이벤트를 발생시킬 경우 서버와의 통신이 기하급수적으로 늘어날 수 있습니다. 이 부분을 미연에 방지하고자 lodash에서 제공해주는 throttle 기능을 활용 해 500ms내의 이벤트는 최초의 이벤트를 제외하고는 무시할 수 있도록 구성하였습니다.
 
AS-IS
notion image
TO-BE
notion image
 
Share article
Subscribe Newsletter
Stay connected for the latest news and insights.
RSSPowered by inblog