Vite로 반응 프로젝트를 설정하는 방법
작성자는 DOnations 프로그램에 쓰기를 선택했습니다.
소개
일반적으로 JavaScript 파일에 연결하기 위해 ECMAScript) 모듈을 사용하여 새 프로젝트를 생성할 수 있습니다. 이 모듈은 파일이 변경될 때마다 전체 번들을 다시 빌드하지 않습니다. 이러한 차이로 인해 Vite로 React 앱을 생성, 업데이트 및 구축할 때 더 빠른 경험을 얻을 수 있습니다.
이 튜토리얼은 Vite 도구를 사용하여 새로운 React 앱을 스캐폴드합니다. 새로운 구성 요소, CSS 및 이미지 파일로 기본 앱을 만들고 배포를 위해 최적화된 번들을 준비합니다.
전제 조건
이 자습서를 따르려면 다음이 필요합니다.
- Node.js 설치 방법.
- Yarn 패키지 관리자 버전 1.22.0 이상이 컴퓨터에 설치되어 있습니다. Node.js용 Yarn 패키지 관리자를 설치하고 사용하는 방법의 1단계로 Yarn을 설치할 수 있습니다.
- HTML, CSS 및 React에서 사용되는 최신 JS에 익숙합니다.
- How To Code in React 시리즈로 배울 수 있는 React의 기본 지식
- 모바일에서 앱을 미리 볼 수 있도록 컴퓨터와 동일한 Wi-Fi 네트워크에 연결된 휴대전화.
1단계 - Vite 프로젝트 만들기
이 단계에서는 명령줄에서 Vite 도구를 사용하여 새 React 프로젝트를 만듭니다. yarn
패키지 관리자를 사용하여 스크립트를 설치하고 실행합니다.
터미널에서 다음 명령을 실행하여 새 Vite 프로젝트를 스캐폴딩합니다.
- yarn create vite
이 명령은 원격 npm
저장소에서 Vite 실행 파일을 실행합니다. React 로컬 개발 환경을 스캐폴딩하는 데 필요한 도구를 구성합니다. 마지막으로 프로젝트 설정 및 언어 유형에 대한 명령줄 메뉴가 열립니다.
스크립트가 완료되면 프로젝트 이름을 입력하라는 메시지가 표시됩니다.
Outputyarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-vite@2.9.0" with binaries:
- create-vite
- cva
? Project name: » vite-project
프로젝트 이름을 입력합니다(이 자습서에서는 digital-ocean-vite
를 예제 이름으로 사용함).
- digital-ocean-vite
프로젝트 이름을 입력하면 Vite가 프레임워크를 선택하라는 메시지를 표시합니다.
Output? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
Vue
> React
Preact
Lit
Svelte
Others
Vite를 사용하면 React뿐만 아니라 다양한 프로젝트 유형을 부트스트랩할 수 있습니다. 현재 React, 바닐라 JavaScript 프로젝트를 지원합니다.
키보드 화살표 키를 사용하여 React
를 선택합니다.
React 프레임워크를 선택한 후 Vite는 언어 유형을 선택하라는 메시지를 표시합니다. JavaScript 또는 TypeScript를 사용하여 프로젝트에서 작업할 수 있습니다.
화살표 키를 사용하여 JavaScript
를 선택합니다.
Output? Select a variant: » - Use arrow-keys. Return to submit.
> JavaScript
TypeScript
JavaScript + SWC
TypeScript + SWC
프레임워크를 설정하면 프로젝트가 스캐폴드되었다는 출력이 표시됩니다. 그런 다음 Vite는 Yarn을 사용하여 종속성을 설치하도록 지시합니다.
OutputDone:
Scaffolding project in path\to\digital-ocean-vite...
Done. Now run:
cd digital-ocean-vite
yarn
yarn dev
Done in 129.89s.
지시에 따라 프로젝트 폴더로 이동합니다.
- cd digital-ocean-vite
그런 다음 yarn
명령을 사용하여 프로젝트의 종속성을 설치합니다.
- yarn
완료되면 종속성 설치는 종속성을 설치하는 데 걸린 시간과 함께 출력을 반환합니다.
Outputsuccess Saved lockfile.
Done in 43.26s.
이제 Vite를 사용하여 새 React 프로젝트를 설정하고 React 및 Vite에 필요한 패키지를 설치했습니다.
다음으로 애플리케이션을 테스트하기 위해 개발 서버를 시작합니다.
2단계 - 개발 서버 시작
이 단계에서는 개발 서버를 시작하여 모든 것이 작동하는지 확인합니다.
digital-ocean-vite
폴더 내에서 다음 명령을 사용하여 개발 서버를 실행합니다.
- yarn run dev
이 명령은 vite
명령의 별칭입니다. 개발 모드에서 프로젝트를 실행합니다.
다음 출력을 받게 됩니다.
OutputVITE v4.0.4 ready in 847 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
그런 다음 브라우저를 열고 http://localhost:5173/
을 방문하세요. 기본 React 프로젝트는 포트 5173
에서 실행됩니다.
이 앱이 실행되고 있는 것이 보이면 React with Vite를 성공적으로 설치한 것입니다. 다음으로 휴대폰에서 앱을 미리 봅니다.
3단계 — 휴대폰에서 앱 미리보기
Vite는 기본적으로 개발 애플리케이션을 네트워크에 노출하지 않습니다. 이 단계에서는 휴대폰에서 앱을 미리 볼 수 있도록 로컬 네트워크에 앱을 노출합니다.
로컬 네트워크에서 앱을 실행하려면 먼저 현재 서버를 중지해야 합니다. 터미널에서 CTRL+C
를 사용하여 현재 실행 중인 개발 서버를 종료합니다.
그런 다음 다음 명령을 사용하여 프로젝트를 실행합니다.
- yarn run dev --host
--host
플래그는 Vite에게 앱을 로컬 네트워크에 노출하도록 지시합니다.
터미널에 다음 출력이 표시됩니다.
OutputVITE v4.0.4 ready in 747 ms
➜ Local: http://localhost:5173/
➜ Network: http://your_ip_address:5173/
➜ press h to show help
이것은 컴퓨터 네트워크 또는 라우터에 고유한 로컬 IP 주소입니다.
휴대폰에서 브라우저를 연 다음 위의 IP 주소와 포트를 입력하여 휴대폰에서 Vite 앱의 미리보기에 액세스합니다.
이제 개발 환경에서 앱을 실행하고 작동하는지 확인했습니다. 다음 단계에서는 Vite와 함께 제공되는 상용구 코드를 제거합니다.
4단계 - 기본 상용구 제거
이 단계에서는 src/
디렉토리에서 Vite 프로젝트의 상용구 파일을 제거하여 새 애플리케이션을 설정할 수 있습니다. 또한 현재 앱의 기본 프로젝트 구조에 익숙해질 것입니다.
src/
디렉토리의 내용을 보려면 다음 명령을 사용하십시오.
- ls src/
출력에는 사용 가능한 모든 파일이 나열됩니다.
OutputApp.css
App.jsx
assets
index.css
main.jsx
파일이나 디렉토리를 삭제하려면 rm
명령을 사용하십시오. 다음 명령을 사용하여 프로젝트에서 기본 파일을 삭제합니다.
- rm src/App.css
- rm src/App.jsx
- rm src/index.css
다음 명령을 사용하여 assets
디렉토리를 삭제합니다.
- rm -r src/assets
-r
플래그는 내용과 함께 디렉터리를 삭제할 때 필요한 재귀 작업입니다.
이러한 파일을 삭제하면 main.jsx
만 src/
디렉터리에 남습니다. ls src/
명령을 다시 실행하여 나머지 파일을 확인합니다.
- ls src/
이제 디렉터리에는 main.jsx
파일만 포함됩니다.
Outputmain.jsx
다른 모든 파일을 제거했으므로 이제 main.jsx
에서 삭제된 CSS 파일에 대한 참조를 제거해야 합니다.
다음 명령으로 편집할 수 있도록 main.jsx
를 엽니다.
- nano src/main.jsx
강조 표시된 줄을 제거하여 CSS 파일에 대한 참조를 연결 해제합니다.
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import "./index.css"
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
main.jsx
파일을 저장하고 닫습니다.
다음 명령을 사용하여 src/
디렉터리 아래에 App.jsx
라는 새 파일을 만듭니다.
- nano src/App.jsx
App.jsx
파일에 다음 코드를 추가합니다.
export default function App() {
return (
<>
<div>Hello World</div>
</>
);
}
이 코드는 App
이라는 새로운 기능적 React 구성 요소를 생성합니다. 내보내기 기본값
접두사는 이 함수를 기본 내보내기로 내보내도록 JavaScript에 지시합니다. 함수 본문에는 Hello World
텍스트가 있는 <div>
가 포함되어 있습니다.
App.jsx
파일을 저장하고 닫습니다.
다음 명령을 사용하여 개발 서버를 다시 실행하십시오.
- yarn run dev --host
이제 브라우저에서 http://localhost:3000
을 열거나 새로 고쳐서 Hello World 텍스트를 표시하는 빈 페이지에 액세스하십시오.
이 단계에서는 Vite 프로젝트에서 일부 기본 파일을 제거했습니다. 다음으로 새 구성 요소, CSS 파일 및 이미지 파일을 사용하여 기본 앱을 빌드합니다.
5단계 - 기본 앱 만들기
이 단계에서는 기본 앱을 만들어 구성 요소를 만들고 CSS 파일을 추가하고 이미지에 연결합니다. 개발 서버를 종료하여 시작하십시오.
다음 하위 섹션에서는 React 앱을 위한 새 구성 요소를 만듭니다.
구성 요소 생성
새 구성 요소를 만들면 프로젝트에 모듈성이 추가됩니다. 모든 구성 요소를 components
디렉토리에 추가하여 구성을 유지합니다.
다음 명령을 사용하여 src/
내에 components
라는 새 디렉토리를 만듭니다.
- mkdir src/components
다음으로 다음 명령을 사용하여 src/components/
디렉토리 내에 Welcome.jsx
라는 새 파일을 만듭니다.
- nano src/components/Welcome.jsx
Welcome.jsx
파일에 다음 코드를 추가합니다.
export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
</div>
</>
);
}
위의 코드는 Welcome
이라는 새로운 기능적 React 구성 요소를 생성합니다. 내보내기 기본값
접두사는 이 함수를 기본 내보내기로 내보내도록 JavaScript에 지시합니다.
클래스 이름이 wrapper
인 div
태그를 사용하면 CSS에서 이 섹션을 대상으로 지정할 수 있습니다. h1
및 p
태그는 화면에 메시지를 표시합니다.
파일을 저장하고 닫습니다.
다음으로 App.jsx
파일에서 이 새 구성 요소를 참조합니다.
다음 명령으로 App.jsx
를 엽니다.
- nano src/App.jsx
강조 표시된 코드로 App.jsx
의 콘텐츠를 업데이트합니다.
import Welcome from "./components/Welcome"
export default function App() {
return (
<>
<Welcome />
</>
)
}
이 코드 줄은 Welcome.jsx
를 앱으로 가져오고 새 구성 요소를 함수 본문에 연결합니다. 완료되면 파일을 저장하고 닫습니다.
다음 하위 섹션에서는 앱에 이미지를 추가합니다.
이미지 추가
React에서 이미지를 추가하는 것은 앱 개발에서 일반적인 사용 사례입니다.
다음 명령을 사용하여 src/
디렉토리 아래에 img
라는 새 디렉토리를 만듭니다.
- mkdir src/img
다음 명령을 사용하여 src/img
디렉토리로 이동합니다.
- cd src/img
Sammy의 이 이미지를 src/img
에 다운로드합니다.
wget
을 사용하여 이미지를 다운로드합니다.
- wget https://html.sammy-codes.com/images/small-profile.jpeg
다음 명령을 사용하여 이미지의 이름을 바꿉니다.
- mv small-profile.jpeg sammy.jpeg
이 명령은 이미지 파일의 이름을 small-profile.jpeg
에서 나중에 참조하기 쉬운 sammy.jpeg
로 변경합니다.
다음 명령을 사용하여 루트 디렉터리로 돌아갑니다.
- cd ../../
다음으로 Welcome.jsx
파일을 업데이트하여 이 이미지에 연결합니다. 파일 열기:
- nano src/components/Welcome.jsx
강조 표시된 줄을 추가하여 Welcome.jsx
파일을 업데이트합니다.
import Sammy from "../img/sammy.jpeg"
export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
<img src={Sammy} alt="Sammy Image" width={200} height={200} />
</div>
</>
)
}
첫 번째 줄은 이미지를 React에 모듈로 가져옵니다.
함수 본문 내부의 다른 줄은 새 <img>
태그를 만들고 방금 가져온 이미지 구성 요소에 src
특성을 연결합니다. width
및 height
소품은 해당 이미지 속성을 200픽셀로 설정합니다.
Welcome.jsx
파일을 저장하고 닫습니다.
다음으로 프로젝트에 CSS를 추가합니다.
CSS 추가
이 하위 섹션에서는 사용자 지정 CSS 파일을 프로젝트에 추가하여 앱의 스타일을 지정합니다.
다음 명령을 사용하여 src/
디렉토리 아래에 css
라는 새 디렉토리를 만듭니다.
- mkdir src/css
이제 src/css
에 main.css
라는 새 CSS 파일을 만듭니다.
- nano src/css/main.css
main.css
파일에 다음 코드를 추가합니다.
body {
display: grid;
place-items: center;
background-color: #b4a7d6;
font-family: Arial, Helvetica, sans-serif;
}
.wrapper {
background-color: #fff9e6;
padding: 20px;
border-radius: 10px;
}
h1 {
color: #8873be;
}
위의 CSS에서 그리드 표시를 설정하고 본문
의 중앙에 항목을 배치합니다. 글꼴군과 배경색도 설정합니다.
.wrapper
클래스는 Welcome.jsx
파일에서 래퍼 div를 선택합니다. 이 클래스의 스타일은 다음을 수행합니다.
- 배경색을 설정합니다.
- 20픽셀의 여백을 추가합니다.
- 10픽셀의 둥근 모서리를 추가합니다.
h1
선택기는 HTML의 태그를 대상으로 지정하여 해당 색상을 보라색 음영으로 설정합니다.
완료되면 main.css
파일을 저장하고 닫습니다.
다음으로 Welcome.jsx
구성 요소에서 새 CSS 파일을 참조합니다. Welcome.jsx
파일을 엽니다.
- nano src/components/Welcome.jsx
강조 표시된 줄로 파일 내용을 업데이트합니다.
import Sammy from "../img/sammy.jpeg"
import "../css/main.css"
export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
<img src={Sammy} alt="Sammy Image" width={200} height={200} />
</div>
</>
)
}
이 줄은 CSS 파일을 구성 요소의 모듈로 가져옵니다. 프로젝트 폴더의 올바른 파일 경로로 줄을 업데이트해야 할 수도 있습니다.
완료되면 Welcome.jsx
파일을 저장하고 닫습니다.
다음 하위 섹션에서는 앱의 앱 제목 표시줄을 변경합니다.
앱 제목 표시줄 변경
기본적으로 Vite 앱은 브라우저 창 제목 표시줄에 Vite + React라는 텍스트를 표시합니다. 이 단계에서는 설명 제목으로 변경합니다.
루트 디렉터리에서 index.html
을 엽니다.
- nano index.html
강조 표시된 텍스트로 <title>
태그를 업데이트합니다.
<!DOCTYPE html>
<html lang="en">
<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>My Cool App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
이 텍스트는 기본 Vite 앱 제목 표시줄을 맞춤형 앱 제목으로 대체합니다.
index.html
파일을 저장하고 닫습니다.
개발 서버를 다시 실행해야 하는 경우 다음 명령을 실행합니다.
- yarn run dev --host
이러한 모든 변경 후 http://localhost:5173
을 방문하여 앱을 확인하십시오. 앱의 새 버전이 표시됩니다.
빌드를 진행할 준비가 되면 개발 서버를 닫을 수 있습니다.
이제 이미지를 추가하고 스타일을 변경하고 세련된 UI를 만들었습니다. 다음 및 마지막 단계에서는 배포를 위해 최적화된 앱 번들을 빌드합니다.
6단계 - 생산을 위한 구축
이 단계에서는 서버에 배포할 준비가 된 최적화된 앱 번들을 빌드합니다. 빌드를 만들려면 터미널에서 다음 명령을 실행합니다.
- yarn run build
이 명령은 프로덕션을 위해 서버에 배포할 수 있는 축소된 소스 파일이 있는 새 dist
폴더를 만듭니다.
다음과 유사한 출력이 표시됩니다.
Outputvite v4.0.4 building for production...
✓ 34 modules transformed.
dist/index.html 0.45 kB
dist/assets/sammy-9cb83ad5.jpeg 6.74 kB
dist/assets/index-d1c95597.css 0.19 kB │ gzip: 0.16 kB
dist/assets/index-e0751083.js 143.19 kB │ gzip: 46.04 kB
✨ Done in 1.63s.
이제 dist
폴더의 콘텐츠를 온라인 서버에 배포할 수 있습니다. DigitalOcean 앱 플랫폼에 React 애플리케이션을 배포하는 방법이 있는 경우.
결론
이 튜토리얼에서는 Vite 도구를 사용하여 새로운 React 앱을 만들었습니다. yarn create vite
명령을 사용하여 새로운 React 앱을 스캐폴딩했습니다. 상용구 코드를 제거한 후 사용자 지정 이미지, CSS 파일을 추가하고 제목 표시줄을 변경하여 구성 요소를 만들었습니다. 마지막으로 yarn run build
명령을 사용하여 배포할 준비가 된 최적화된 번들을 만들었습니다.
이제 Vite로 빌드된 React 앱이 있으므로 React 튜토리얼에서 React로 무엇을 할 수 있는지 알아보세요.