상세 컨텐츠

본문 제목

VScode 리액트프로젝트에서 깃허브연동

노드js·자바스크립트

by 김일국 2022. 12. 7. 15:29

본문

00_작업전 미리 깃허브 사이트에 로그인 한다. https://github.com 

01_VScode리액트에서깃허브연동 : yarn create react-app 앱명 으로 리액트 프로젝트를 생성 후 VS Code에서 [게시]버튼 클릭한 화면(아래)

02_VScode에서깃허브연동권한확인 : 미리 깃허브 사이트에 로그인 된 상태에서 아래처럼 리액트 앱이름과 같은 이름의 저장소가 자동으로 private 으로 신규 저장소가 생성된다.(아래)

03_VScode에서깃허브연동내용확인 : 깃허브 사이트의 사용자 계정의 Settings 페이지의 Applications 메뉴에서 GitHub for VS Code 가 추가된 것을 확인 할 수 있다(아래)

04_VScode에서깃허브연동후public으로변경 : 기본 private 으로 된 접근 권한을 Change visibility 버튼을 이용해 public으로 변경한다.(아래)

05_VScode에서깃허브연동후자동로그인자격증명확인 : VS Code에서 깃허브로 푸시할 때 더이상 암호를 물어 보지 않는 이유는 윈도우 자격 증명 프로그램에 github.auth 가 자동으로 등록되어 있기 때문이다. 보안상 위험하다면 지운다. 지운 후 푸시할 때는 다시 로그인 해야 한다.(아래)

06_온라인VScode에서깃허브연동가능 : VS Code 를 설치하지 않고, 온라인용으로 바로 깃허브에 접근할 수 있다.  https://vscode.dev 뒤에/github/본인아이디/저장소로 접근 후 로그인 하면 된다. 주소 표시줄 오른쪽의 [설치아이콘]을 클릭하면 PC에 설치된 VS Code가 바로 실행 된다.(아래)

07_온라인VScode에서PC앱과연동결과확인 : 구글 크롬의 주소표시줄에 chrome://apps 로 접속하면, PC에 설치된 링크를 확인 할 수 있다.(아래)

08_VS Code 에서 깃허브에 아래 메뉴처럼 분기 영어로는 New Branch 를 생성할 수 있다.(아래)

09_VS Code 에서 체크아웃 메뉴로 분기(branch) 전환하기(아래)

Ps. 참고로 터미널에서 작업하는 필요가 발생하는 경우(아래)

- git log --oneline (이클립스에서 reset 또는 revert 할 때 git perspective 창에서 history 내용이 보이지 않을 때 터미널에서 실행 후 확인하면 보인다.)
- git pull 강제 처리가 필요할 때는 아래 터미널 화면에서 키보드로 처리(아래)
```
git fetch --all
git reset --hard origin/contribution (contribution은 원격브랜치명)
git pull
```

- 리모트 브랜치를 로컬 작업영역으로 가져오는 명령(아래)

```

git branch [-r] (리모트 깃 브랜치 확인)

git checkout -t origin/브랜치명
```

관련글 더보기

댓글 영역