티스토리 뷰
서론
예전에 알음알음 깃허브에 푸시를 해본 경험이 있는데, 그때는 SSH를 이용하여 올리지 않고 기본적인 깃허브 링크?로 올리거나 마우스 드래그를 통한 푸시를 해보았다. 어쩌다 SSH로 올리는 방법에 대해 알게 되었는데 궁금해서 이번에는 SSH를 이용한 방식으로 올리었다.
목표
- SSH를 이용하여 헤매지 않도록 깔끔하게 add, commit, push 과정을 정리해보기
- 최초 이 프로젝트를 깃허브에 올릴 때와 그 이후의 푸시 과정을 나누어 정리해보기
- 깃허브 사용법에 대해 정리하며 억지로 외우려하지 않고, 조금이라도 습득해보기
나는 전에 깃허브 SSH 키를 미리 생성해두어서 SSH 키 확인하기로부터 깃허브 올리기를 시작했다! 현재는 깃허브 업로드 완료 상태!
전에 SSH 키 생성하는 방법도 글을 쓰다 말았는데 다시 작성해야겠다.
SSH를 이용해서 깃허브에 올리는 건 난생 처음인데 생각보다 마음에 든다! 비밀번호 설정 유무도 선택이 가능하고, 깔끔하게 올라가는 기분이 든다 ㅎㅎ
순서는 이렇게 진행할 거다!
| SSH 키 확인하기 |
| SSH 키 생성하기 |
| SSH 키 깃허브에 등록하기 |
| SSH 연결 확인하기 |
| ★SSH를 이용하여 깃허브에 푸시하기★ |
1. SSH 확인하기
Window:
dir %USERPROFILE%\.ssh
Mac:
ls ~/.ssh
예시)
D:\dessert-recipe-project>dir %USERPROFILE%\.ssh
pudding@MacBook-Air ~ % ls ~/.ssh
2. SSH 생성하기
ssh-keygen -t ed25519 -C "your_email@example.com"
이 명령어를 입력하면 아래 두 개를 물어본다. 선택사항이며 엔터 입력 시 넘어간다.
> Enter file in which to save the key
> Enter passphrase
차례대로 어디에 ssh키를 저장할 건지 / ssh에 비밀번호를 걺
3. 나의 SSH를 깃허브에 등록하기
깃헙 계정 쪽 setting > SSH and GPG keys > new SSH Key
title: 알아볼 수 있는 이름으로
type: Authentication keys
4. SSH 연결 확인하기
ssh -T git@github.com
SSH 비밀번호 설정했으면 엔터 후 비밀번호 입력을 하면 된다.
Hi 깃허브명! You've successfully authenticated, but GitHub does not provide shell access. 나오면 성공 문구가 잘 출력된 것이다.
5-A. 다른 기기에서 기존 플젝 가져오기 (Download Zip X)
git clone 깃허브_SSH_URL

그래도 각 모듈들이 설치가 안 되어있어서 npm install을 해야 한다.
5-B. SSH를 이용하여 깃허브에 푸시하기
- 내 플젝 폴더를 깃 저장소로 변환한다.
git init
해당 프로젝트 폴더가 깃 변경 이력이 추적 되는 깃 저장소로 변환을 해준다.
이때, 로컬 저장소만 생성된 상태이고, 깃허브에 올리려면 추가 작업이 필요하다.
- 원격 저장소 remote시 SSH 주소를 기입한다.
예시)
git remote add origin git remote add origin git@github.com:깃허브명/플젝폴더명.git
해당 프로젝트에서 최초 한 번만 작업하면 되는 것 같다.
- 깃허브에 파일을 추가한다.
git add .
- 깃허브에 커밋을 한다.
git commit -m "커밋할 때 남길 내용"
예시)
git commit -m "카카오 로그인 기능 추가"
- 깃허브에 푸시를 한다.
최초 커밋시:
git push -u origin main
두번째부터는:
git push
자문자답 QnA
❔: 깃 저장소 초기화가 뭐예요?
깃 저장소:
Repository.
파일의 변경 사항을 추적하는 곳.
리포지토리 또는 리포는 개발자가 애플리케이션 소스 코드에 대한 변경을 수행 및 관리하는 데 사용하는 중앙화된 디지털 스토리지입니다. 리포는 개발자가 쉽게 코드 변경 사항을 추적하고, 파일을 동시에 편집하고 어디에서든 동일한 프로젝트에서 효율적인 협업을 수행할 수 있게 해 주는 기능을 갖추고 있습니다. (AWS)
Repository가 중요한 이유:
리포지토리를 사용하면 소프트웨어 개발 팀이 기본 소스 코드를 손상시키지 않으면서 소프트웨어의 프로그램 코드를 여러 번 변경할 수 있습니다. 변경 사항을 기본 분기에 직접 적용하는 것이 아니라, 리포지토리의 기능을 사용하여 변경 사항을 편집하고 검토합니다. 이렇게 하면 둘 이상의 개발자가 코드의 동일한 부분을 편집할 때 병합 충돌이 줄어듭니다. (AWS)
💬: 깃 저장소 초기화:
초기화란 이미 존재하는 폴더를 VCS로 관리할 수 있게 숨겨진 영역을 생성하는 작업으로, 해당 폴더를 Git 저장소로 변환한다.
이렇게 하면 .git이라는 숨겨진 폴더가 생기고 git이 변경 사항을 추적할 준비를 하게 된다!
git init 명령어를 통해 해당 폴더가 변경 사항을 추적할 수 있는 git 저장소로 변환시킬 수 있다.
❔: 깃 저장소 초기화는 언제 해주어야 할까?
| 💬: | 깃 저장소 초기화 여부 git init |
|
| 새 프로젝트를 처음으로 만들고 나서 | ⭕ | 처음부터 깃으로 관리를 할 예정이라면 git init의 작업이 필요하다. |
| 깃허브에서 Repository로부터 프로젝트를 받아올 경우(= git clone), 깃허브에서 git clone으로 저장소에서 내려받을 경우 |
❌ | 이미 깃 저장소로부터 복제를 한 것이므로 git init 작업이 필요없다. |
| 내가 처음으로 만든 프로젝트의 경우에는 git init과 같은 깃 저장소 초기화가 필요하고, 깃허브 레포지토리로부터 가져온 프로젝트라면 깃 저장소 초기화가 필요하지 않다! |
||
| git init을 하면? | 내 프로젝트 폴더에 깃 변경 이력을 추적할 있는 깃 저장소로 변환이 된 거고, 로컬 저장소만 생성된 상태이다. |
|
깃 저장소 초기화 성공 문구:
C:\dessert-recipe-project>git init
Initialized empty Git repository in C:/dessert-recipe-project/.git/
❔: 해당 플젝을 SSH 최초 깃허브 연동은 했는데, 앞으로는 어떻게 깃허브에 올리면 될까?
💬: 파일 추가(add) > 커밋(commit) > 깃허브 업로드(push)
이 세 가지만 기억하자!
git add . 혹은 git add 파일명
git commit -m "커밋 내용"
git push
❔: 파일을 수정했는데 깃에 바로 올라가나?
💬: 수정을 해도 깃허브에 반영을 하려면, 파일 add > 커밋 > 깃허브 push를 거쳐야만 한다.
❔: 깃허브에 파일을 잘못 올렸을 경우에는 삭제할 수 있나?
💬:
git reset HEAD 파일명
💬: 마지막 커밋 상태로 되돌리기
git reset --hard HEAD
❔: 깃허브 최초 푸시( git push -u origin main )를 했는데, error: src refspec main does not match any 가 떠요.
main으로 브랜치가 지정되지 않아서다.
💬: 보통 이런 오류는 브랜치가 master로 되어있을 경우가 많다. 내 브랜치를 확인하고 브랜치를 main으로 바꿔준다.
💬: 현재 브랜치 확인하기
git branch
💬: main 브랜치로 바꾸기
git branch -M main
그리고 master 브랜치를 써서 오류가 나는 게 아니라 명령문 자체가 git branch -M main 을 써서 그렇다.
20년 이후에 깃허브에서 기본 브랜치가 master -> main으로 바꾸었다고 한다.
그래서 깃허브 새 저장소를 만들면 기본적으로 main 브랜치로 설정이 되고, 통상적으로도 main 브랜치를 사용하는 추세라고 한다.
❔: 잘못 올라간 파일 삭제하기
💬:
출처
- Repo란 무엇일까요?. AWS. https://aws.amazon.com/ko/what-is/repo/
'리액트로 웹 개발 A to Z' 카테고리의 다른 글
| 리액트에서 중요한 것 : 상태관리, 비동기적, 렌더링 (0) | 2025.02.19 |
|---|---|
| 카카오 로그아웃 API 구현하기 : (해결!) 왜 로그아웃이 안되냐고오오 + fetch와 await (0) | 2025.02.18 |
| SQL을 뽀개보자! : 새로운 컬럼을 추가해보자 (Add, Modify, Change) (0) | 2025.02.05 |
| 리액트 컴포넌트에서 페이지를 이동하는 다양한 방법 (with. mypage → login 페이지로 이동하기, 예외처리) (0) | 2025.01.15 |
| 정적 서버와 동적 서버 (with. 비동기 작업) (0) | 2025.01.14 |