[React] 실전 예제와 준비사항, Next.js 실행, page와 레이아웃, Link와 eslint, Q&A

Yuri Lee·2022년 5월 4일
0
post-thumbnail

이 글은 인프런 제로초님의 '[리뉴얼] React로 NodeBird SNS 만들기' 를 바탕으로 정리한 내용입니다.

Hello, Next.js > 실전 예제와 준비사항

새로 고침이나 주소 검색, 검색엔진에서 들어왔을 때는 바로 데이터가 보이고, 링크같은 걸 눌렀을 때는 잠깐 로딩창이 보인다. 점점 빨라지는 이유는 캐싱을 사용 했기 때문이다.

Q. 검색 엔진에 노출이될까?

→ 구글은 가능하다. 넥스트를 쓰면 쉽게 검색 엔진에 노출될 수 있다.

Hello, Next.js > Next.js 실행해보기.

cd front

  1. npm init
npm init
  1. next 9 버전 설치
npm i next@9
  1. package.json 파일 수정
{
  "name": "react-nodebird-front",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next"
  },
  "author": "yurilee",
  "license": "ISC",
  "dependencies": {
    "next": "^9.5.5"
  }
}
  1. 실행
npm run dev // run next 
> react-nodebird-front@1.0.0 dev
> next

next는 pages 폴더를 인식해서 이 안의 파일들을 개별적인 페이지 컴포넌트로 만들어준다. (코드 스플리팅) 폴더 이름은 무조건 pages이여야 한다.

Hello, Next.js > page와 레이아웃

주의 사항

pages 안에 페이지들을 만들 때 가끔씩 바로 반영 안되는 경우가 있다. 이럴 경우에는 다시 키면 된다.

run dev run

라우터

리액트를 사용할 때는 리액트 라우터, 서버 사이드 렌더링도 설정해줘야 하는데 , 넥스트는 페이지는 알아서 라우터까지 해준다. 프론트 서버가 있기 때문이다.

pages> folder 도 가능하다.

prop-types

npm i prop-types

prop 로 넘기는 애들은 이것을 통해 한번 검사해주면 된다. 타입스크립트라면 prop types가 필요 없겠지만 자바스크립트로 하고 있기 때문이다.

import React from 'react'
import PropTypes from 'prop-types'

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

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

export default AppLayout

children 은 node 라는 타입이다. react의 node이다. 화면에 그릴 수 있는 모든 것들이 노드다. return 안에 들어갈 수 있는 것. (node.js의 node가 아님)

Hello, Next.js > Link와 eslint

next.js 이모저모

  • next에서는 react router 는 쓰이지 않고, 자체적인 router가 있다.
  • next.js는 react hot loader 기능까지 바로 적용되어 있다.

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 : 개발용으로 사용하기 위해. 고객들에게 중요하지 않으므로 D 추가.
  • eslint : 코드 스타일 정리해준다. 누구는 세미콜론 붙이고, 안붙이고 등등 구별 가능

eslintrc 파일 추가

{
    "parserOptions": {
        "ecmaVersion": 2020, // 버전
        "sourceType": "module", // script 버전이 아닌 module 버전
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "env": {
        "browser": true,
        "node": true,
        "es6": true
    },
    "extends": [ // 규칙, 엄격한 규칙은 아님 지금 해놓은 것은, 추후 바꿀 예정 
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "plugins": [
        "import",
        "react-hooks"
    ],
    "rules": {}
}

Hello, Next.js > Q&A

Q. why Next.js ?

→ 서버 사이드 렌더링을 하려면 리액트랑 노드js 둘다 필요하다. 스프링 장고 등등도 대체 가능. 중요한 것은 서버가 있어야 가능하다는 점이다.

Q. material ui / ant.design 차이?

→ 차이가 없다. 선호의 차이

Q. cors 설정
→ 프론트 서버, 백엔드 서버 도메인이 다르다. 포트만 다르긴 한데.. 포트만 달라도 cors 걸린다. 백엔드 서버에서 설정해줘야 한다. 프론트 서버에서는 쿠키 보내는 것 설정 필요.
→ 브라우저 - 프론트 서버 사이에는 cors 문제가 안일어나지만 프론트 서버 - 백엔드 서버 사이에 일어남

Q. 리액트?

→ 고객 경험이 중요, 웹앱같은 느낌이다. 검색엔진이 필요하면 넥스트 필요하고 아니면 안써도 됨.

Q. 몽고디비?

→ 85퍼센트 이상 sql 만 쓰는 게 나을 것 같다.
→ 모든 테이블은 관계들이 있다. 대부분의 서비스는 관계가 있다. 그러므로 sql 추천
→ 몽고디비를 사용하는 경우..? : 보통 로그를 쌓을 때 사용된다. 로그가 여러가지 형태가 있을 경우, 여러 케이스에 대처하기 위해서이다. 이런 경우에는 몽고디비를 사용하는 경우가 좋다.

Q. react? vue? 둘중에 무엇을?

→ 일단 1개에 집중하도록 하자. 수요가 많은 react

느낀점

현재 회사에서 로그 정보들을 관리하기 위해 몽고디비를 사용하고 있는데 이유가 있었군. 🗯

profile
Step by step goes a long way ✨

0개의 댓글