React-nodebird-01

next.js

---

기본 npm init 부터 기본설정을 해보려 한다. 나는 리액트 공부를 할때 주로 CRA를 썼었는데 필요없는 것들이 많이 들어있어 무겁기도 하고 처음부터 제대로 설정하는 법을 인지하는 것과 못한 것의 차이는 크다고 생각이 든다.

> npm init

• 처음 패키지명을 작성하는 란에만 입력 후 -> all enter + yes
  => package.json 생성

> npm i next@9
> npm i react react-dom

• next.js 를 설치한다. 본 프로젝트는 9버전으로 진행한다.

• package.json scripts 설정

  이제 본격적으로 페이지를 만들어보겠다. next는 확실히 리액트 프레임워크라는 이유 때문인지 이 페이지를 만드는 것이 정말 편리하다. 기본 리액트는 라우터를 이용해서 따로 페이지 하나하나씩 설정을 해줘야하는데, next는 그냥 pages라는 폴더를 만들고 그 안에 넣으면 개별적인 페이지 컴포넌트로 만들어주는 것이다. 정말 놀랍도록 편리한 기능이라 생각이 든다.

이제는 재사용을 할 파일들은 components 폴더 안에 만든다
우선 모든 페이지에서 사용할 Applayout.js 컴포넌트를 만들것이다.
이 컴포넌트는 페이지를 감싸고 기본적으로 나타낼 로그인 부분과 목차 제목등등을 나타내고, 그안에 props로 받아오는 children은 가운데에 표시하도록 styled-component를 이용해서 작성할 계획이다.

-next에서는 기존 react에서 쓰던 react-router는 사용하지 않고 따로 next안에 있는 자체적인 라우터를 사용한다.

import Link from 'next/link'
...
<Link href = "/profile"><a>프로필<'a></Link>

위와 같이 사용한다.

eslint를 설치한다 why ? 개발시에 필요한 코드 점검
(코드룰을 정하는 것)

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

.eslintrc

{
   "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", "react"],
   "rules": {
       "jsx-a11y/label-has-associated-control": "off",
       "jsx-a11y/anchor-is-valid": "off",
       "no-console": "off",
       "no-undersocrd-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"
   }
}