Trip Review SNS project - using Next.js
여행 후기 공유 SNS **Bon Voyage!**입니다. Next.js를 이용해 개발하였으며, 여행 사진과 후기 글을 업로드하여 실시간으로 공유합니다.
https://www.bonvoyagewith.site/
npm
git clone [email protected]:lain-alice/bonvoyage-sns-next.git
cd bonvoyage-sns-next
npm install
npm run devyarn
git clone [email protected]:lain-alice/bonvoyage-sns-next.git
cd bonvoyage-sns-next
yarn install
yarn run dev테스트 계정
id: [email protected]
password: 1q2w3e4r!
- 1차 배포: 2024/05/14 ~
- 개인 프로젝트
- 제작자: 이승현 https://lain-alice.tistory.com/
- gif 추가 예정
| 사용 기술 | 설명 |
|---|---|
| Next.js | 라우팅, 이미지 최적화 등의 작업을 프레임워크가 제공하는 기능으로 해결하여 개발 시간 단축. SSR과 CSR을 각각 사용처에 맞게 적용. |
| Firebase | 사용자 인증, 데이터베이스, 파일 저장소를 백엔드 코드 없이 빠르게 구현 |
| React-Query | 데이터 요청 관련 코드 단축, 에러 및 로딩 처리 간소화, 캐싱을 이용한 리소스 절약 |
| TypeScript | 타입 에러 방지, 변수와 객체의 형태, 구성을 자동 완성으로 쉽게 파악 |
| TailwindCSS | Next.js 개발 환경 세팅 중에 바로 적용 가능, 색상 선택 등에 소비하는 시간을 절약하고 일관적인 CSS 형식 적용 |
| Shadcn/ui | TailwindCSS로 디자인되어 있어 바로 사용 가능, 라이브러리 모듈을 import하지 않고 컴포넌트 코드를 직접 다운받는 형식이어서 의존성이 덜하고 수정이 용이함 |
| react-hook-form | shadcn/ui의 Form 컴포넌트가 react-hook-form 적용을 전제로 하고 있음. 입력값 및 예외를 Form 컴포넌트 단위로 처리 가능 |
| zod | 예외 처리 관련 코드 간소화, 가독성 상승 |
| Vercel | Next.js와 개발사가 같고 공식 문서에서도 Vercel 배포를 권장함, Github Action과 연동되는 CI/CD 환경 구축 과정이 간단함 |
| Message | 설명 |
|---|---|
| [feat] | 새로운 기능 추가 |
| [fix] | 버그 수정 |
| [design] | CSS 등 사용자 UI 디자인 변경 |
| [style] | 코드 포맷 변경, 세미콜론 누락, 코드수정이 없는 경우. |
| [refactor] | 코드 리팩토링 |
| [comment] | 주석 추가 및 변경 |
| [docs] | 문서 수정 |
| [test] | 테스트 코드 작업을할 경우 |
| [chore] | 빌드 테스트 업데이트, 패키지 매니저 설정, gitignore 등 수정 |
| [rename] | 파일, 폴더명 수정 |
| [remove] | 파일, 폴더 삭제 |