학습 내용
Next.js 및 DB설정, 배포하는 방법에 대해 학습하였다.
라우팅
웹 애플리케이션에서 사용자가 URL을 통해 다른 페이지로 이동하는 것
Next.js에서는 내장된 라우팅 시스템을 사용하여 페이지 간의 이동을 처리한다.
라우트
URL과 특정 컴포넌트 간의 매핑을 나타낸다.
일반적으로 페이지의 경로와 해당 경로에 표시할 컴포넌트를 정의하는 데 사용된다.
앱 라우터(App Router)
Next.js 14버전에서 새롭게 도입된 라우팅 시스템
앱 라우터는 루트에 app 폴더를 생성하면 자동으로 라우트가 생성된다.
Link 컴포넌트
리액트와 다르게 to 속성이 아닌 것에 주의한다.
import { Link } from 'next/Link'
<Link href="/">Home</Link>
Params
Next.js는 기본적으로 params Props를 값의 사용유무와 상관없이 전달받는다.
const BlogDetail = (params) => {
// /blog/1?lang=ko
// { params: { id: '1' }, searchParams: { lang: 'ko' } }
console.log(params);
return (
<>
<h1>BlogDetail Component</h1>
</>
);
};
export default BlogDetail;
usePathname
현재 경로를 반환하는 훅
// http://[]/blog/1
"use client"
import { usePathname } from "next/navigation";
const BlogDetail = (params) => {
const pathname = usePathname(); // /blog/1
return (
<>
<h1>BlogDetail Component</h1>
</>
);
};
export default BlogDetail;
Param props
페이지 컴포넌트에 기본으로 전달되는 params 옵션 속성을 사용하면 동적 세그먼트를 받을 수 있다.
type TProps = {
params: {
id: string;
};
searchParams: {
lang: string;
};
};
export default function ProductDetail(params: TProps) {
// http://localhost:3000/products/1 -> {id: 1}
console.log(params); //{ params: { id: '1' }, searchParams: { lang: 'ko' } }
console.log(params.params.id); // 1
console.log(params.searchParams.lang); // ko
return (
<>
<h1>ProductDetail Component</h1>
</>
);
}
시스템 파일과 메타데이터
page.tsx
라우트의 경로를 지정할 때 사용
layout.tsx
Next.js는 각 라우트 경로마다 layout.tsx 파일을 지정하여 공통된 레이아웃을 처리해 줄 수 있다.
루트 레이아웃
하나의 Next.js 애플리케이션에는 반드시 필수로 필요한 레이아웃
가장 최상단의 라우트 경로에 생성되며, Next.js 시스템에 의해서 자동으로 생성된다.
라우트 레이아웃
각 라우트 경로마다 개별적으로 설정 가능한 레이아웃
not-found.tsx
페이지를 찾을 수 없을 때 보이는 not-found 페이지는 Next.js 프레임워크에서 'not-found.tsx' 파일로 제어할 수 있다.
loading.tsx
컴포넌트의 로딩 상태를 관리해 줄 수 있는 파일
데이터 통신과 같은 요청 사항이 발생하여 로딩이 길어질 경우 -> 서버 컴포넌트는 화면에 아무런 내용도 표시하지 않는다.
이때 해당 라우트 경로에 loading.tsx 파일을 생성하면, 서버 컴포넌트의 늦은 응답 시간에 loading.tsx 파일의 내용을 보여줄 수 있다.
error.tsx
컴포넌트에서 에러가 발생했을 때 사용자에게 보여주는 페이지
SEO(Search Engine Optimization)
구글이나 네이버 같은 검색 엔진에서 자신의 사이트의 노출도를 올리게 하는 코드 최적화 기법
검색 엔진 최적화를 위해서는 메타 데이터를 올바르게 사용하며, HTML 마크업을 시멘틱하게 작성해야 한다.
메타데이터
다른 데이터에 대한 정보를 제공 및 설명하는 데이터
Next.js 14에서는 메타 데이터 정의 방법으로 '정적 메타 데이터 객체'를 사용하는 방법과 '동적 메타데이터 생성 함수'를 내보내는 방법을 제공한다.
데이터 패칭
CSR(Client Side Rendering)
CSR에서 데이터 통신은 useEffect()를 사용하는 고전적인 방식으로 사용할 수 있다.
"use client";
import { useEffect, useState } from "react";
const Main = () => {
const [loading, setLoading] = useState(true);
const [posts, setPosts] = useState([]);
const getPosts = async () => {
const data = await (
await fetch("https://jsonplaceholder.typicode.com/posts")
).json();
setPosts(data);
setLoading(false);
};
useEffect(() => {
getPosts();
}, []);
return (
<>
<h1>Main Component</h1>
{!loading && JSON.stringify(posts)}
</>
);
};
export default Main;
SSR(Server Side Rendering)
SSR에서 데이터 패칭은 서버 컴포넌트에서 데이터 통신을 하는 것을 말한다.
const getPosts = async () => {
const data = await (
await fetch("https://jsonplaceholder.typicode.com/posts")
).json();
return data;
};
const HomePage = async () => {
const posts = await getPosts();
return (
<>
<h1>HomePage Component</h1>
{JSON.stringify(posts)}
</>
);
};
export default HomePage;
Route Handler
Next.js 14를 사용해서 직접 express를 사용하는 것과 같이 라우트 핸들러를 지정해서 사용할 수 있다.
Next.js에서는 GET,POST,PUT,PATCH,DELETE,HEAD 라우터를 지원한다.
과제 및 실습 내용
Infinite Scroll(무한 스크롤)을 구현하면서 Next.js의 API Route를 활용해 보았다.
회고
.... 정말 힘든 한 주 였다.
기존에 전혀 모르던 Next.js 프레임워크, 그리고 배포까지..
이전에 한 번도 공부해본 적이 없었기에, 수업을 따라가는 것만으로도 쉽지 않았다.
다음주부터는 그동안 배운 지식들을 활용하여 프로젝트를 진행한다. 다른 동료분들께 짐이 되지 않게끔.. 최선을 다해 프로젝트에 임하자!
본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 1기 과정(B-log) 리뷰로 작성 되었습니다.