학습자료 제로초님 인프런 강좌 - React로 NodeBird SNS 만들기

1. next 설치

우선 front 폴더에 pakage.json 생성하고(npm init) next 설치

npm i next@9

강의에서 사용된 next 버전과 맞추기 위해 9버전으로 설치했다.
최신 버전을 설치하고 싶으면 npm i next만 입력하면 된다.

그 후 package.json에서 scripts의 "text" 를 "dev" : "next"로 변경한 뒤
react를 설치한다 ( npm i react react-dom )

2. pages

front 폴더 내에 pages 폴더를 생성한 후 index.js 파일을 생상한다.
참고로 pages 폴더는 무조건 이름이 pages여야한다.

이유
: Next가 pages 폴더를 인식해서 그 안에 있는 폴더들을 다 개별적인, 코드 스플리팅 된 page component로 만들어주기 때문.

참고로 next.js에서는 import로 react를 불러오지 않아도 되는데, 해당 강의에서는 습관상 그냥 쓰기로 한다.

ex ) pages에 about 폴더 생성 > test.js 파일 생성
http://localhost:3000/about/test로 들어가보면 Hello, Test로 잘 뜨는 걸 확인할 수 있음.

npm run dev로 화면을 띄워보려는데, 에러가 발생했다.

  error:0308010C:digital envelope routines::unsupported

서치해보니 노드 버전이 높아서 생기는 문제라고 한다.

해결법 : terminal에 다음과 같이 입력

  export NODE_OPTIONS=--openssl-legacy-provider
  [출처] https://han-py.tistory.com/407

근본적인 해결책은 아니기에 가능하면 node 버전을 낮춰서 빌드하는 것이 좋다고 한다.

3. components

page가 아닌 component들은 front 폴더 내에 따로 components 폴더를 만들어 관리한다.
( 참고로 components 폴더는 이름 바꿔도 됨. pages만 무조건 pages라는 이름을 사용하면 된다. )

components 폴더에 공통 레이아웃을 관리할 AppLayout.js 파일 생성

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

const AppLayout = ({ children }) => {
  return (
    <div>
      <div>공통내용</div>
      {children}
    </div>
  )
};

AppLayout.proptypes = { //props로 넘기는 애들을 proptypes로 검사
  children: PropTypes.node.isRequired,
};

export default AppLayout;

//index.js
return(
  <AppLayout>
    <div>Hello, Next!</div> //이렇게 감싸진 애들이 children 자리에 들어간다.
  </AppLayout>
)

결과물

4. Link

공통메뉴에 각 페이지로 전환할 수 있는 링크 만들기.
react router는 넥스트에서는 안 쓰이고, 넥스트의 자체적인 router가 있음.

//AppLayout.js
import Link from 'next/link';

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>
  )
};

• href를 a태그에 적는 것이 아니라 Link에 적는다는 것에 유의할 것!

결과물
각 텍스트를 누르면 해당 페이지로 이동한다.

5. eslint

코드 깔끔하게 정리하기 위해 eslint를 사용하여 코드 룰을 정할 예정

eslint 설치

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

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