Webstorm으로 GIT 쉽게 사용하기

Posted by in Research

Webstorm 기준으로 제작되었지만 다른 JetBrains IDE 에서 모두 동일하게 적용됩니다.

Webstorm UI 간단히 살펴보기

  1. 프로젝트 목록 및 파일상태 확인 창
    1. 파란색 파일명 : 수정된 사항 있음
    2. 초록색 파일명 : 신규 추가
    3. 빨간색 파일명 :
      1. 신규 파일 추가 시 – unstage 상태
      2. merge 등의 작업 후 – 충돌 상태
  2. gulp task 실행 창
  3. 에디터 창
  4. git > network 를 보여주는 log 창
  5. Terminal 입력 창
  6. git > branch 리스트 및 관련 기능 창

로컬저장소(Local Repository) 생성

기존의 저장소에서 clone 받기

웹스톰 설치 후 최초 실행인 경우

1. check out from Version Control > Git  선택

2. Clone Repository 창이 뜨면 해당하는 내용을 입력하고 Clone버튼을 클릭 합니다.
– Clone Repository URL : 해당 프로젝트의 remote repository url 입력

– Parent Directory : 프로젝트를 클론 받을 로컬 경로, 우측 …버튼을 클릭하면 디렉토리 선택 가능
– Directory Name : Parent Directory에 생성되는 프로젝트 폴더 명 (대부분 프로젝트명이 자동으로 입력 됨)

웹스톰 실행 후 프로젝트가 오픈된 상태에서 clone 하는 경우

1. 웹스톰 메뉴 > VCS > Checkout from Version Control > Git 선택

2. Clone Repository 창이 뜨면 해당하는 내용을 입력하고 Clone버튼을 클릭 합니다. (최초 실행과 동일)

로컬 프로젝트를 git 저장소로 변환하기

로컬에서 작업하고 있던 프로젝트를 git remote repository 와 연결할 수 있습니다.

1. VCS > Enable Version Control Integration 선택

2. Select a version control system에서 git 선택 > OK 클릭

3. 여기까지는 terminal 에서 git init 명령어를 입력한 상태와 동일하며, Remote Repository와 연결해주어야 합니다.

웹스톰 메뉴의 VCS > Git > Remotes 클릭

4. Git Remotes 창이 나오면 하단에 + 버튼을 클릭
5. Define Remote 창이 나오면 URL에 Remote Repository URL 을 입력 하고 OK를 클릭

6. Git remotes 창에 Remote Repository URL이 추가되었습니다.

7.하단에 OK를 클릭 하면 리모트 저장소와 연결됩니다.

Add

파일을 stage 에 추가하려면 project > file 선택 > 마우스 우클릭 메뉴 > Git > Add를 선택합니다.
파일 선택 후 단축키를 눌러 추가하거나 폴더를 선택하여 여러개를 한번에 추가할 수 있습니다.

  • mac : opt + cmd + a
  • win : ctrl + alt + a

Commit / Push

웹스톰에서는 Commit 과 Push가 모두 한 창에서 이루어집니다.
웹스톰 메뉴의 VCS > Commit Changes나 단축키를 눌러 Commit Cahnges 창을 엽니다.

  • commit 단축키
    • mac : cmd + k
    • win : ctrl + k
  • push 단축키
    • mac : cmd + shift + k
    • win : ctrl + shift + k

Commit Changes 창 살펴보기
  1. 터미널에서 git status 를 입력했을때의 상태와 동일한 내용이 보여지는 영역입니다
  2. Amend commit, Sign-off commit 등 옵션을 선택할 수 있고, 커밋 전과 후 작업을 추가적으로 선택 가능 합니다
  3. commit message 입력. 우측에  아이콘을 누르면 이전의 커밋 히스토리를 볼 수 있습니다
  4. 파일 변경사항을 (Diff)를 비교하며 볼 수 있습니다
  5. 커밋만 할것인지, 커밋 후 푸시할것인지 등 명령을 선택할 수 있습니다

2번 옵션 설정창에서 Check TODO (Show All) 에 체크되어 있으면 <!–[Todo] –> 로 표기해놓은 주석을 체크합니다. Perform code analysis 에 체크되어 있으면 코드의 유효성을 검사하게 되며 Commit 버튼 클릭 후 아래와 같은 확인창을 띄워줍니다.

유효성 검사한 내용을 확인하려면 Review 를 코드가 문제 없다면 Commit 을 선택하면 됩니다. Perform code analysis 를 체크해제 하면 위 확인창도 나오지 않습니다. 위 두가지 사항을 체크 해제하고 사용하면 더욱 빠르게 Commit, Push를 할 수 있으나 코드 및 Todo 검사가 필요하신 분은 체크하고 사용하시기 바랍니다!

Push 창 살펴보기

Push 창에서는 Commit 되는 내용들과 파일들을 확인할 수 있습니다.
우측 영역의  아이콘을 클릭하면 변경된 내용의 Diff를 확인할 수 있습니다.

Branch

Branch 목록, 생성, 이동, Merge 등은 모두 Git Branches 창에서 이루어집니다. VCS > Git > Branches , 단축키 등으로 오픈할 수 있습니다. 웹스톰 화면 우측 하단에 부분은 현재 Branch의 위치를 나타내며, 이 부분을 클릭해도 Git Branches 창을 열 수 있습니다.

Branch 생성

Git Branches > New Branch를 클릭하면 새로운 Branch를 생성 합니다.

Create New Branch 창에서 브랜치명을 입력하고 OK를 클릭 합니다.

웹스톰에서는 브랜치 생성과 동시에 해당 브랜치로 checkout 됩니다.

만약 로컬에서 작업하는 도중 기존 브랜치에서 작업중이라는걸 알게 되었다면 바로 웹스톰에서 +New Branch를 추가해보세요! 작업하던 내용 그대로 새로운 브랜치에서 시작할 수 있습니다.

Branch 이동

Git Branches 창 > Local Branches 에서 원하는 브랜치를 선택 > checkout 클릭시 이동 됩니다.
그밖에 브랜치 관리에 필요한 여러가지 기능이 있습니다.

  • Checkout ad New Branch : 현재 브랜치의 내용 그대로 신규 브랜치 생성
  • Compare : 현재 브랜치와 선택 브랜치의 log 및 Diff 비교
  • Rename : 브랜치명 변경
  • Delete : 브랜치 삭제

Remote branch 목록 업데이트

VCS > Git > Fetch 를 실행하면 원격 브랜치 목록을 다운로드 할 수 있으며,
Branch > Checkout 하면 로컬에서 해당 브랜치로 이동할 수 있습니다.

Version Control

Log

웹스톰 하단 Version control > Log 탭을 보면 gitlab의 Network와 동일한 Log를 확인할 수 있습니다.
아이콘이 현재 나의 HEAD 위치를 알려주는 표시입니다.

console

웹스톰에서 실행되는 모든 git 명령어 들은 console 창에서 실행됩니다.
Terminal 에서 실행하는 명령어들과 비교해서 공부해보시면 좋을것 같습니다!

Event Log

웹스톰 창 우측 하단에 Event Log 버튼을 클릭하면 로컬에서 작업한 내용들을 모두 확인할 수 있습니다.

Merge

Merge 도 Git Branches 창에서 간편하게 처리할 수 있습니다.
Merge가 필요한 브랜치로 이동 > 가져올 내용이 있는 브랜치 > Merge 옵션을 선택합니다.

Merge 가 성공하면 아래와 같은 메시지를 확인할 수 있습니다.

Fast-forword Merge

Git Branches 창에서 실행되는 Merge는 우선적으로 Fast-forward Merge 를 해줍니다.
Fast-foward Merge를 하게 되면 로그의 모양이 일렬로 쌓이게 되고 어떤 브랜치에서 Merge 했는지 직관적으로 볼 수 없어서 선호하지 않은 분들도 있습니다.

Non-fast-forward Merge

웹스톰에서 자동으로 fast-forward Merge를 안하려면 다른 방법으로 Merge 해주어야 합니다. VCS > Git > Merge Changes > Merge Branches  창을 엽니다. Branches to merge 에서 가져올 내용이 있는 브랜치를 선택 > 아래 옵션에서 No fast forward 옵션을 선택 > Merge를 클릭 합니다.

Log 창을 확인해 보면 꺽인 모양으로 로그가 쌓인것을 확인할 수 있습니다.

충돌 (Conflict) 해결

Merge 등의 작업에서 충돌이 발생하면 Files Merged width Conflicts 창이 자동으로 열립니다.
파일명을 더블클릭 하거나 우측에 Merge... 버튼을 클릭하면 비교(Diff) 화면이 열립니다.

비교화면은 3개로 분리되어 있으며, 각 창이 의미하는 내용은 아래와 같습니다.

  • Local Changes : 현재 브랜치의 수정된 내용
  • Changes from Server : 가져올 내용이 있는 브랜치의 내용
  • Result : Local Changes 의 변경사항과 Changes from Server 내용이 조합되어 최종 결과가 만들어지는 창

Local Changes, Changes from Server 의 변경사항을 >>, << 을 눌러 추가하거나 X 를 눌러 제거해 줍니다. 

Result 창에서 직접 코드를 입력하여 수정할 수도 있습니다.

적절하게 수정되었다면 하단에 Apply 버튼을 클릭하여 Merge 시켜 줍니다.
Merge가 완료되면 왼쪽 아래에서 관련 메시지를 확인할 수 있습니다.

Reset

Revert로 되돌리기

파일을 새로 생성하여 Add 했거나 불필요하게 변경된 파일을 변경전 상태로 되돌릴때 Revert를 사용하면 간단하게 되돌릴 수 있습니다.

  1. 해당파일 > 마우스 우클릭 > Git > Revert 를 클릭합니다.
  2. Revert Changes 창에서 파일은 체크해주고 Revert 버튼을 클릭하면 Add 전 상태 (빨간색 파일명)으로 돌아갑니다.
  3. 이때 Delete local copies of added files를 체크하면 선택된 파일은 로컬 디렉토리에서 삭제됩니다.

Commit 되돌리기

Commit한 내용은 Version Control > Log 탭에서 확인할 수 있으며, Log탭에서 Reset 이 가능합니다.
돌아가려는 Commit 지점을 선택 > 마우스 우클릭 > Reset Current Branch to Hear... 메뉴를 선택합니다.

Git Reset 창에서 reset 관련 옵션을 선택할 수 있습니다.

  • Soft : 커밋 삭제 / 작업내용, Index(stage) 유지
  • Mixed : 커밋, Index(stage) 삭제 / 작업내용 유지. [기본옵션]
  • Hard : 커밋, 작업내용, Index(stage) 모두 제거. 한순간에 모두 잃을 수 있으니 신중하게 선택 필요!

만약 로컬에서 변경한 내용이 있는 상태에서 Reset 을 실행했을때 충돌이 일어나면 Git Reset Problem 창이 실행됩니다.
Hard Reset  (로컬 내용을 삭제하고 리셋), Dont' Reset  (리셋 중지), Smart Reset 할건지 선택 할 수 있습니다.

Smart Reset 을 선택하면 충돌을 해결하기 위해 Files Merged width Conflicts 창이 나타납니다.
충돌(Conflict)해결과 동일한 스텝으로 스마트하게 해결하면 됩니다!

Stash

작업 중간에 급하게 수정해야 하는 상황이 생긴다면 작업내용을 stash 하여 임시저장할 수 있습니다.
VCS > Git > Stash Changes 를 선택하면 Stash 창이 열립니다.

Message 에 적절하게 제목을 입력해 주고 Create Stash 를 클릭합니다.
이렇게 저장된 내용은 VCS > Git > UnStash Changes 창을 통해서 확인할 수 있습니다.

  • View : Stash 내용 보기
  • Drop : 선택된 Stash 삭제
  • Clear : Stash 리스트 전체 삭제

원하는 Stash list 를 선택하고 Apply Stash를 클릭하면 에디터로 내용이 들어오게 됩니다.
옵션중에 Pop stash 를 체크하게 되면 Apply Stash 버튼이 Pop Stash 버튼으로 변경되며, 선택했던 Stash는 Stash list에서 삭제됩니다.

As new branch 에 브랜치명을 입력하면 선택한 stash의 내용과 함께 새로운 브랜치를 생성하며, 해당 브랜치로 checkout 됩니다.

Cherry-Pick

Version Control > Log 화면에서 다른 브랜치의 Commit을 Cherry-Pick 으로 쉽게 가져올 수 있습니다.

Cherry-Pick을 실행하면 Commit Changes 창이 열립니다. 적절한 Commit Message를 입력한 후 Commit 해줍니다.

Cherry-Pick이 성공하면 아래와 같은 메시지를 확인할 수 있습니다.

History

Local history

웹스톰에서는 로컬에서 작업한 히스토리를 파일선택 > 마우스 우클릭 > Local History > Show History  메뉴에서 확인할 수 있습니다.

기존에 작성 했던 내용을 확인하거나 그 내용을 현재(Current) 작업중인 내용에 추가할 수도 있습니다.

Git history

파일이 열린 상태에서 왼쪽 줄번호 클릭 > 마우스 우클릭 > Annotate를 클릭하면 git에 해당 코드를 추가한 사람을 추적할 수 있습니다.

마우스를 올리면 툴팁으로 조금 더 자세한 내용을 볼 수 있습니다.

파일명 > 마우스 우클릭 > Git > Compater width.. 메뉴를 선택하면 File Revisions 창에서 해당 파일의 commit history를 더 자세하게 살펴볼 수 있습니다.

 

Gulp Tasks

Gulp Tasks 창은 터미널에서 명령어 입력 없이 ‘더블클릭’ 으로 간편하게 task를 실행할 수 있습니다.

만약 gulp task창이 안보인다면 gulpfile.js 파일을 클릭 > 마우스 우클릭 > Show Gulp Tasks 를 클릭 하면 나타납니다.