프로젝트 초기 세팅 (with 템플릿, eslint, prettier, commitLint, tailwind)

시작하며...

이번 프로젝트에서 프로젝트 초기 세팅을 하게 되었는데 초기 세팅을 진행한 순서와 방법에 대해 글을 작성하려고 한다.

초기세팅!

 

1. 템플릿 만들기

가장 먼저 깃허브 이슈와 Pull Requset 템플릿을 만들었다.

만드는 방법은 아래 링크에서 확인할 수 있다. https://jjang-j.tistory.com/79

[GitHub] 깃허브 이슈(issue) & PR(Pull Request) 템플릿 만들기

 

이슈 템플릿은 위에 있는 내용 그대로 사용하였고, PR 템플릿은 아래와 같이 구성하였다.

PR 템플릿

 

2. ESLint 린트 설정

이전 프로젝트에서는 간편하게 airbnb 로 설정했었는데 이게 생각보다 규칙이 너무 빡빡해서 개발 도중에 위에 주석을 달거나 설정 파일에서 규칙을 꺼버렸다. 😅

off 한 규칙들

그래서 이번에는 필요한 플러그인들을 설치하여 적용하고, 필요한 규칙 작성하여 적용하였다.

 

1. parser

TypeScript 프로젝트이므로, TypeScript 코드를 분석하기 위해 @typescript-eslint/parser 를 사용했다.

 

2. extends

그리고 아래에 있는 규칙들을 확장했다.

• next/core-web-vitals : Next.js 에서 웹 핵심 성능 지표를 포함한 기본 ESLint 규칙
• next : Next.js 에서 권장하는 기본 ESLint 설정
• eslint:recommened : ESLint 에서 추천하는 기본 규칙
• plugin:import/recommended : eslint-plugin-import 에서 권장하는 규칙
• plugin:import/typescript : eslint-plugin-import 규칙
• plugin:@typescript-eslint/recommended : TypeScript 용 ESLint 플러그인에서 추천하는 규칙
• plugin:react-hooks/recommended : React hooks 관련 규칙
• plugin:tailwindcss/recommened : Tailwind CSS 사용 권장 규칙
• prettier : Prettier 와 충돌하는 ESLint 규칙 비활성화

 

3. plugin

다음과 같은 플러그인을 적용했다.

• import : ES6 모듈 사용 시 유용한 규칙 제공
• @typescript-eslint : TypeScript 코드에 대한 추가 규칙 제공
• react-hooks : React hooks 사용 시 유용한 규칙을 제공하는 플러그인
• tailwindcss : Tailwind CSS 관련 규칙을 제공하는 플러그인
• prefer-arrow : 화살표 함수를 권장하는 플러그인

 

4. rules

추가적으로 아래에 있는 규칙들을 적용시켰다.

• arrow-body-style : 화살표 함수 스타일 강제
• curly : 모든 제어문 중괄호 강제
• max-depth : 코드 중첩 길이 제한
• import/export : export 문 관련 규칙 경로 설정
• react/react-in-jsx-scope : JSX 범위 내에 React가 필요하지 않도록 비활성화
• prefer-arrow/prefer-arrow-functions : 화살표 함수 선호하도록 강제

 

코드

그래서 아래 코드와 같이 적용해 봤다. 다른 코드들을 참고해 보고 팀에서 정한 코드 컨벤션에 따라 필요해 보이는 규칙이 있으면 추가하는 방식으로 ESLint 를 적용해 봤다. 프로젝트가 다 끝나고 해당 규칙들을 사용해 보니 airbnb 보다는 덜 빡빡하지만 중요한 규칙들은 다 적용이 되어 있어 코드 품질과 일관성을 잘 유지하여 코드를 작성했다. 결론은 airbnb 보다 만족 😊

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "next/core-web-vitals",
    "next",
    "eslint:recommended",
    "plugin:import/recommended",
    "plugin:import/typescript",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
    "plugin:tailwindcss/recommended",
    "prettier"
  ],
  "plugins": ["import", "@typescript-eslint", "react-hooks", "tailwindcss", "prefer-arrow"],
  "rules": {
    "import/order": [
      // 생략
    ],
    "arrow-body-style": ["error", "always"],
    "curly": ["error"],
    "max-depth": ["error", 4],
    "import/export": "warn",
    "react/react-in-jsx-scope": "off",
    "prefer-arrow/prefer-arrow-functions": [
      "error",
      {
        "disallowPrototype": true,
        "singleReturnOnly": false,
        "classPropertiesAllowed": false
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "typescript": true
    }
  }
}

 

3. Prettier 설정

코드의 형식을 일관되게 유지하기 위해 Prettier 를 설정하였다.

 

코드

아래 코드처럼 적용하여 팀원들 간 일관된 코드 스타일을 유지할 수 있었다. 이것도 만족 😊

{
  "printWidth": 100, // 최대 한 줄 길이
  "tabWidth": 2, // 탭 너비
  "semi": true, // 문장 끝 세미콜론
  "singleQuote": true, // 문자열 작은따옴표
  "arrowParens": "always", // 화살표 함수 매개변수 괄호
  "endOfLine": "auto", // 파일 끝 자동 줄바꿈
  "trailingComma": "all", // 후행 쉼표
  "bracketSpacing": true // 객체 리터럴 중괄호
}

 

+) 적용 결과

적용 전

적용 전

적용 후

적용 후

 

4. Commit Lint 설정

이전 프로젝트에서는 커밋 컨벤션을 정했음에도 불구하고 지켜지지 않는 경우가 다수 발생했었다. 그래서 이런 문제를 사전에 방지하고자 Husky 의 CommitLint 를 설정하였다.

 

아래 링크에서 규칙을 조금 수정해서 적용하였다. https://jjang-j.tistory.com/121

commitlint 로 커밋 메시지 규칙 설정하기 🚧

 

5. Tailwind CSS

이번 프로젝트에서 처음으로 Tailwind CSS 를 사용하게 되었는데 처음에는 코드도 지저분해 보이고 Tailwind 문법을 외워야 한다는 번거로움이 있었는데 막상 사용해 보니 편하고 빠르게 개발할 수 있었다. 아무튼 extend 에 기본 테마를 확장할 수 있다고 하여 임시용으로 추가해 봤다.

그리고 모바일버전에서는 hover 로 지정한 색이 좀 이상?하게 적용이 되어서 hoverOnlyWhenSupported 속성을 true 로 하였다.

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        main500: '#4CBFA4',
      },
    },
  },
  future: {
    hoverOnlyWhenSupported: true,
  },
  plugins: [],
};
export default config;

 

그리고 이후에 팀원분이 피그마 시안을 바탕으로 타이포그라피와 색상을 기본 테마로 확장해 주어서 편하게 사용했다

tailwind

 

6. 필요한 라이브러리 설치

그 밖에 필요한 라이브러리들을 설치했다. 그러면 이제 필요한 초기 세팅을 다 마쳤다.

 

마치며...

초반에는 좀 귀찮지만 이겨내고 초기 세팅을 잘하면 그 이후엔 일관성 있게 코딩을 할 수 있게 된다. 이번엔 CommitLint 만 사용해 보았는데 다음엔 Husky 를 제대로 사용해보고 싶다. 🍀👍