이전 프로젝트에서도 Vite로 환경설정을 해서 진행했었는데 기록해서 남기기위해 다시 처음부터 해보려고 한다.
Vite로 환경설정 시작하기
먼저 터미널창을 열어서 Vite를 설치해보자.
npm create vite@latest <프로젝트_이름>
그다음 순서대로 눌러줘야하는데
1. React
2. JavaScript (원하는 걸로 고르면 된다.)
그러면 설치했다고 나오고 실행하는 방법을 가르쳐준다.
이때 우리가 만든 vite-project로 들어가서 작업을 진행해야한다.
위에서 나온 명령어 그대로 따라치면 된다!
만약 npm run dev
까지 잘 진행했다면 이런 새창이 뜨게된다!
만약에 새창이 안뜨고 터미널 창에 이렇게만 나올 수가 있다.
나는 처음에 했을 때 작동은 되는 것 같은데 새창이 바로 안떠서 뭐지? 내가 잘못했나 했는데
그게 아니고 그냥 단축키 O를 눌러주면 새창이 열리게 된다! (O는 Open의.. O같음)
이제 프로젝트 버전 관리를 위해 Git을 초기화 해주자.
Git 초기화
git init
npx add-gitignore
.gitignore 파일을 추가하고 Git 제외 항목을 작성한다.
이때 명령창에 mac 을 치고 찾은 후 '스페이스바' 를 누르면 선택이 된다.
그리고 다시 mac을 지운 후 windows를 찾고 또 '스페이스바' 를 눌러주면 선택이 된다.
이렇게 mac, windows, node, visualtudiocode 를 찾아 선택 후 엔터를 쳐주면 .gitignore파일에 추가가 된다.
이제 code . 를 터미널창에 치고 vsCode로 넘어가자.
package.json 수정하기
NPM 패키지 매니저를 사용해 프로젝트를 관리하기 위한 package.json에서 수정해야할 부분이 있다.
package.json에서 "scripts"에 "start": "npm run dev -- --open",을 넣어준다.
이렇게 넣어주고나면 npm start를 했을 때 실행이 된다.
프로젝트를 위해 기본 설정하기
favicon.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3618.6 3618.6" width="3618.6" height="3618.6"><style>.st0{fill:#222}.st1{fill:#00d8ff}.st2{fill:none;stroke:#00d8ff;stroke-width:144.7456;stroke-miterlimit:10}</style><path class="st0" d="M0 0h3618.6v3618.6H0z"/><circle class="st1" cx="1806.5" cy="1807.1" r="302.6"/><path class="st2" d="M1806.5 1191.9c406.2 0 783.6 58.3 1068.1 156.2 342.8 118 553.6 296.9 553.6 458.9 0 168.8-223.4 358.9-591.5 480.8-278.3 92.2-644.6 140.4-1030.2 140.4-395.4 0-769.7-45.2-1051.2-141.4-356.1-121.7-570.6-314.2-570.6-479.8 0-160.7 201.3-338.2 539.3-456 285.6-99.5 672.3-159.1 1082.5-159.1z"/><path class="st2" d="M1271 1501.3c202.9-351.9 442-649.7 669-847.2 273.5-238 533.8-331.2 674.1-250.3 146.2 84.3 199.3 372.8 121 752.7-59.2 287.2-200.4 628.5-393.1 962.6-197.5 342.5-423.7 644.2-647.6 840-283.3 247.7-557.3 337.3-700.7 254.6-139.2-80.3-192.4-343.3-125.7-695 56.4-297.4 198-662.1 403-1017.4z"/><path class="st2" d="M1271.5 2119.8c-203.5-351.6-342.1-707.4-399.9-1002.7-69.6-355.8-20.4-627.9 119.8-709 146.1-84.6 422.5 13.5 712.5 271 219.3 194.7 444.4 487.5 637.6 821.3 198.1 342.2 346.6 688.8 404.3 980.5 73.1 369.2 13.9 651.3-129.4 734.2-139.1 80.5-393.5-4.7-664.9-238.2-229.2-197.3-474.5-502.1-680-857.1z"/></svg>
public/favicon.svg 파일을 생성 후 위의 코드를 붙여 넣어준다.
HTML 파일 수정하기
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React 프로젝트 매뉴얼 구성 (with Vite)</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
CSS 글로벌 스타일
body {
margin: 0;
}
이렇게 기본 구조 설정을 바꿔준다.
React 패키지 설치
React, React DOM 패키지를 설치한다.
npm i react react-dom
애플리케이션 엔트리 파일
src/main.jsx 에 React 앱 구동을 위한 코드를 작성한다.
import './styles/global.css';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
const container = document.getElementById('root');
createRoot(container).render(
<StrictMode>
<App />
</StrictMode>
);
App 컴포넌트 파일
function App() {
return (
<div>
<h1>React 앱</h1>
</div>
);
}
export default App;
이렇게 모든 설정을 하고나면 밑과 같은 새창이 나오게 된다!
이제 다음으로 넘어가 Vite 패키지들을 설치해주자!
Vite 패키지 설치
vite, @vitejs/plugin-react 패키지를 개발 종속성 모듈로 설치합니다.
npm i -D vite @vitejs/plugin-react
설치하고나면 vite.config.js 라는 파일이 생성된다.
여기서 설정해준 것은 1. 절대경로와 2. 로컬호스트를 변경해줬다!
import react from "@vitejs/plugin-react";
import { resolve } from "node:path";
import { defineConfig } from "vite";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
// 절대경로 추가
"@": resolve(__dirname, "./src"),
},
},
server: {
// 로컬호스트 변경
host: "localhost",
port: 3000,
},
build: {
rollupOptions: {
output: {
manualChunks: {
react: ["react", "react-dom"],
},
},
},
},
});
절대경로를 추가해준 이유는 여기에 있다.
Vite의 공식 문서를 참고하면 “파일 시스템 경로에 별칭을 만들 때 반드시 절대 경로를 사용하세요.” 라고 쓰여있다.
따라서 상대경로에서 절대경로로 찾을 수 있도록 바꿔주자!
여기까지 기본적인 환경설정을 끝마쳤다.
이제 eslint, prettier 설정을 해줘야하는데 이 부분은 다음 글에 작성할 것이다!
차근차근 따라해보면 생각보다 Vite로 리액트 프로젝트 환경설정하기 쉬운 것 같다. 😮
'개발' 카테고리의 다른 글
[React/Vite] Prettier 설정하기 (0) | 2023.05.05 |
---|---|
[React/Vite] ESLint 설정하기 (0) | 2023.05.04 |
[패스트캠퍼스] React 강의 3주차 (0) | 2023.05.03 |
[패스트캠퍼스] React 강의 2주차 (0) | 2023.04.21 |
[패스트캠퍼스] React 강의 1주차 (0) | 2023.04.11 |