반응형
주사위 게임 만들어보기 위해 프로젝트를 다시 처음부터 세팅해보자
PJ_dicegame 이라는 파일하나 만들고 터미널을 열어서 vite + react 설치를 진행한다.
npm create vite@latest . -- --template react
npm install
프로젝트를 설치하고나면
위와 같이 웹 개발 파일들이 미리 만들어지는데
모든 파일을 다 사용할 것이 아니기 때문에 필요 없는 것들을 지우는 작업을 해야한다.
▼ 삭제해야하는 파일들
- Public - 파비콘 파일
- src - assets - 아이콘 파일
- PJ_dicegame - App.css, index.css 파일
▼ 수정해야 하는 파일들
1. index.html 파일에서는 다음과 같이 웹 언어와 title을 수정해준다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>주사위 게임</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
2. App.jsx 파일에서는 다음과 같이 수정해준다.
function App() {
return (
<>
<h1>Vite + React</h1>
</>
)
}
export default App
3. main.jsx 파일에서는 다음과 같이 수정해준다.
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>,
)
여기까지 정리하고 npm run dev로 실행해보면
정상적으로 잘 작동하는 것을 확인할 수 있고
앞으로 프로젝트를 진행하기 위한 준비는 끝났다.
반응형
'React' 카테고리의 다른 글
| React - 프래그먼트(Fragments) (0) | 2025.02.13 |
|---|---|
| React - JSX (0) | 2025.02.12 |
| React - main.jsx (index.js)에서 하는 일 (0) | 2025.02.12 |
| React - 리액트 개발자 도구 살펴보기 (0) | 2025.02.12 |
| React - 리액트 프로젝트 생성과 실행 (0) | 2025.02.11 |