[Frontend] React + TypeScript 프로젝트 만들고 GitHub에 올리기

목차 (OPEN)

• 📑 들어가며
• 🟥 사전 체크
• 🟧 새 React + TypeScript  프로젝트 만들기
• 🟨 의존성 설치 및 기본 실행
• 🟩 Git 초기화해서 버전 관리 시작하기
• 🟦 첫 커밋 만들기
• 🟪 GitHub에 로컬 프로젝트 연결하기

 

 

📑 들어가며

요즘 동아리 사람들이 React + TypeScript 프로젝트를 만들고,

이걸 GitHub에 올려서 관리하려면 어떻게 해야 하는지 자주 물어봐서

포스팅으로 정리해두려고 한다.

 

이 포스팅을 통해 Vite + React + TypeScript로 새 프로젝트를 만들고,

Git으로 버전 관리를 하며, GitHub 레포지토리와 연결해서 첫 push를 하기까지의 과정을

다들 익힐 수 있게 되면 좋겠다 ..✨

 

 

---

🟥 사전 체크

시작하기 전에 우선 아래  가지가 설치되어 있어야 한다.

 

1. Node.js LTS

터미널 또는 PowerShell에서 아래의 명령어를 입력했을 때, 버전 정보가 나오면 OK

node -v

 

2. Git

마찬가지로 아래의 명령어를 입력해서, 버전 정보가 나오는지 확인해보면 된다.

git --version

 

3. GitHub 계정

없다면 아래의 링크에서 회원가입하면 된다.

GitHub · Change is constant. GitHub keeps you ahead.

 

 

---

🟧 새 React + TypeScript  프로젝트 만들기

1. 원하는 폴더로 이동하기

Windows 기준, PowerShell 또는 터미널에서 본인 환경에 맞는 경로로 이동한다.

cd C:\Users\soyeon\Desktop\soyeon

 

 

2. Vite  템플릿 생성하기

👉🏻 npm을 사용할 경우

npm create vite@latest test -- --template react-ts
                         ㄴ 이 자리에 test 대신, 원하는 프로젝트 이름 설정하기

 

👉🏻 pnpm을 사용할 경우

pnpm dlx create-vite@latest test --template react-ts
                              ㄴ 이 자리에 test 대신, 원하는 프로젝트 이름 설정하기

 

 

---

🟨 의존성 설치 및 기본 실행

이제 방금 만든 프로젝트 폴더로 들어가서 패키지를 설치하면 된다.

cd test
     ㄴ이 자리에 방금 만든 프로젝트 이름 넣기

 

 

1. 패키지 설치

👉🏻 npm을 사용할 경우

npm install

 

👉🏻 pnpm을 사용할 경우

pnpm install

 

 

2. 개발 서버 실행

👉🏻 npm을 사용할 경우

npm run dev

 

👉🏻 pnpm을 사용할 경우

pnpm dev

 

 

여기까지 했다면 브라우저에서 http://localhost:5173/ 로 들어가면 Vite 기본 React 화면이 뜬다.

 

 

---

🟩 Git 초기화해서 버전 관리 시작하기

이제 이 프로젝트를 Git으로 관리해보자.

 

1. Git 초기화

터미널에서 아래의 명령어를 실행한다. (방금 만든 프로젝트 폴더에서)

git init

 

 

2. .gitignore 설정하기

Git은 기본적으로 모든 파일을 추적하려고 한다.

하지만 node_modules 처럼 용량이 크고, 언제든 다시 설치할 수 있는 폴더는

GitHub에 올리지 않는 게 좋다.

 

따라서 프로젝트 루트에 .gitignore 파일을 하나 만들어서 아래의 내용을 넣어주면 된다.

파일 위치

# Node / 빌드 결과물
node_modules/
dist/
build/

# 환경 변수 파일
.env
.env.*.local

# 로그 파일
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# 에디터 / OS 관련
.vscode/
.idea/
.DS_Store
Thumbs.db

# 테스트 / 기타
coverage/

 

 

---

🟦 첫 커밋 만들기

이제 프로젝트의 초기 상태를 기록해두자.

 

1. 변경 파일 스테이징

git add .

 

(참고로 . 은 현재 폴더 전체를 의미한다.)

 

 

2. 첫 커밋 생성하기

git commit -m "Init: React + TypeScript 프로젝트 생성"
                  ㄴ 따옴표 안에 원하는 커밋 메시지를 넣기

 

 

여기까지 했다면 현재 상태가 하나의 버전(커밋)으로 남게 된 것이다. 🎊🎊

 

 

---

🟪 GitHub에 로컬 프로젝트 연결하기

이제 이 프로젝트를 올릴 GitHub 저장소를 만들어보자.

 

1. GitHub에서 새 레포 만들기

GitHub · Change is constant. GitHub keeps you ahead.

 

(이때, README나 .gitignore 등은 이미 로컬에 있으니까 추가할 필요가 없다.)

 

 

2. 원격(origin) 추가하기

터미널에서 아래의 명령어를 입력해준다.

git remote add origin https://github.com/내 아이디/내 레포 이름.git

 

 

3. 기본 브랜치 이름을 main으로 바꾸기

보통 GitHub는 기본 브랜치 이름을 main으로 쓰니까 로컬도 맞춰두면 좋다.

git branch -M main

 

 

4. 첫 push 하기

git push -u origin main

 

 

여기까지 하고 GitHub에서 내 레포에 들어가보면,

내가 만든 프로젝트 초기 셋팅이 잘 올라가 있는 것을 확인할 수 있다 ✨