diff --git a/README.md b/README.md index 8b13789..7cc34ba 100644 --- a/README.md +++ b/README.md @@ -1 +1,80 @@ +## 중고물품 경매 서비스 + +### 📖 프로젝트 소개 + +- Auction은 실시간 중고 물품을 경매해서 보다 저렴한 가격에 구매를 할 수 있는 웹 서비스입니다. +- 경매이기떄문에 내가 생각한 가격보다 비싼 가격으로 팔릴수도 있습니다. +- 구매자와 판매자의 위치를 시각화해서 보여줌으로써 일정 조율이 편리해집니다. +- 실시간 채팅서비스로 보다 빠른 거래가 이루어집니다. (예정) +--- +### 🕹️ 기술적 성취 + +- 백엔드 팀과 비동기적 소통 및 협업 +- 기획부터 디자인까지 참여한 경험 +- UI/UX 향상 및 이미지, 메모리 최적화 +--- +### 트러블 슈팅 및 기능구현 과정 +-승환- +

+혹시 언제쯤 가능하실까요? [nextJS에 msw 적용기] + +

+ +우리 어디서 볼까? [카카오 맵 api로 경로 시각화하기] +

+이것도 봐주라 [광고 모달창 만들기] +

+내가 SASS를 선택한 이유 [사실 css-in-js도 좋아..] +

+내가 이미지 빨리 보여줄게 [이미지 최적화하기] +

+눌렀어? 일단 보여줄게 [좋아요 버튼에 낙관적 업데이트 적용하기] +

+다른건 몰라도 메모리는 아끼자 [이벤트 버블링 적용해보기] +

+보기 편하게 준비했어 [프로젝트에 라이브러리없이 페이지네이션 적용해보기 그리고 성능 최적화] +

+스크롤만 내려 나머진 내가 할게 [프로젝트에 무한 스크롤 적용해보기] +

+react-portal? 써볼게요 [프로젝트에 react-portal로 모달 적용해보기] +

+에러? 난 그전에 방지해 [프로젝트에 테스트 적용해보기] + +--- +### ✈️ 데모 + +--- +### 👍 성능 최적화 +- 필요한 시점에 이미지를 불러오도록 lazy loading을 적용 및 layout shift를 방지하기 위한 Next.js image 태그 적용 +- react-hook-form을 사용하여 불필요한 리랜더링 방지 및 마운팅 속도 증가 +- 불필요한 api 요청을 방지하기 위해 tanstack-query를 활용한 데이터 캐싱 +- 브라우저 메모리를 최소화하기위해 이벤트 버블링 적용 + +--- +### ⚒️ 기술스택 + + + + + + +
Frontend
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +