[웹스톰(WebStorm)] Git 01 - 원격저장소 업로드

웹스톰 으로 깃을 편리하게 이용할 수 있다고 합니다.

저는 깃을 회사에서 한두번 사용해 봤지만 그냥 신규파일 만들고 업로드 수준이라...

저는 일단 Git이 설치가 되어 있습니다.

이게 Git이 설치가 되어 있어야 사용 가능한지는 잘 모르겠습니다만 저의 작업환경과 동일하다는 기준 하에 포스팅 하겠습니다.

이 포스팅은 신규 원격 저장소를 만들고 거기에 업로드 하는 글입니다.

1. 일단 깃을 설치하고 사용자 등록까지 합니다.

Git 최초설정 하는 방법 : 바로가기

그리고 웹스톰으로 돌아가서 단축키 컨트롤 + 알트 + S 를 눌러 줍니다.

그러면 메뉴가 너무 많아서 뭐가 뭔지 모를꺼예요.

상단에 git 이라고 검색하면 Version Control 탭이 보입니다. 그 탭을 열어주면 Git 에 대한 부분이 보입니다.

그러면 메뉴중 

Warn if CRLF line separators are about to be committed (CRLF 줄 바꿈 문자가 커밋되기 직전에 경고)

Auto-update if push of the current branch was rejected (현재 브랜치의 압박이 거부 된 경우 자동 업데이트)

이런게 보일껀데 두개 다 체크해 줍니다.

(사실 저거 뭔말인지 몰라요. 저도 인터넷 뒤져가면서 했더니 저거 체크하는 부분이 있더라구요. 그래서 그냥 했습니다.)

2. 상단에 VCS 메뉴가 있습니다.

그 메뉴를 펼치면 VCS Operations Popup... 이라는 메뉴를 클릭해 줍니다.

단축키는 알트 + ` 입니다. 따옴표가 아니고 Tab위에 있는 키입니다.

3. 그러면 에디터 중앙에 이런 메뉴가 하나 뜹니다.

혹시 Git을 약간이라도 공부하시거나 사용해 본 적 있으시다면 Git으로 관리하는 프로젝트는 git init 라는 명령어로 이 폴더는 Git으로 버전관리 하고 있어 라고 지정해 줘야 합니다.

그 의미와 가장 가까운 단어는

Create Git Repository... 인거 같습니다.

이거 클릭해서 이제 test 라는 폴더를 버전관리 해보겠습니다.

4. 이런 조그만 창이 하나 뜨는데 바로 그냥 OK 버튼을 눌러주면 되네요.

4. 그러면 또 이런 경고창이 뜹니다.

전 느낌표만 나오면 긴장이 되더라구요. 내가 잘못한게 있는건가? 싶기도 하고 아무튼,

왼쪽 상단에 Git Init 라고 적혀 있네요.

선택한 디렉토리 XXXXX 는 이미 Git 아래에 있습니다.

새로운 VCS 루트를 만들어 하겠습니까?

라고 하는데.... 음... 내가 Git 을 공부할때 저런 소리 첨 듣는데.. 어쨌는 Git으로 관리할 꺼니까 Yes 버튼을 눌러 줍니다.

(여러분 이래서 영어공부를 해야 합니다. 저는 구글 번역에 의존하지만... ㅠㅠ;)

5. 그러면 이렇게 파일 목록들이 붉은색으로 표시된걸 확인할 수 있습니다.

색이 중요 합니다. 이 붉은색은 아직 Staging 된 상태가 아님을 뜻합니다.

간단하게 파일 이름이 붉은색으로 나온다면 Git 저장소에 올릴 준비가 되어있지 않다는 것. 이라고 생각하시면 될꺼 같습니다.

맞는 소리한건지 모르겠습니다. 정정이 필요하면 댓글 부탁드립니다.

6. 그렇다면 이렇게 원격저장소로 올릴 준비를 하기 위해선 Git 명령어로 이렇게 했던거로 기억합니다.

git add 파일_이름.확장자  (단일 파일을 Staging)

git add * (수정이 일어난 모든 파일을 Staging)

그걸 하기 위해서 다시 VCS Operations Popup 을 보겠습니다.

단축키는 알트 + ` 입니다.

7. 아무튼 저는 Add만 찾았습니다. 제 목적은 test.html 이라는 파일을 커밋할 수 있게 만들어 주고 싶었습니다.

Add to VCS 를 눌러줍니다.

단축키는 컨트롤 + 알트 + A 입니다.

8. 정확히 제가 원한 상태가 되었네요.

test.html 파일이 초록색으로 나왔습니다.

9. 이제 test.html 파일을 commit 를 해서 이 작업은 어떤 작업인지 기록을 남겨보겠습니다.

단축키 알트 + ` 를 눌러서 VCS Operations 팝업창을 엽니다.

그리고 Commit File... 을 눌러보겠습니다.

10. 정확히 git add 로 추가된 파일이 보이는것 같네요.

이 상태에서 git commit -m "커밋메시지_입력" 이런걸 해줬던 기억이 있습니다.

꼭 커밋 메시지를 넣어주는 습관을 기릅시다.

커밋 메시지를 입력 후 우측 하단의 Commit 버튼을 누릅니다.

11. test.html 파일 이름을 보니 이제 흰색이 됬네요. Commit 가 제대로 이뤄진거 같습니다.

이렇게 로컬에서 작업이 완료된걸 다른사람들과 함께 관리 하려면 서버에 올려야 합니다.

저는 깃허브 의 원격 저장소를 사용하겠습니다.

12. 다시 알트 + ` 을 눌러 VCS 팝업창을 열어줍니다.

git push 라는 명령어가 있었던 기억이 있습니다.

git push 명령을 사용하면 로컬 저장소의 파일을 원격 저장소로 보낼 수 있습니다.

(협업할땐 수 많은 푸쉬에러를 경험한다고 전해들었습니다.)

Push 메뉴를 선택해 보겠습니다. 단축키는 컨트롤 + 쉬프트 + K 입니다.

13. 이런 조그만 창이 뜨는데요. 제 기억상

git push [remote_name] [branch_name]

했던거로 기억합니다.

리모트 이름은 원격저장소 주소를 닉네임 처럼 활용한 것이고

브랜치 이름은 작업자 라고 생각하시면 될꺼 같습니다. 또는 협업할때 파일의 오염을 막기 위해서 복사한 쌍둥이 형제?? 

(정확한 의미를.. ;;; 혹시 의미를 아신다면 댓글 부탁드려요.)

아무튼, 상단의 Define remote 를 클릭해 봅니다.

14. 역시 이런게 떠야 할꺼 같았습니다.

Name는 리모트 주소의 닉네임 이라고 생각하시고

URL 은 리모트 주소 그 자체 를 넣어주시면 됩니다.

Name 는 그냥 놔둡니다. 이건 지금은 건드릴 이유가 없을꺼 같습니다.

15. 깃허브 사이트로 가서 학습용으로 쓸 저장소 하나를 만들겠습니다.

16. 적당히 테스트할 저장소를 만들고

바로 보이는 URL 을 복사합니다.

17. 그 주소를 URL 부분에 붙혀넣기 해서 OK 버튼을 눌러 줍니다.

18. 그러면 이 창이 이렇게 바뀐걸 확인할 수 있습니다.

브랜치는 master 브랜치 인거 같습니다.

우측 하단의 Push 버튼을 눌러 원격 저장소로 넣어 봅니다.

19. 아무나 막 내 원격 저장소에 자료를 올리면 안되겠죠.

이런 로그인 창이 하나 뜹니다.

바로 자신의 깃허브 원격 저장소의 계정을 입력하고 OK 합니다.

20. 또 이런 보안관련 암호 입력을 하라고 뜨는데...

잊어버릴까봐 저는 그냥 빈 공란으로 냅뒀습니다.

사용자 입장에 따라서 입력하실 분은 입력하시고 OK를 누르시면 될듯 합니다.

21. 원격저장소로 Push가 되었다고 합니다. 확인해 봐야겠습니다.

22. 오 제대로 올라간거 같습니다!