보일러 플레이트란?
문득 공부를 하다보면 개발 용어는 우리의 일상과 밀접한 단어들을 차용한 것들이 대부분이라고 느껴집니다.
맨 손으로 일궈진 문명이 역사가 되어 인터넷이라는 새로운 세상에서 재활용되는 것들을 발견하면 소소한 감동이 있습니다.
보일러 플레이트(Boilerplate)는 아직 디지털 인쇄기가 없던 시절 동일한 내용의 문서를 반복해서 출력하기 위한 인쇄판을 의미합니다.
이것을 코딩에 적용한다면 여러 번의 프로젝트를 경험하면서 쌓인 공통된 자원들 (프레임워크, 라이브러리, 아키텍쳐, 데이터 베이스 등)을 모두 모아 스타터킷을 만들고 새로운 프로젝트의 초반에 이 것을 활용하는 방법이 됩니다.
나만의 보일러 플레이트 코드는 어떤 방향일까?
아직 경험이 많지 않은 주니어 개발자에게 보일러플레이트 코드는 경험의 집약체라기보단 앞으로를 위한 발판의 의미가 더 어울리는 것 같습니다.
깃허브에서 다른 개발자 분들의 보일러 플레이트를 레퍼런스해본 결과 넥스트 기반의 풀스텍 보일러플레이트를 클론하기로 결정했습니다.
참고한 깃헙 주소
보일러플레이트코드 read.me의 요소와 기능들은 다음과 같습니다.
Next.js: 앱 라우터 지원 O
TypeScript: 엄격한 타입 체크 O
Tailwind CSS: 통합 및 지원 O
Clerk: 회원가입, 로그인, 로그아웃, 비밀번호 찾기 등 다양한 인증 기능 O
DrizzleORM: PostgreSQL, SQLite, MySQL과 호환되는 타입 안전 ORM P
PGlite: 오프라인 및 로컬 개발 데이터베이스 지원 P
다국어 지원: next-intl과 Crowdin을 사용한 i18n 설정 O
React Hook Form: 폼 처리 O
Zod: 데이터 검증 O
ESLint: 코드 품질을 위한 린터 설정 O
Prettier: 코드 포매팅 O
Husky: Git Hooks 설정 O
Lint-staged: Git 스테이지 파일에 대한 린터 실행 O
Commitlint: Git 커밋 메시지 린팅 O
Commitizen: 표준 커밋 메시지 작성 도구 O
Vitest: 유닛 테스트 프레임워크 O
Playwright: 통합 및 E2E 테스트 프레임워크 O
Storybook: UI 개발 도구 O
Sentry: 에러 모니터링 O
Pino.js: 로그 관리 및 Better Stack과의 통합 O
Checkly: 코드로 모니터링 실행 O
Semantic Release: 자동 변경 로그 생성 O
Percy: 시각적 테스트(옵션) O
VSCode: 디버그, 설정, 확장 등 통합 O
SEO 메타데이터: JSON-LD 및 Open Graph 태그 O
절대 경로: @ 접두사 사용 O
최대 라이트하우스 점수: 성능 최적화 O
현재 실력으로는 하나 하나 살펴보면서 새로운 프로젝트에 차용하는 방식으로 다뤄야 할 것 같습니다.
우선 최신 버전의 넥스트 프로젝트를 생성하고 타입스크립트와 eslint, prettier, tailwind CSS, 절대 경로를 지정했습니다.
현재 생각한 진행 방향은 다음과 같습니다.
1. 클라이언트 정리
1-1) 유저 플로우 별 라우터 그룹 생성 후 어떤 용도의 페이지인지 명시
1-2) hookform과 storybook을 사용하여 (상태관리 라이브러리도 도입) 카운터 페이지 생성
1-3) Clerk(클러크) 라이브러리를 사용하여 유저 로그인 구현
2. 서버 및 배포
2-1) node.js를 사용하여 api 구현
2-2) 테스트 프레임워크 및 깃 로그 사용해보기
2-3) vercle 배포 & CI&CD 구현
중간중간 중간점검하면서 진행해보도록 하겠습니다.
화이팅!