[NextJs] Installation Libs from Zerocho's lecture

https://github.com/ZeroCho/react-nodebird/blob/master/ch1/front/package.json

npm i next/@9
npm i react-dom@16
npm i react-dom@16
(next version 9 is compatible to react version 16)

npm i prop-types : typescript 쓰면 필요없음.

Eslint

npm i eslint -D

npm i eslint-plugin-import -D

npm i eslint-plugin-react -D

npm i eslint-plugin-react-hooks -D

{
 "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": { "jsx": true }
  },
  "env": { "browser": true, "node": true, "es6": true },
  "extends": ["eslint:recommended", "plugin:react/recommended"],

  "plugins": ["import", "react-hooks"],
  "rules": {
    //If you're using NEXT.js then you do not require to import React at top of files,
    //nextjs does that for you.
    // suppress errors for missing 'import React' in files
    "react/react-in-jsx-scope": "off",
    // allow jsx syntax in js files (for next.js project)
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], //should add ".ts" if typescript project}
    "no-unused-vars": "warn"
  }
}

변경 후 : eslint
npm i -D babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react-hooks
npm i -D eslint-plugin-jsx-a11y

{
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": { "jsx": true }
  },
  "env": { "browser": true, "node": true, "es6": true },
  "extends": ["airbnb"],

  "plugins": ["import", "react-hooks"],
  "rules": {
    //If you're using NEXT.js then you do not require to import React at top of files,
    //nextjs does that for you.
    // suppress errors for missing 'import React' in files
    //"react/react-in-jsx-scope": "off",
    // allow jsx syntax in js files (for next.js project)
    //"no-unused-vars": "warn",

    "jsx-a11y/label-has-associated-control": "off",
    "jsx-a11y/anchor-is-valid": "off",
    "no-console": "off",
    "no-underscore-dangle": "off",
    "react/forbid-prop-types": "off",
    "react/jsx-filename-extension": "off",
    "react/jsx-one-expression-per-line": "off",
    "object-curly-newline": "off",
    "linebreak-style": "off",
    "no-param-reassign": "off"
  }
}

antd : like bootstrap

npm i antd@4
npm i @ant-design/icons@4
npm i styled-components

Next Redux Wrapper

npm i next-redux-wrapper@6 (일단 강의 버전 매칭)
npm i redux
npm i react-redux
npm i redux-devtools-extension
npm i redux-thunk ( 설치 후 삭제함 )
npm i redux-saga
npm i axios

Carousel Component

npm i react-slick
npm install slick-carousel (css)

npm i immer

Back end : node.js

npm i express

MYSQL DBMS

npm i sequelize sequelize-cli mysql2

npx sequelize init

npx sequelize db:create :db생성 (db:drop)

npm i -g nodemon :글로벌로 설치함.

암호화

npm i bcrypt

CORS에러 해결

npm i cors

로그인

npm i passport (카카오톡, 구글등)
npm i passport-local (id, pwd)

npm i express-session
npm i cookie-parser
npm i dotenv