[리액트]nodebird 섹션0. - Link와 eslint

react에서는 링크 이동할때 react-router를 쓰지만,
next에서는 자체적인 라우트가 있다.

AppLayout.js

import React from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link';

const AppLayout = ({ children }) => {
  return(
    <div>
      <Link href="/">노드버드</Link>
      <Link href="/profile">프로필</Link>
      <Link href="/signup">회원가입</Link>
      {children}
    </div>
  )
}

AppLayout.propTypes = {
  children:PropTypes.node.isRequired,
}
export default AppLayout;

eslint 설치

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

-D 를 붙이면, 개발용으로만 붙이는 것이다.

package.jsn 설치되었다고 나온다.

.eslintrc 파일을 만들어준다.(확장자는 없다)

.eslintrc

{
  "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":{

  }
}