재우니의 블로그

Next.js + Tailwind CSS 프로젝트 설정 가이드

프로그래밍/ReactJS 🤞
2024. 11. 20. 14:24

 

Next.js +  Tailwind CSS  프로젝트 설정 가이드

Mood Diary는 사용자 감정을 분석하고 기록하기 위한 Next.js와 Tailwind CSS 기반 웹 애플리케이션입니다. 아래 가이드를 통해 처음부터 프로젝트를 설정하고 실행하는 방법을 단계별로 설명합니다.

📋 목차

  1. 필수 요구 사항
  2. 설치 과정
  3. Tailwind CSS 설정
  4. 환경 변수 설정
  5. 실행 및 테스트
  6. 레이아웃 및 페이지 예시
  7. 스크립트 명령어
  8. 배포

필수 요구 사항

이 프로젝트를 실행하려면 아래의 도구가 필요합니다:

  • Node.js: v18.17.0 이상
  • npm: v9.6.7 이상 (또는 pnpm을 사용할 수도 있음)
  • Git (옵션)

설치 과정

1. Next.js 프로젝트 초기화

Next.js와 Tailwind CSS를 간단하게 설치하기 위해 create-next-app 명령어를 사용합니다.

npx create-next-app@latest mood-diary --typescript
cd mood-diary

이 명령어는 기본적인 Next.js 설정과 함께 TypeScript 설정을 포함한 프로젝트 구조를 자동으로 생성합니다.

2. Tailwind CSS 설치

Tailwind CSS를 Next.js 프로젝트에 추가하려면 다음 명령어를 실행합니다:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
  • -D 플래그는 개발 의존성으로 설치하는 것을 의미합니다.
  • npx tailwindcss init -p는 tailwind.config.js 와 postcss.config.js 파일을 동시에 생성합니다.

Tailwind CSS 설정

Tailwind CSS를 이 프로젝트에 설정하려면 아래 단계를 따릅니다:

1. Tailwind 설정 파일 수정

tailwind.config.js 파일을 수정하여 아래 내용을 추가합니다:

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

2. 글로벌 CSS 파일 설정

프로젝트의 글로벌 CSS 파일인 globals.css 파일을 열고 Tailwind의 기본 지시어를 추가합니다. styles/globals.css 파일에 다음을 추가하세요:

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

환경 변수 설정

1. .env.local 파일 생성

OpenAI API와 같은 민감한 정보를 관리하기 위해 .env.local 파일을 생성합니다:

touch .env.local

2. 환경 변수 설정

.env.local 파일에 아래와 같은 내용을 추가합니다:

# OpenAI API Key 설정
OPENAI_API_KEY=your_openai_api_key_here

주의: .env.local 파일은 민감 정보가 포함되어 있으므로 .gitignore 파일에 추가해 Git에 업로드되지 않도록 합니다.

실행 및 테스트

1. 개발 서버 실행

개발 모드로 서버를 시작하려면 아래 명령어를 실행하세요:

npm run dev

서버가 시작되면 브라우저에서 다음 URL을 통해 확인할 수 있습니다:

http://localhost:3000

2. 프로덕션 빌드 및 실행

프로덕션 빌드를 생성하고 실행하려면 아래 명령어를 사용하세요:

  1. 프로덕션 빌드 생성: npm run build
  2. 빌드된 애플리케이션 실행: npm start

레이아웃 및 페이지 예시

이제 간단한 레이아웃과 페이지를 만들어 프로젝트 구조를 더 명확히 이해할 수 있도록 하겠습니다.

1. 기본 레이아웃 파일 생성

app/layout.tsx 파일을 생성하고 기본 레이아웃을 정의합니다:

// app/layout.tsx
import './globals.css';
import React from 'react';

export const metadata = {
  title: 'Diary',
  description: '설명',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <header className="bg-blue-600 text-white p-4">
          <h1 className="text-xl">Mood Diary</h1>
        </header>
        <main className="p-4">{children}</main>
        <footer className="bg-gray-800 text-white text-center p-2 mt-4">
          &copy; 2024 Mood Diary
        </footer>
      </body>
    </html>
  );
}

2. 샘플 페이지 생성

app/page.tsx 파일을 생성하여 기본 페이지를 정의합니다:

// app/page.tsx
import React from 'react';

export default function HomePage() {
  return (
    <div className="text-center">
      <h2 className="text-2xl font-bold mb-4">Welcome to Mood Diary</h2>
      <p className="text-lg">
        Track and analyze your daily emotions to better understand yourself.
      </p>
    </div>
  );
}

 

 

이렇게 하면 홈 페이지에 간단한 인사말과 설명이 표시됩니다. 이 페이지는 레이아웃에 정의된 헤더와 푸터에 둘러싸여서 표시됩니다.

스크립트 명령어

주요 명령어

명령어설명

npm run dev 개발 서버 실행 (핫 리로딩 지원)
npm run build 프로덕션 빌드 생성
npm run start 프로덕션 빌드 실행
npm run lint 린트 검사 실행

배포

Vercel을 통한 배포

Next.js 프로젝트는 Vercel을 사용해 쉽게 배포할 수 있습니다.

  1. Vercel CLI 설치:
  2. npm install -g vercel
  3. 배포 실행:
  4. vercel
  5. 환경 변수 설정:
    • Vercel 대시보드에서 환경 변수(OPENAI_API_KEY)를 설정하여 프로덕션에서도 사용할 수 있도록 합니다.

📚 추가 정보

이 가이드를 따라 프로젝트를 완전히 설치하고 실행할 수 있습니다. 설치 또는 실행 중 문제가 발생하면 언제든 문의하세요! 😊

저작자표시 비영리 동일조건

'프로그래밍 > ReactJS 🤞' 카테고리의 다른 글

React : useEffect 의 의존성 배열 활용법  (0) 2024.12.05
React 프로젝트 : Node.js 와 Vite 기반 구축 및 팀원 설치 가이드  (0) 2024.11.18
React.js와 Node.js를 활용한 TODO List 개발: CORS 문제와 해결 방안  (0) 2024.11.17
Next.js와 Nest.js, To-Do 리스트 예제로 보는 차이점과 활용법  (0) 2024.10.29
2024년의 React 생태계 (번역)  (0) 2023.10.20

티스토리툴바