프로젝트 시작
시작 배경
- 뭔가 웹 개발 관련해서 경험이 있다고 하기에도 없다고 하기에도 애매한 상태로 있는게 싫었다. 웹 개발자 지망이 아니기는 한데, 그렇다고 웹 개발을 아예 못하는 사람이 되고 싶지도 않았다.
- 그리고, 전에 회사 연수로 Nuxt.js + Spring Boot를 만져보고, 개인 프로젝트도 진행해보려고 했는데 흐지부지로 끝나버린게 아쉽기도 했다.
- 그래서 부업용 포트폴리오도 만들 겸, 웹개발 프로젝트를 시작해보려고 한다.
개발 스택 결정
1. Next.js
- Nuxt.js + Spring Boot는 경험이 있지만, 나는 역시 웹개발하면 React아닌가? 라는 막연한 이미지를 가지고 있다. 그만큼 많이들 배우고, 많이들 쓰는데, 그 이유가 궁금하기도 하고, 수요도 많을 것 같았다.
- 그래서 프론트엔드는 React 기반의 프레임워크인 Next.js로 결정!
2. TypeScript
- TypeScript는 이제 거의 필수가 된 것 같다. 수요도 많고, 사실 수요때문이 아니어도 개인적으로는 타입이 정해져있는 편이 쓰기 편하기도 하다.
3. FireBase
- 백엔드 쪽을 어떻게 할까 했는데, 아무래도 백엔드까지 구축하기엔 일이 너무 커져서 (가능하면 이 프로젝트 빨리 끝내고 싶어서), FireBase를 써보기로 했다. 데이터베이스 구축, 암호화 등의 일을 대신 해주는 심부름센타같은 친구라고 한다.
4. Git, Visual Studio Code
- 자세한 설명은 생략한다.
프로젝트 소개
- 프로젝트 이름 : Jiggist (바텐딩 도구 Jigger에서 착안)
- 개요 : 바텐딩을 직업/취미로 하는 사람들을 위한 쇼핑몰. 주류, 바텐딩 재료 및 도구들을 판매하는 웹사이트.
- 주요 기능
| 상품 조회 | 공통 | 상품 표시 |
| 상품 조회 | 공통 | 상품 검색 |
| 상품 조회 | 공통 | 상품 필터링 |
| 상품 조회 | 공통 | 상품 세부정보 확인 |
| 상품 조회 | 공통 | 상품 리뷰 조회 |
| 상품 조회 | 관리자 | 상품 삭제 |
| 상품 조회 | 관리자 | 상품 정보 수정 |
| 구매 | 유저 | 상품 찜하기 |
| 구매 | 유저 | 장바구니 담기 |
| 구매 | 유저 | 장바구니 상품 삭제 |
| 구매 | 유저 | 장바구니 상품 갯수 수정 |
| 구매 | 유저 | 주문하기 |
| 구매 | 유저 | 주문내역 확인 |
| 구매 | 관리자 | 주문내역 확인 |
| 구매 | 유저 | 리뷰 쓰기 |
| 구매 | 유저 | 리뷰 삭제 |
| 구매 | 관리자 | 리뷰 삭제 |
| 회원 | 유저 | 회원가입 |
| 회원 | 유저 | 로그인 |
| 회원 | 유저 | 로그아웃 |
| 회원 | 유저 | 회원정보수정 |
| 회원 | 유저 | 비밀번호찾기 |
| 회원 | 유저 | 회원탈퇴 |
| 회원 | 관리자 | 로그인 |
| 회원 | 관리자 | 로그아웃 |
| 회원 | 관리자 | 관리자 추가 |
| 그 외 | 유저 | 문의하기 |
| 그 외 | 관리자 | 문의내용 확인 |
- 생각나는대로 엑셀에 정리해보았다. 물론 더 추가될 수 있다.
UI 구상
- 구글 Stitch를 처음 써봤는데, 상당히 좋은 느낌으로 UI를 디자인해준다는 것을 알았다.
- 아직 어떤 화면이 필요한지 구상을 다 안했기 때문에, 테스트 겸 상품 조회 화면과 상품 상세 화면만 출력해보았다.
- 화면 구상이 다 끝나면 다른 화면들도 출력시켜볼 예정이다.
개발 환경 구축
Next.js 프로젝트 생성
yarn create next-app my-app --typescript- yarn을 설치해두었기 때문에 yarn을 사용해 생성해준다.
- TypeScript를 사용하기 위해 --typescript 를 추가해준다.
Firebase 설치
yarn add firebase- 생성한 프로젝트 폴더로 이동해, firebase를 설치해준다.
Firebase 설정
- firebase 웹사이트 → 콘솔 로 들어가, 프로젝트를 추가해준다.
- 좌측 메뉴 → 톱니바퀴 버튼 클릭 → 일반 → 앱 추가 버튼 클릭 으로, 웹 앱을 추가해준다.
- 그렇게 등록까지 끝내주면, SDK 설정을 위한 설정값들이 나온다. 그걸 아래에서 환경변수로 설정해주면 된다.
환경변수 설정
NEXT_PUBLIC_FIREBASE_API_KEY=xxxx
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=xxxx
NEXT_PUBLIC_FIREBASE_PROJECT_ID=xxxx
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=xxxx
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=xxxx
NEXT_PUBLIC_FIREBASE_APP_ID=xxxx- 프로젝트 폴더 루트에 .env.local 라는 파일을 생성해, 앞에서 Firebase 설정시에 받은 설정값들을 xxxx에 넣어서 작성해준다.
Firebase 설정 파일 생성
import { initializeApp } from "firebase/app";
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};
export const app = initializeApp(firebaseConfig);- src/lib/ 경로로, firebase.ts 파일을 만들어, 위의 내용을 넣어준다.
Firebase DB, Authentication 활성화
- DB 활성화 : 좌측 메뉴 → Firestore Database → 데이터베이스 만들기 로 활성화시켜줄 수 있다. 우선은 테스트 모드로 만들어주었다.
- Authentication 활성화 : 좌측 메뉴 → Authentication → 시작하기 로 활성화시켜줄 수 있다. 소셜 로그인도 구현할 생각이지만, 우선은 이메일/비밀번호만 추가해준다.
Git 초기화 후 Github과 연동
// git 초기화
git init
// 변경사항 있다면 커밋
git add .
git commit 'initial coomit'
// github을 리모트 리포지토리로 추가
git remote add origin https://github.com/@@@@@
// github 리포지토리에 푸쉬
git push origin main- Github에 리포지토리를 만들고, 프로젝트 폴더를 git bash로 열어 위의 명령어들을 입력해준다.
- .gitignore은 Next.js 프로젝트 생성시에 자동으로 만들어지기 때문에, Github 리포지토리를 만들 때 추가하지 않아도 된다.
'프로젝트 > [Next.js& FireBase] 바텐더 쇼핑몰' 카테고리의 다른 글
| [Next.js & FireBase] 프로젝트 매니지먼트용 문서 작성, 구글 Stitch가 만들어준 UI 옮기기, 상품 더미 데이터 입력하기 (0) | 2026.03.02 |
|---|---|
| [Next.js & FireBase] 화면 설계, 문서 데이터베이스 설계 (0) | 2026.02.27 |
