101. React - 초기 설치, 구성 [with tailwindcss]

1. 설치&구성 방법

1) npm 설치 (node.js 설치 시 자동으로 설치됨)

[window]

공식사이트에서 설치 후 환경변수 등록 후 아래 확인 

설치 확인 : npm -v 

 

[mac]

brew install nvm

vi ~/.zshrc (아래 내용 삽입 후 저장)

export NVM_DIR="$HOME/.nvm"

source "$(brew --prefix nvm)/nvm.sh"

nvm install --lts

nvm use --lts

-> 최신 node.js 버전이 설치되고 적용된다.

 

2) React 초기 구성 생성

[CRA 이용한 기본 구성]

npx create-react-app [프로젝트이름]
cd [프로젝트이름]

npm start  -> (디폴트로 127.0.0.1:3000 구동됨.) 

 

[VITE 이용한 구성]

npm create vite@latest [프로젝트명] -- --template react

cd [프로젝트명]

npm install

npm run dev (실행해서 확인)

 

3) Tailwind css 라이브러리 설치(선택)

[tailwind 3.xx 설치]

1) 설치

npm update

npm install -D tailwindcss postcss autoprefixer
   -> 간혹 Create-React-App의 package.json에서 정의한 버전과 다른게 깔릴 수 있다.
   -> 그럴 경우, npm install tailwindcss@[버전정보] 를 이용하여 정확히 설치한다.
npx tailwindcss init -p

2) index.css에 아래 구문 추가

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

 

3) index.js 파일에 해당 css 가져오기

import './index.css';

[tailwind 4.1.6 설치 - (VITE 필수)]

npm install react-router-dom ( 설치 필수)

npm install tailwindcss @tailwindcss/vite

     -> vite.config.js > import tailwindcss from "@tailwindcss/vite";  plugin : tailwindcss(), 추가 

     -> index.css > @import "tailwindcss";          (<app/>을 렌더링하는 파일의 css에다가만 추가하면 적용됨) 

// vite.config.js 파일 최종 설정
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
        tailwindcss(),
        react()
  ],
})

 

 

4) 최종 빌드

npm run build

 

 

참조)

------------------------

https://tailwindcss.com/docs/installation/framework-guides/react-router

Install Tailwind CSS with React Router