깃허브 저장소 ( repository ) 만들기 / vscode 코드 업로드 ( push ) 하기

깃허브 홈페이지에서 저장소를 먼저 만들고,
만들어진 코드를 업로드기 하기 위해 git 명령어를 사용할 수 있다.
git init 사용하여 깃허브 저장소를 위한 환경 설정 폴더인 .git를 만든다.
git remote 사용하여 깃허브 저장소를 연결하고,
git add 사용하여 추가 또는 수정된 코드를 설정한다.
마지막으로 git push 사용하여 깃허브 저장소에 업로드를 할 수 있다.

깃허브 저장소 ( repository ) 만들기
vscode 코드 업로드 ( push ) 하기

깃허브는 소스 코드를 업로드하고 버전관리를 하기 위한 플랫폼이다.
지금은 경쟁적인 비슷한 서비스들도 많지만, 가장 많은 사용자들을 보유하고 있다.
하지만, 이슈도 많은 것도 사실이다.
지금은 회사에서도 버전 관리를 위해 팀단위로 사용하고 있다.
IDE에서 코드 프로젝트를 생성하고 깃허브 저장소에 코드를 업로드할 수 있지만,
깃허브 홈페이지에서 먼저 저장소를 만들고 만들어진 코드 프로젝트를 깃허브 저장소에 연결하여 코드를 업로드할 수 있다.
물론, 깃허브 API를 활용한 유틸리티 등을 사용할 수도 있겠지만, 터미널에서 사용하는 커맨드 명령어를 사용하면 더 편할 수 있다.
본인의 경우 코드의 방향성과 같은 것들은 깃허브 GUI를 사용하지만, 코드 관리를 커맨드 명령어를 굳이 사용한다.
어떤 문제인지 모르겟지만, 인증과 로그인이 원활하지 못한 단점이 있다.

깃허브 저장소 만들기 / git init
코드 업로드 하기 순서 / git push

아래는 위의 설명에 대한 순서를 표현한 것이다.
보통, 코드를 만들고 깃허브에 연결해 코드를 업로드할 것이다.
하지만, 어떤 경우 깃허브에서 저장소( repository )를 먼저 만들고 코드를 업로드할 수 있다.
어떤 방법을 사용해도 상관없지만, 본인의 경우 후자를 사용하고 있다.
아래는 순서이다.
과정이 길고, 번거롭지만 막상 해보면 딱히 어려울 것은 없다.

1. 깃허브 ( github) 홈페이지 접속하고, 로그인하기
2. 깃허브 저장소 ( Repository ) 만들기
3. vscode 에서 만든 코드 위치에서 터미널 ( Terminal ) 열기
4. git init
   - 현재 폴더를 깃허브 저장소로 만든다.
   - 깃허브 저장소 정보인 .git 폴더 생성됨.
5. 사용자 지정
   git config user.name "사용자이름"
   - 저장소에 권한이 있는 사용자 이름 설정.
   git config user.email "사용자 email"
   - 저장소에 권한이 있는 사용자 이메일 설정.
6. git add .
   - 현재 폴더 위치 아래 모든 파일과 폴더를 스테이징한다.
7.  git commit -m "first commit"    
   - push를 위한 스테이징에 있는 모든 파일과 폴더에 메세지를 등록한다.
8. git remote add origin 깃허브 저장소 URL
   - 깃허브 저장소 연결.
9. git remote -v
   - 깃허브 저장소 목록 보기.
10. git branch -M main
    - 깃허브의 main 브랜치를 설정한다.
11. git push -u origin main
    - 깃허브의 main 브랜치에 코드를 업로드.
12. 깃허브 저장소에서 코드 확인
    - 깃허브 홈페이지의 저장소에서 업로드된 코드 확인.

따라하기

깃허브에서 먼저 저장소를 만들고, vscode에서 코드를 업로드하는 순서를 언급했다.
과정은 많아 보이지만 막상 해보면 별 것 아니다.
정작 수정해서 사용하는 명령어는 한 두개 정도, 나머지는 깃허브 커맨드 명령어를 사용하면 되기 때문이다.
이제, 위의 과정을 좀 더 상세하게 언급해 본다.

1. 깃허브 ( github) 홈페이지 접속하고, 로그인하기

깃허브에서 저장소 ( repository ) 만들기를 하기 위해 깃허브에 접속하고 로그인을 해야 한다.
깃허브 홈페이지는 `https://github.com/`이다.
접속하면 아래와 같은 화면을 볼 수 있으며, 우측 상단의 `Sign in` 버튼을 클릭한다.

깃허브 홈페이지

`Sign in`버튼을 클릭하면 화면이 바뀌면서 `로그인 화면`이 나타난다.
가입이 되었다면 로그인을 위한 `이메일과 패스워드`를 입력하고 `Sign in` 버튼을 클릭한다.
로그인이 진행될 것이며,
만약, 추가적인 인증을 요구할 수도 있다.
( 어후~ 그놈의 2-Factor )

사용자 정보 입력

로그인이 완료되면 아래와 같은 화면이 보인다.
만약, 여러가지를 사용하고 있다면 좌측에 저장소 목록 ( repositories ) 가 보인다.
로그인은 완료했다.

로그인 완료

2. 깃허브 저장소 ( Repository ) 만들기

깃허브에 로그인을 완료하면 좌측 상단에 `New`버튼이 보인다.
이것은 깃허브에 저장소를 새롭게 만드는 기능으로 `https://github.com/소유자명/저장소명`으로 만들어진다.
먼저, 깃허브에서 저장소를 새롭게 만들기 위해 New 버튼을 클릭한다.

깃허브 저장소 새로 만들기

`깃허브 저장소 새로 만들기`를 위한 `New` 버튼을 클릭했다면,
화면이 변경되며 저장소 이름을 입력하는 화면이 나타난다.
소유자 ( Owner ), 저장소 이름 ( Repository name ) 을 입력한다.

저장소 이름 ( Repository name ) 입력하기

현재 만들어지는 깃허브 저장소의 설정 부분이다.
기본값이 표현되어 있다.
중요한 것은 visibility 분으로 공개 여부를 선택할 수 있다.
깃허브 저장소를 만들 때 처음부터 공개 하고 싶다면 Public 를 선택하면 되며, 타인에 공개하고 싶지 않다면 Private 를 선택한다.
마지막으로 `Create repository`를 클릭하면 깃허브 저장소가 만들어진다.

새로운 깃허브 저장소 만들기

화면이 변경되고, 깃허브 저장소를 연결하는 방법이 표현된다.
기본적인 깃허브 커맨드 명령어들이 나오니 학습해 두도록 하자.
vscode에서 모두 사용할 것이지만, 추가적인 커맨드 명령들도 존재한다.
여기서 중요한 점은 `.git`으로 끝나는 깃허브 저장소 url 이다.
vscode에서 깃허브 설정시 url을 연결할 때 사용된다.

깃허브 저장소 생성

3. vscode 에서 만든 코드 위치에서 터미널 ( Terminal ) 열기

깃허브에 코드 업로드( push )를 위해 vscode에서 자바 프로젝트를 하나 만들었다.
간단한 코드를 만든 후 깃허브에 코드를 업로드하기 위한 터미널( Teminal )을 열기 하였다.
터미널은 도스 명령창 또는 PowerShell과 같은 것이다.
vscode의 상단 메뉴의 Terminal > New Teminal 을 선택한다.
단축키는 Ctrl + Shift + ` 이다.

vscode 터미널 열기

터미널을 열었다면 아래의 이미지처럼 검정바탕의 흰글씨 그리고, 커서가 깜빡거리고 있을 것이다.
도스 명령창과 같은 모습이다.
여기서 깃허브 저장소에 코드를 업로드 하기 위한 모든 작업이 이루어질 것이며, 깃허브 관련한 명령어들을 익히게 될 것이다.

vscode 터미널 창

최근의 느낌이 있다면,
과거 GUI의 편안함이 있었다면 지금은 터미널과 같은 명령어 사용이 늘어나고 있다는 생각이다.
리액트를 경험해 본 이후 터미널에 다시 익숙해지고 있다는 느낌이랄까.

4. git init - 저장소 설정

`git init`은 깃허브 저장소( repository )를 설정하는 부분이다.
현재 폴더 기준 `.git`폴더를 만들어 깃허브 저장소와 연결되어 상태를 공유하고 동기화되며,
.git 가 있는 모든 하위 폴더와 파일들은 깃허브 저장소를 위한 관리 대상이 된다.
쉽게 말하면 깃허브 저장소를 위한 로컬 컴퓨터의 저장소 초기화라 생각하자.
여러가지 정보가 들어가겠지만 자주 사용하는 것은 사용자 정보와 코드 상태 등이 저장된다.
.git 폴더가 삭제되면 깃허브 저장소와 연결과 끊어진다.

git init - 깃허브 로컬 저장소 생성

아래의 이미지는 `git init` 후 만들어진 .git 폴더를 보여주고 있다.
위의 터미널에서 보듯 `test-repo` 폴더에서 git init 명령을 해 주었기 때문에,
.git 폴더 또한 test-repo 폴더에 생성된 것을 볼 수 있다.

git init - 깃허브 로컬 저장소 위치

5. 사용자 지정

이제 사용자를 지정해야 한다.
해도 되고, 안해도 되지만, 굳이 설정하면 깃허브 저장소의 업로드 이름이 변경되며, 파일을 commit 또는 push 한 경우 어떤 사용자에 의한 것인지 확인해 볼 수 있다.
사용자 정보는 이름과 이메일 정도가 될 것이며,
`git config user.name`을 사용하면 사용자 이름을 설정할 수 있고, `git config user.email`을 사용하면 사용자 email을 설정할 수 있다.

git config user - 깃허브 사용자 정보 설정

• git config user.name
  - 깃허브 저장소의 권한이 있는 사용자 이름 설정.
• git config user.email
  - 깃허브 저장소의 권한이 있는 사용자 이메일 설정.

6. git add .

깃허브 저장소에 업로드( push ) 하기 위한 폴더와 파일들을 등록하며, 스테이징( Staging ) 상태로 설정한다.
스테이징 상태는 깃허브에 업로드할 폴더와 파일들을 commit 상태 전으로 설정하는 것이다.
참고로, `git push`는 commit 상태에 있는 폴더와 파일들을 대상으로 하며,
스테이징 상태의 폴더와 파일 등은 commit 전 상태로 설정된다.

git add - 현재 폴더 하위 모든 파일 등록 / Staging

7. git commit

`git commit`은 깃허브 저장소에 폴더 또는 파일들을 업로드( push ) 전의 상태로 만든다.
깃허브 저장소에 업로드 전에 파일들의 간단한 설명을 적고 명령어를 입력하고 실행하면 된다.
깃허브 저장소에 파일을 업로드 하기 위한 과정이 조금 복잡하고 귀찮다.
깃허브의 정책이기도 하지만, 업로드한 사용자와 함께 어떤 작업을 했는지 알 수 있도록 하는데 목적이 있다.

git commit -m

`git commit ~`명령어를 입력했다면 아래와 같은 메세지들이 나타난다.
staging에 있는 파일들에 commit 상태를 설정하고 깃허브 저장소에 업로드( push )를 하기 위한 준비를 한다.

git commit -m 결과

8. git remote add origin 깃허브 저장소 URL

이제 깃허브 저장소를 연결해 보자.
`git commit`를 사용하여 깃허브 저장소에 업로드할 파일들은 준비되었다.
`git remote ~` 명령어를 사용하여 깃허브 저장소를 연결하자.
위의 2번째 단계에서 깃허브 홈페이지에서 생성한 깃허브 저장소를 사용할 때가 되었다.
`git remote add origin`명령어 뒤에 한 칸 띄고 깃허브 저장소 URL을 입력해 주고 엔터키를 친다.
그 어떤 메세지가 없지만, 정상이다.

git remote add - 깃허브 원격 저장소 연결

9. git remote -v

git remote 명령어를 사용하면 만들어진 깃허브 저장소 목록을 볼 수 있다.
위에서 연결한 저장소가 잘 나오는지 확인해 보자.
명령어를 실행해 보자.
깃허브 저장소 목록을 보는 명령어는 `git remote -v`이다.

git remote -v : 깃허브 연결된 원격 저장소 목록

10. git branch -M main

- 깃허브의 main 브랜치를 설정한다.

git branch -M main

.

11. git push -u origin main

- 깃허브의 main 브랜치에 코드를 업로드.

git push -u origin main

.

12. 깃허브 저장소에서 코드 확인

- 깃허브 홈페이지의 저장소에서 업로드된 코드 확인.

깃허브 저장소 push 확인

.