[SJBoard 프로젝트] 깃헙에 프로젝트 업로드하기

1월 말에 생활 코딩 사이트에서 HTML과 CSS 기초 강의를 들으며 처음 깃헙에 가입했었다. 그리고 이후 2월 말부터 <코드로 배우는 스프링 웹 프로젝트> 책으로 스프링을 공부하면서 예제3 중반까지는 깃헙에 공부한 코드를 조금씩 올렸으나 왠지 깃헙을 단순 코드 기록용으로만 사용하는 것 같아 더 이상 깃헙을 사용하지 않게 되었다. 당시에는 아직 내가 깃헙을 사용할 단계가 아니라는 생각이 들었다. 그래서 깃헙 대신 이 블로그에 매일 매일 공부 기록을 남기기 시작했다. 

 

이제 나의 첫 스프링 공부의 결과물인 SJBoard 프로젝트를 마무리 지으려고 한다. SJBoard 프로젝트를 통해 기본적인 게시판 CRUD 기능, 스프링 시큐리티를 이용한 회원 가입 및 로그인, 로그아웃 기능, 그리고 관리자 페이지 기능을 구현하며 기초적인 스프링 원리와 개념을 학습할 수 있었다. 

 

이제 다음 프로젝트를 만들며 계속 개발 공부를 이어나가기 전에, 먼저 그동안 SJBoard 프로젝트를 통해 내가 배운 내용들을 한 번 정리할 필요가 있었다. 그래서 이쯤에서 SJBoard 프로젝트를 깃헙에 올리는 것이 좋겠다는 생각이 들었다. 

 

물론 그 전에 먼저 어떻게 깃헙에 프로젝트를 정리해서 올리는지를 알아야만 했다. 이전처럼 단순 코드 기록용이 아니기 때문에 어떻게 깃헙을 활용해야 하는지, 다들 그렇게 강조하는 ReadMe는 어떻게 작성해야 하는지 등을 알아야만 했다. 그래서 깃헙에 프로젝트를 업로드 하는 과정과 관련 내용을 아래와 같이 정리해보았다. 

 

======================================START!============================================

1. 로그인 및 토큰 만들기 

먼저 깃헙에 로그인 후 (가입하지 않았다면 가입 후 로그인 후) 프로젝트를 올릴 Repository를 만들기 전에 토큰을 만들어야 한다. 

깃헙에 로그인 후 Settings에 들어가 좌측에 있는 메뉴 중 아래쪽에 있는 Developers settings에 들어간다.  

2. 좌측에 있는 Personal access tokens를 클릭하고 Generate new token을 클릭한다. 

3. 그 다음 Note에 토큰 이름을 입력하고 Expiration에 토큰의 유효기간을 입력하고 Select Scopes에는 해당 토큰의 부여할 권한을 선택한다. 나는 이 토큰은 나 혼자 프로젝트를 할 때 사용할 용도로 만드는 것이라서 유효기간 없이 모든 권한을 부여했다. 

그리고 화면 가장 하단에 있는 Generate token을 클릭한다. 

그럼 아래와 같이 토큰이 나오는데 한 번 이 페이지를 벗어나면 다시 볼 수 없으니 잘 복사해서 저장해둔다. 

그 다음 이 토큰을 컴퓨터에 저장을 한다. 윈도우와 맥의 경우 저장 방법이 다른데 나는 맥북을 사용하므로 아래 글을 보고 따라했다. 

* 참고 페이지: https://hyeon9mak.github.io/github-personal-access-token/

 

2. Repository 만들기

이제 프로젝트를 올릴 Repository(레파지토리)를 만들어야한다. 

Repositories에 들어오면 보이는 우측의 초록색 New 버튼을 클릭한다. 

그리고 아래와 같이 레파지토리의 이름, 공개 범위 등을 설정하고 Create Repository 버튼을 클릭한다. 

그럼 아래와 같이 레파지토리가 생성된 것을 확인할 수 있다. 

 

3. STS에 GitHub 연동하기 

STS에 들어가서 우측의 Open Perspective를 클릭한다. 

아래 창이 뜨면 Git을 선택하고 Open을 클릭한다. 

좌측 메뉴에 있는 Clone a Git Repository를 클릭한다. 

그리고 웹 브라우저의 깃헙 레파지토리에 가서 초록색 Code 버튼을 클릭한 뒤 HTTPS 로 나오는 깃헙 레파지토리 주소를 복사한다. 

그 다음 위에서 복사한 주소를 STS로 돌아와 아래 창의 URI에 입력해준다. 

Authentication의 User와 Password에는 자신의 깃헙 닉네임 (또는 깃헙 계정 아이디)과 위에서 만든 토큰 (또는 깃헙 계정 아이디의 비밀번호)를 입력해준다. 그리고 Next 버튼을 클릭한다.   

레파지토리를 생성하면 기본적로 main branch가 설정되어있다. Next 버튼을 클릭한다. 

Directory 는 Local에 저장될 Repository 경로를 설정하는 부분이다. 경로는 기본적으로 지정되어 있으며 변경이 필요하면 Browse 버튼을 클릭하여 변경하면 된다. 경로 확인 후 Finish 버튼을 클릭한다.

그럼 아래와 같이 레파지토리에 STS와 Git이 연동된 것을 확인할 수 있다. 

 

4. GitHub에 프로젝트 업로드하기 

아래 빨간색 표시한 버튼을 클릭해 다시 스프링 화면으로 돌아온다. 

업로드할 프로젝트 우클릭 > Team > Share Project를 클릭한다. 

레파지토리에 경로 설정을 하고 Finish 버튼을 클릭한다. 

그럼 아래와 같이 프로젝트의 폴더 아이콘에 ">" 표시가 생겼음을 알 수 있는데 이 표시는 깃헙에 업로드될 폴더와 파일을 의미한다. 

그래서 만약 깃헙에 업데이트 되지 않기를 바라는 폴더나 파일이 있으면 아래와 같이 해당 폴더 또는 파일 우클릭 > Team > Ignore를 해주면 된다. 

프로젝트 우클릭 > Team > Add to Index를 클릭하여 깃헙에 해당 프로젝트를 commit 할 준비를 한다. 

그 다음 프로젝트 우클릭 > Team > Commit을 클릭한다. 

그럼 아래와 같이 Commit할 파일들의 목록이 뜬다. Commit Message에 메세지를 간단하게 적어준다. 그리고 하단에 Push HEAD 버튼을 클릭한다. 

 

 

그럼 아래 창이 뜨는데 Preview 버튼을 클릭해준다. 

그러면 아래와 같이 Push Confirmation창과 함께 로그인 창이 뜨는데 앞서 한 것과 동일하게 로그인 처리를 해준다.

그럼 아래 창이 뜨게 되고 Push 버튼을 클릭한다. 그러면 또다시 로그인창이 뜨는데 역시나 동일하게 로그인 처리를 해준다. 

그럼 아래와 같이 Push Results 창이 뜬다. Close 버튼을 클릭한다. 

그러면 아래와 같이 Git Repositories Working Tree 폴더(로컬 저장소) 내에 프로젝트가 업로드된 것을 확인할 수 있다.

 

보통 여기까지 하면 GitHub에 커밋이 되어야 하는 것이 정상이다.

그런데 나 같은 경우에는 전혀 커밋이 되지 않았다. 한 시간 동안 헤메다가  겨우 그 원인을 파악할 수 있었는데..... 

앞서 이렇게 쓴 이 부분.....!!! 

Push Head 버튼이 나타나는 것 자체가 문제였다. 원래는 이 자리에 Commit and Push가 나와야한다.

 

나 같은 경우에 여기서 Push Head가 나타난 이유는 앞서 깃헙 무료 강의를 따라하다가 중간에 깃에 커밋하지 않고 남겨 놓은 작업들이 있어서 Commit and Push 버튼이 나타나지 않았던 것이었다. 원래는 Commit and Push 가 나와야 한다!

 

이전 작업이 완료되지 않아 생긴 문제였기 때문에 이전 무료 강의 관련 작업을 모두 취소하고 삭제하고 재부팅을 했더니 Commit and Push 버튼이 나타났고 해당 버튼을 클릭하자 Unstaged Changes에 남아있던 대기 상태에 있던 파일들이 모두 깃헙에 무사히 커밋되었다.