⚙️ 환경설정 관련 정리

각 과정은 하나의 작업이 끝날 떄마다 커밋을 한다.

📝 Github Action

📝 Pnpm

Fast, disk space efficient package manager | pnpm

• pnpm은 Perfomant Node Package Manager의 약자로, 성능이 최적화된 npm이라고 보면 된다.

• 기본 원리는 여러 프로젝트에 있는 전체 package 파일을 전역 공간에 저장해두고, 해당 패키지 내에서는 이 전역 공간에 있는 것들을 참조해두는 형식으로 진행된다.

• 실제로 node_modules에 가면 심볼릭 링크를 생성하여 전역 공간에 있는 package들을 참고합니다.

• 또한, 모든 의존성에 대해서 패키지별로 중복여부 상관없이 하나하나 설치하는 것이 아닌 공통된 요소를 뽑아서 의존성을 관리합니다.

📝 pnpm을 사용한 모노 레포 전략

[우아콘 2022] 우리는 하나다! 모노레포 with pnpm

• pnpm과 monorepo라는 키워드를 놓고 보았을 때 굉장히 좋은 참고자료이다.

• 모노 레포는 단순히 하나의 레포에 여러가지 프로젝트를 넣고 끝이 아니다.

• 자칫 잘못하면 의존성이 너무 깊어질 수 있고, 관련되어서 빌드 등을 특정 프로젝트만 해야하는 경우도 있으며, 소스코드의 변경도 프로젝트별로 독립적으로 추적할 수 있어야 한다.

• 즉, 의존성이 깊어질 수 있어 주의가 필요하다.

• 이를 해결하기 위한 방법에는 크게 2가지가 있다.

  • 패키지매니저로 구성.
  • 모노레포 빌드 시스템 이용.

• 모노레포 빌드 시스템을 이용하기에는 프로젝트 규모에 비해 오버헤드가 크다고 판단했다.

• 또한, pnpm의 장점 중 하나는 모노 레포에 따른 기본적인 지원이 잘 되어 있다는 것이다.

pnpm으로 모노레포 환경 구축하기

• 위의 블로그에 굉장히 잘 정리가 되어 있다.
• 디렉토리를 2개 나누고, pnpm -F 명령어로 필터링해서 명령어 처리를 해주면 간단할 것 같았다.

📝 Vite

시작하기

• JS 빌드도구이다.

• 기본적으로 Vite는 ESM 을 채택하고 있다.

  • 단순히 문법의 차이를 넘어서, import 요청이 왔을때에만 로딩이 될 수 있는 환경을 제공한다.
  • 이는 쓸데없는 번들링을 줄이고, 성능을 높인다.

• 네이버 부스트캠프에서 기본적으로 Vite를 사용했었기에, 팀원 전체가 사용에 익숙하다는 요소가 있었다.

• 처음 vite를 사용하면 TS와 react의 초기 설정이 쉽게 진행이 된다.

📝 Storybook

Docs | Storybook

• 스토리북 자체는 스토리북을 Front-end Workshop이라고 부르고 있다.

  • UI컴포넌트와 페이지를 독립적으로 분리해서 다룰 수 있게 하는 도구라고 설명하고 있다.

• 나 개인적으로는 스토리북을 그냥 문서화 도구라고 생각하고 있다.

• 스토리를 기반으로 해서, 컴포넌트나 문서화를 정립할 수 있으며, 스토리에 맞춰서 개발을 하다 보니 어느정도는 TDD와 비슷한 효과를 낳기도 한다.

  • (코드의 시나리오를 먼저 생각하고, 이게 어떻게 보여줄지를 정의하며 그에 따라서 코드를 작성하는 일련의 흐름을 유발하기 때문.)

• 스토리북의 컴포넌트 단위로 문서화하는 기능 덕분에, 시각적 회귀 테스트, 스냅샷 테스트등의 다양한 테스트를 가능하게 만들어준다.

• 설치와 관련해서는 공식문서를 참고한다.

• 또한, 처음에 해야하는 일은 자명하다. 스토리안에 컴포넌트가 합쳐져있는데, 이를 분리할 필요가 있다.

📝 TailwindCSS

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

• utility-first framework인 TailwindCSS이다.

• 사용자 수는 2023년 기준으로 꾸준하게 상승 곡선을 그리고 있다. (State of CSS 2023)

• CSS 클래스 명을 최대한 작게 나눠서 제공을 해주기 때문에, 조립해서 사용하면 된다는 장점이 있다.

  • 이에 따라 CSS 클래스명 선정 등에 대해서 크게 고민하지 않고 빠르게 작업할 수 있다는 효과가 있다.

• 단점으로는 코드 한 줄 한 줄이 길어진다는 문제점이 존재한다.

• 설치 시에 유의할 점은 공식문서에서 각 라이브러리를 보고 맞춰서 설치해야한다는 점이다.

• 또한 이 역시도 Lint로 설정할 수 있는데 이에 대해서는 나중에 다룬다.

📝 ESLint

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter

• ESLint는 정적분석도구이다.

  • 정적으로 코드를 분석해서 예견된 에러를 잡아준다.
  • 또한, 정적으로 코드를 분석하는 과정에서 포메터의 역할을 수행하기도 한다.

• ESLint 는 v9 이후부터는 flat config 방식을 디폴트로 채택하고 있다.

ESLint 9 Flat config tutorial

• 문법이 조금 다르다. 그리고, 기존 문법대로 하면 에러가 발생함을 심심치 않게 볼 수 있다.
• 그래서 해당 가이드를 보고 참고해서 설정할 필요가 있다.

📝 Prettier

Prettier · Opinionated Code Formatter

• 프리티어는 코드 포메터이다. 정적 검사는 수행하지 않으므로, Lint와 함께 사용할 필요가 있다.

Install · Prettier

• 해당사이트에서 보고 설정을 진행하면 되며, ESLint 와 관련된 설정을 반드시 해줘야 한다.
• v8 부터는 충돌이 잦았으며, 별도 설정을 많이 해주어야 했으나, v9부터 ESLint가 flat config를 선택한 이후로는 이런 요소가 많이 줄었다고 한다. (애초에 flat config를 선택한 이유가 호환성 때문이기도 하다.)

📝 Lint Style Guide

• 스타일 가이드는 기본적으로 만들어져 있는것에 기반해서 수정하는 게 좋다고 생각한다.
• 관련해서 찾아보고 무엇이 가장 적합할 지 살펴보았다.

eslint-config-naver/STYLE_GUIDE.md at master · naver/eslint-config-naver

• 네이버에서 지원하는 스타일 가이드이다.

• Airbnb-style-guide를 기반해서 만들어졌다.

• 네이버 팀 별로 다른 설정을 사용하고 있어 더 이상 지원이 되지 않는다.

• 네이버 팀에서는 공식적으로 airbnb를 참고하는 것을 추천하고 있다.

• 또한, 어떻게 보면 제일 유명한 린트 설정이기도 해서, 이를 바탕으로 살펴보낟.

GitHub - airbnb/javascript: JavaScript Style Guide

javascript/react at master · airbnb/javascript

• 위에는 JS에 대한 스타일 가이드이고, 아래는 리엑트에 대한 부분이다.

• 이걸 그냥 설정하기 보다는 npm에서 다운받아 사용하는 것도 하나의 방법이다.

npm: eslint-config-airbnb

• 다만, 이는 npm을 기준으로 작성이 되어 있어, pnpm을 기준으로 해서 다운받을 필요가 있다.

📝 종합적인 설정

Guide to Setting Up Prettier, Airbnb ESLint, and Husky for Your Next Project

반드시 git hook으로 업로드 전에 사전 작업으로 설정한다.

• husky → git commit → Lint 검사
• IDE 한번 검사 → Husky한번 검사 → Commit

📝 Tailwind Lint 설정

• 테일윈드의 단점 중 하나는 중구난방으로 class order를 설정할 수 있다는 것이다.

npm: eslint-plugin-tailwindcss

• 이를 참고해서 설정한다.

📝 추가적인 고려 사항

• 디렉토리 구조에 대해서 @로 표시하자. (TS 설정에서 가능)
• 스토리 / 컴포넌트 분리에 대해서 Check
• export, default, props 등의 규칙
• 함수 표현식, 선언문 인지 등에 대해서 표시
• Typescript Type, Interface

📝 타입스크립트 설정

Documentation - What is a tsconfig.json

• Node와 App을 별돌 분리해서 관리하자.

📝 폰트 설정

• NPM fontspace에서 다운로드

📝 버전 컨트롤