0: Hello, Next.js

0. 질문 잘하는 법

1. 온라인 커뮤니티의 나쁜 질문 하는 방법

2. 질문 팁

1. 에러 메시지를 올리기 전에 스스로 번역을 해야 함. 한글로 번역만 해도 대부분 풀림!
2. 에러 메시지를 잘라서 올리지 않아야 함 (가급적 텍스트로 올릴 것)
3. 예상되는 에러가 나는 코드도 같이 올리기 (전체 다 올리기 X, git주소 통채로 올리기X)

1. 브라우저 작동방식

1. SSR (전통방식)

1. 작동 방식

브라우저에서 프론트 서버로 데이터 요청
-> 프론트 서버에서 백엔드 서버로 요청
-> 백엔드 서버에서 데이터베이스로 데이터 요청
-> 데이터베이스가 백엔드 서버로 데이터 보냄
-> 백엔드 서버가 프론트 서버로 데이터 보냄
-> 프론트 서버가 브라우저로 데이터 보냄

2. 장점

화면이 한번에 그려짐

3. 단점

로딩 속도가 느려짐

4. 프리 렌더

• 검색엔진일 경우 (사이트 첫 방문 시) : 전통방식
• 일반 사용자 : 리액트방식

2. CSR (SPA방식)

1. 작동 방식

브라우저에서 프론트 서버로 데이터 요청
-> 프론트 서버가 브라우저로 js / html / css / img (화면만) 보냄
-> 브라우저가 백엔드 서버에 직접 데이터 요청
-> 백엔드 서버에서 바로 브라우저로 데이터 보냄

2. 장점

• 데이터 로딩에 시간이 많이 걸려도 화면이 보임

3. 단점

• 전통방식보다 시간이 오래걸릴 수 있음
• 검색엔진에 사이트가 잡히지 않을 수 있음

3. 구체적 예시

어드민 페이지 : SPA 프레임워크로 충분!
B to C : next.js추천

2. 실전예제 & 준비사항

1. Next.js의 특징

• 첫 사이트 방문의 경우 데이터까지 다 서버에서 받아옴 (로딩X)
• 한번 들어간 페이지는 더 이상 로딩이 일어나지 않음
• 캐싱을 써서 속도가 점점 빨라짐
• 프리패칭을 알아서 해줌 (로딩속도 향상, 데이터 캐싱)

2. 환경세팅

• node.js는 실무에선 LTS, 공부할 땐 최신 버전 쓰는 게 좋음

1. 터미널 - npm init을 치고 프로젝트명을 입력한 뒤 나머지는 엔터
2. npm i next@9 react react-dom을 설치
3. package.json의 author에 본인 이름 / scripts 안의 내용을 "dev": "next"로 변경
4. pages폴더 -> index.js파일 생성 후 아래와 같이 적어준다

const Home = () => {
  return (
    <div>Hello, Next!</div>
  )
};

3. Page와 레이아웃

• Next.js는 파일명을 쓰면 알아서 파일명과 같은 경로로 라우팅을 해줌

1. 레이아웃 컴포넌트 사용하기

• components폴더 -> AppLayout.js파일 생성 (이름은 자유)
• npm i propTypes설치 (Typescript라면 생략가능)

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

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

4. Link와 eslint

1. Next.js 라우팅

• Next.js는 react-router-dom이 아닌 next/link를 사용한다.
• 개발모드일 때 링크를 눌렀을 때 느릴 수도 있다.
• Link태그 쓰는 방법

// href는 꼭 Link태그에 써줄 것. Link태그 안에 a태그 써주기.
<Link href='/'><a>노드버드</a></Link>

2. eslint설치

• 리액트 개발할 때 많이 쓰는 코드 점검도구, 협업 시 코딩 룰 잡기 편함

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

• .eslintrc라는 파일을 생성하여 아래의 설정을 기재해주고 에디터와 연동시켜주는 작업이 필요함

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

5. QnA

1. CORS설정

SSR의 경우, 프론트 서버 / 백엔드 서버 사이에 CORS설정이 필요함

6. 기타 팁

• node기초지식 : thebook.io에서 node책 참고
• Next.js를 쓰는 파일 안에서는 import React from 'react'를 쓸 필요가 없음
• 서버를 실행한 후에 추가한 페이지는 인식을 잘 못하므로 껐다가 다시 키기