이 글은 인프런 제로초님의 '[리뉴얼] React로 NodeBird SNS 만들기' 를 바탕으로 정리한 내용입니다.
Hello, Next.js > 실전 예제와 준비사항
새로 고침이나 주소 검색, 검색엔진에서 들어왔을 때는 바로 데이터가 보이고, 링크같은 걸 눌렀을 때는 잠깐 로딩창이 보인다. 점점 빨라지는 이유는 캐싱을 사용 했기 때문이다.
Q. 검색 엔진에 노출이될까?
→ 구글은 가능하다. 넥스트를 쓰면 쉽게 검색 엔진에 노출될 수 있다.
Hello, Next.js > Next.js 실행해보기.
cd front
- npm init
npm init- next 9 버전 설치
npm i next@9- 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"
}
}- 실행
npm run dev // run next
> react-nodebird-front@1.0.0 dev
> nextnext는 pages 폴더를 인식해서 이 안의 파일들을 개별적인 페이지 컴포넌트로 만들어준다. (코드 스플리팅) 폴더 이름은 무조건 pages이여야 한다.
Hello, Next.js > page와 레이아웃
주의 사항
pages 안에 페이지들을 만들 때 가끔씩 바로 반영 안되는 경우가 있다. 이럴 경우에는 다시 키면 된다.
run dev run라우터
리액트를 사용할 때는 리액트 라우터, 서버 사이드 렌더링도 설정해줘야 하는데 , 넥스트는 페이지는 알아서 라우터까지 해준다. 프론트 서버가 있기 때문이다.
pages> folder 도 가능하다.
prop-types
npm i prop-typesprop 로 넘기는 애들은 이것을 통해 한번 검사해주면 된다. 타입스크립트라면 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 AppLayoutchildren 은 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
느낀점
현재 회사에서 로그 정보들을 관리하기 위해 몽고디비를 사용하고 있는데 이유가 있었군. 🗯
