ReactJsとNextJs

• 
• Sugoi Ebooks(Write in English)
• Naver Cafe
• Sugoi Japanese
• Find a Job in Japan

• • NextJS 설치
    • 코딩스타일 검사 라이브러리 설치 (Prettier)
    • ESLint 관련 추가 라이브라리
    • TypeScript 설정 변경

예전에 잠깐 다뤄본 ReactJs가 지금 많이 바뀐 관계로 잊어버리기 전에 다시한번 정리해 본다.

NextJS 설치

ReactJs와 NextJs를 설치하고 설정하는데 이런저런 귀찮음이 있으니, create-next-app을 설치해서 NextJs기본 설정과 폴더구조(scaffold) 를 쉽게 만들도록 해보자.

npm install -g create-next-app

이때, npm install 로 설치하면 create-next-app 이 시스템의 아무곳에서도 실행되도록 package manager에 포함되는데 단지 이번만 create-next-app을 설치하고 실행하고 싶다면 npx 를 이용하여 해당 명령을 실행(package ecxecute) 할수 있다.
즉, npm 은 두고두고 사용할 라이브러리를 설치하는 명령어, npx는 지금만 사용하고 끝낼 라이브러리설치하는 명령어이다.

위의 npm 명령어로 실행했다면 컴퓨터 어디서든지, create-next-app 명령어를 실행할수 있다. “npm uninstall -g create-next-app” 로 언인스톨한다음 create-next-app 명령어를 치면 그런거 없다고 나온다.
그럴때는 이번만 설치해서 실행하는 npx create-next-app 을 실행하면 된다.

npx create-next-app 

실행해보면 , 일단 create-next-app 을 먼저 실치하고나서, create-next-app 을 실행하는 것을 볼수 있다.

Need to install the following packages:
create-next-app@14.2.5
Ok to proceed? (y) y
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/..../...../my-app-test2.

Using npm.

Initializing project with template: app 


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- eslint
- eslint-config-next

이렇게 여러가지 질문은 받게 되는데, TypeScript,ESLint,Tailwind,src,App Router,alias 등 선택하면된다.
일일이 선택하는게 귀찮다면 아래처럼 커멘드라인에서 직접 적어도 된다.

npx create-next-app ./my-project-folder --ts --no-tailwind \
      --eslint --app --src-dir --import-alias '@/*'

코딩스타일 검사 라이브러리 설치 (Prettier)

코딩스타일을 통일시켜주는 Prettier를 설치한다.

npm install --save-dev prettier

설정에 대한 공식 설명서를 참고한다.
https://prettier.io/docs/en/options

아래는 샘플이다. prettier.config.mjs

/** @type {import("prettier").Config} */
const config = {
    tabWidth: 4,
    printWidth: 120,
    overrides: [
        {
            files: "*.{json,json5,html,yaml,yml}",
            options: {
                tabWidth: 2,
            },
        },
        {
            files: "*.md",
            options: {
                tabWidth: 2,
                trailingComma: "none",
            },
        },
    ],
};

export default config;

추가로 .prettierignore 파일을 만들고 설정한다.

/pnpm-lock.yaml 
/package-lock.json

검사와 자동수정은 아래의 두 명령어로 한다.

npx prettier --cache  --check  .
npx prettier --cache  --write  .

매번 입력하기 귀찮으니까 package.json 에 포맷검사와 수정을 할수있는 명령어를 추가해보자.
package.json

"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"plint-check": "prettier --cache --check .",
"plint-fix": "prettier --cache --write ."
},

ESLint 관련 추가 라이브라리

eslint 관련 추가 라이브러리를 설치하면 좋다.

eslint-plugin-simple-import-sort : import 자동 정렬
typescript-eslint : ESLintのTypeScript용 룰을 제공

npm install  --save-dev eslint-plugin-simple-import-sort  @typescript-eslint/parser @typescript-eslint/eslint-plugin  

설치된 플러그인을 사용하기 위해서 .eslintrc.json 파일을 아래처럼 수정한다.

{
  "extends": [
    "next/core-web-vitals",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": true
  },
  "plugins": ["simple-import-sort", "@typescript-eslint"],
  "rules": {
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error",
    "@typescript-eslint/no-misused-promises": [
      "error",
      {
        "checksVoidReturn": false
      }
    ],
    "redos/no-vulnerable": "error"
  }
}

TypeScript 설정 변경

tsconfig.json에 typescript 설정을 확실히 추가해 준다.
tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "noImplicitOverride": true,
    "noImplicitReturns": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    ....
    }
 }