프로젝트 설정

• 프로젝트 create-next-app으로 생성

yarn create react-app next_prac --template typescript

• redux-toolkit 및 redux-saga 설치

yarn add @reduxjs/toolkit react-redux redux redux-saga @types/react-redux next-redux-saga next-redux-wrapper typesafe-actions axios

• eslint & prettier 설치

yarn add prettier eslint-plugin-prettier eslint-config-prettier -D
yarn add eslint-config-airbnb-base eslint-plugin-import -D

• .eslintrc.json

{
  "plugins": ["prettier"],
  "extends": [
    "airbnb", 
    "plugin:prettier/recommended", 
    "next/core-web-vitals"
  ],
  "rules": {
    "prettier/prettier": "error"
  }
}

• typescript eslint 적용

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --D
yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

• vscode 설정 - mac기준
  vs코드내에서 파일을 저장할 때마다 자동으로 코드가 수정되도록 하는 설정
  commad + , 클릭 후 workspace들어가서 settings.json 생성 후 파일설정

{
    "editor.formatOnSave": false,
    "[javascript]": {
        "editor.formatOnSave": true
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true 
    }
}

• Postcss & Tailwindcss

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init -p

설치 및 설정파일 생성 후 pages폴더안의 _app.tsx에 밑의 코드 추가

import 'tailwindcss/tailwind.css';

• 간단한 api요청을 위해 json-server 이용하기 위해 data.json파일 생성

{
  "boards": [
    {
      "title": "qwe",
      "name": "zxc",
      "comment": "asd",
      "id": 18
    },
    {
      "title": "qweqwe",
      "name": "zxc",
      "comment": "asd",
      "id": 21
    },
    {
      "title": "qasdasd",
      "name": "zxczxc",
      "comment": "qwe",
      "id": 24
    },
    {
      "title": "qew",
      "name": "asdsad",
      "comment": "qweewq",
      "id": 27
    },
    {
      "title": "게시판",
      "name": "게시판",
      "comment": "게시판",
      "id": 28
    }
  ]
}

nextjs 서버는 3000번 포트로 설정되어 있으므로 4000포트로 서버 실행

npx json-server ./data.json --port 4000

그 이후 api요청은 http://localhost:4000/board로 하면 CRUD기능 모두 이용가능하다.
준비가 다 되었으므로

yarn dev

명령어로 nextjs localhost:3000으로 실행