Soup

Next.js로 풀스택 개발자 포트폴리오 만들기 (1) Intro

iamfork 2024. 6. 6. 09:28

Chapter 1 : Next.js Intro

Next.js?

Next.js는 React(리액트) 프레임워크이며 full-stack으로 web applications을 만들 수 있습니다. 

 

Why Next.js?

1. 서버 사이드 렌더링 (Server-Side Rendering, SSR)

서버에서 페이지를 렌더링 하여 클라이언트에 HTML을 전달함으로서 초기 로딩속도를 개선하고 SEO 성능을 향상 시키는 효과를 볼 수 있습니다.

 

 

2. 정적 사이트를 생성 (Static Site Generation, SSG)

빌드 시점에 페이지를 미리 렌더링하여 정적 파일로 생성하여 빠른 로딩 속도와 캐시 활용을 통해 성능을 최적화합니다.

 

 

3. 자동 코드 분할 (Automatic Code Splitting)

각 페이지에 필요한 코드만 로드하고 로딩 시간을 줄이는 효과를 얻을 수 있습니다.

my-next-app/
  ├── pages/
  │   ├── index.js
  │   ├── about.js
  │   └── contact.js
  └── package.json

 

위와 같이 pages 디렉터리에 세 개의 페이지(index.js, about.js, contact.js)가 있는 Next.js 애플리케이션이 있다고 가정해 보면

사용자가 홈 페이지(/)를 방문하면, index.js와 해당 페이지를 렌더링 하는 데 필요한 최소한의 코드만 로드됩니다. 이로 인해 초기 로딩 속도가 빨라집니다. 사용자가 "About" 링크를 클릭하여 /about 페이지로 이동하면, about.js에 해당하는 코드가 그때 비로소 로드됩니다. 사용자가 /contact 페이지로 이동하면, contact.js에 해당하는 코드만 로드됩니다.

 

이렇게 각 페이지가 필요한 시점에만 관련 코드를 로드하게 됨으로써, 전체 애플리케이션의 초기 로딩 시간이 줄어들고, 페이지 간 전환이 부드럽게 이루어집니다. Next.js는 이 과정을 자동으로 처리하여 개발자가 별도로 설정할 필요 없이 최적화된 코드를 제공받을 수 있도록 합니다.

 

 

4. 라우팅 (Routing)

파일 시스템 기반의 라우팅을 제공하여 'Pages' 디렉터리에 파일을 추가하는 것만으로 새로운 페이지를 만들 수 있습니다.

pages/
  ├── index.js
  ├── about.js
  └── blog/
      ├── index.js
      └── [id].js

 

위의 페이지 구조로 라우팅을 자동적으로 생성합니다.

pages 디렉토리에 파일을 생성하면, 파일의 이름이 URL 경로가 됩니다. 예를 들어:

  • pages/index.js → /
  • pages/about.js → /about
  • pages/contact.js → /contact

 

중첩라우팅의 경우

  • pages/blog/index.js → /blog
  • pages/blog/[id]. js → /blog/:id (동적 라우팅)

 

동적 라우팅 (Dynamic Routing)

대괄호([])를 사용하여 동적 경로를 정의할 수 있습니다.

import { useRouter } from 'next/router';

const BlogPost = () => {
  const router = useRouter();
  const { id } = router.query;

  return <div>Blog Post: {id}</div>;
};

export default BlogPost;

[id]는 URL의 동적 부분을 나타내며, useRouter 훅을 사용하여 현재 경로의 매개변수를 가져올 수 있습니다.

/blog/123와 같은 URL로 접근하면 id는 123이 됩니다. 더 자세한 사항은 프로젝트를 진행하며 확인해 보겠습니다.

 

 

5. API 라우트 (API Routes)

백엔드 API 엔드포인트를 쉽게 생성할 수 있으며, 서버리스 함수로 배포가 가능합니다.

 

 

Next.js 백엔드 API 엔드포인트 생성 방식

Next.js는 프레임워크 내에서 백엔드 API를 쉽게 만들 수 있도록 도와줍니다. 예를 들어, pages/api 디렉터리 아래에 파일을 생성하면 그 파일이 곧바로 API 엔드포인트가 됩니다.

// File structure (파일 구조)
/pages
  /api
    /hello.js
// 'hello.js'
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, world!' });
}

/api/hello 엔드포인트가 생성되어, 이 엔드포인트에 GET 요청을 보내면 "Hello, world!"라는 메시지를 JSON 형식으로 응답받을 수 있습니다.

 

 

서버리스 함수로 배포

서버리스 함수는 전통적인 서버를 유지할 필요 없이, 함수 단위로 클라우드 서비스에 배포되고 실행되는 방식을 의미합니다. Next.js는 기본적으로 서버리스 환경에서 잘 작동하며, Vercel, AWS Lambda, Google Cloud Functions 같은 플랫폼에 쉽게 배포할 수 있습니다.

 

서버리스 함수의 장점:
- 스케일링: 요청 수에 따라 자동으로 확장됩니다.
- 비용 효율성: 사용한 만큼만 비용을 지불합니다.
- 유지 보수: 서버를 직접 관리하지 않아도 됩니다.

 

배포 예시 (Vercel 사용 시): Next.js 프로젝트를 Vercel에 배포하면, pages/api에 있는 파일들이 자동으로 서버리스 함수로 배포됩니다. 이렇게 하면 별도의 서버 설정 없이도 백엔드 API를 쉽게 제공할 수 있습니다.

 

1) API 파일 생성

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, world!' });
}

 

2) Vercel에 배포

  • GitHub, GitLab, Bitbucket과 같은 코드 저장소와 Vercel을 연동합니다.
  • Vercel이 코드를 자동으로 빌드하고 배포합니다.
  • 배포 후 /api/hello 경로로 접근하면 API 응답을 받을 수 있습니다.

 

6.  스타일링 (Styling)

CSS, Sass, CSS-in-JS 등 다양한 스타일링 옵션을 지원합니다.

이번 프로젝트에서는 Tailwind CSS를 사용하여 반응형으로 만들어보려고 합니다.

 

반응형