프론트엔드 개발 포트폴리오 | 비대면 재능 매칭 플랫폼

내일배움캠프 4기 웹 개발 과정 React 트랙 수료생 최종 프로젝트 ‘이음’을 소개합니다.
Aug 16, 2023
프론트엔드 개발 포트폴리오 | 비대면 재능 매칭 플랫폼
notion image
 
 
📎
아키텍쳐
notion image
 
🗣
기술적 의사결정
선택한 기술
이 기술을 선택한 이유
React
1. Virtual DOM, CSR 방식으로 페이지 내에 변경된 부분만을 감지해서 필요한 부분만 렌더링 할 수 있습니다. 2. 커뮤니티가 많습니다.
TypeScript
1. Type을 미리 지정하여 Type에 맞지않는 부분들을 RunTime 이전에 에러로서 확인할 수 있어 RunTime 이 후에 일어날 수 있는 버그,에러들을 사전에 방지 할 수 있습니다. 2. 작성한 코드가 나중에 보았을 때 어떤 Type의 코드인지 명확히 알 수 있습니다. (가독성)
Recoil
1. 컴포넌트의 상태를 자동으로 추적하여 Context API와 다르게 필요한 상태만 렌더링하고 성능을 최적화 할 수 있습니다. 2. 저희 프로젝트는 많이 복잡한 편이 아니기에 BoilerPlate가 적은 Recoil을 선택하였습니다. 3. React를 개발한 Facebook에서 개발하여 React와 상성이 좋으며 Facebook의 대규모 애플리케이션에서 테스트하고 사용되었기 때문에 안정성,성능면 에서 뛰어나다 평가되고 있어 선택하였습니다.
React-Query v4
1. 데이터를 캐싱하고 최신 데이터를 가져와서 자동으로 UI가 업데이트 되도록 할 수 있어 불필요한 API호출을 줄이고 성능을 향상시킬 수 있습니다. 2. 코드가 짧아 가독성이 좋습니다. 3. 다양한 옵션으로 편리합니다.
Firebase
1. 회원정보를 AuthService를 통해 보안성을 향상시키기 위해 선택하였습니다. 2. 간편한 소셜 로그인을 지원하기 위해 사용하였습니다.
성능 개선

저희는 최적화된 사이트를 만들기 위해 지속적인 성능 개선을 실시 하였습니다.

 

최초 성능 검증 (23.02.23)

notion image
 

1차 성능 개선 (23.02.23)

  • 불필요한 자바스크립트 제거 및 불분명한 코드 type수정
notion image
 

2차 성능 개선 (23.02.25)

  • 반복되는 component 축소, styled 동일 요소 제거
notion image
 

3차 성능 개선 (23.03.05)

  • API분리하여 따로 관리 진행을 하였으며, JSX에 코드 중에서 중복되거나 합칠 수 있는 코드들은 모두 한번에 불러서 진행할 수 있도록 하였습니다.
  • 불필요한 이미지 파일 또는 사이즈 조절이 되지 않는 ITEM들 모두 수정하였습니다.
notion image
 

4차 성능 개선 (23.03.07)

  • Loader적용하여 사용자 입장에서 대기하는 시간을 알려주는 방향을 잡았으며, 팀원들 전체 라이브 코딩을 진행하며, 팀 의사소통으로 찾지 못하거나 발견하지 못했던 부분을 찾아 자바스크립트를 축소화하고 나머지 접근성 부분을 관련 코드를 추가했습니다.
notion image
🛠
트러블 슈팅

회원가입 → 로딩 → 홈화면 까지 이동시간이 너무 긴 문제

문제점
notion image
 
회원가입 → 로딩 → 홈화면 까지 이동시간이 2.4초가량으로 너무 길어 사용자가 불편할 수 있을거라 느끼고 개선을 시도하였습니다.
post요청 → onsuccess → alert 실행 → 홈화면 이동
  • 수정 전 2.36초
해결방법
post요청 → alert 실행 + onsuccess → 홈화면 이동 으로 로직을 변경하여 0.5초가량 단축하였습니다.
  • 수정 후 약 1.95초

로그인 이 후 새로고침 시 로그인 상태가 풀리는 문제

문제점
로그인 이 후 firebase의 auth 상태가 업데이트 되었으나, 새로고침 이 후에는 로그인 상태가 풀려 정상적인 서비스 이용이 되지 않았습니다.
해결방법
notion image
민감한 개인정보라 LocalStorage보다는 SessionStorage가 적합하다고 판단하여 로그인 시 Firebase의 로그인 상태를 업데이트 한 후, user정보를 SessionStorage에 저장하였습니다.
이 후 다른 컴포넌트에서 SessionStorage를 get해와서 로그인 상태를 판별하는 부분으로 해결하였습니다.

실시간 포인트 반영이 되지 않는 문제

문제점
초기 렌더링 시 포인트를 불러오지 못하는 현상이 발생하였습니다.
notion image
 
해결방법
React Query의 refetch option을 사용하여 마운트 시에 refetch될 수 있도록 하였습니다.ㄹ
notion image

데이터 용량을 보다 적게 사용하는 방법을 고민

해결방법
  • 인피니티 쿼리와 쿼리문을 구성하여 필요한 데이터만 가지고 와 불필요한 데이터 소모량을 줄였습니다.
- 글의 좋아요 유저 목록에 내 uid가 있는 글만 가져오는 쿼리문
notion image
-인피니티 쿼리
notion image
 
 
 
🔎
주요 기능

결제 및 결제취소 시스템

결제

구매자 바로 구매하기 → 구매자 포인트 차감 → 서비스 완료 → 구매자 거래완료 클릭 → 판매자 포인트 입금
판매자 구매자
notion image
 

결제 취소

구매자 && 판매자 둘다 취소해야 거래 취소되게 구현
notion image
notion image
 
 
 

마이페이지의 여러가지 편의기능

판매중, 거래완료 목록
구매중인 목록
회원정보 변경
포인트 관리
notion image

무한 스크롤

post, comment에 데이터를 정해진 개수대로 불러오는 무한스크롤을 구현하였습니다.
 
notion image
 
 
 
 
 
Share article
Subscribe Newsletter
Stay connected for the latest news and insights.
RSSPowered by inblog