NextJs를 이용한 당근마켓 클론 사이트입니다.
velog에서도 보실 수 있습니다.
클릭하시면 이동합니다.
로그인 시, 입력되어 있는 값 그대로 로그인/토큰인증 하시면 됩니다.
- 프론트엔드: React, NextJS, TailwindCSS
- 백엔드: Prisma, PlanetScale
- 배포: Vercel, PlanetScale
- 라이브러리: npm, Twillo, CloudFlare, SendGrid, SWR, iron-session 등
- 언어: JavaScript, TypeScript
src
├── componenets/* # 리액트 컴포넌트 폴더
└── libs # JS 함수 라이브러리 폴더
└── client/* # 프론트 JS 폴더
└── server/* # 서버 JS 폴더
└── pages # 라우트 폴더
└── api # 내장 API 서버
└── posts/* # 동네생활 API
├── products/* # 상품 API
├── streams/* # 라이브 스트리밍 API
├── users/* # 유저 API
....
└── enter.ts # sms/mail 인증 API
└── token.ts # 토큰 발급 API
└── imgfile.ts # CloudFlare API
....
├── chats/* # 채팅 컴포넌트 페이지
├── community/* # 동네생활 컴포넌트 페이지
├── faq/* # FAQ 컴포넌트 페이지
├── products/* # 상품 컴포넌트 페이지
├── profile/* # 유저 컴포넌트 페이지
├── streams/* # 라이브 스트리밍 컴포넌트 페이지
├── _app.tsx # 최상위 컴포넌트
├── enter.tsx # 회원가입 컴포넌트 페이지
└── index.tsx # 메인 컴포넌트 페이지
├── posts/* # FAQ 정적파일 폴더
├── prisma/* # DB 스키마 폴더
└── styles/* # 전역 CSS 폴더
-
상품
- 상품 좋아요 기능 구현
- 상품 업로드 및 상세 페이지 구현
-
동네생활
- 질문글 업로드 및 상세 페이지 구현
- 유저 위치를 통한 동네인증 마크 구현
- 궁금해요 기능 구현
- 답변댓글 실시간 업로드 구현
-
채팅
- 채팅 업로드 및 상세 페이지 구현
-
라이브
- CloudFlare를 통한 라이브 스트리밍 기능 구현
- 라이브 스트리밍 댓글 실시간 업로드 구현
-
유저
- SendGrid를 통한 이메일 인증 구현
- TWILIO를 통한 문자 인증 구현
- 토큰 인증 구현
- iron-session을 이용한 stateless 세션 로그인/로그아웃 기능 구현
- 유저 프로필 이미지 변경 기능 구현
-
이외
- ISR을 이용한 FAQ 페이지 렌더링
- TailwindCSS 를 이용한 CSS 적용
- 토큰 인증은 회원가입 할 경우에만 사용
- 채팅 기능 구현
- 무한 스크롤 구현
- 프로필 이미지 수정시, 로딩시간을 줄이거나 로딩 보여주기
- 상품 상세 페이지 모달 구현
- FAQ 탭 추가하여 사용자에게 보이기 및 FAQ 업데이트
- SNS 계정 로그인 기능 추가
- SPA + SSR 방식으로써, express + React 같은 느낌을 받았다.
- 메일/문자 인증 구현을 하면서 너무나도 하고 싶었던 부분이였기 때문에 즐겁게 했다.
- TailwindCSS가 얼마나 좋은지도 경험했다. css가 길어질수록 가독성은 떨어지지만 너무나도 쉽게 스타일을 만들 수 있었다.
- 타입스크립트가 많이 어려워서 헤맸다.. 🥲
- 리액트 쿼리와 SWR의 장/단점을 알게 되었다.
- 리액트 훅 폼은 앞으로 계속해서 사용할꺼 같다. 정말 너무 편리하다.
- CloudFlare의 스트리밍 기능은 생각보다 좋았고, 편리했다. 하지만 이미지 API는 구현은 너무 쉬웠다..
- 아쉬웠던 점은, Cloudflare의 이미지 API의 서버가 너무 느렸다. 또한 React가 익숙하지 않은 상태에서 Next를 사용하려다보니 많이 헤맸다. React 관련 프로젝트를 더 해야겠다는 생각을 했다.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent