feat: add formatter

[inkyu0103]

설명

코드 품질을 위해 다음 도구를 설치하고, 특정 옵션들을 적용합니다.

• eslint
  • 절대 경로
• prettier
• husky

[inkyu0103]

224f9c2

• 절대 경로를 위한 eslint 플러그인 설치 및 동작 확인 완료
• ts에서 절대경로를 인식하지 못하는 문제 존재
  • baseUrl
  • eslintrc 옵션 설정

[inkyu0103]

9e0221f ts에서 절대경로를 인식하지 못하는 문제 해결

• 절대경로를 사용하지 않은 부분들을 빠르게 수정할 수 있도록 no-relative-import-paths/no-relative-import-paths 룰을 사용

• tsconfig의 baseUrl이 "./" 로 설정되어있었고, eslint auto fix를 돌려보니, 다음과 같이 수정되었음.
  수정 전 : ./Racket
  수정 후 : frontend/components/rackets/Racket

• eslintrc.json에서 option을 다음과 같이 수정해서 앞의 frontend를 해결할 수 있었음. configuration 참고

{
  "extends": ["next/core-web-vitals", "prettier"],
  "plugins": ["no-relative-import-paths"],
  "rules": {
    "import/no-anonymous-default-export": "off",
    "no-relative-import-paths/no-relative-import-paths": [
      "error",
      {
        "rootDir": "frontend", // 이부분과
        "prefix": ""  // 이부분
      }
    ]
  }
}

위 방식으로 Next.js에서 절대경로를 인식하도록 설정하였지만, storybook에서는 모듈을 찾을 수 없다는 오류가 여전히 발생.
해당 문제로 이미 github issue가 열렸다가 문제가 해결되어 닫혀있었고, 해결책으로 main.js에 wepackFinal 을 추가하라는 설명이 올라와있었음.

webpackFinal: async (config, { configType }) => {
    config.resolve.modules = [path.resolve(__dirname, ".."), "node_modules"];
    /*
    config.resolve.alias = {
      ...config.resolve.alias,
      components: path.resolve(__dirname, "../components"),
    };

    */
    return config;
  },

이 프로젝트에서는 alias를 따로 사용하고 있지 않기 때문에 해당 옵션을 주석 처리한 후 스토리북을 실행해 보았을 때, 더 이상 문제가 발생하지 않았음.

더 간단한 방법으로는 storybook-addon-next 을 설치해서 addon에 붙이면 끝.

[inkyu0103]

a654d47

husky 및 lint-staged 적용을 위한 패키지 추가

[inkyu0103]

• 다른 feature 작업 우선순위가 높아, husky를 제외한 나머지를 적용한 상태로 머지
• husky 적용은 개별 이슈로 해결