Express에 React.js와 Tailwind CSS 추가하기

React.js와 Tailwind CSS를 Express 환경에 추가하는 과정은 다음과 같습니다:

React 프로젝트 생성:

• 먼저, React 애플리케이션을 생성합니다. 이를 위해
• create-react-app 명령어를 사용할 수 있습니다.

$ npx create-react-app my-react-app$ cd my-react-app

Tailwind CSS 설치:

• React 프로젝트 폴더 내에서 Tailwind CSS를 설치합니다.

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

• tailwind.config.js와 postcss.config.js 파일이 생성됩니다.

Tailwind 구성:

• tailwind.config.js 파일을 열고 content 배열에 파일 경로를 추가합니다.
• 이는 Tailwind가 어떤 React 컴포넌트를 스캔해야 하는지 알려줍니다.

module.exports = { 
    content: [ 
        "./src/**/*.{js,jsx,ts,tsx}", 
    ], 
    // 나머지 설정... 
};

CSS 파일에 Tailwind 지시문 추가:

• index.css 파일(또는 메인 CSS 파일)을 열고 다음 Tailwind 지시문을 추가합니다.

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

Express 서버 설정:

• Express 애플리케이션을 생성하고, React 빌드 폴더를 정적 파일로 제공하도록 설정합니다.

const express = require('express');
const path = require('path'); const app = express();

// React 빌드 폴더를 정적 파일로 제공
app.use(express.static(path.join(__dirname, 'my-react-app/build')));
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname + '/my-react-app/build/index.html'));
});
const port = process.env.PORT || 3000;
app.listen(port);
console.log(`Express server is running on port ${port}`);

React 애플리케이션 빌드:

• React 애플리케이션을 빌드합니다.

$ npm run build

Express 서버 실행:

• Express 서버를 실행하면, React 애플리케이션이 Tailwind CSS와 함께 제공됩니다.

이 과정을 통해 React.js와 Tailwind CSS를 Express 환경에 통합할 수 있습니다. 주의할 점은 React 애플리케이션과 Express 서버 간의 경로 설정이 올바르게 이루어져야 한다는 것입니다.