Next.js
1. 서버 사이드 렌더링 (SSR)
html을 서버에서 만드는 것
- 클라이언트 사이드 렌더링 (CSR) : 리액트, 뷰
서버가 아닌 유저 브라우저에서 실시간으로 만들어주는 것
단점 : 구글 검색 노출이 어려움 / 첫 페이지 로딩 속도가 느림 (수익성에 악영향)
서버 사이드 렌더링은 서버에서 미리 만들어 보내줌
좀 더 가볍고, 구글 검색 노출이 잘 되는 편이다. 원하는 곳에서 CSR도 가능!
Next.js는 풀스택 프레임워크!
단점 : 프로젝트가 커지면 복잡해짐 / 클라이언트 컴포넌트와 서버 컴포넌트 구분해서 짜야되는 것도 복잡! / websocket이나 webRTC는 서버 하나 더 만들어서 해야됨
2. 설치 / 개발환경 셋팅
Node.js18버전 이상 필요npx create-next-app@latest- App router 선택은 Yes (나머지는 프로젝트에 따라 알아서 선택)
- app 폴더 안의
page.js: 메인페이지 npm run dev: 미리보기 가능!
- Node.js 버전
컴퓨터에 v18.16.0 설치되어 있는데 Next.js를 위해서는 v18.17.0 이상이어야 된대요.
You are using Node.js 18.16.0. For Next.js, Node.js version >= v18.17.0 is required.
그래서... Node.js LTS 버전 냅다 다운로드 받았다. (v20.11.0)
파일 설명
page.js: 메인페이지layout.js: page.js를 감싸는 파일
페이지 바깥 쪽에 적을 게 있으면 전부 layout.js에!
head 태그에 넣는 것들을 여기에 넣거나, 페이지 간 공유하고 싶은 UI (상단메뉴 등)globals.css: 모든 페이지에 적용할 스타일파일명.module.css: 특정 페이지에만 적용 가능 (해당 파일에 적용되는 css)- api 폴더 : 서버 기능 만드는 곳
- node_modules 폴더 : 설치한 라이브러리 보관
- public 폴더 : 이미지 등 소스코드 외의 파일 보관
package.json: 설치한 라이브러리 자동 기록 / 터미널 명령어
3. 여러 페이지 만들기 (라우팅)
URL마다 다른 페이지를 보여주려고 한다. : 라우팅
- URL 만드는 기준은 개발자 맘대로!
- REST API 원칙 참고해보기 ^,^
- Next.js는 파일, 폴더 하나 만들면 라우팅 끝!!! (자동 라우팅 기능)
- app 폴더에 자유롭게 폴더를 만든다. : 폴더명과 동일한 URL이 자동 생성됨
해당 폴더 안에 파일을 만든다. : 파일 이름은 무조건page.js!!! - 만약
/abc/def로 이동을 하고 싶다?
abc 폴더 안에 def 폴더 만들고 그 폴더 안에 page.js 만들어서 레이아웃 쓰면 됨
- 네비바
<div className="navbar">
<Link href="/">홈</Link>
<Link href="/list">리스트</Link>
</div>
- 여기서
<Link>?
<a>와 같지만, 더 부드럽게 페이지 전환 시켜줌
- 근데 네비바를 공유하고 싶다? (모든 페이지에서 보였으면 좋겠다?)
여러 페이지에서 써야되는 UI가 있다면?layout.js에!!!
import { Inter } from "next/font/google";
import "./globals.css";
import Link from "next/link";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
<div className="navbar">
<Link href="/">홈</Link>
<Link href="/list">리스트</Link>
</div>
{children}
</body>
</html>
);
}
- 왜 layout.js에 코드를 짜면 모든 페이지에 보이는가?
layout.js가 page.js를 담아서 보여주기 때문에!
{children}이 부분에 page 담아서 보여주는 것
근데 list 폴더 옆에 layout 파일이 없는데?
:: 1. page.js를 보여줄 때, 옆에 layout.js가 있으면 그걸로 page.js를 싸맨다.
:: 2. 상위 폴더에 layout.js가 있으면 그걸로 1번을 싸맨다.
즉, page.js를 보여줄 때는 옆과 상위에 있는 모든 layout.js를 합쳐서 보여준다.
4. map 함수
array.map(()=>{})
- map() 기능
- 함수 안의 코드를 반복 실행해준다.
- 소괄호 안에는 파라미터를 두 개 작성할 수 있다. (값, 인덱스)
- return에 적은 것을 array로 담아준다.
- 그렇다면 map을 활용해 html을 반복해주려면?
{상품.map((이름) => { return ( <div className="food"> <h4>{이름} $40</h4> </div> ); })}
