웹 프로젝트 초기 세팅하기 (React+vite+tailwind css)

언어 : javascript
프레임워크 : React
빌드도구 & 패키지매니저 : vite, yarn
style : tailwind CSS

 

를 사용한 웹 프로젝트 환경을 세팅해보려고 한다.

 

1. 깃허브 레포지토리 클론해오기

git clone ~~ 하여 원하는 레포지토리를 가져온다.

 

2.  vite 설치

yarn create vite
npm create vite

(바이트가 아니라 비트다.)

요즘은 create-react-app보다 vite의 빌드속도가 훨씬 빨라서 선호된다고 한다.

위 명령어를 터미널에 입력하면 프로젝트 이름과 프레임워크, 언어까지 모두 세팅 가능하다.

 

3. yarn 설치

cd {생성된 프로젝트명}
  yarn
  yarn dev

 

이제 만들어진 페이지로 들어간 후 yarn 을 설치해준다.

(yarn dev는 옵션. 그냥 한번 실행해보는 명령어임)

npm install 대신 yarn add, npm start 대신 yarn dev라고 생각하면 된다.

npm install

 

4. 포트설정

vite.config.js 에서 3000번으로 서버 설정 코드를 추가해준다.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
  },
});

 

 

여기서부터는 tailwind css 적용법

https://tailwindcss.com/docs/installation (공식문서 참고)

5. post css로 tailwind css 설치

yarn add -D tailwindcss postcss autoprefixer
yarn tailwindcss init -p
(npx tailwindcdss init -p)

 

이렇게 하면 tailwind css가 설치되고 프로젝트 폴더내에 postcss.config.js 파일과 tailwindcss.config.js 파일이 생성된다.

 

6. tailwind 적용할 파일 경로 수정 

tailwindcss.config.js 파일에서 content 에 경로를 추가하여 tailwindcss가 적용될 파일을 설정한다.

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html","./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

 

7. 스타일 적용

모든 스타일의 부모가 되는 css 파일('global.css, 'styles.css' 등)을 생성하고 
(나는 src>styles>global.css 파일을 만들었다) 파일 상단에

@tailwind base;			/* 기본 스타일 */
@tailwind components;	/* 컴포넌트 스타일 */
@tailwind utilities;	/* 유틸리티 클래스들 */

를 추가해주었다.

 

이제 global.css파일을  App 사용 페이지에 import 해주면 끝!

tailwindcss가 적용되는 것을 확인할 수 있다.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";
import "./styles/global.css";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>
);

 

이제 페이지 작업시작!