코드잇 스프린터 울 3번째 팀원들과 중급 프로젝트 시작!(했음)

또한, 프로젝트 초기 설정(eslint, prettier 등)을 팀원들 모두가 해본 경험이 없었기 때문에 어깨 너머로 배운(?) 내가 맡게 되었다.

나도 해본 적은 없었기 때문에.. 생각보다 오래 걸리기도 했고 시행착오도 많이 겪었다. 🧑‍💻

분명 정리하지 않으면 잊어버릴 것이 분명하기 때문에 조금 지났지만 지금이라도 정리해보려고 한다!

그럼 레츠고~!~!~!!!! 🚀

---

🍀 nextJS 설치

nextJS 버전은 14를 사용하기로 팀원들과 얘기를 나눴다. 그래서 App router를 사용해서 코딩해야 했다.

현재 폴더에 설치

1. 폴더를 생성 후 vs code로 들어가서 터미널에 npx create-next-app . 명령어를 작성
   Next.js는 물론이고 리액트 같은 필요한 것들을 같이 설치해줌
2. npm init
   package.json 파일이 생성됨
   파일의 license 부분 -> MIT로 변경
3. npm install react@latest next@latest react-dom@latest
   react, next, react-dom 최신 버전 설치
4. package.json의 scripts 수정

   "scripts": {
   	"dev": "next dev"
   }

5. app 폴더 안에 page 파일 생성 (반드시 소문자로!) - Next.js는 실행할 때 app 폴더 안의 page라는 파일을 찾아본다.
6. page.tsx 만들고 컴포넌트 생성
   터미널에서 npm run dev 명령어로 실행

   // default 컴포넌트로 export 되어야 함
   export default function Page() {
       return <>hello</>;
   }

7. 초기 설정 끝!

---

🍀 esLint 설정

npx create-next-app . 명령어를 입력하고 초기 세팅을 진행하면 기본적으로 .eslintrc.json 파일이 생성된다.

{
  "extends": "next/core-web-vitals"
}

airbnb 스타일 규칙을 사용하기 위해 필수 종속성까지 한번에 받는다.

npx install-peerdeps --dev eslint-config-airbnb

이 프로젝트에선 TypeScript를 사용할 것이기 때문에 관련 패키지도 받아준다.

npm install --save-dev typescript eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

@typescript-eslint/parser는 eslintrc의 parser에 설정이 되어 있어야 한다.

"parser": "@typescript-eslint/parser",

🔍 eslint-plugin-import란?

공식문서에 설명하기로, ES6+ import/export 문법의 린팅을 지원하고, 파일 경로와 import 이름의 오타를 예방한다. 이러한 것들을 마크업 에디터에 표시해주는 모듈이라고 한다.

설치

npm install --save-dev eslint-plugin-import

.eslintrc에 설정

eslintrc 파일에서는 아래와 같이 plugins에 설정을 한다.

// 플러그인에 eslint-plugin-import를 설정
plugins: [
	'import',
]
// eslint-plugin-import에서 추천하는 규칙을 적용
extends: [
	"plugin:import/recommended",
]

위에서도 말했듯이 이 프로젝트에선 TypeScript를 사용하기 때문에 eslint-import-resolver-typescript 라이브러리도 설치해준다.

npm install --save-dev eslint-import-resolver-typescript

추가적으로 세팅한다.

.eslintrc.json 파일

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier", "import"],
  "parserOptions": {
    "project": "./tsconfig.json",
    "createDefaultProgram": true
  },
  "env": {
    // 전역객체를 eslint가 인식하는 구간
    "browser": true, // document나 window 인식되게 함
    "node": true,
    "es6": true
  },
  "ignorePatterns": ["node_modules/"], // eslint 미적용될 폴더나 파일 명시
  "extends": [
    "airbnb",
    "airbnb-typescript",
    "airbnb/hooks",
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended", // ts 권장
    "plugin:prettier/recommended", // eslint의 포매팅을 prettier로 사용
    "prettier", // eslint-config-prettier prettier와 중복된 eslint 규칙 제거
    "eslint-config-prettier",
    "plugin:import/recommended",
    "plugin:import/typescript",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended"
  ],
  "settings": {
    "import/resolver": {
      "typescript": {}
    },
    "import/parsers": { "@typescript-eslint/parser": [".ts"] }
  },
  "rules": {
    "@typescript-eslint/no-explicit-any": "off",
    "react/react-in-jsx-scope": "off", // react 17부턴 import 안해도돼서 기능 끔
    // 경고표시, 파일 확장자를 .ts나 .tsx 모두 허용함
    "react/jsx-filename-extension": ["warn", { "extensions": [".ts", ".tsx"] }],
    "react/function-component-definition": [
      2,
      { "namedComponents": ["arrow-function", "function-declaration"] }
    ],
    "sort-imports": [
      "error",
      {
        "ignoreCase": false,
        "ignoreDeclarationSort": false,
        "ignoreMemberSort": false,
        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
        "allowSeparatedGroups": false
      }
    ],
    "import/order": [
      "error",
      {
        "groups": [
          ["builtin", "external"],
          "internal",
          ["parent", "sibling"],
          "index",
          "object"
        ],
        "pathGroups": [
          {
            "pattern": "~/**",
            "group": "external",
            "position": "before"
          },
          { "pattern": "@*", "group": "external", "position": "after" },
          { "pattern": "@*/**", "group": "external", "position": "after" }
        ],
        "pathGroupsExcludedImportTypes": ["react"],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        }
      }
    ]
  }
}

---

🍀 prettier 설정

eslint-config-prettier
: eslint에서 prettier와 충돌할 수 있는 rule을 꺼버림
코드 오류를 잡는데는 eslint, 코드 포맷팅에는 prettier를 사용하는 방법이다.

eslint-plugin-prettier
: prettier를 eslint의 rules로 동작하게 함

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

.prettierrc.json 파일

{
  "printWidth": 80, // 코드 한줄 최대치
  "tabWidth": 2, // 들여쓰기 2칸(스페이스 2칸)
  "useTabs": false, // 탭 대신 스페이스
  "semi": true, // 코드 마지막에 세미콜론
  "singleQuote": true, // 문자열을 작은따옴표로 작성(false = 큰 따옴표)
  "trailingComma": "all", // 객체나 배열 등의 맨 마지막에 콤마
  "bracketSpacing": true, // 객체 리터럴에서 괄호에 공백 삽입 여부
  "arrowParens": "always", // 화살표 함수에서 단일 파라미터에도 괄호 사용
  "endOfLine": "auto"
}

---

🍀 redux toolkit 설정

리덕스 세팅에 필요한 패키지 설치

npm install redux react-redux next-redux-wrapper @reduxjs/toolkit

redux toolkit에 관한 내용은 따로 작성할 예정이다. (할많하않...)

---

🍀 Axios 설치하기

npm install axios

---

공부하면서 정리했지만 분명 중복되는 코드도 있을거고, 필요없는 코드도 있을 것이다.
더 공부하면 눈에 보이겠지? 일단 정리는 여기까지~,,, 🥹