리액트 프로젝트를 개발하다 보면, 내가 만든 소스 코드를 안전하게 관리하고 다른 사람과 협업할 필요가 생기죠? 이때 빼놓을 수 없는 게 바로 Git과 GitHub 같은 버전 관리 시스템이에요. 혹시 Git이나 GitHub를 처음 접하거나, 리액트 프로젝트와 어떻게 연동해야 할지 막막하다면 이 글을 꼼꼼히 읽어보세요! README 파일부터 Git 저장소 생성, 그리고 GitHub에 업로드하는 과정까지, 차근차근 설명해 드릴게요.
리액트 프로젝트 생성 및 Git 저장소 초기화: 첫걸음 마법
자, 리액트 프로젝트를 처음부터 만들어 Git과 연동하는 과정을 한번 살펴볼까요?
리액트 프로젝트 생성하기: create-react-app의 마법
리액트 프로젝트를 뚝딱 만들어내는 create-react-app이라는 멋진 도구가 있어요. 터미널을 열고 아래 명령어를 입력하면, 프로젝트가 생성되는 걸 볼 수 있을 거예요.
npx create-react-app 프로젝트이름'프로젝트이름' 부분에는 원하는 프로젝트 이름을 넣어주면 돼요. 예를 들어, 'my-react-app'이라고 하면, my-react-app 폴더가 생성되면서 리액트 프로젝트 파일들이 자동으로 채워진답니다. 마치 마법처럼 말이죠!
Git 저장소 초기화: 프로젝트의 역사를 기록하다
리액트 프로젝트 폴더가 생성되었다면, 이제 Git 저장소를 초기화할 차례에요. Git 저장소는 프로젝트의 모든 변경 사항을 기록하는 역할을 해요. 덕분에 이전 버전으로 돌아가거나, 실수로 코드를 망쳐도 걱정 없이 복구할 수 있답니다.
프로젝트 폴더 안으로 이동한 후, 터미널에서 아래 명령어를 입력하면 Git 저장소가 초기화돼요.
git init하면 .git이라는 숨겨진 폴더가 생성되는데, 이 폴더 안에 Git이 프로젝트의 모든 변경 내역을 기록해 놓는답니다.
기본 브랜치 설정: main 브랜치로 통일
리액트 프로젝트를 처음 만들면, 기본적으로 'master' 브랜치를 사용하도록 설정되어 있어요. 하지만, 요즘 GitHub에서는 'main' 브랜치를 기본으로 사용하는 추세라서, 미리 'main' 브랜치로 변경해주는 게 좋답니다.
터미널에서 아래 명령어를 입력하면, 기본 브랜치를 'main'으로 변경할 수 있어요.
git branch -M main새로운 프로젝트를 만들 때, 기본 브랜치를 'main'으로 설정하도록 미리 설정해두면 더욱 편리해요. 아래 명령어를 입력해보세요.
git config --global init.defaultBranch main설정을 해두면 앞으로 Git 저장소를 새로 만들 때마다, 자동으로 'main' 브랜치가 기본으로 설정된답니다. 이렇게 하면 브랜치 이름 때문에 헷갈리는 일 없이, 깔끔하게 프로젝트를 관리할 수 있죠!
GitHub 리포지토리 생성 및 연동: 세상과 소통하다
이제 GitHub에 프로젝트를 업로드하고, 다른 사람들과 공유할 준비를 해야겠죠?
GitHub 리포지토리 만들기: 나만의 공간 확보
GitHub에 접속해서, 새 리포지토리를 생성해야 해요. 리포지토리는 프로젝트를 저장하는 공간이라고 생각하면 돼요.
리포지토리 이름과 설명을 적고, 공개 여부를 설정하면 돼요. 중요한 점은, 리포지토리를 만들 때 README 파일을 체크하지 않는 것**이에요. 왜냐하면, create-react-app으로 생성된 프로젝트에는 이미 README.md 파일이 있기 때문이죠. README 파일을 체크하면, 나중에 파일 충돌이 발생할 수 있어요.
원격 저장소 추가: Git과 GitHub 연결하기
GitHub에서 리포지토리를 만들었다면, 이제 Git과 연결해야 해요. 터미널에서 아래 명령어를 입력하면 GitHub에 생성한 리포지토리의 URL을 원격 저장소로 추가할 수 있답니다.
git remote add origin [리포지토리 URL][리포지토리 URL] 부분에는 GitHub에서 생성한 리포지토리의 URL을 붙여넣으면 돼요. 이제 Git과 GitHub가 서로 연결되었으니, 코드를 업로드할 준비가 끝났어요.
파일 추가 및 커밋: 변경 사항 기록하기
자, 이제 로컬 저장소에 있는 파일들을 GitHub에 업로드하기 위해, 변경 사항을 기록하는 커밋을 해야 해요.
먼저, 변경된 모든 파일을 스테이징 영역에 추가해요.
git add ., 커밋 메시지를 작성해서 커밋을 합니다.
git commit -m "Initial commit""Initial commit" 부분에는 변경 사항에 대한 간단한 설명을 적어주세요.
원격 저장소에 푸시: GitHub로 업로드
마지막으로, 로컬 저장소에 커밋한 변경 사항을 GitHub 원격 저장소에 업로드하는 푸시 작업을 해야 해요.
git push -u origin main이 명령어를 입력하면, 로컬 저장소의 'main' 브랜치에 있는 변경 사항이 GitHub 원격 저장소의 'main' 브랜치로 업로드된답니다.
이제 GitHub에 접속해보면, 리액트 프로젝트가 성공적으로 업로드된 걸 확인할 수 있을 거예요!
주의 사항 및 팁: 꼭 기억하세요!
Git과 GitHub을 사용할 때, 몇 가지 주의해야 할 사항들이 있어요.
1. README 파일 충돌: 앞서 말씀드린 것처럼, 리액트 프로젝트 생성 시 자동으로 만들어지는 README.md 파일이 GitHub 원격 저장소와 충돌할 수 있어요. 이를 방지하려면, GitHub에서 리포지토리를 만들 때 README 파일을 체크하지 않거나, 로컬에서 README.md 파일을 삭제한 후에 푸시하는 게 좋아요.
2. 브랜치 이름: GitHub의 기본 브랜치 이름은 'main'이므로, 로컬 브랜치도 'main'으로 설정하는 게 좋답니다. 혹시 'master' 브랜치를 사용하고 있다면, 위에서 설명한 방법으로 'main' 브랜치로 변경해주세요.
3. .gitignore 파일: 리액트 프로젝트를 GitHub에 업로드할 때, node_modules 폴더를 제외하는 게 좋답니다. node_modules 폴더는 프로젝트의 종속성을 관리하는 폴더인데, 크기가 매우 크고, 프로젝트마다 다르기 때문에 버전 관리 대상에서 제외하는 게 좋죠.
.gitignore 파일에 라는 단어를 추가해주세요.
4. Git 명령어 익히기: Git 명령어는 처음에는 낯설고 어려울 수 있지만, 꾸준히 사용하다 보면 자연스럽게 익숙해질 거예요.
| git init | Git 저장소 초기화 |
| git add . | 모든 변경 사항 스테이징 |
| git commit -m "커밋 메시지" | 변경 사항 커밋 |
| git push -u origin main | 변경 사항 원격 저장소에 푸시 |
| git status | 현재 저장소 상태 확인 |
| git branch | 브랜치 목록 확인 |
| git checkout 브랜치 이름 | 브랜치 변경 |
| git clone [리포지토리 URL] | 원격 저장소 복제 |
Git 명령어 설명
QnA 섹션
Q1. Git과 GitHub의 차이점은 무엇인가요?
A1. Git은 버전 관리 시스템이고, GitHub는 Git 저장소를 호스팅하는 웹 서비스에요. Git은 로컬에서 사용하는 도구이고, GitHub는 다른 사람들과 코드를 공유하고 협업하기 위한 플랫폼이라고 생각하면 돼요.
Q2. README 파일은 왜 필요한가요?
A2. README 파일은 프로젝트에 대한 설명을 작성하는 파일이에요. 프로젝트의 목적, 사용 방법, 기여 방법 등을 적어두면, 다른 사람들이 프로젝트를 이해하는 데 도움이 된답니다.
Q3. .gitignore 파일은 어떻게 사용하나요?
A3. .gitignore 파일은 Git에서 버전 관리 대상에서 제외할 파일이나 폴더를 지정하는 파일이에요. node_modules 폴더처럼 버전 관리가 필요 없는 파일이나 폴더를 .gitignore 파일에 추가하면, Git에서 추적하지 않아요.
도움이 되셨기를 바라요!
혹시 궁금한 점이 있다면 언제든 댓글 남겨주세요! 😄
리액트,React,Git,GitHub,버전관리,소스코드관리,프로그래밍,개발,웹개발,프론트엔드,프론트엔드개발,README,깃허브,깃,깃배쉬,깃커밋,깃푸쉬,초보개발자,개발공부,개발자,developer,webdeveloper,frontend,frontenddeveloper,프로젝트관리,협업,팀개발,오픈소스,개발환경,개발팁,코딩,coding,npx,create-react-app,node_modules,gitignore,main,master,브랜치,원격저장소,로컬저장소,스테이징,커밋,push,pull,충돌해결