웹사이트 검색

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 프로젝트를 스캐폴딩합니다.

  1. yarn create vite

이 명령은 원격 npm 저장소에서 Vite 실행 파일을 실행합니다. React 로컬 개발 환경을 스캐폴딩하는 데 필요한 도구를 구성합니다. 마지막으로 프로젝트 설정 및 언어 유형에 대한 명령줄 메뉴가 열립니다.

스크립트가 완료되면 프로젝트 이름을 입력하라는 메시지가 표시됩니다.

Output
yarn 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를 예제 이름으로 사용함).

  1. 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을 사용하여 종속성을 설치하도록 지시합니다.

Output
Done: Scaffolding project in path\to\digital-ocean-vite... Done. Now run: cd digital-ocean-vite yarn yarn dev Done in 129.89s.

지시에 따라 프로젝트 폴더로 이동합니다.

  1. cd digital-ocean-vite

그런 다음 yarn 명령을 사용하여 프로젝트의 종속성을 설치합니다.

  1. yarn

완료되면 종속성 설치는 종속성을 설치하는 데 걸린 시간과 함께 출력을 반환합니다.

Output
success Saved lockfile. Done in 43.26s.

이제 Vite를 사용하여 새 React 프로젝트를 설정하고 React 및 Vite에 필요한 패키지를 설치했습니다.

다음으로 애플리케이션을 테스트하기 위해 개발 서버를 시작합니다.

2단계 - 개발 서버 시작

이 단계에서는 개발 서버를 시작하여 모든 것이 작동하는지 확인합니다.

digital-ocean-vite 폴더 내에서 다음 명령을 사용하여 개발 서버를 실행합니다.

  1. yarn run dev

이 명령은 vite 명령의 별칭입니다. 개발 모드에서 프로젝트를 실행합니다.

다음 출력을 받게 됩니다.

Output
VITE 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를 사용하여 현재 실행 중인 개발 서버를 종료합니다.

그런 다음 다음 명령을 사용하여 프로젝트를 실행합니다.

  1. yarn run dev --host

--host 플래그는 Vite에게 앱을 로컬 네트워크에 노출하도록 지시합니다.

터미널에 다음 출력이 표시됩니다.

Output
VITE 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/ 디렉토리의 내용을 보려면 다음 명령을 사용하십시오.

  1. ls src/

출력에는 사용 가능한 모든 파일이 나열됩니다.

Output
App.css App.jsx assets index.css main.jsx

파일이나 디렉토리를 삭제하려면 rm 명령을 사용하십시오. 다음 명령을 사용하여 프로젝트에서 기본 파일을 삭제합니다.

  1. rm src/App.css
  2. rm src/App.jsx
  3. rm src/index.css

다음 명령을 사용하여 assets 디렉토리를 삭제합니다.

  1. rm -r src/assets

-r 플래그는 내용과 함께 디렉터리를 삭제할 때 필요한 재귀 작업입니다.

이러한 파일을 삭제하면 main.jsxsrc/ 디렉터리에 남습니다. ls src/ 명령을 다시 실행하여 나머지 파일을 확인합니다.

  1. ls src/

이제 디렉터리에는 main.jsx 파일만 포함됩니다.

Output
main.jsx

다른 모든 파일을 제거했으므로 이제 main.jsx에서 삭제된 CSS 파일에 대한 참조를 제거해야 합니다.

다음 명령으로 편집할 수 있도록 main.jsx를 엽니다.

  1. 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라는 새 파일을 만듭니다.

  1. nano src/App.jsx

App.jsx 파일에 다음 코드를 추가합니다.

export default function App() {
return (
<>
<div>Hello World</div>
</>
);
}

이 코드는 App이라는 새로운 기능적 React 구성 요소를 생성합니다. 내보내기 기본값 접두사는 이 함수를 기본 내보내기로 내보내도록 JavaScript에 지시합니다. 함수 본문에는 Hello World 텍스트가 있는 <div>가 포함되어 있습니다.

App.jsx 파일을 저장하고 닫습니다.

다음 명령을 사용하여 개발 서버를 다시 실행하십시오.

  1. yarn run dev --host

이제 브라우저에서 http://localhost:3000을 열거나 새로 고쳐서 Hello World 텍스트를 표시하는 빈 페이지에 액세스하십시오.

이 단계에서는 Vite 프로젝트에서 일부 기본 파일을 제거했습니다. 다음으로 새 구성 요소, CSS 파일 및 이미지 파일을 사용하여 기본 앱을 빌드합니다.

5단계 - 기본 앱 만들기

이 단계에서는 기본 앱을 만들어 구성 요소를 만들고 CSS 파일을 추가하고 이미지에 연결합니다. 개발 서버를 종료하여 시작하십시오.

다음 하위 섹션에서는 React 앱을 위한 새 구성 요소를 만듭니다.

구성 요소 생성

새 구성 요소를 만들면 프로젝트에 모듈성이 추가됩니다. 모든 구성 요소를 components 디렉토리에 추가하여 구성을 유지합니다.

다음 명령을 사용하여 src/ 내에 components라는 새 디렉토리를 만듭니다.

  1. mkdir src/components

다음으로 다음 명령을 사용하여 src/components/ 디렉토리 내에 Welcome.jsx라는 새 파일을 만듭니다.

  1. 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에 지시합니다.

클래스 이름이 wrapperdiv 태그를 사용하면 CSS에서 이 섹션을 대상으로 지정할 수 있습니다. h1p 태그는 화면에 메시지를 표시합니다.

파일을 저장하고 닫습니다.

다음으로 App.jsx 파일에서 이 새 구성 요소를 참조합니다.

다음 명령으로 App.jsx를 엽니다.

  1. nano src/App.jsx

강조 표시된 코드로 App.jsx의 콘텐츠를 업데이트합니다.

import Welcome from "./components/Welcome"

export default function App() {
return (
<>
<Welcome />
</>
)
}

이 코드 줄은 Welcome.jsx를 앱으로 가져오고 새 구성 요소를 함수 본문에 연결합니다. 완료되면 파일을 저장하고 닫습니다.

다음 하위 섹션에서는 앱에 이미지를 추가합니다.

이미지 추가

React에서 이미지를 추가하는 것은 앱 개발에서 일반적인 사용 사례입니다.

다음 명령을 사용하여 src/ 디렉토리 아래에 img라는 새 디렉토리를 만듭니다.

  1. mkdir src/img

다음 명령을 사용하여 src/img 디렉토리로 이동합니다.

  1. cd src/img

Sammy의 이 이미지를 src/img에 다운로드합니다.

wget을 사용하여 이미지를 다운로드합니다.

  1. wget https://html.sammy-codes.com/images/small-profile.jpeg

다음 명령을 사용하여 이미지의 이름을 바꿉니다.

  1. mv small-profile.jpeg sammy.jpeg

이 명령은 이미지 파일의 이름을 small-profile.jpeg에서 나중에 참조하기 쉬운 sammy.jpeg로 변경합니다.

다음 명령을 사용하여 루트 디렉터리로 돌아갑니다.

  1. cd ../../

다음으로 Welcome.jsx 파일을 업데이트하여 이 이미지에 연결합니다. 파일 열기:

  1. 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 특성을 연결합니다. widthheight 소품은 해당 이미지 속성을 200픽셀로 설정합니다.

Welcome.jsx 파일을 저장하고 닫습니다.

다음으로 프로젝트에 CSS를 추가합니다.

CSS 추가

이 하위 섹션에서는 사용자 지정 CSS 파일을 프로젝트에 추가하여 앱의 스타일을 지정합니다.

다음 명령을 사용하여 src/ 디렉토리 아래에 css라는 새 디렉토리를 만듭니다.

  1. mkdir src/css

이제 src/cssmain.css라는 새 CSS 파일을 만듭니다.

  1. 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 파일을 엽니다.

  1. 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을 엽니다.

  1. 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 파일을 저장하고 닫습니다.

개발 서버를 다시 실행해야 하는 경우 다음 명령을 실행합니다.

  1. yarn run dev --host

이러한 모든 변경 후 http://localhost:5173을 방문하여 앱을 확인하십시오. 앱의 새 버전이 표시됩니다.

빌드를 진행할 준비가 되면 개발 서버를 닫을 수 있습니다.

이제 이미지를 추가하고 스타일을 변경하고 세련된 UI를 만들었습니다. 다음 및 마지막 단계에서는 배포를 위해 최적화된 앱 번들을 빌드합니다.

6단계 - 생산을 위한 구축

이 단계에서는 서버에 배포할 준비가 된 최적화된 앱 번들을 빌드합니다. 빌드를 만들려면 터미널에서 다음 명령을 실행합니다.

  1. yarn run build

이 명령은 프로덕션을 위해 서버에 배포할 수 있는 축소된 소스 파일이 있는 새 dist 폴더를 만듭니다.

다음과 유사한 출력이 표시됩니다.

Output
vite 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로 무엇을 할 수 있는지 알아보세요.