vite React 프로젝트 초기세팅

vite로 프로젝트 초기세팅하는 법을 정리해보자

stack : vite + react + chakraUI

1. vite 프로젝트 만들기

   npm create vite@latest

2. chakra ui 설치

   npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

3. ChakraProvider 설정하기

3-1. import ChakraProvider component

import { ChakraProvider } from '@chakra-ui/react'

3-2. Wrap ChakraProvider at the root of your app

function App() {
  return (
    <ChakraProvider>
      <Router />
    </ChakraProvider>
  )
}

4. Router 설정
   src/Router.jsx 파일 생성

   npm install react-router-dom

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Main from "./pages/Main";
const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Main />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

5. src/styles/theme.jsx 생성

import { extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  fonts: {
    header: `‘Noto Sans KR’, sans-serif`,
    body: `‘Noto Sans KR’, sans-serif`,
  },
});
export default theme;

6.pages/Main.jsx 생성

import React from 'react'

const Main = () => {
  return (
    <div>Main</div>
  )
}

export default Main

7. 포트번호 바꾸기
   package.json에서 아래와 같이 바꾸어준다.

"dev": "vite --host 0.0.0.0 --port 3000",