Studying/React

리액트 공부하기 - vite 설치 하기. 깃은 언제? 그리고 그 후에, 어느 파일에 코드를 쳐야할까 ?

creamymood 2025. 4. 5. 12:34

 

공부하던 중, 코드를 따라 쳐보고 싶고, 예제를 연습해보고 싶은데..

vite 설치 후에, 어느 파일에 쳐야하는지 몰랐다.

 

같은 동기분께 여쭤보기도 하고,

지피티에게 물어서 알게되어 정리해보기.

 

일단 리액트 사용 단계(?) 부터 차근차근 알아보자.

 

한눈에 보기 ! ✨

❶ 프로젝트 생성: npm create vite@latest my-react-app --template react
❷폴더 이동 & 패키지 설치: cd my-react-app && npm install
❸개발 서버 실행: npm run dev

------깃 선택-----------
❹src 폴더에서 코드 작성
❺ 프로젝트 빌드: npm run build

React 프로젝트 생성 & 실행 단계

❶Vite로 React 프로젝트 생성

터미널을 열고 원하는 폴더(예: Desktop 또는 Projects)로 이동한다.

# Vite + React 프로젝트 생성
npm create vite@latest my-react-app --template react

 

→ my-react-app 부분은 원하는 프로젝트 이름으로 바꿔도 됌.

실행하면 몇 가지 선택지가 나오는데, react 선택하면 돼! (typescript 쓸 거면 react-ts 선택)

 

 

❷ 프로젝트 폴더로 이동 & 패키지 설치

cd my-react-app   # 프로젝트 폴더로 이동
npm install       # 필요한 패키지 설치

→ npm install 하면 node_modules 폴더가 생기고, 프로젝트에 필요한 패키지들이 설치돼!

→ 이 때 "모듈" 설치됨 !

🧚‍♀️추가로 모듈을 설치하고 싶다면? : npm install + 모듈 이름 쓰면 돼! 🤍

 

 

❸개발 서버 실행

npm run dev

→ 실행하면 로컬 서버 주소가 나와 (http://localhost:5173)
→ 브라우저에서 해당 주소로 들어가면 React 앱이 실행되는 걸 볼 수 있어! 🎉

 

 

 

---------------------------------------------------------------------------------------------------------------------

깃으로 관리하고 싶다면, 여기서 깃 관리하는 단계 추가 (선택)

 

Git 추가하는 단계

❶Git 초기화

터미널에서 프로젝트 폴더(my-react-app)로 이동한 후, 아래 명령어 입력!

git init

→ 그러면 .git 폴더가 생성되면서 Git으로 프로젝트를 관리할 수 있어!

 

❷ .gitignore 파일 추가

Git에 올리면 안 되는 파일들(node_modules, dist 등)을 제외하기 위해 .gitignore 파일을 만들어!

📂 프로젝트 폴더(my-react-app) 내부에서 .gitignore 생성

node_modules/
dist/
.vite/
.env

→ node_modules/는 용량이 너무 크고, dist/는 빌드된 결과물이라 깃에 안 올리는 게 좋아!

 

 

❸Git에 파일 추가 & 첫 커밋

git add .
git commit -m "Initial commit: Vite + React project setup"

→ git add . → 모든 변경된 파일을 Git에 추가

→  git commit -m "메시지" → 현재 변경 사항을 저장

❹GitHub에 올리기 (선택 사항)

GitHub에도 올리고 싶다면, 먼저 원격 저장소를 만들어야 해!

🍑 (1) GitHub에서 새 리포지토리 생성

  1. GitHub 접속 → New Repository 클릭
  2. 프로젝트 이름 입력 (예: my-react-app)
  3. 생성 후, HTTPS 주소 복사 (예: https://github.com/사용자이름/my-react-app.git)

🍑(2) 로컬 프로젝트와 연결

터미널에서 아래 명령어 입력!

git remote add origin https://github.com/사용자이름/my-react-app.git
git branch -M main
git push -u origin main

→ 그러면 GitHub에 내 프로젝트가 올라가! 🎉

 

🧚‍♀️ Git을 추가하는 전체 흐름 (한눈에 보기)

❶git init → Git 초기화
❷.gitignore 추가 (node_modules/, dist/ 등 제외)
❸ git add . && git commit -m "Initial commit"
❹ GitHub에 올릴 땐 git remote add origin <주소> 후 git push -u origin main

 

---------------------------------------------------------------------------------------------------------------------

❹기본 코드 구조 이해

📂 프로젝트 폴더 구조

my-react-app/
├── node_modules/     # npm 패키지들
├── public/           # 정적 파일 (favicon 등)
├── src/              # 여기서 코딩 시작!
│   ├── App.jsx       # 메인 컴포넌트
│   ├── main.jsx      # 루트 렌더링
│   ├── components/   # (추가) 컴포넌트 폴더
│   ├── assets/       # 이미지, 아이콘 등
│   └── index.css     # 기본 스타일
├── index.html        # 메인 HTML
├── package.json      # 프로젝트 정보
├── vite.config.js    # Vite 설정
└── README.md

→기본적으로 src/App.jsx 파일이 메인 화면이야!
→ 새로운 컴포넌트는 src/components/ 폴더 만들어서 관리하면 좋아!

 

 

❺ 프로젝트 개발 & 실행

이제부터는 src 폴더에서 코드를 작성하면 돼!

  1. 컴포넌트 추가: 새로운 기능을 만들고
  2. 스타일 추가: 원하는 디자인을 적용하고
  3. 라우터 설정: 여러 페이지가 필요하면 react-router-dom 설치해서 라우팅하면 돼!

❻빌드 후 배포 (최종 단계)

만약 프로젝트를 배포하려면?

npm run build

→ dist/ 폴더가 생성되고, 이 파일들을 서버에 올리면 돼!

참고. (출처 : 오즈코딩스쿨)

 

이름을 수정하면 안되는 파일들