react의 동작원리는 브라우저가 front server에서 html,js 파일을 최초로 1회만 받아오고, 이후 페이지 요청 시 backend sever에서 직접 data를 받아온다. → CSR(SPA) 방식
하지만 웹서비스에 필요한 모든 정적 리소스를 한 번에 다 다운로드해야하기 때문에 초기 구동 속도가 상대적으로 느리다. (결국 브라우저가 프론트로 부터 파일을 받아올때 현제 페이지에서 필요하지 않은 컴포넌트까지 다 불러오게 되는 단점이 있다)
이는 code spliting과 server side rendering을 통해 어느 정도 극복할 수 있는데, 이를 지원해 주는 도구가 Next.js
라는 라이브러리이다.
Next.js를 사용하게 되면, 처음 접속할 때만 서버 사이드 렌더링(SSR방식)을 따르고 (브라우저가 접속한 url에 대하여 front server에 요청하면, front에서 url에 대응하는 api 요청을 백엔드에게 직접 요청하고, 백엔드에서는 요청된 api에 맞는 데이터를 데이터베이스 조회를 통해 그때그때마다 결과값을 던져줌), 그 이후에는 react의 동작방식인 CSR(SPA) 방식을 따른다.
다시 정리하면, 초기 페이지 로딩에 대해서는 SSR방식으로 동작시킬 수 있고, 이후의 요청에 대해서는 CSR방식으로 동작하기 때문에 SSR방식의 장점인 SEO(검색 엔진 최적화)에 유리하면서도 CSR의 이점을 활용할 수 있다. ✨
npm init
→ packge.json 생성npm i next@9
→ 9버전 next 설치 : node modules 생성package.json
아래와 같이 생성{
"name": "react-nodebird-front",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "next" //명령어를 한 개의 키워드로 줄일 수 있어요!
},
"author": "누가 개발했는 지 자신의 이름을 작성하세요",
"license": "ISC",
"dependencies": {
"next": "^9.5.5"
}
}
📦front
┣ 📂pages # pages 폴더를 만들어줍니다
┃ ┗ 📜index.js
┣ 📜.editorconfig
┣ 📜package-lock.json
┗ 📜package.json
index.js
const Home <= () => {
return (
<div>Hello,Next!</div>
);
}
export default Home;
📦pages
┣ 📂about
┃ ┣ 📜[name].js #이렇게 대괄호를 사용해 동적 라우팅을 사용할 수 있음
┃ ┗ 📜koeunseo.js
┣ 📜index.js
┣ 📜profile.js
┗ 📜signup.js
📦front
┣ 📂components #components 폴더 새로 추가!
┃ ┗ 📜AppLayout.js
┣ 📂pages
┃ ┣ 📜index.js
┃ ┣ 📜profile.js
┃ ┗ 📜signup.js
┣ 📜.editorconfig
┣ 📜package-lock.json
┗ 📜package.json
AppLayout.js
이점 : 이렇게 레이아웃도 컴포넌트로 따로 빼주면, 각 페이지에 조립하듯 컴포넌트를 삽일할 수 있고, 페이지별로 다른 레이아웃을 설정하고 싶을때에도 쉽게 조작이 가능하다. (또 다른 레이아웃을 컴포넌트로 빼주면 됨)
import Proptypes from 'prop-types'
const AppLayout = ({children}) => {
return (
<div>
<div>공통메뉴</div>
{children}
</div>
)
};
AppLayout.Proptypes = {
children: Proptypes.node.isRequired
}
export {AppLayout}
props로 넘겨주는 데이터들은 propstype으로 검사를 해준다.
children으로 들어오는 props의 type은 (react의) 노드
npm i eslint -D
npm i eslint-plugin-import -D
npm i eslint-plugin-react -D
npm i eslint-plugin-react-hooks -D
→ 필자는 해당링크를 통해 vscode에 eslint와 prettier를 설정해주었다! 👩🏻💻🌟