플러터(Flutter) 개발 환경 설정 (3) - git 설정(1)

 

 

오늘은 프로젝트를 git에 연결하는 작업을 진행하려고 합니다.

소스관리의 중요성은 특별히 설명하지 않아도 다들 알고 계시겠지만,

저의 경우는 특별히 집과 사무실에서의 소스의 동일성을 유지하는 것을 목표로 하고 있습니다.

 

1. gitgub 가입 및 저장소 생성

https://github.com/

GitHub: Let’s build from here

(가입 과정의 설명은 건너뛰겠습니다.)

 

[Create New] - [New repository] 를 선택하여 생성 페이지로 진입합니다.

Repository name을 입력하고 나머지는 원하시는 대로 선택하고 [Create repository] 버튼을 눌러 repository를 생성합니다.

 

설치 후 위와 같은 화면이 나오면 됩니다. 표시해 놓은 부분을 복사해놓고 테스트 시에 사용합니다.

 

 

2. Git 설치

https://git-scm.com/download/win

Git - Downloading Package

다운로드 받아서 설치해줍니다. 선택하는 항목은 모두 기본으로 했습니다.

 

3. 설정 및 테스트

local repository로 사용할 폴더를 생성합니다.(저는 C:\project\flutter 로 생성했습니다.)

해당 폴더에서 git bash 창을 엽니다.

 

위와 같이 순서대로 명령어를 입력하여 설정 및 테스트를 진행합니다.

github repository 생성 시 복사해 둔 코드를 사용하면 편합니다.

 

// email은 github 가입 시 email, name은 github 가입 시 id로 하였습니다.
// 그 외 url의 가린 부분은 가입시 id입니다.

git config --global user.email "email_address"

git config --global user.name "name"

git init

//테스트 파일 생성
echo "# flutter" >> README.md

git add README.md

git commit -m "first commit"

git branch -M main

git remote add origin https://github.com/(아이디)/flutter.git

git push -u origin main

위의 코드를 사용하셔도 무방합니다.

 

다시 로컬 폴더에 와 보면, .git 설정 폴더와 bash에서 테스트로 생성한 readme.md 파일이 보입니다.

 

github에서 확인해봤을때 main branch에 README.md 파일이 작성한 comment와 같이 올라가 있다면 정상입니다.

 

 

4. vscode에서의 flutter 프로젝트 생성 및 git 연결 

실제 vscode에서의 소스코드 관리 테스트를 위하여 프로젝트를 생성합니다. 

저는 git 설정을 테스트를 위해서 기본 제공 프로젝트를 하나 사용하도록 하겠습니다.

먼저 vscode를 재실행합니다.

 

왼쪽 메뉴 아이콘 중 Source Control 부분을 선택합니다. 현재는 아무 것도 없는 것이 정상입니다.

 

VS Code 화면에서 [Ctrl + Shift + P]를 눌러서 입력창에 flutter를 입력하고 Flutter: New Project를 선택합니다.

 

원하는 템플릿을 선택하여 프로젝트를 생성하면 됩니다. 꼭 제가 선택한 것이 아니어도 됩니다.

프로젝트 생성시의 폴더를 git을 설정한 폴더로 하면 됩니다.

 

저는 flutter_git 이라는 이름으로 새로 프로젝트를 생성하였습니다. 

기존과 다르게 Source Control 부분에 변경된 갯수가 같이 보이고, 소스에도 관리상태가 표시됩니다.

 

왼쪽 메뉴 아이콘 중 Source Control 부분을 다시 선택합니다. 생성된(변경된)내용이 보여집니다.

보는 방법은 취향에 따라 선택할 수 있습니다. 저는 트리뷰가 보기 편해서 트리뷰로 변경해서 보고 있습니다.

 

1) 플러스 버튼을 눌러서 변경된 파일을 Stage에 올립니다.

2) Stage에 올라간 것을 확인합니다.

3) Message(Comment)를 입력하고, Commit&Push 를 진행합니다.

( Commit과 Push를 동시에 진행하는 것은 제 개인적인 취향입니다. 각자 원하시는 대로 하시면 됩니다.)

* 정상적으로 처리되면, 해당 창의 내용이 clear됩니다.

 

github 페이지에서 확인 가능합니다.

 

수정 테스트도 진행하였습니다.

main.dart 파일에 느낌표 하나를 추가하여 업데이트 해보았습니다.

이전과 마찬가지로 스테이지에 올리고 커밋,푸시 하면 됩니다.

 

마찬가지로 github에서 수정 및 상세내용을 확인할 수 있습니다.

 

 

---

 

다음 포스팅에서는 사무실에서 checkout 받는 방법과 기타 다른 source control 방법에 대하여 짧게 확인하도록 하겠습니다.