저자는 기부 프로그램인 Write for DOnations의 일환으로 Code.org를 기부 대상으로 선택했습니다.
소개
Create React App을 사용하여 일반적으로 새 프로젝트를 만들 수 있지만, 140MB 이상의 종속성을 설치하는 데는 많은 시간이 소요될 수 있습니다. Vite는 31MB의 종속성만을 차지하는 가벼운 도구로, 새 프로젝트를 시작하는 데 시간을 절약할 수 있습니다. 또한 Vite는 JavaScript 파일에 연결하기 위해 브라우저 기본 ES (ECMAScript) 모듈을 사용하여 각 파일 변경 후에 전체 번들을 다시 빌드하지 않습니다. 이러한 차이로 인해 Vite를 사용하여 React 앱을 생성, 업데이트 및 빌드할 때 보다 빠른 경험을 할 수 있습니다.
이 튜토리얼에서는 Vite 도구를 사용하여 새로운 React 앱의 프로젝트 구조를 작성합니다. 새로운 컴포넌트, CSS 및 이미지 파일로 기본 앱을 만들고 배포를 위해 최적화된 번들을 준비할 것입니다.
DigitalOcean App Platform을 사용하여 React 애플리케이션을 간단하게 배포하세요. 몇 분 안에 GitHub에서 React를 직접 배포하세요.
사전 요구 사항
이 튜토리얼을 따르려면 다음이 필요합니다:
- Node.js 버전 12.2.0 이상이 컴퓨터에 설치되어 있어야 합니다. Node.js 설치 방법 튜토리얼을 통해 Node.js의 최신 버전을 설치할 수 있습니다.
- Yarn 패키지 관리자 버전 1.22.0 이상이 컴퓨터에 설치되어 있어야 합니다. Node.js용 Yarn 패키지 관리자 설치 및 사용 방법의 1단계로 Yarn을 설치할 수 있습니다.
- HTML, CSS, 현대적인 자바스크립트에 익숙해야 합니다. 또한 React에서 사용되는 현대적인 JS를 아는 것도 도움이 됩니다.
- A foundational knowledge of React, which you can learn with the How To Code in React series.
- A mobile phone connected to the same Wifi network as your computer so you can preview your app from mobile.
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 "[email protected]" 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, Preact, Vue, Lit, Svelte, 및 vanilla 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를 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 — 기본 보일러플레이트 제거
이 단계에서는 Vite 프로젝트의 src/ 디렉토리에서 보일러플레이트 파일을 제거하여 새 애플리케이션을 설정할 수 있습니다. 또한 현재 앱의 기본 프로젝트 구조에 익숙해질 것입니다.
다음 명령을 사용하여 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 플래그는 디렉토리와 해당 내용을 함께 삭제할 때 필요한 재귀 작업입니다.
이 파일들을 삭제한 후 src/ 디렉토리에는 main.jsx만 남게 됩니다. 남은 파일을 보려면 ls src/ 명령을 다시 실행하세요:
- ls src/
이제 디렉토리에는 main.jsx 파일만 포함됩니다:
Outputmain.jsx
다른 모든 파일을 제거했으므로 삭제된 CSS 파일에 대한 main.jsx의 참조를 제거해야 합니다.
다음 명령을 사용하여 편집할 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 컴포넌트를 생성합니다. export default 접두사는 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 컴포넌트를 생성할 위의 코드입니다. export default 접두사는 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
이미지를 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 props는 해당 이미지 속성을 각각 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에서는 body에 그리드 디스플레이를 설정하고 항목을 중앙에 배치합니다. 또한 폰트 패밀리와 배경색을 설정합니다.
.wrapper 클래스는 Welcome.jsx 파일에서 래퍼 div를 선택합니다. 이 클래스에 대한 스타일은 다음과 같습니다:
- 배경색 설정합니다.
- 패딩을 20픽셀 추가합니다.
- 10픽셀의 둥근 모서리를 추가합니다.
h1 선택자는 HTML에서 해당 태그를 대상으로 하며, 보라색 계열의 색상으로 설정합니다.
작업을 마치면 main.css 파일을 저장하고 닫으십시오.
다음으로, 새 CSS 파일을 Welcome.jsx 컴포넌트에서 참조해야 합니다. 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 App 제목 표시줄을 사용자 지정 앱 제목으로 바꿉니다.
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 앱을 배포하려면 DigitalOcean 앱 플랫폼에 React 애플리케이션 배포하는 방법 튜토리얼을 따르십시오.
결론
이 튜토리얼에서는 Vite 도구를 사용하여 새로운 React 앱을 만들었습니다. yarn create vite 명령을 사용하여 새로운 React 앱을 만들었습니다. 보일러플레이트 코드를 제거한 후에는 사용자 지정 이미지를 추가하고 CSS 파일을 변경하고 제목 표시줄을 변경하여 컴포넌트를 만들었습니다. 마지막으로 yarn run build 명령을 사용하여 최적화된 번들을 만들어 배포할 준비가 되었습니다.
Vite로 빌드된 React 앱을 보유하고 있으므로 React.js로 코딩하는 방법 및 기타 React 튜토리얼을 살펴보세요.
Source:
https://www.digitalocean.com/community/tutorials/how-to-set-up-a-react-project-with-vite