Link & eslint

page별로 전환할 수 있는 링크를 만들어보자.

Next는 자체적인 router가 있다.

 

하이퍼레퍼런스(href)로 주소를 붙여주고 a태그를 넣어준다. 주의할 점은 a에다가 href를 적는 것이 아니라 Link 컴포넌트에다가 href를 적어준다. 주의하자.

// AppLayout.js

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

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


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

export default AppLayout;

 

eslint도 설치를 해주자.( -D 개발용으로만 쓰인다.) 둘다 리액트 개발할 때 많이 쓰이는 코드점검용 툴이다.

아래걸 쓰면 여러사람이 코딩을 해도 한 사람이 코딩한거처럼 될 수가 있다. 즉 코드룰을 정해준다.

npm i eslint -D

npm i eslint-plugin-import -D

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

"devDependencies": {
    "eslint": "^7.10.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-react": "^7.21.3",
    "eslint-plugin-react-hooks": "^4.1.2",
  }

 

 

.eslintrc파일도 하나 만들어 준다. 확장자명이 없다.(형식은 json 형식)

앞에 .이 붙는데 이거는 윈도우에서는 의미가 없지만 리눅스에서는 숨김파일이 된다.

// json에는 주석달지 말자 여기는 설명을 위해서
{
    "parserOptions": {
        "ecmaVersion": 2020, // 버전은 2020
        "sourceType":"module", // scrip가 아니고 import export이기 때문에 module
        "ecmaFeatures": { // jsx를 씀
            "jsx": true
        }
    },
    "env": { //환경
        "browser": true, // 브라우저에서 돌아가고
        "node": true,
        "es6": true // 최신문법
    },
    "extends": [
        "eslint:recommended", // 기본규칙들 
        "plugin:react/recommended"
    ],
    "plugins": [ 
        "import",
        "react-hooks"
    ],
    "rules": {
        
    }
}

 

 

 

 

 

 

 

<출처 조현영: [리뉴얼] React로 NodeBird SNS 만들기>

https://www.inflearn.com/course/%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC/dashboard

[리뉴얼] React로 NodeBird SNS 만들기 - 인프런 | 강의