코드 기어 Code Gear - 개발 강좌

지난 글에 이어 Github Desktop 사용법에 대해 조금 더 알아보겠습니다.

다음은 이글의 동영상 강좌입니다.

https://youtu.be/n77Jtz1iP_M

순서

• Private 프로젝트 만들기
• Github desktop에서 github.com 계정으로 로그인
• Branch 개념 이해하기
• Branch 생성
• Branch Merge

Private 프로젝트 만들기

외부에 공개되지 않는 자신만의 프로젝트를 만들기 위해서는 private으로 프로젝트를 만듭니다.

• www.Github.com 에서 Repository 메뉴로 이동합니다.
• 우측 상단의 [New] 버튼을 클릭합니다.

• [프로젝트명]을 입력합니다.(예: test)
• [public / private] 항목에서 private를 선택합니다.

• [Add a README file] 이라고 된 부분을 체크하고, [Create repository] 버튼을 클릭하여 프로젝트를 생성합니다.

• readme 파일이 하나 추가된 [test repository]가 아래와 같이 생성됩니다.

Github Desktop에서 github.com 로그인 하기

private로 만들어진 프로젝트는 로그인을 해야만 사용이 가능합니다. github desktop에서는 github 로그인 기능을 제공하므로, 이것을 알아보겠습니다.

• github desktop을 실행합니다.
• 상단의 [Github Desktop] 메뉴에서 [Preferences]를 클릭합니다.

• [Accounts] 메뉴에 들어가면 Github.com 항목의 [Sign In]을 클릭합니다.

• Sign in Using Your Browser
  - 현재 github.com에 로그인한 브라우저를 통해서 로그인을 할 수 있습니다.

레파지토리 추가하기

• Repository명 옆의 버튼을 클릭합니다.

• clone repository를 선택합니다.
• github.com tab을 클릭한 후 test repository를 선택하고 clone 버튼을 클릭하면 소스가 다운로드 됩니다.

Branch 만들기

• 화면에서 main branch 옆의 화살표를 클릭합니다.

• New Branch를 선택합니다.

• 브랜치명을 "develop" 이라고 입력하고 "Create Branch"를 클릭합니다.

• "Publish branch"를 클릭하여 github.com에 share 합니다.

• github.com에서 새로고침해보면 branch가 2개가 된것을 확인할 수 있습니다.

Branch 개념 이해하기

• 한개의 Branch만 사용할 경우 (Main Branch)
  • Main Branch에 push될때 운영 배포가 이루어지게 설정을 해 놓았다면,
  • 소스를 push 할때마다 운영서비스에 반영이 됩니다.
  • 소스에 대한 검증이 제대로 안될 경우 장애가 발생할 수 있습니다.

• 두개의 Branch를 사용할 경우 (Develop Branch)
  • Sub Branch를 활용해서 개발기에 배포를 하고 소스를 검증한 후
  • Main Branch에 Merge 하여 안전하게 운영 서버에 배포를 할 수 있습니다.

Merge 하기

develop branch의 소스를 변경한 후 main에 merge 하는 방법입니다.

• develop branch를 선택합니다.
• 소스를 수정합니다. 

• develop branch에 commit과 push를 합니다.

• main branch로 변경합니다.

• 상단 메뉴에서 "Branch"-"Merge Into Current Branch"를 선택합니다.

• Merge할 브랜치를 선택하는 화면에서 "develop" branch를 선택하고 "Create a merge commit" 버튼을 클릭합니다.

• "Push origin" 버튼을 클릭하면 Merge가 완료됩니다.

다음은 이 글의 동영상 강좌입니다.

https://youtu.be/9KbnFR_1_Jg

nest project 생성(Backend)

nestjs.com에 가시면 프로젝트 생성하는 법을 확인할 수 있습니다.

https://docs.nestjs.com/first-steps

- project명은 slider-api로 생성합니다.

nest new slider-api

nuxt project 생성(Frontend)

nuxt.org에 가시면 프로젝트 생성하는 법을 확인할 수 있습니다.

https://nuxtjs.org/docs/get-started/installation

- project명은 slider-front로 생성합니다.

- yarn create nuxt-app <project-name> 을 사용합니다.

yarn create nuxt-app slider-front

Repository 생성

github.com에 접속해서 Repository를 생성합니다.

• github.com -> Repositories -> New를 선택합니다.
• Backend Repository는 slider-api로 생성합니다.
• Frontend Repository는 slider-front로 생성합니다.

.gitignore 파일 생성

• 두개 프로젝트의 root 폴더에 .gitignore 파일을 생성합니다.
• 이 파일은 git 서버에 올라가지 않아도 되는 파일들을 작성해줍니다.

/node_modules
/dist

.DS_Store
.idea

yarn.lock

Repository 연결

• github desktop을 이용해서 소스를 clone합니다.
• clone한 소스에 생성한 프로젝트 소스를 이동합니다.
• 소스를 commit하고 push 합니다.

다음은 이 글의 동영상 강의입니다.

https://youtu.be/0YsMEPxi_wc

GIT 개념

여러곳에서 다른 컴퓨터로 개발을 하다보면 서로 소스가 맞지 않은 상황이 발생합니다.

이때 GIT을 사용하면 소스를 여러곳에서 동기화 시킬수가 있습니다.

여러사람이 동일한 프로젝트를 개발할 때도 Git을 통해 이런 문제를 해결할 수 있습니다.

github 초보자도 쉽게 사용할 수 있는 github desktop의 사용법을 알아보겠습니다.

Github 가입

우선 Git을 사용하시려면 아래 github 사이트에 가입을 해야합니다.

https://github.com/

회원 로그인 후 Repository를 만들기 위해 Your repositories로 이동합니다.

New 버튼을 클릭하고 새로운 Repository를 만듭니다.

Repository 이름 "test"로 입력하고 하단의 "Create Repository" 버튼을 클릭합니다.

아래와 같이 test repository가 만들어졌습니다.

Github Desktop 설치

아래 사이트에서 github desktop을 download 합니다.

https://desktop.github.com/

다운로드 버튼을 클릭합니다.

설치가 완료되면 아래와 같이 github desktop이 실행됩니다.

소스 clone

github.com의 repository에서 code 버튼을 클릭

clone에서 url을 copy합니다.

github desktop에서 add 버튼을 클릭하고 clone repository를 선택합니다.

URL 탭을 클릭하고, github.com에서 복사한 주소를 붙여넣기 한 후, clone 버튼을 클릭합니다.

이때 local path 변경도 가능합니다.

test repository가 로컬에 clone 되었습니다.

소스를 수정하고 commit 하고 push하기

Open in Visual Studio Code를 선택하면 VSCode가 실행됩니다.

README.md 파일을 수정하고 저장합니다.

github desktop에 가시면 변경된 파일이 아래와 같이 표시됩니다.

중간에 변경내용 요약해서 작성해 주시고 ("update README.md"),

아래 commit 버튼을 클릭합니다.

push origin을 클릭하시면 서버에 소스가 upload 됩니다.

github.com에 가시면 변경된 내용을 확인 할 수 있습니다.

변경 소스 받기

이번에는 다른쪽에서 소스가 수정되었을 경우 테스트를 진행합니다.

github.com에서 파일을 하나 추가하기 위해 Add file 버튼을 클릭합니다.

파일 내용을 입력 후 Commit 버튼을 클릭합니다.

test.txt 파일이 생성된 것을 확인할 수 있습니다.

github desktop에서 fetch origin을 선택합니다.

1개의 파일이 commit 되었음을 표시해줍니다. Pull origin 버튼을 클릭해서 소스를 pull(땡겨옴) 합니다.

VSCode를 열면 새로 추가된 test.txt 파일을 확인할 수 있습니다.

이상으로 github desktop의 기본적인 사용법을 알아보았습니다.