안녕하세요.
이 튜토리얼에서는 Dreamweaver와 Git의 통합을 통해 팀과 보다 효과적으로 작업하는 방법을 살펴보겠습니다.
Git 통합으로 GitHub, Bitbucket 등의 Git 서비스 제공업체와 연계할 수 있으므로 오픈 소스 프로젝트를 간편하게 관리할 수 있습니다.
특히 버전 제어 기능을 사용하면 프로젝트의 변경 사항을 안전하게 추적 및 관리할 수 있습니다.
좋습니다.
Dreamweaver를 시작하기 전에 Mac 또는 PC용 Git 클라이언트를 설치해야 합니다.
또한 Git 리포지토리의 계정을 등록해야 하며 이미 있다면 로그인하면 됩니다.
GitHub를 사용할 것이므로 우선 사이트 메뉴에서 Dreamweaver를 Git 리포지토리와 연결합니다.
새 사이트를 선택하거나 기존 사이트를 관리할 수 있습니다.
Git을 시작하려면 이 사이트와 Git 리포지토리를 연결해야 하는데 여기를 클릭하면 두 개의 옵션이 활성화됩니다.
첫 번째 옵션인 Git 리포지토리로 초기화는 로컬 사본을 출발점으로 이용한다는 의미입니다.
두 번째 옵션인 다음 URL을 사용하여 기존 Git 리포지토리 복제는 사용할 소스 파일이 Bitbucket 또는 GitHub와 같은 리포지토리에 이미 있고 소스 파일을 복제하여 시스템에 가져온 다음 작업을 시작한다는 의미입니다.
둘 중 하나를 선택하면 됩니다.
이 경우 Git 리포지토리로 초기화를 선택하고 저장을 클릭하겠습니다.
이제 Dreamweaver에서 Git 작업을 지원하기 위해 이와 같은 옵션이 제공됩니다.
이 옵션을 선택하면 파일에서 전환하여 Git 뷰에서 사이트를 확인할 수 있습니다.
먼저 일부 파일이 녹색으로 표시되어 있다는 점이 눈에 띄는데 이 파일들은 아직 리포지토리로 커밋되지 않았으므로 추적되지 않음을 의미하죠.
여전히 파일 패널에서 Git 작업을 수행할 수 있습니다.
여기를 마우스 오른쪽 버튼으로 클릭하여 이 옵션을 클릭하면 변경 사항을 스테이지하여 커밋할 수 있습니다.
저는 Git 뷰에서 작업해 보겠습니다.
먼저 작업을 시작하기 전에 초기 커밋 작업을 통해 모든 파일이 모두 준비되어 있는지 확인합니다.
두 단계만으로 이 작업을 수행할 수 있는데 파일을 스테이지한 다음 커밋하면 됩니다.
이 모든 파일을 스테이지하려면 상태 옆에 있는 작은 체크 상자를 클릭하여 모든 파일을 선택합니다.
이제 파일이 모두 스테이지 상태입니다.
이 파일을 커밋하려면 여기 이 아이콘을 사용하여 스테이지 파일을 커밋합니다.
스테이지가 진행되는 동안 파일을 살펴봅니다.
여기에 있는 index.html 페이지를 열어 보겠습니다.
하위 항목을 열면 모든 코드가 녹색으로 되어 있습니다.
녹색은 리포지토리의 새로운 항목을 나타내죠.
이제 닫겠습니다.
그리고 여기에 커밋 메시지를 추가합니다.
'첫 번째 커밋'이라고 쓴 뒤 확인을 클릭하고 Git 패널을 보면 모든 것이 최신 상태이고 여기 파일 패널도 모두 흰색으로 바뀌었습니다.
다시 말해 모든 것이 최신 상태라는 거죠.
녹색은 커밋해야 할 파일이 남아있다는 의미입니다.
이제 몇 가지 수정 작업을 해 보겠습니다.
이 index.html 파일을 사용하겠습니다.
간단한 사항을 변경해달라는 요청을 받았다고 가정해 보죠.
이 'About'을 'About Us'로 변경하고 저장을 누릅니다.
여기에 이 간격 마크가 있는데요.
이 간격 마크는 변경 사항은 적용되었지만 아직 리포지토리에는 커밋되지 않았음을 알려주는 시각적인 표시기입니다.
여기를 클릭하면 변경 전과 변경 후가 표시됩니다.
또한 여기서는 index.html 파일이 수정되었음을 확인할 수 있습니다.
어떤 사항이 변경되었는지 확인하고 싶은 경우 이 간격 마크를 클릭하면 됩니다.
또는 이 Diff 버튼을 클릭하면 됩니다.
Diff를 클릭하면 무엇이 변경되었는지 보다 명확하게 확인할 수 있습니다.
이 부분이 제거되었고 이 부분이 추가되어 About Us가 되었습니다.
원하지 않는 변경 사항이라고 판단되면 Git 패널에는 마지막 아이콘인 되돌리기 버튼도 있습니다.
수정된 문서를 체크하고 커밋을 클릭한 다음 나중에 기억하기 위한 메시지를 입력합니다.
다시 여기를 클릭하면 변경 사항이 명확하게 강조 표시됩니다.
확인을 클릭하면 로컬 리포지토리에 푸시됩니다.
간격 마커도 사라지고 Git 패널에서도 제거되었습니다.
지금까지 마스터 브랜치에서 작업했는데 이번에는 다른 브랜치로 전환해보겠습니다.
여기 맨 위에 있는 드롭다운 메뉴를 누릅니다.
여기서는 새 브랜치를 생성하거나 기존 브랜치를 관리할 수 있는데 드롭다운 메뉴에서 브랜치 관리를 선택한 다음 새 브랜치를 추가해 보겠습니다. nav에 있는 iphone-bug-nav를 작업하려고 합니다.
확인을 클릭하면 새 브랜치가 생성됩니다.
또한 이 창에서는 브랜치를 병합하여 마스터 브랜치에 포함할 수도 있습니다.
지금까지 로컬 리포지토리를 사용해 봤습니다.
이제 Bitbucket이나 GitHub와 같은 원격 리포지토리를 사용해 보겠습니다.
원격 리포지토리와 연결하려면 먼저 원격 만들기를 클릭한 다음 이름, URL, 사용자 이름 및 암호를 지정하고 확인을 클릭합니다.
그러면 Git 패널 하단에 푸시, 풀 및 가져오기 아이콘이 표시됩니다.
여기에서 몇 가지를 변경하고 저장한 다음 로컬로 커밋합니다.
그리고 짧은 메시지를 입력합니다.
여기 푸시할 파일 1개가 있음을 알리는 아이콘이 표시됩니다.
확인을 클릭합니다.
그러면 GitHub로 전송됩니다.
이 모든 작업은 Dreamweaver CC의 UI만으로 가능합니다.
제가 자주 사용하는 옵션 중 하나는 Git 리포지토리 내역입니다.
여기서는 첫 번째로 수행한 커밋 작업 내역을 비롯해 지금까지 수행한 다른 변경 작업도 표시됩니다.
이 기능은 다른 팀원이 수행한 작업 내역까지 확인할 수 있으므로 훌륭합니다.
작업을 수행한 팀원의 이름은 물론이고 메시지와 코드 변경 사항까지 확인할 수 있죠.
따라서 다른 사람과 공동 작업할 때 얼마나 유용하게 이용할 수 있는지 알 수 있죠.
지금까지 Git 통합을 간단히 살펴봤습니다.
더 자세한 내용은 이 튜토리얼 페이지에서 링크를 통해 제공되는 도움말 문서를 참조하시기 바랍니다.
Dreamweaver CC를 사용하면 팀과의 공동 작업이 훨씬 수월해집니다.
여러분도 워크플로우에서 Git을 사용해 보시기 바랍니다.
Dreamweaver CC를 활용하세요.
