프론트엔드 개발에서 블로그를 만드는 것은 자신만의 포트폴리오를 구축하는 좋은 방법입니다. 이번 포스트에서는 Next.js와 Tailwind CSS를 활용하여 간편하게 블로그를 만드는 방법을 소개하겠습니다.

준비 작업으로 Node.js가 설치되어 있어야 하며, 이 튜토리얼은 기본적인 React와 JavaScript 지식을 전제로 합니다.

1. Next.js 프로젝트 생성

먼저, Next.js 프로젝트를 생성합니다. 터미널을 열고 다음 명령어를 입력하세요.

npx create-next-app my-blog
cd my-blog

이 명령어는 my-blog라는 새 폴더를 생성하고 Next.js 템플릿을 설치합니다. 설치가 완료되면 폴더로 이동합니다.

2. Tailwind CSS 설치

이제 Tailwind CSS를 설치하겠습니다. 다음 명령어를 사용하여 Tailwind CSS와 필요한 의존성을 설치합니다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

이 명령어는 tailwind.config.js와 postcss.config.js 파일을 생성합니다. 이제 tailwind.config.js 파일을 열고 다음과 같이 수정합니다.

/ @type {import('tailwindcss').Config} /
module.exports = {
  content: [
    "./pages//.{js,ts,jsx,tsx}",
    "./components/*/.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

이제 globals.css 파일을 수정하여 Tailwind를 포함시켜야 합니다. styles/globals.css 파일을 열고 아래 코드를 추가합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

3. 블로그 레이아웃 만들기

이제 블로그의 기본 레이아웃을 만들어 볼까요? pages/index.js 파일을 열고 아래와 같이 수정합니다.

import Head from 'next/head'

export default function Home() {
  return (
    <div className="min-h-screen bg-gray-100">
      <Head>
        <title>My Blog</title>
        <meta name="description" content="A simple blog built with Next.js and Tailwind CSS" />
      </Head>
      <header className="bg-white shadow">
        <div className="max-w-7xl mx-auto p-6">
          <h1 className="text-3xl font-bold">내 블로그</h1>
        </div>
      </header>
      <main className="max-w-7xl mx-auto p-6">
        <article className="bg-white p-6 rounded-lg shadow-md">
          <h2 className="text-xl font-semibold">첫 번째 포스트</h2>
          <p className="mt-2 text-gray-600">이곳에 블로그 내용을 넣으세요.</p>
        </article>
      </main>
    </div>
  )
}

위 코드는 간단한 블로그 레이아웃을 생성합니다. 블로그 제목과 첫 번째 포스트를 포함하고 있습니다.

4. 포스트 추가하기

이제 블로그에 여러 개의 포스트를 추가해 보겠습니다. posts.js라는 파일을 만들어 포스트 데이터 배열을 정의합니다. data/posts.js 파일을 생성합니다.

const posts = [
  {
    id: 1,
    title: '첫 번째 포스트',
    content: '이것은 첫 번째 포스트의 내용입니다.',
  },
  {
    id: 2,
    title: '두 번째 포스트',
    content: '이것은 두 번째 포스트의 내용입니다.',
  },
];

export default posts;

그런 다음, pages/index.js 파일에서 이 데이터를 가져와 포스트 목록을 동적으로 생성합니다.

import Head from 'next/head'
import posts from '../data/posts'

export default function Home() {
  return (
    <div className="min-h-screen bg-gray-100">
      <Head>
        <title>My Blog</title>
        <meta name="description" content="A simple blog built with Next.js and Tailwind CSS" />
      </Head>
      <header className="bg-white shadow">
        <div className="max-w-7xl mx-auto p-6">
          <h1 className="text-3xl font-bold">내 블로그</h1>
        </div>
      </header>
      <main className="max-w-7xl mx-auto p-6">
        {posts.map(post => (
          <article key={post.id} className="bg-white p-6 rounded-lg shadow-md mb-4">
            <h2 className="text-xl font-semibold">{post.title}</h2>
            <p className="mt-2 text-gray-600">{post.content}</p>
          </article>
        ))}
      </main>
    </div>
  )
}

5. 스타일링 및 개선

Tailwind CSS를 사용하면 빠르게 스타일링을 추가할 수 있습니다. 각 포스트에 대해 마진, 패딩, 색상 등을 조정하여 블로그를 더 매력적으로 만들 수 있습니다.

예를 들어, 포스트 제목 아래에 날짜를 추가하고 싶다면 data/posts.js에 날짜 필드를 추가하고 이를 적절히 표시할 수 있습니다.

마무리

이제 Next.js와 Tailwind CSS를 사용하여 간편한 블로그를 만드는 방법을 배웠습니다. 기본적인 레이아웃과 데이터 구조를 설정한 후, 필요에 따라 레이아웃을 개선하고 추가 기능을 구현할 수 있습니다. 이 튜토리얼을 바탕으로 자신만의 블로그를 완성해보세요!