React

[React] VSCode - Github 연동 방법

오이호박참외 2024. 9. 25. 12:30

🔗 VSCode - Github 연동

1. Github repository 생성하기
2. Git 연동하기
rm -rf .git
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/cupucharm/MarkItUp-React.git
git push -u origin main

 

💾 Github repository 생성하기

Repositories 탭 내 New 버튼

https://github.com/ 에 접속하여 로그인한 뒤, 내 Reositories 탭 우측 상단에 초록색 New 버튼이 있다. 해당 버튼을 클릭해서 새로운 Repository를 생성할 수 있다.

Repository name, Description 채우기

Repository name(필수)과 Description(선택)란 정도만 채운 뒤, 하단의 초록색 Create repository 버튼을 누르면 Repository name명을 가진 새로운 Repository가 생성된다.

🌟 CRA(create react app)로 리액트 프로젝트를 생성했다면 README.md는 로컬에 자동 생성되어 있으므로
'ADD a README file' 은 체크 해제하는 것을 추천한다. 🌟 

⛓️ Git 연동하기

.git 파일 제거

 

[React] 리액트 프로젝트 생성하기 (Create React App)

Create React App(CRA)를 사용하면 초기 설정에 시간을 낭비할 필요가 없다. 복잡한 환경 설정 없이 빠르게 리액트 프로젝트를 시작할 수 있으며리액트 개발을 위한 기본적인 환경을 갖추고 있어, 개

cupucharm.tistory.com

CRA(create react app) 으로 리액트 프로젝트를 생성하니 프로젝트 내부에 .git 파일이 존재한다.

CRA로 생성한 프로젝트 내 .git 파일이 존재

이 디렉토리는 Git 버전 관리 시스템에서 사용하는 메타데이터를 저장하는 폴더이다. 즉, 프로젝트가 Git 저장소로 초기화되었다는 의미이다. 하지만 나는 Git을 직접 초기화한 적이 없어 왠지 찝찌-입하니까 일단 해당 폴더를 삭제(rm -rf .git)하고 Git을 다시 초기화(git init)했다.

rm -rf .git
git init

git이 하라는 대로

Git guideline

git add README.md
git commit -m "first commit" 
git branch -M main 
git remote add origin https://github.com/cupucharm/MarkItUp-React.git
git push -u origin main
더보기
  • git add README.md
    • README.md 파일을 스테이징 영역에 추가해서 이번 커밋에 포함할 준비를 한다.
  • git commit -m "first commit"
    • 스테이징 영역에 있는 모든 변경 사항(여기서는 README.md)을 커밋한다. 
    • m 옵션에 이어서 작성한 메시지("first commit")는 자유롭게 작성하면 된다.
  • git branch -M main
    • 현재 브랜치의 이름을 main으로 변경한다. 
    • M 옵션은 기존에 main이라는 브랜치가 있더라도 강제로 이름을 변경하게 한다.
  • git remote add origin <repository-url>
    • 원격 저장소를 추가한다.
    •  <repository-url> 부분에는 GitHub 또는 다른 Git 호스팅 서비스에서 생성한 저장소의 URL을 입력해야 한다.
  • git push -u origin main
    • 로컬의 main 브랜치를 원격 저장소(origin)에 푸시한다. 
    • u 옵션은 이 브랜치를 기본 추적 브랜치로 설정하여, 이후 git push 또는 git pull 명령어를 사용할 때 origin main을 생략할 수 있게 한다.

Git 초기화(git init) 이후부터는 Git의 가이드라인을 따랐다.

하지만 해당 가이드라인은 git add README.md 를 사용하여 README.md 파일만 커밋하는 상황이다.
초기 커밋이라 전체 파일을 다 커밋하고 싶은 경우는 해당 명령어(git add README.md) 대신 아래와 같이 입력해 주면 된다.

git add .

만약 README.md만 먼저 올렸다면, 아래와 같이 해서 다시 올려주면 된다~

git add .
git commit -m "first commit"
git push origin main

 

그럼 CRA로 생성한 리액트 전체 파일을 내 레포지토리에 올리기가 끝났다 !

🍯Tip1. .gitignore 파일 생성

CRA로 생성된 프로젝트에는 기본적으로 .gitignore 파일이 포함되어 있다. 이 파일에는 Git이 무시해야 할 파일 및 디렉터리 목록이 포함되어 있으므로, 기본 제공된 파일을 그대로 사용하면 된다.

🍯Tip2. git init

git init은 Git 저장소를 초기화하는 명령어이다. 이 명령어를 사용하면 현재 디렉터리에 새로운 Git 저장소가 생성된다.

  1. .git 디렉터리 생성: 현재 디렉터리에 .git이라는 숨김 폴더를 생성한다.
  2. 버전 관리 시작: 이후부터 이 디렉토리 내의 파일 및 변경 사항을 Git으로 관리할 수 있게 된다.

즉, git init을 실행한 후에는 해당 디렉터리에서 Git 명령어를 사용하여 파일의 변경 이력을 추적하고 관리할 수 있다.

𖤐𖤐𖤐𖤐𖤐 github 올라간 모습 𖤐𖤐𖤐𖤐𖤐

아 ~ 쉽다 쉬워 ~ 

프로젝트 생성하기 복잡해서 여태껏 망설였던 걸 후회하고 있다. 한 번 기록해 뒀으니 이제 프로젝트 생성하는데 걱정 없다~!