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

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

최초 성능 검증 (23.02.23)

1차 성능 개선 (23.02.23)

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

2차 성능 개선 (23.02.25)

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

3차 성능 개선 (23.03.05)

• API분리하여 따로 관리 진행을 하였으며, JSX에 코드 중에서 중복되거나 합칠 수 있는 코드들은 모두 한번에 불러서 진행할 수 있도록 하였습니다.

• 불필요한 이미지 파일 또는 사이즈 조절이 되지 않는 ITEM들 모두 수정하였습니다.

4차 성능 개선 (23.03.07)

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

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

문제점

출처 : https://techrecipe.co.kr/posts/10446

 

회원가입 → 로딩 → 홈화면 까지 이동시간이 2.4초가량으로 너무 길어 사용자가 불편할 수 있을거라 느끼고 개선을 시도하였습니다.

post요청 → onsuccess → alert 실행 → 홈화면 이동

• 수정 전 2.36초

해결방법

post요청 → alert 실행 + onsuccess → 홈화면 이동 으로 로직을 변경하여 0.5초가량 단축하였습니다.

• 수정 후 약 1.95초

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

문제점

로그인 이 후 firebase의 auth 상태가 업데이트 되었으나, 새로고침 이 후에는 로그인 상태가 풀려 정상적인 서비스 이용이 되지 않았습니다.

해결방법

민감한 개인정보라 LocalStorage보다는 SessionStorage가 적합하다고 판단하여 로그인 시 Firebase의 로그인 상태를 업데이트 한 후, user정보를 SessionStorage에 저장하였습니다.

이 후 다른 컴포넌트에서 SessionStorage를 get해와서 로그인 상태를 판별하는 부분으로 해결하였습니다.

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

문제점

초기 렌더링 시 포인트를 불러오지 못하는 현상이 발생하였습니다.

 

해결방법

React Query의 refetch option을 사용하여 마운트 시에 refetch될 수 있도록 하였습니다.ㄹ

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

해결방법

• 인피니티 쿼리와 쿼리문을 구성하여 필요한 데이터만 가지고 와 불필요한 데이터 소모량을 줄였습니다.

- 글의 좋아요 유저 목록에 내 uid가 있는 글만 가져오는 쿼리문

-인피니티 쿼리

 

 

결제 및 결제취소 시스템

결제

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

판매자 구매자

 

결제 취소

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

 

 

 

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

판매중, 거래완료 목록

구매중인 목록

회원정보 변경

포인트 관리

무한 스크롤

post, comment에 데이터를 정해진 개수대로 불러오는 무한스크롤을 구현하였습니다.