React 적용하기

C:\Users\fabxo\WebstormProjects\react-nodebird\front>npm init
C:\Users\fabxo\WebstormProjects\react-nodebird\front>npm i react react-dom next
C:\Users\fabxo\WebstormProjects\react-nodebird\front>npm i -D nodemon webpack
C:\Users\fabxo\WebstormProjects\react-nodebird\front>npm i -D eslint

init을 통해 package.json을 자동생성 하였다. 직접 만들어도 상관없다.

 

{
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "plugins": [
    "import",
    "react-hooks"
  ]

.eslint파일을 작성한다.

 

 

C:\Users\fabxo\WebstormProjects\react-nodebird\front>npm i -D eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks

 

next는 검색어에 노출 될 수 있도록 서버사이드 렌더링을 알아서 해준다.

SPA의 단점으로 지목받는 화면일부를 보려고 하더라도 통째로 다운받는 상황에 대해서도

코드 스플릿으로 알아서 한부분만 로딩해주는 프레임워크이다.

따라서 실무에서도 설치가 항상 권장된다. (재미있게도 view.js 에서는 nuxt.js라는 이것의 짝퉁이 있다고 한다.)

next는 자체적으로 router를 가지고 있어서 자신의 것을 사용한다. 따라서 react의 router를 사용하지 않는다. 

 

next의 router는 pages폴더하위에 폴더 이름에 따라 자동으로 처리해준다. 정말 간편하다.

반면 react router는 <Router><Switch><Route path="">등에 관한 불필요하고 번잡한 설정들을 작성해야 한다는 걸 알게 되었다. 

 

{
  "name": "react-nodebird-front",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "author": "fabxoe",
  "license": "MIT",
  "dependencies": {

    "next": "^9.0.6",
    "react": "^16.10.0",
    "react-dom": "^16.10.0"
  },
  "devDependencies": {
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-react": "^7.14.3",
    "eslint-plugin-react-hooks": "^2.1.0",
    "eslint": "^6.4.0",
    "nodemon": "^1.19.2",
    "webpack": "^4.41.0"
  }
}

 "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },

 

 pakage.json 파일의 scripts 부분에 세가지 코드를 작성하자.

npm run dev의 명령어로 next를 사용할 수 있다.

 

---

참조: https://www.inflearn.com/course/react_nodebird/