[Flutter #15] gitHub

VS코드에서 GitHub 사용하기

스텝 1에서 만들었던 startup_namer의 소스코드를 GitHub에 올려보도록 하겠습니다. GitHub에 접속을 하고 다음과 같이 새 레포지토리를 만듭니다.

 

레포지토리를 생성하고 나면 화면이 전환됩니다. 그리고 다음 그림과 같이 주소를 복사해 둡니다.

 

다음은 VS코드에서 좌측의 Source Control을 클릭합니다.

 

 

다음의 창이 뜨면 “Initialize Repository”를 선택합니다.

 

 

자동으로 등록이 필요한 파일들이 리스팅 되고 마우스 커서의 오른쪽을 보면 총 68개의 파일이 있음을 알려줍니다. 다음의 그림과 같이 +를 눌러서 파일을 추가합니다. 그러면 각 파일들 우측에 U로 표시되었던 것들이 A로 변경이 됩니다.

 

 

 

파일 리스트의 상단에 있는 칸에 GitHub에 표시될 문구를 넣고 꺽쇠표시 Commit을 클릭합니다. 그러고나면 파일 리스트들이 모두 사라집니다. GitHub로 올리기 전에 로컬에 저장이 된 상태입니다. 

최종으로 GitHub의 주소를 입력해 줘야 하기 때문에 Commit 오른쪽의 [...]을 클릭해서 나타나는 메뉴에서 Remote→ Add Remote를 선택합니다. 그러면 VS코드 상단에 GitHub 주소를 입력할 수 있는 곳이 나타납니다. GitHub에서 만든 startup_namer의 주소를 앞의 그림과 같이 입력해 주고 엔터를 누릅니다.

그러면 remote name을 물어봅니다. 그러면 startup_namer라고 입력을 해 줍니다.

 

다음은 메뉴에서 Pull, Push → Push to를 클릭하고 상단에 우리가 입력했던 startup_namer를 선택해 주면 됩니다.

 

GitHub를 웹 브라우저에서 열어서 프로젝트 이름 startup_namer나 F5를 눌러 웹 페이지를 다시 열어보면 앞의 그림과 같이 우리 프로젝트 소스가 GitHub에 모두 올라가 있는 것을 확인할 수 있습니다. 우리가 입력했던 첫 소스코드에 대한 코멘트 “자동 생성된 프로젝트”도 화면에서 볼 수 있습니다. 이로서 GitHub에 소스코드를 업로드 했습니다. 

 

GitHub를 설정하면서 다음과 유사하게 VS코드에게 GitHub를 접속할 수 있는 권한을 요청하는 창, 또는 GitHub 로그인 화면이 뜰 수 있습니다. 

 

수정된 소스 업데이트하기

우리가 지금까지 수정을 했었던 코드는 lib 폴더 아래의 main.dart 파일과 프로젝트의 루트 폴더에 있는 pubspec.yaml 입니다. 우리가 업로드한 파일은 VS코드에서 자동 생성이 된 코드이기 때문에 분명 앞의 두 파일은 수정이 되어 GitHub이 파일과는 달라져 있을 것입니다. 만일 이렇게 파일이 수정이 되면 다음과 같은 화면을 볼 수 있습니다.  M으로 우측에 표시되는 것은 Modify(수정)이 되었기 때문인 것으로 보입니다.

 

이 두 개의 파일을 우리는 수정했습니다. 그래서 이 결과를 GitHub에 소스코드를 올리고자 합니다. 메시지에 “프로그램 최종”과 같이 입력을 하고 Commit을 누릅니다. 

다음과 같은 화면에서 “Yes”를 선택합니다. 앞에서 설명한 바와 같이 local에 저장이 되고 리스트에서는 모든 파일이 사라집니다.

 

 

소스 콘트롤의 메뉴에서 Pull, Push → Push to를 클릭하고 상단에 우리가 입력했던 startup_namer를 선택해 줍니다. 그리고 GitHub를 접속해 봅니다.

우리가 변경한 파일과 코멘트가 반영되어 있음을 알 수 있습니다. pubspec.yaml을 클릭하면 파일의 내용을 볼 수 있습니다. 우리가 추가한 english_words도 찾을 수 있습니다.

 

소스 코드 비교하기

페이지 최종 상단으로 이동을 해 보면 다음 그림과 같이 History라는 아이콘이 보입니다. 아이콘을 클릭해서 들어가 봅니다.

 

다음과 같이 우리가 업데이트했었던 History가 보입니다. History의 내용 중에서 우측에 아이콘 사이에 숫자가 보입니다. 그 숫자를 클릭해 봅니다.

 

 

다음의 그림과 같이 우리가 선택한 파일은 우측에 이전 파일은 좌측에 나타납니다. 그리고 오른쪽에만 +표시가 나타나는데 +표시는 이전의 파일에서 추가된 줄을 의미합니다. 

그리고 여기에는 나타나지 않았지만 왼쪽에 -로 표시되는 부분이 있고 오른쪽에는 아무것도 나타나지 않는 것이 있습니다. -는 기존 파일에서 삭제가 되어 현재 파일에는 안보인다는 것을 의미합니다.

 

이와 같이 GitHub는 추가되고 삭제된 부분들을 보여줌으로써 코드가 어떻게 변했는지를 사용자에게 알려줍니다. 또한 이 소스코드들은 다른 곳에서도 다운로드 받아서 사용을 할 수 있습니다. 처음에 레포지토리를 만들 때, Private로 만들었기 때문에 다른 PC에서 소스코드를 받을 때 ID와 비밀번호가 각각 필요합니다. 만일 Public으로 만들었다면 누구나 다운로드 받아서 사용을 할 수 있습니다. 오픈 소스의 경우에 누구나 다운로드 받아서 사용할 수 있도록 Public으로 만듭니다.