소스트리 사용법

폴더 생성

1. 폴더 생성(버전관리 위한 저장공간) - 예시 폴더명 : 소스트리 사용법

2. <Source Tree> 화면 상단 + 클릭 → Create 클릭 → Browse 클릭해서 생성한 폴더 선택 → 하단의 Create 클릭

3. Create 되면 폴더에 .git (숨긴)폴더 생성 확인

커밋

4. 위의 과정 완료 후, <Visual Studio Code> 에서 버전관리 폴더(소스트리 사용법) 오픈 → 기본파일(예시 파일명 : index.html) 파일 생성 후 저장

5. 저장하면 자동적으로 <Source Tree>의 Unstaged Files에 저장된 파일 생성 → Stage All 클릭 → Staged files로 옮겨짐 → 상단의 Commit 메뉴 클릭 → 하단의 커밋 메시지 박스에 내용 작성 → 하단의 Commit 버튼 클릭

6. 커밋 완료 후 왼쪽 카테고리의 BRANCHES의 'master'(기본적으로 생성되는 브랜치 이름)에서 내용 확인 가능

7. <Visual Studio Code> 내용 업데이트 되면 위와 같은 방법으로 커밋 필요

브랜치 생성

8. 새로운 브랜치 만들기 위해 상단 메뉴바에 Branch 클릭 → New Branch 에 브랜치 이름 기입 후 Create Branch 클릭

9. 왼쪽 BRANCHES 카테고리에서 새롭게 생성한 '화면' Branch과 'master' Branch에 생성되었던 'index.html'이 공유된 것 확인 가능(새로운 브랜치 생성되면 모든 파일 공유됨)

10. 같은 방법으로 '기능' Branch 생성

브랜치 활용 (작업 및 커밋 후 Merge)

11. '화면'Branch으로 이동(더블클릭) :BRANCHES에서 화면 옆에 동그리미 확인 가능(해당 페이지에 있음을 의미)

12. '화면'Branch로 이동 후 <Visual Studio Code>에서 화면1 이라고 내용 추가 후 commit

13. 반복해서 <Visual Studio Code>에서 화면2 이라고 내용 추가 후 commit

14. '기능'Branch으로 이동(더블클릭) :BRANCHES에서 기능 옆에 동그리미 확인 가능(해당 페이지에 있음을 의미)

15. '기능'Branch로 이동 후 <Visual Studio Code>에서 '화면'Branch에서 작업한 '화면1' , '화면2' 의 내용은 없음을 확인

16. '기능'Branch에서 '기능1'이라고 내용 작성 후 commit

17. commit 후 화면 업데이트 내용에서 Graph에서 빨간색 선 확인 가능

18. 반복해서 '기능'Branch에서 '기능2' '기능3'이라고 내용 작성 후 commit

19. 기능3 내용 삭제 할 땐, 전 단계 커밋을 오른쪽 클릭한 뒤 Reset current branch to this commit(현재 브랜치를 이 커밋으로 재설정) 클릭

20. 새로운 화면에서 Hard-discard all working copy changes 클릭 → OK 클릭

21. 모든 작업 다 구현했을 때, master Branch로 들어가서 Description에서 기능의 마지막 작업내용의 오른쪽 마우스 클릭 → Merge... 클릭

22. 반복해서 Description에서 화면의 마지막 작업내용의 오른쪽 마우스 클릭 → Merge... 클릭

23. 병합된 파일 확인가능

24. 모두 Merge 하면 Description에 자동으로 uncommitted changes 파일 생성

25. uncommitted changes 파일(index.html) 커밋

26. 최종파일 생성 후 <Visual Studio Code>에서 병합된 Branches 파일 내용 확인