Vite + React + tailwind css + firebase 초기세팅

// vite 프로젝트 생성
$ npm create vite@latest

명령어 입력시 선택항목 표시
이름:solyi(프로젝트명) -> 선택:react -> 선택:JavaScript

// 프로젝트로 이동
$ cd solyi

// 폴더 열기
$ code . -r

// tailwind 설치
$ npm install -D tailwindcss

// 테스트 실행
$ npm run dev

// firebase 설치
$ npm i firebase

// firebase-tools 설치 (node version 14.18.1)
$ npm install -g firebase-tools@9.2.0

// login
$ firebase login

$ firebase init  
명령어 입력시 선택항목 표시
-> firestore & hosting & storage

// 빌드
$ npm run build 

// firebase - hosting에 choisolyi 라는 주소 추가
$ firebase deploy --only hosting:choisolyi

// tailwind 설정파일 추가
$ npx tailwindcss init

// 오류나므로 autoprefixer 설치
$ npm i autoprefixer

 

toast ui editor 는 react 18을 지원하지 않아서 17로 버전 다운..

$ npm uninstall react react-dom

$ npm i react@17.0.1 react-dom@17.0.1

 

toast ui editor 설치

 

 

main.jsx 코드 조금 변경

import React from 'react'
import App from './App';
import { render } from "react-dom";
import './index.css'
import './tailwind.css'
const container = document.getElementById("root");
render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  container
);