-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #56 from CarrotAuction/Leeseunghwan7305-patch-1
Update README.md
- Loading branch information
Showing
1 changed file
with
79 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,80 @@ | ||
|
|
||
| ## 중고물품 경매 서비스 | ||
|
|
||
| ### 📖 프로젝트 소개 | ||
|
|
||
| - Auction은 실시간 중고 물품을 경매해서 보다 저렴한 가격에 구매를 할 수 있는 웹 서비스입니다. | ||
| - 경매이기떄문에 내가 생각한 가격보다 비싼 가격으로 팔릴수도 있습니다. | ||
| - 구매자와 판매자의 위치를 시각화해서 보여줌으로써 일정 조율이 편리해집니다. | ||
| - 실시간 채팅서비스로 보다 빠른 거래가 이루어집니다. (예정) | ||
| --- | ||
| ### 🕹️ 기술적 성취 | ||
|
|
||
| - 백엔드 팀과 비동기적 소통 및 협업 | ||
| - 기획부터 디자인까지 참여한 경험 | ||
| - UI/UX 향상 및 이미지, 메모리 최적화 | ||
| --- | ||
| ### 트러블 슈팅 및 기능구현 과정 | ||
| -승환- | ||
| <br/><br/> | ||
| <a href="https://velog.io/@seunghwan7305/%ED%98%B9%EC%8B%9C-%EC%96%B8%EC%A0%9C%EC%AF%A4-%EA%B0%80%EB%8A%A5%ED%95%98%EC%8B%A4%EA%B9%8C%EC%9A%94-nextJS%EC%97%90-msw-%EC%A0%81%EC%9A%A9%EA%B8%B0">혹시 언제쯤 가능하실까요? [nextJS에 msw 적용기] | ||
| </a> | ||
| <br/><br/> | ||
| <a href="https://velog.io/@seunghwan7305/%EC%9A%B0%EB%A6%AC-%EC%96%B4%EB%94%94%EC%84%9C-%EB%B3%BC%EA%B9%8C-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EB%A7%B5-api%EB%A1%9C-%EA%B2%BD%EB%A1%9C-%EC%8B%9C%EA%B0%81%ED%99%94%ED%95%98%EA%B8%B0"> | ||
| 우리 어디서 볼까? [카카오 맵 api로 경로 시각화하기]</a> | ||
| <br/><br/> | ||
| <a href="https://velog.io/@seunghwan7305/%EA%B4%91%EA%B3%A0-%EB%AA%A8%EB%8B%AC%EC%B0%BD-%EB%A7%8C%EB%93%A4%EA%B8%B0">이것도 봐주라 [광고 모달창 만들기]</a> | ||
| <br/><br/> | ||
| <a href="https://velog.io/@seunghwan7305/%EB%82%B4%EA%B0%80-SASS%EB%A5%BC-%EC%84%A0%ED%83%9D%ED%95%9C-%EC%9D%B4%EC%9C%A0">내가 SASS를 선택한 이유 [사실 css-in-js도 좋아..]</a> | ||
| <br/><br/> | ||
| <a href="https://velog.io/@seunghwan7305/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-nextimage-%EB%8F%84%EC%9E%85%ED%95%98%EA%B8%B0">내가 이미지 빨리 보여줄게 [이미지 최적화하기]</a> | ||
| <br/><br/> | ||
| <a href="https://velog.io/@seunghwan7305/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-%EC%A2%8B%EC%95%84%EC%9A%94-%EB%82%99%EA%B4%80%EC%A0%81-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0">눌렀어? 일단 보여줄게 [좋아요 버튼에 낙관적 업데이트 적용하기]</a> | ||
| <br/><br/> | ||
| <a href="https://velog.io/@seunghwan7305/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81-%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0">다른건 몰라도 메모리는 아끼자 [이벤트 버블링 적용해보기]</a> | ||
| <br/><br/> | ||
| <a href="https://velog.io/@seunghwan7305/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EC%97%86%EC%9D%B4-%ED%8E%98%EC%9D%B4%EC%A7%80%EB%84%A4%EC%9D%B4%EC%85%98-%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0">보기 편하게 준비했어 [프로젝트에 라이브러리없이 페이지네이션 적용해보기 그리고 성능 최적화]</a> | ||
| <br/><br/> | ||
| <a href="https://velog.io/@seunghwan7305/%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0">스크롤만 내려 나머진 내가 할게 [프로젝트에 무한 스크롤 적용해보기]</a> | ||
| <br/><br/> | ||
| <a href="https://velog.io/@seunghwan7305/react-portal%EB%A1%9C-%EB%AA%A8%EB%8B%AC-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0">react-portal? 써볼게요 [프로젝트에 react-portal로 모달 적용해보기]</a> | ||
| <br/><br/> | ||
| <a href="https://velog.io/@seunghwan7305/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%BF%BC%EB%A6%AC%EB%A1%9C-%ED%86%B5%ED%95%A9-%ED%85%8C%EC%8A%A4%ED%8A%B8%EB%A5%BC-%ED%95%B4%EB%B3%B4%EC%9E%90">에러? 난 그전에 방지해 [프로젝트에 테스트 적용해보기]</a> | ||
|
|
||
| --- | ||
| ### ✈️ 데모 | ||
|
|
||
| --- | ||
| ### 👍 성능 최적화 | ||
| - 필요한 시점에 이미지를 불러오도록 lazy loading을 적용 및 layout shift를 방지하기 위한 Next.js image 태그 적용 | ||
| - react-hook-form을 사용하여 불필요한 리랜더링 방지 및 마운팅 속도 증가 | ||
| - 불필요한 api 요청을 방지하기 위해 tanstack-query를 활용한 데이터 캐싱 | ||
| - 브라우저 메모리를 최소화하기위해 이벤트 버블링 적용 | ||
|
|
||
| --- | ||
| ### ⚒️ 기술스택 | ||
| <table> | ||
| <tbody> | ||
| <tr> | ||
| <th align="center" >Frontend</th> | ||
| </tr> | ||
| <tr> | ||
| <td align="center"> | ||
| <img src="https://img.shields.io/badge/TypeScript-3178C6?style=flat&logo=typescript&logoColor=white"> | ||
| <br /> | ||
| <img src="https://img.shields.io/badge/Next.js-000000?style=flat&logo=next.js&logoColor=white"> | ||
| <br /> | ||
| <img src="https://img.shields.io/badge/React Query-FF4154?flat&logo=reactquery&logoColor=white"> | ||
| <br /> | ||
| <img src="https://img.shields.io/badge/Recoil-3578E5?style=flat&logo=Recoil&logoColor=white" /> | ||
| <br /> | ||
| <img src="https://img.shields.io/badge/Framer Motion-0055FF?style=flat&logo=Framer&logoColor=white" /> | ||
| <br /> | ||
| <img src="https://img.shields.io/badge/Sass-CC6699?style=flat&logo=Sass&logoColor=white" /> | ||
| <br /> | ||
| <img src="https://img.shields.io/badge/RTL-FFFFFF?style=flat" /> | ||
| <br /> | ||
| <img src="https://img.shields.io/badge/Jest-C21325?style=flat&logo=Jest&logoColor=white" /> | ||
| <br /> | ||
|
|
||
|
|