week3. 보일러 템플릿

보일러플레이트(bolier plate) 또는 템플릿은 프로젝트를 빠르게 시작할 수 있도록 미리 구성된 프로젝트 구조를 의미한다.

먼저, 보일러 템플릿의 장단점부터 살펴보도록하자!

장점으로는 시간이 절약된다.
미리 구성된 환경을 제공하기 때문에 개발환경을 처음부터 구성하는데 드신 시간과 노력을 절약할 수 있다.
일관된 코딩 스타일과 프로젝트 구조를 제공하기 때문에 협업 시 코드의 이해와 관리가 용이해진다.

단점으로는 필요 이상의 구성 요소나 라이브러리를 포함할 수 있으며, 애플리케이션을 불필요하게 복잡하게 만들 수 있다.
보일러 템플릿의 기본 설정이나 구조를 변경하기 어려울 수 있다.
자주 업데이트되지 않는다면, 시간에 지남에 따라 오래된 라이브러리나 패턴을 사용하게 될 위험이있다. 고한다.

폴더구조

내가 설정한 보일러 템플릿의 폴더구조는 이러한 형식이다.

📦boiler-template
 ┣ 📂public
 ┃ ┣ 📜favicon.ico
 ┃ ┣ 📜index.html
 ┃ ┣ 📜logo192.png
 ┃ ┣ 📜logo512.png
 ┃ ┣ 📜manifest.json
 ┃ ┗ 📜robots.txt
 ┣ 📂src
 ┃ ┣ 📂assets
 ┃ ┃ ┣ 📂fonts
 ┃ ┃ ┗ 📂images
 ┃ ┣ 📂components
 ┃ ┃ ┗ 📂common
 ┃ ┃ ┃ ┣ 📜box.jsx
 ┃ ┃ ┃ ┗ 📜spacer.jsx
 ┃ ┣ 📂constants
 ┃ ┃ ┗ 📂design-token
 ┃ ┃ ┃ ┣ 📜color.js
 ┃ ┃ ┃ ┣ 📜layout.js
 ┃ ┃ ┃ ┣ 📜size.js
 ┃ ┃ ┃ ┣ 📜spacing.js
 ┃ ┃ ┃ ┗ 📜tokens.js
 ┃ ┣ 📂features
 ┃ ┣ 📂hooks
 ┃ ┣ 📂libs
 ┃ ┃ ┣ 📂axios
 ┃ ┃ ┃ ┗ 📜axiosInstance.js
 ┃ ┃ ┗ 📂redux
 ┃ ┃ ┃ ┗ 📜store.js
 ┃ ┣ 📂page
 ┃ ┣ 📂styles
 ┃ ┃ ┗ 📜global-style.js
 ┃ ┣ 📂utils
 ┃ ┃ ┗ 📜getDateDifferenceDescription.js
 ┃ ┣ 📜App.css
 ┃ ┣ 📜App.js
 ┃ ┣ 📜App.test.js
 ┃ ┣ 📜index.css
 ┃ ┣ 📜index.js
 ┃ ┣ 📜logo.svg
 ┃ ┣ 📜reportWebVitals.js
 ┃ ┗ 📜setupTests.js
 ┣ 📜.eslintrc.json
 ┣ 📜.gitignore
 ┣ 📜.prettierrc.js
 ┣ 📜README.md
 ┣ 📜package-lock.json
 ┗ 📜package.json

대표적인 보일러플레이트인 create-react-app으로 프로젝트를 생성해주었다.

ESLint설정

그다음,eslint를 설정해주었다
아래는 설치한 내용이다.

npm i -D prettier eslint eslint-plugin-prettier eslint-plugin-react
npm i -D @typescript-eslint/parser@latest
npm i -D @typescript-eslint/eslint-plugin
npm i -D eslint-plugin-unused-imports
npm i -D eslint-plugin-simple-import-sort

eslint-plugin-prettier
ESLint와 Prettier를 결합하여 Prettier의 포메팅 규칙을 ESLint의 규칙으로 사용할 수 있게 하는 플러그인

eslint-plugin-react
React와 관련된 코드 패턴을 검사하기 위한 ESLint 플러그인

npm i -D @typescript-eslint/parser@latest
TypeScript 코드를 분석하기 위한 ESLint 파서
이를 사용하여 ESLint가 TypeScript 코드를 이해하고 린팅할 수 있다.

npm i -D @typescript-eslint/eslint-plugin
TypeScript 코드에 대한 ESlint 규칙을 제공하는 플러그인.
TypeScript의 특정 문법과 스타일 가이드를 린팅할 수 있다.

npm i -D eslint-plugin-unused-imports
사용되지 않는 import문을 식별하여 코드를 더 깔끔하게 관리할 수 있도록 돕늗 ESLint 플러그인

npm i -D eslint-plugin-simple-import-sort
import문을 자동으로 정렬해주는 ESLint 플러그인.
코드의 가독성을 높이고, import문의 일관성을 유지할 수 있다.

ESLint Rule

eslint에서 설정해준 rule

// JSX에서 사용된 변수가 있으면 에러 처리
"react/jsx-uses-vars": "error",
	// React를 JSX에서 사용해야 하며, 사용하지 않으면 에러 처리
    "react/jsx-uses-react": "error", 
    "space-before-function-paren": [
      // 함수 선언에서 괄호 앞의 공백 규칙 설정
      "error", // 위반 시 에러 처리
      {
	     // 익명 함수에서는 공백 무시
        "anonymous": "ignore", 
        // 명명된 함수에서는 공백 사용 안 함
        "named": "never", 
        // 비동기 화살표 함수에서는 공백을 항상 사용
        "asyncArrow": "always" 
      }
    ],
    // TypeScript 파일에서 사용되지 않는 import가 있으면 에러 처리
    "unused-imports/no-unused-imports-ts": "error",  
    // import문 "error", 을 정렬 규칙에 따라 에러 처리
    "simple-import-sort/imports": 
    // cosnole.log 허용
    "no-console": "off", 
    // alert 허용
    "no-alert": "off", 
    // 사용하지 않은 변수 에러 레벨에서 경고 레벨로 변경
    "no-unused-vars": "warn", 
    // prop-types 관련 린트 허용
    "react/prop-types": "off" 

prettier 설정

endOfLine: "lf", 			// 파일의 끝은 Unix 스타일의 줄바꿈(LF)을 사용
	semi: true, 			// 명령문 끝에 세미콜론을 사용
	singleQuote: false, 	// 문자열에는 따옴표 대신 쌍따옴표 사용
	jsxSingleQuote: false, 	// JSX에서도 문자열에 쌍따옴표 사용
	tabWidth: 4, 			// 탭 너비를 4 스페이스로 설정
	useTabs: true, 			// 들여쓰기에 탭 사용
	printWidth: 80, 		// 한 줄의 최대 너비는 80 문자
	trailingComma: "es5", 	// 가능한 경우 ES5에서 유효한 위치에 후행 콤마 사용
	arrowParens: "always", 	// 화살표 함수의 매개변수를 항상 괄호로 감싸기
	bracketSpacing: true, 	// 객체 리터럴의 중괄호 안에 공백 포함
	bracketSameLine: false, // JSX의 마지막 `>`를 다음 줄로 배치 (Prettier 2.4 이하에서는 jsxBracketSameLine 사용)

그외

그외 설정으로는

• global-style을 생성하여 기본 style을 초기화
• 전역상태 관리를 위해 redux 의존성 설치 및 store 파일 생성
• axios 의존성 추가 및 axios-instance 파일 생성
• 간단한 design-token 생성
• 공용 컴포넌트 생성
• utils에 현재 날짜와 주어진 날짜 사이의 차이를 계산하고, 연,월,일로 반환하는 함수 생성 (dayjs 사용)

(추가) day.js와 moment.js

날짜를 사용하기 위해 day.js와 moment.js중 어떤 라이브러리를 사용할까 고민을 하다.
한번 찾아봤습니다.
찾아본 결과 moment.js 레거시하다고 한다
Date객체에 대해 광범위한 연산을 지원하고, 번들에 포함된 내용중 사용되는 부분보다 아닌 부분이 더 많다고한다.

day.js는 moment.js와 호황되는 API를 가진 경량 라이브러리라고한다.
우선 사이즈가 매우작다.
일반적으로 사용될 기본적인 기능만 포함되어있고 이외는 플러그인을 통해 확장사용이 가능하다.
또, moment.js와 사용법이 유사하다.

참고 링크를 남겨두도록하겠다!

느낀거!

이번 과제에서 보일러 템플릿을 만들면서 느낀 것은
다른 task를 작성할때 한결 편하게 만들었다는 생각이 들었다
이전엔 따로 만들어두지 않고 create react app만 사용하거나
기존에 진행했던 프로젝트에서 가져와서 사용했는데
확실히 기초설정을 해준 템플릿을 이용하니 초기 설정시 귀찮음이 많이 줄어들었다
단점을 유의하면서 한동한 꽤 많이 유용하게 써먹을 것같다...!