안녕하세요! 오늘은 React 파일 만드는 법과 실행하는 방법을 알려드릴게요‼️
리액트 깔고도 어떻게 실행하지...? 과거의 저 같이 헤메이지 마시고 이거 보고 해결하세요!!
1. 터미널 열기
VS Code 왼쪽 상단 Terminal → New Terminal을 클릭합니다.
2. Vite로 리액트 설치
아래 명령어를 입력해주세요:
npm create vite@latest
3. 프로젝트 이름 정하기
원하는 프로젝트 이름을 입력합니다! 예: studyvelog
4. 프레임워크 선택하기
리스트에서 React를 선택합니다.
5. 변형 선택
Javascript를 선택해주세요!
6. 프로젝트 폴더로 이동
3번에서 지정한 폴더 이름으로 이동합니다.
cd studyvelog
7. 패키지 설치
npm install
8. 개발 서버 실행
npm run dev그럼 아래처럼 주소가 뜨는데, Ctrl + 클릭으로 브라우저에 접속할 수 있어요!
9. VSCode에서 프로젝트 폴더 열기
npm run dev 하기 전에, VSCode에서 프로젝트 폴더를 제대로 열어야 해요!
📁 ReactStudy 폴더 선택
📁 studyvelog 폴더 선택
✅ 폴더 구조 확인
node_modules, public, src 폴더가 보이면 제대로 열린 거예요!
studyvelog에 있는 모든 파일은 드래그해서 한 번에 선택해 줍니다.
그러면 이런 화면이 나타날 거예요!
10. 컴포넌트 파일 만들기
src 폴더 안에 studyvelog.jsx 파일을 만들어요 ✨
이 파일 안에 우리가 직접 컴포넌트를 작성할 거예요!
11. 컴포넌트 코드 작성
function StudyVelog() {
return (
<div>
<h2>안녕하세요! 🐣</h2>
<p>리액트로 만든 첫 컴포넌트예요!</p>
</div>
);
}
export default StudyVelog;
12. App.jsx에서 불러오기
이제 App.jsx를 열어서, 우리가 만든 컴포넌트를 불러와 사용해볼게요!
import StudyVelog from "./studyvelog";
function App() {
return (
<div>
<StudyVelog />
</div>
);
}
export default App;
13. 실행 결과 확인
npm run dev를 다시 실행하고, 브라우저를 열면
우리가 만든 StudyVelog 컴포넌트가 화면에 나타납니다!
마무리
지금까지 React 설치 → VSCode로 열기 → 컴포넌트 만들기 → 실행하기까지
차근차근 해봤어요!
유튜브나 이런 강의도 이런 부분은 너무나도 간단해서인지 잘 알기 어렵더라고요😅😅
여러분은 저와 제 친구처럼 헷갈리지말구 즐거운 코딩 라이프 하세요!!
그럼 즐코 하세요! 🙌
