제 2장 Vue.js 프로젝트를 github과 연동

2021.08.14 - [Front/Vue.js] - 제1장 - Vue.JS 환경설정과 프로젝트 생성

제1장 - Vue.JS 환경설정과 프로젝트 생성

저번 스터디에서는 로컬 개발환경 셋팅 및 프로젝트를 생성해보았습니다.
오늘은 만들었던 프로젝트를 github에 연동하는 것을 해보도록 하겠습니다.

다들 아시겠지만..! github은 소스를 관리해주는 녀석 입니다.
아~주 오래전 호랑이 담배피던 시절 github이라는게 없던 시절엔 FTP(파일전송프로토콜)라는 걸
사용해서 소스를 관리하기도 했죠ㅋㅋ 물론 SVN등등이 나오곤 했다죠!

다시 돌아와서 첫번째로 우리가 해야할 것은 github에 계정을 생성하는 것 입니다.

1. github에 계정 생성 

https://github.com/

Sign up을 누르면 계정을 생성하도록 가이드처럼 나옵니다.
Email / password / username 을 넣고 진행하면 끝!

아래처럼 날것의(?) 무언가가 만들어졌습니다 ㅋㅋ

아래 Create repository 를 눌러서 레파지토리를 하나 만듭니다.

• 레파지토리명은 jeju_mall로 하도록 하겠습니다.
  Add a README file만 체크하고 넘어가도록 합니다.
  .gitignore는 우선 패스~ 필요시에 찾아서 만들도록 하겠습니다.

이제 아래처럼 Repository가 만들어졌습니다! 

이제 프로젝트 소스(로컬)를 github에 올려보도록 하겠습니다.

2. 로컬 컴퓨터에 git을 설치 해보자 

mac을 현재 사용하기 때문에 mac기준으로 진행.
homebrew를 통해 설치 하겠습니다.
아래처럼 homebrew가 없는 분은 먼저 homebrew부터 설치 합니다.

homebrew : https://brew.sh

homepage에 가보시면 인스톨할 수 있는 명령어를 알려줍니다. 복사해서 실행 합니다.
이제 다시 brew install git 명령어로 git을 인스톨 합니다.
install 하기전에 git --version을 통해 git이 인스톨 되어있는지 먼저 체크 해보시면 좋습니다.

git을 설치 한 뒤! 우리는 원격지(remote)로 우리가 만든 소스를 push해줘야하기 때문에 ssh가 필요 합니다.

2014.09.17 - [CM/Github] - github 오류 - Permission denied (publickey)

• ssh-keygen -t rsa 명령어를 통해 ssh를 생성하고  id_rsa.pub의 내용을 github에 가서 넣어준다.
  • id_rsa.pub위치 : vi ~/.ssh/id_rsa.pub 
• github으로 가서 id_rsa.pub 내용을 넣어준다.
  • sign-in 뒤에 settings 클릭!

• SSH and GPG keys에서 New SSH keys를 클릭 한 뒤 넣어준다.

password를 지속적으로 묻는 경우는 아래를 참고!

2019.06.04 - [CM/Github] - sourceTree 새로 설치 한 후 password를 지속적으로 묻는 경우

이제 git 관련 셋팅을 다해줬다. 소스를 github에 올려보자!!

 

3. 로컬 컴퓨터에서 원격 repository에 push하기!

• 우리가 push할 프로젝트로 이동 한다.

• git init를 통해 초기화 시켜준다.
  

  acetui-MacBook-Pro:jeju_mall acet$ git init
  Reinitialized existing Git repository in /Users/acet/Workspace/jeju_mall/.git/​

• git status를 통해 변경 된 내용이 있는지 확인 한다.
  • 저번에 변경했던 App.vue가 빨갛게 보인다.

• 이녀석을  add 시켜준뒤 commit을 해준다.
  • git add src/App.vue
  • git commit -m "App.vue 테스트로 소스 변경 해줌."

• remote주소를 연결 시킨다.

acetui-MacBook-Pro:jeju_mall acet$ git remote add origin https://github.com/pthahaha/jeju_mall.git

• remote 주소를 확인

acetui-MacBook-Pro:jeju_mall acet$ git remote -v
origin	https://github.com/pthahaha/jeju_mall.git (fetch)
origin	https://github.com/pthahaha/jeju_mall.git (push)

• 이제 원격지로 push 해보자!
  • git push -u origin master 명령어로 push를 하려고 했는데...403 액세스 권한 문제 발생.
  • plase use a personal access token instead. 개인적인 액세스 토큰을 사용하라고 부탁한다.
  • 유저명과 비밀번호로 관리를 하지 않겠다는 뜻이다.

acetui-MacBook-Pro:jeju_mall acet$ git push -u origin master
Username for 'https://github.com': pthahaha
Password for 'https://pthahaha@github.com':
remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.
remote: Please see https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ for more information.
fatal: unable to access 'https://github.com/pthahaha/jeju_mall.git/': The requested URL returned error: 403

• 해결 - 액세스 토큰 사용
  • Settings > Developer settings에 가면 Personal access tokens가 보인다.
  • 가이드 사이트 : https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token

• 저는 아래처럼 셋팅 해서 만들었습니다.

오우..다신 볼수 없다고 합니다 ㅋㅋㅋㅋ; 복사는 딱 한번!!! 주의 해야겠네요!

• 토큰을 복사 한뒤 다시 git push -u origin master를 수행.
  • 단, 비밀번호에 토큰을 넣어줘야 합니다.
    • 한번만 넣어주면 다음에 소스수정 후  push할 때는 묻지 않고 바로 push가 됩니다. 

아래처럼 마스터 브런치에 잘 push된 것을 확인할 수 있습니다.

 끝~