미리보기

의류 중고거래 서비스

서비스 | 프로젝트 깃허브 | 시연 영상
팀 구성: Front-end 2명 / Back-end 4명 / Designer 1명

⚡️ 사용 기술

TypeScript , React, React-Query, React-Router, Recoil, Styled-Components, WebSocket, SSE

📒 담당 파트

• 상점, 마이페이지, 메인페이지, 카테고리, 회원가입 페이지 CRUD
• Recoil을 활용한 유저식별정보 전역 상태관리
• 실시간 알림기능 구현
• 아이콘 컴포넌트 Memoization
• issue 템플릿을 만들어 Front-end 팀원과 소통

📕 최적화 경험

• 초기 로딩이 느리다는 피드백이 있었고, Ligthhouse로 성능 측정 결과 FCP가 3.5초로 매우 느린 결과 확인
  ⇒ React lazy와 Suspense를 사용해 FCP를 3.5초에서 0.7초로 개선

• 여러 컴포넌트에서 유저 정보를 불러오는 동일한 GET 요청이 자주 발생
  ⇒ React-Query의 Stale-time을 infinity로 설정하고, 해당 데이터의 수정이 발생했을 때 쿼리를 초기화시켜 서버 요청 횟수를 줄임

• Spring Boot의 이미지 저장 용량이 최대 1MB였고, 이를 초과하는 이미지는 저장 불가능한 문제 발생
  ⇒ Browser image Compression 라이브러리를 활용해서 이미지 최적화

📗 UI 개선 경험

• 회원가입 페이지 로고 애니메이션 적용
  • Framer-motion을 활용
  • 로고 글자별로 transition에 delay를 주어 로고 애니메이션 구현
• UI 개선
  • 유저 피드백의 40%가 화면이 너무 커서 불편하다는 피드백
  • 1250px 기반으로 페이지를 재구성

지뢰찾기 게임처럼 다른 사람들의 댓글을 통해 기업의 정보를 찾을 수 있는 웹사이트

프로젝트 깃허브 | 시연 영상
팀 구성: Front-end 2명 / Back-end 2명

⚡️ 사용 기술

React, Javascript, React-Query, React-Router, styled-Component

📒 담당 파트

• 메인 페이지 구현
• 상세 페이지 구현
• 소셜 로그인 구현
• React Router의 Outlet을 통해 중첩 라우팅 구현
• react-Cookie를 활용해 토큰 관리 구현
• 검색 기능 구현
• 댓글 추가, 삭제, 수정 기능 구현