🛠 프로젝트 생성 명령어

npx create-next-app@latest ev-frontend --typescript

✅ 선택사항 ESLint: ✅

Tailwind: ✅

src 디렉토리: ✅

App Router: ✅

import alias: ❌

💬 컨벤션

💻 코드 컨벤션

변수 : 카멜케이스+숫자 (예 : productData, selectedOption)

ㄴ 변수 할당값이 boolrean일 경우: is를 접두사로 (const isLoading = false;)

상수 : 대문자, 단어 합성시 언더스코어

const BASE_URL = "http://localhost:3000/"

함수 : 화살표 함수 작성

const page = () => {}

📁 폴더

• 폴더명 : 소문자로 작성하기 이어지는 단어 - 예시) : user-id

• 파일명 : 함수명이랑 동일하게 작성하기

  컴포넌트 파일 : 파스칼 케이스 (예: ProductDetail.tsx, Header.tsx)

  스타일 시트 파일 : 스타일 적용할 파일명+.styled (예 : ProductDetail.styled.tsx, Header.styled.tsx)

📌 커밋 컨벤션

[타입] 날짜 ID 제목 #이슈번호

"[타입] <날짜> 제목 #이슈번호" 의 형식으로 제목 작성

제목은 20자 이내 / 변경사항이 "무엇"인지 명확히 작성 / 끝에 마침표 금지

예)
git commit -m "커밋 태그: 커밋 내용 (#이슈번호)"
[Feat] 01/21 초기 프로젝트 생성

• init: 처음 빌드
• feat: 새로운 기능 추가
• fix: 버그, 오류 해결
• docs: README나 WIKI 등의 문서 수정
• remove: 폴더 또는 파일 삭제, 쓸모없는 코드 삭제
• rename: 파일 이름 변경 또는 파일 이동
• refactor: 기능 추가나 버그 수정이 없는 코드 변경 (코드 구조 변경 등의 리팩토링)
• style: 코드 formatting, 세미콜론 누락 등 코드 자체의 변경이 없는 경우
• design: CSS 등 사용자 UI 디자인 변경
• test: 테스트 코드, 리팩토링 테스트 코드 추가
• chore: src 또는 test 파일을 수정하지 않는 기타 변경 사항 (빌드/패키지 매니저 설정 변경 등)
• merge: merge 하는 경우
• !BREAKING CHANGE: 커다란 API 변경의 경우
• !HOTFIX: 급하게 치명적인 버그를 고쳐야 하는 경우

ᛘ 브랜치 컨벤션

main : 배포용

develop : 개발용

feat/이슈번호-기능 feat/22-login

git push origin feat/22-login 푸쉬 후 github 페이지에서 devleop으로 PR, merge 하기

📁 폴더 구조

기능 분리와 관심사 분리를 고려한 Next.js + Spring API 연동 프로젝트 구조입니다.

/src
├── app/                  # Next.js App Router (page.tsx 등)
│   └── api/              # App Router의 API route (Next.js 서버)
│
├── components/           # Dumb 컴포넌트 (UI 전용)
│
├── constants/            # 상수값 정의 (api endpoint, enums 등)
│
├── domain/              
│   └── repositories/     # 추상 인터페이스 (ex. DiaryRepository.ts)
│   └── models/           # (선택) 도메인 모델 정의 (Diary.ts 등)
│
├── application/
│   └── usecases/         # 비즈니스 로직 (서비스 중심 계층)
│       └── diary/
│           └── dto/      # 데이터 전달 객체 (ex. CreateDiaryDTO.ts)
│           ├── createDiary.ts              
│
├── infrastructure/
│   └── repositories/     # 실제 API 구현체 (ex. DiaryHttpRepository.ts)
│
└── utils/                # 범용 유틸 함수

---

✅ 설계 철학

• app/: Next.js App Router 전용 디렉토리, 라우팅만 담당
• features/: 기능 단위로 훅, UI, 서비스가 모여 있는 고 cohesion 구조
• domain/: 순수한 비즈니스 모델 정의, 외부 의존 없음
• repositories/: 기능 요구를 추상화한 interface
• infra/: 실제 API 구현 (fetch/axios 등)
• components/: Dumb UI만 담당하는 재사용 컴포넌트
• constants/: API baseURL, 상태 값, routes 등 고정값
• utils/: 포맷터, 변환기 등 비즈니스와 무관한 유틸 함수

---

🧠 삽질 기록

날짜	내용	원인	해결
2025-05-28	dev 브랜치 push 충돌	GitHub dev 브랜치에 README 커밋 존재	git push -f origin dev로 강제 푸시

🔁 회고

• Git 충돌은 항상 로컬 vs 원격 이력 차이 때문 → push 전 pull 확인 습관화

---

🚀 배포 히스토리

Vercel 설정

항목	값
프로젝트 이름	eternal-victory-frontend
배포 도구	Vercel
연동 브랜치	main only (Preview 브랜치 미사용)

---

배포 이력

날짜	브랜치	배포 내용
2025-05-28	main	테스트 페이지 최초 배포