logo

'포잉마켓' 프로젝트 회고

language-logoReactJS

• **FE 기술스택과 사용 이유**: Next.js를 사용해 초기 로딩 속도를 개선하고, TypeScript로 에러를 예측 및 방지하며, SCSS + CSS Module로 유지보수와 재사용성을 높였다. 또한, @tanstack-react-query로 클라이언트 단위의 캐싱 처리와 서버 상태 동기화를 실시간에 가깝게 유지하고, react-hook-form + yup으로 성능 최적화와 코드 가독성을 높였다.
• **내가 구현한 것**: 쿠키를 이용한 OAuth 인증 및 인가, presignedUrl 방식을 통한 이미지 삽입으로 서버 자원 절약 및 성능 최적화, 제품 결제-배송 상태에 따른 주문 내역 컴포넌트 구현.
• **트러블 슈팅 경험**: OAuth flow 문제를 BE와의 소통을 통해 해결하고, presignedUrl 방식으로 이미지 업로드 시 발생한 CORS 에러를 split 메서드를 사용해 해결했으며, 사파리 브라우저에서 하이픈 입력 불가 문제를 자동 하이픈 입력 로직으로 해결함.
• **KPT 회고**: 인증&인가 기능 구현, BottomModal 및 폼 구현 시 기술 선택 고민, tanstack-query 적용, QA를 통해 사용성 개선 등의 경험을 통해 새로운 기술에 대한 두려움을 극복하고, 협업과 테스트의 중요성을 깨달음.

thumbnail
북마크
공유하기
신고하기
9분 분량
조회수 310
profile-image이서인
5달 전
Copyright © 2024. Codenary All Rights Reserved.