React와 Node.js 방명록 개발(5): React 프로젝트 생성

React 프로젝트 생성 및 Tailwind CSS 설정

강의 목표
React로 프론트엔드 프로젝트를 시작하면서 Tailwind CSS를 사용하여 기본적인 스타일링을 설정합니다. Tailwind CSS의 유틸리티 클래스를 활용해 간편하고 빠르게 UI 스타일링을 적용하는 법을 배웁니다.

---

1. Create React App으로 프론트엔드 프로젝트 생성

React 프로젝트 생성

1. guestbook-app이라는 이름으로 프로젝트를 생성합니다.

   npx create-react-app guestbook-app 
   cd guestbook-app

2. 프로젝트 파일을 확인합니다.
   • 기본적으로 제공되는 src, public 등의 폴더 구조를 확인합니다.
   • App.js, index.js 파일이 주요 시작점입니다.

 

---

2. Tailwind CSS 설치 및 기본 설정

Tailwind CSS 설치

1. Tailwind CSS와 필요한 PostCSS 플러그인을 설치하고, 초기화합니다.

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

 

Tailwind CSS 설정 파일 수정

1. tailwind.config.js 파일을 열어 프로젝트에 맞게 수정합니다:

   // tailwind.config.js
   module.exports = {
     content: [
       "./src/**/*.{js,jsx,ts,tsx}",
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   };

   content 경로를 지정해 Tailwind가 src 폴더 내 파일을 스캔하도록 설정합니다.

 

Tailwind CSS 초기화 파일 추가

1. src/index.css 파일에 다음 내용을 추가하여 기본 Tailwind CSS 스타일을 초기화합니다:

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

2. index.css는 index.js 파일에서 이미 import되어 있어야 합니다. 만약 import되어 있지 않다면, index.js 파일에 아래 코드를 추가합니다:

   import './index.css';

 

 

---

3. Tailwind CSS 유틸리티 클래스 활용

Tailwind CSS의 유틸리티 클래스를 통해 간편하게 스타일링을 적용할 수 있습니다. 예제를 통해 Tailwind CSS를 사용한 스타일링을 적용하는 방법을 알아보겠습니다.

App.js에서 기본 UI 구현

1. App.js 파일을 열고 아래 코드를 작성합니다:

   // src/App.js
   import React from 'react';
   
   function App() {
     return (
       <div className="App p-8">
         <h1 className="text-2xl font-bold mb-4">Welcome to Guestbook</h1>
         <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Sample Button</button>
       </div>
     );
   }
   
   export default App;

    
2. 위 코드에서 사용된 주요 Tailwind CSS 유틸리티 클래스:
   • text-2xl: 큰 글씨 크기를 적용합니다.
   • font-bold: 글씨를 굵게 표시합니다.
   • mb-4: 하단에 4단위의 마진을 추가합니다.
   • bg-blue-500: 버튼 배경색을 파란색으로 설정합니다.
   • text-white: 글씨를 흰색으로 설정합니다.
   • px-4 및 py-2: 버튼에 좌우와 상하 여백을 추가합니다.
   • rounded: 버튼 모서리를 둥글게 만듭니다.
   • hover:bg-blue-600: 버튼을 마우스로 가리킬 때 배경색을 변경합니다.

npm start로 실행한 화면

 

---

실습 과제

1. App.js에서 Tailwind CSS 유틸리티 클래스를 이용해 페이지의 레이아웃을 수정해보세요.
2. 다양한 Tailwind CSS 유틸리티 클래스를 사용해보며 스타일과 기능을 추가해보세요.

---

요약

이 강의를 통해 React 프로젝트에 Tailwind CSS를 설치하고 설정하는 방법을 배웠습니다. Shadcn을 제외하고도 Tailwind CSS만으로 다양한 스타일을 적용할 수 있습니다. Tailwind CSS의 유틸리티 클래스는 프로젝트에서 빠르고 일관된 스타일링을 적용하는 데 유용합니다.