[사이드 프로젝트] 데일리플래너 개발일지 1 (프론트엔드 세팅)

기획(배경, 목표, 기술스택, 주요 기능, 개발 일정)을 모두 끝냈으니 이제 본격적으로 개발에 들어간다.
개발일지에서는 아는 내용은 과감히 스킵하고, 모르는 내용이나 디버깅 과정 중심으로 남길 예정이다.
처음 써보는 스택이 많고, 기억이 가물가물한 부분도 있어서 이번엔 기록할 게 훨씬 많을 듯하다.

먼저 전체 일정을 세워둔 뒤, Jira 프로젝트로 관리했다.

주요 스토리는 상위 이슈로, 세부 개발 항목은 하위 작업으로 분리했다.
하위 이슈 설명에는 마크다운으로 세부 절차를 적어두어, Jira만 봐도 “무엇을, 어떤 순서로” 해야 하는지 바로 이해할 수 있도록 구성했다.

⚙️ 기본 파일 세팅

이번에 .nvmrc, .editorconfig, .gitattributes 같은 기본 설정 파일들도 함께 정리했다.
아직 실제로는 사용하지 않았지만, 나중에 협업 환경을 고려해 기본 구성을 준비해둔 상태다.
필요할 때 바로 확장할 수 있도록 주석과 참고 링크를 같이 남겨두었다.

.nvmrc

Node 버전을 고정해 팀원 간 환경 불일치를 막는 역할을 한다.
nvm use 명령으로 지정된 버전(이번엔 20.19.2)을 바로 맞출 수 있다.

.editorconfig

다양한 에디터 간에 동일한 코드 스타일을 유지하기 위한 설정 파일이다.
현재는 ESLint + Prettier로 통합돼 있지만, 협업 시 유용하므로 미리 정리해두었다.
(참고자료)

.gitattributes

플랫폼별 줄바꿈(EOL)이나 Git diff 인식을 제어할 수 있다.
지금은 쓰지 않지만, 다중 OS 환경에서 협업 시 문제를 방지할 수 있어 기본 파일로 포함했다.
(참고자료)

⚙️ 주요 세팅 파일

next.config.ts

이전에는 단순히 “Next.js 설정파일” 정도로만 알고 있었다.
이번에는 SSR, 이미지 도메인, 리다이렉트, 국제화(i18n) 등 항목별 의미를 전부 파악하며 정리했다.
→ 내가 정리한 글 보기

🎨 스타일 및 디자인 시스템

globals.css vs tailwind.config.ts

두 파일의 역할을 헷갈렸는데,
전자는 전역 스타일과 테마 토큰을 실제로 정의하는 CSS 레이어,
후자는 Tailwind의 빌드 타임 설정 파일이라는 걸 이번에 명확히 알게 되었다.
이 과정을 통해 Tailwind v4의 구조 변화도 함께 파악할 수 있었다.
→ 내가 정리한 글 보기

폰트 세팅

Pretendard 기반으로 영문/한글 폰트를 통합 적용했다.
Next.js + Tailwind v4 환경에서 @fontsource와 @theme 조합으로 글로벌 폰트 토큰을 정의했다.
→ 내가 정리한 글 보기

Framer-Motion 라이브러리

Framer-Motion 라이브러리를 사용해 각 애니메이션을 깔끔하게 나눠놓으려고 한다 CSR같은 경우에는 일반 CSS 애니메이션을 사용해도 되지만
SSR같은 경우 안먹는 경우도 있어서 깔끔하게 Framer-Motion 라이브러리를 사용하려고 한다.
→ 내가 정리한 글 보기

🪝 Git & Hook 세팅

husky와 lint-staged로 pre-commit, commit-msg 훅을 구성했다.
커밋 메시지는 commitlint 규칙을 기반으로 품질을 강제했다.
→ 내가 정리한 글 보기

🧩 UI & 라이브러리 세팅

• Lucide 아이콘 라이브러리 — 사용 가능한 아이콘 이름과 구조 정리
  → 내가 정리한 글 보기
• shadcn/ui — Tailwind + Radix 구조를 직접 파악하며 커스터마이징
  → 내가 정리한 글 보기

🔍 SEO & API

• next-seo 트러블슈팅
  → 내가 정리한 글 보기
• API 레이어 세팅
  → 내가 정리한 글 보기
• next-sitemap 설정
  → 내가 정리한 글 보기

💡 이번 세팅에서 느낀 점

이번에 직접 세팅하면서 느낀 건,
관련된 설정 파일끼리 “세트”로 묶어 한 번에 세팅해야 꼬이지 않는다는 점이었다.
예를 들어,

• Tailwind → globals.css → shadcn/ui → font
• Next.js metadata → next-sitemap → next-seo
  
  
  이런 식으로 연결된 세트끼리 묶어서 설정하면, 의존성 충돌을 줄이고 구조를 한눈에 파악할 수 있다.
  처음엔 파일 단위로 순서 없이 수정하다 보니 여러 부분이 꼬였고, 이번에 그 문제를 크게 체감했다.
  
  또 한 가지는,
  이번 세팅은 프로젝트를 바로 보일러플레이트로 만들기엔 부족하다는 점이다.
  구조는 꽤 잡혔지만, 재사용성과 확장성을 위한 분리 기준이 아직 모호했다.
  다음 개인 프로젝트에서는 이번 세팅을 기반으로 완성도 높은 형태로 재정비해
  나만의 보일러플레이트로 계속 가져갈 계획이다.