React node next 세팅

0. front, back 폴더 만든후

front 폴더에 npm init 으로 패키지를 만든다

 

 

1. 필요한 것들 설치 

npm i react react-dom next

npm i -D nodemon webpack

 

next 는 react위에서 돌아가는 프레임워크

코드스플리팅과 서버사이드렌더링 제공

 

npm i -g next

 

//package.json
  "scripts": {
    "dev": "next",
    "build":"next-build",
    "start":"next-strat"
  },

// project/front/pages/index.js

const Home = () => {
    return(
        <div>Helllo next</div>
    )
}

export default Home;

next run dev 하면 실행

 

 

pages 폴더에 폴더, 파일 만들면 url로 파일경로대로 타고 들어갈수 있음

react router를 쓸필요 없이

next가 각각의 페이지에 대해서 서버사이드렌더링과 코드스플리팅을 알아서 해줌

 

import React from 'react';
import Link from 'next/link';  //

const Home = () => {
    return(
        <>
        <Link href="/main"><a> // main으로이동하자 </a></Link>
        <div>Helllo next</div>
        </>
    )
}

export default Home;

 

 

eslint

npm i -D eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks

.eslintrc (eslint설정파일) 

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

 

 

antd

npm i antd

antDesign 

 

prop-types

부모로부터 물려받은 props 자식이 제대로 받았는지 검증

npm i prop-types

자료형을 적으면, 부모로부터 올바른 자료형을 받았는지 검사를 해줌

(안정화)