웹 프론트엔드 개발을 시작하면서 다양한 프로젝트에 참여해보았고, 직접 만들어볼 기회도 많이 생겼습니다. 그러다 보니 매번 프로젝트를 만들 때마다 세팅을 새로 하는 것도 시간을 적지 않게 소요했습니다.
CRA(create-react-app)이나 서버사이드 렌더링이 필요한 경우 Create Next App을 사용하기도 했지만 결국 저한테 필요했던 건 제 자신이 직접 사용하기 위한 특화된 Boilerplate였습니다! 그래서 직접 만들기로 결정을 하였죠. 이 포스트는 여러분에게 제가 만든 Boilerplate를 공유하면서 경험을 나누기 위해 작성했습니다!
완성된 Github Repo를 링크로 먼저 공유드립니다. 프로젝트나 포스트에 대한 피드백은 언제든지 환영합니다!
먼저 저에게 필요한 요소들을 생각해봤습니다. 아래 목록들은 저의 개발 목적과 경험상 필요했던 것들로 여러분들도 Boilerplate를 만들기 전에 목적을 정리해보면 좋겠습니다.
필수적인 요소들
- TypeScript
- Lint
- Theming(Breakpoints, color, etc…)
부가적인 요소들
- SEO, SSR
- State Management
SEO와 SSR의 경우 프로젝트의 목적상 필요 없는 경우도 있어서 부가적인 요소로 두었고(Boilerplate엔 추가했습니다), State Management는 규모에 따라 선택의 폭이 넓기 때문에 Boilerplate에서는 제외하기로 했습니다.
이미 시장에 나와있는 Boilerplate의 장점은 그대로 가지고 가면서 저만의 특색 있는 Boilerplate를 개발하기로 결정했습니다. 그렇게 CRA나 Next.js, Gatsby.js를 돌아다니다가 이전에 블로그에서 남겼던 내용을 되짚어 보면서 Next.js의 Boilerplate를 사용하기로 결정했습니다.
추가) Next.js와 Gatsby.js를 비교하는 포스트를 작성한 시점이 2020년 7월로, 1년에 가까운 시간이 흘렀습니다. 그 동안 Next.js와 Gatsby.js의 환경도 많이 바뀌었을 것 같은데, 이 부분도 살펴보는 시간을 가져보려 합니다.
Next.js를 사용하면 SSR을 기본적인 타겟으로 잡게 되는데, SSR이 없는 상태에서 추가하는 것보단 이미 만들어둔 상태에서 SSR을 사용하지 않는 편이 더 깔끔하다고 판단했고, SSR을 기본적으로 지원하기로 결정했습니다.
이제 만들어보자!
Next.js의 템플릿을 사용하기로 했으니 Create Next App를 사용해서 만들어보았습니다! 게다가 Next.js의 템플릿 중에서 기본적으로 TypeScript를 지원하는 모듈이 있기 때문에 필요했던 기능 하나가 바로 만족됐습니다!
npx create-next-app --example with-typescript {project name}npm 5.2 버전 이상이 설치돼 있는 경우, 명령어를 입력하면 아래 구조처럼 생긴 프로젝트가 생성됩니다.
하지만 저는 모든 프로젝트에서 사용할 공용 템플릿을 만들고 싶기 때문에 구조만 유지하고, components와 layouts, pages 등 디렉터리의 내부 파일들은 제거를 해주었습니다.
다음은 Lint!
혼자 사용하는 프로젝트든, 협업을 하는 프로젝트든 결국 코드는 수정될 수밖에 없고 누군가는 유지보수를 해야합니다. 그렇기 때문에 규칙을 정하는 것은 중요하다고 생각하기 때문에 Lint의 우선순위를 높이 두었습니다.
VS Code를 비롯한 최신 IDE들은 자체 기능이나 플러그인 등으로 Lint를 지원하기 때문에 설정을 추가하기 많이 편리해졌습니다. 저는 IDE로 VS Code를 사용하고 있으며, eslint에 prettier를 연동해서 사용하기 때문에 prettier를 같이 설정을 해주었습니다.
그리고 놓치기 쉽지만 style에 관련된 Lint들도 설정을 추가하여 CSS의 프로퍼티 순서와 같은 Rule을 추가했습니다. 이렇게 eslint와 stylelint에 대한 설정을 마치고 나니 저장할 때마다 Lint 설정에 맞춰서 파일이 eslintrc나 stylelintrc에서 설정한 규칙에 맞게 변경되었습니다.
설정한 규칙들이 궁금하신 분들은 앞에 올린 Github Repo를 참고해주세요!
IDE를 통한 Lint는 설정했지만 Git에 커밋을 하기 전에 전체적으로 Lint를 검증하는 절차를 하나 두고 싶었습니다. 그래서 저는 Husky와 lint-staged를 설치해서 커밋 전 검증하는 절차를 추가해주었습니다.
"husky": { "hooks": { "pre-commit": "lint-staged" }},"lint-staged": { "*.tsx": [ "eslint --fix", "stylelint --fix" ], "*.ts": [ "eslint --fix", "stylelint --fix" ]},
이렇게 Boilerplate에 Lint 설정을 추가해주었습니다!
마지막, Theming & CSS-in-JS
제가 경험했던 웹 프론트엔드 프로젝트는 다양했지만 공통적인 스타일 설정이 있었습니다.
- 반응형 디자인이나 크기 제한을 위한 Breakpoint
- 디자이너분들이 정해주는 공통적인 Color(primary, secondary, etc…)
프로젝트 별로 공통적인 컴포넌트 스타일이나 색상을 미리 맞춰놓으면 작업할 때 매우 편리하다는 생각이 들어 Theming을 Boilerplate에 추가하기로 하였습니다.
제가 프로젝트에서 자주 사용하던 CSS-in-JS 라이브러리인 styled-components에 ThemeProvider라는 컴포넌트가 있어 Theming을 넣기 쉬웠기 때문에 styled-components를 사용하기로 결정했습니다. 또 다른 이유는 개인적으로 CSS 파일보다는 JS 안에서 컴포넌트로 관리하는 것을 조금 더 선호했기 때문입니다.
추가) styled-components가 SSR(Next.js)을 지원하려면 코드를 추가해주어야 합니다. 링크를 참고해주세요
Template으로 만들기!
Github에 추가된 기능 중에서 저장소를 템플릿화시키는 기능이 있습니다. 이 기능을 사용해서 저의 Boilerplate를 템플릿으로 만들어서 다른 프로젝트를 쉽게 시작할 수 있도록 만들었습니다.
Template Repository으로 만드는 방법은 링크를 참고해주세요!
템플릿 저장소로 만들면 아래 이미지처럼 Template 뱃지가 추가되며, Use this template 버튼을 누름으로써 쉽게 프로젝트를 시작할 수 있습니다.
아직 남아 있는 것들
Boilerplate를 만들고 나서 3개 정도 작은 규모의 프로젝트에 이 템플릿을 사용해 보았습니다. 저에게 맞춰진 상태이기 때문에 굉장히 만족스럽게 사용을 할 수 있었습니다.
하지만 프로젝트를 진행하면서 아래처럼 부족한 부분이 있는 것 또한 깨달을 수 있었습니다.
- Google Analytics 지원(사용해 본 모든 프로젝트에서 필요로 했음)
- API 통신 모듈 추가(State Management처럼 자율적으로 두어야 할까?)
- 초기 세팅에 불편함을 느낄 부분들…
아직 초기 단계이고 경험이 부족하기 때문에 모자란 Boilerplate일 수밖에 없습니다. 코드, 템플릿 사용, 포스트에 대한 질문은 언제든지 환영합니다!
끝까지 읽어주셔서 감사합니다.
