보여줄게: 프로젝트 설정
Vite(“veet”로 발음, 프랑스어로 “빠름”을 뜻함)는 미리 만들어진 React 프로젝트 뼈대를 준비하는 도구야. 터미널을 열고 프로젝트를 배치할 위치(데스크톱 등)로 이동해.
cd Desktop
npm create vite@latest my-react-web -- --template reactVite가 너에게 뭔가를 물을 수도 있어. Enter를 눌러 확인해. 그 다음에:
cd my-react-web
npm install
npm run dev -- --port 3901-npm install프로젝트에 필요한 모든 것을 다운로드해(잠시 시간이 걸립니다. – React와 그 도우미는node_modules접는 사람).
-npm run dev -- --port 3901개발 서버를 시작해. 터미널에 주소가 표시돼.http://localhost:3901. 브라우저에서 열어봐.
회전하는 로고와 “Vite + React”라는 제목이 보이시나요? 축하해. 첫 번째 React 앱이 실행되었어! 🎉
프로젝트 둘러보기
열기my-react-webVS Code의 폴더(파일 → 폴더 열기)야. 파일이 많아 보이지만 지금 당장 중요한 것은 세 가지뿐야.
| 파일 | 그것은 무엇야? |
|---|---|
index.html | 전체 웹사이트의 유일한 HTML – 거의 비어 있고,<div id="root"> |
src/main.jsx | 스타터: 앱을 가져와 해당 div에 삽입 |
src/App.jsx | 주요 구성요소 – 코드를 작성하는 곳 |
src/App.css | 스타일 - 여러분이 알고 있는 일반 CSS |
지금은 나머지를 무시해(열거나 삭제하지 마세요)node_modules,package.json프로젝트 패키지 목록야).
코드에 대한 첫 번째 변경 사항
열기src/App.jsx. 모두 삭제하고 다음을 작성해.
function App() {
const name = "Jake";
return (
<div>
<h1>Hi, this is {name}!</h1>
<p>This is my first React app.</p>
</div>
);
}
export default App;저장 - 그러면 브라우저의 페이지가 저절로 변경돼. 너이보고있는 내용은 다음과 같어.
-App구성 요소는 HTML을 반환하는 함수야(이 표기법을 JSX라고 함).
{name}– 중괄호는 JavaScript를 HTML에 삽입해. 무엇이든: 변수, 계산{2 + 3}, 심지어 조건.export default App– “이 구성 요소를 다른 파일에 제공하고 있어.” (main.jsx그것을 가져가는 사람야).
JSX에는 익숙해질 두 가지 특징이 있어.class, 너는 쓴다className(클래스는 JavaScript의 예약어야.) 구성 요소는 하나 래퍼 요소를 반환해야 해(그래서<div>모든 것 주변).
네 차례 💪
- 가이드에 따라 프로젝트를 설정하고 실행해 보세요.
- 편집
App.jsx: 네 이름이 포함된 제목, 귀하가 작성 중인 항목에 대한 단락 및 변수age문장에 표시되는 것I am {age} years old. - 의도적으로 닫는 태그를 삭제하고 오류가 어떻게 보이는지 확인하해. Vite는 브라우저에 줄 번호와 함께 오류를 바로 표시해. 그런 다음 수정해.
- 서버를 중지하고(터미널에서 Ctrl+C) 다시 시작해(
npm run dev -- --port 3901) – 전체 사이클을 손가락 아래에 두해.
이번 수업에서 배울 점
-npm create vite@latest프로젝트를 설정하고,npm install패키지 다운로드,npm run dev로컬호스트를 시작해.
- 코드를 작성해.
src/App.jsx: 컴포넌트는 JSX를 반환하는 함수야.{}HTML에 JavaScript를 삽입해. - JSX에서:
className대신에class, 항상 하나의 래퍼 요소야.
© 2026 Ing. Martin Polak / AlgoRhino · 콘텐츠 이용 약관