태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

 

* 이번에는 웹개발자들이 좋아하는 툴 중 하나인 Sublime text와 git를 연동시켜보자. (만약 한번도 안써봤다면 정말 추천하는 툴 중 하나이니까 한번 깔아보고 사용해보자! 유료이지만, trial은 기간제한없는 무료이니 깔아보고 사용해보고 마음에 들면 구입하면 된다.)

 

- 이전 글

2013/10/11 - [Git] 버전관리로 Git을 사용해보자! - 소개

2013/10/12 - [Git] 버전관리로 Git을 사용해보자! - 설치

2013/10/21 - [Git] 버전관리로 Git을 사용해보자! - 기본 명령어

2013/10/31 - [Git] 버전관리로 Git을 사용해보자! - github에 무료 저장소 만들기

2013/12/08 - [Git] 버전관리로 Git를 사용해보자! - 이클립스와 Github 연동하기


* Sublime Text?

: Sublime text는 아직 모르는 사람들이 상당히 많을 것이다. 하지만 그 매력에 한번 빠져들게 되면 다른 에디터툴에는 눈이 가지 않을 정도로 아주 매력적인 툴이다. 일단 Sublime Text를 설치하는 것부터 해보자.


http://www.sublimetext.com/

: 모든 플랫폼에서 활용이 가능하므로, 본인의 운영체제에 맞는 버전을 설치하면 된다. 깔고나서 실행하게 되면 대충 이러한 화면이 나오게 된다.

: 여기다가 여러 가지 패키지를 설치할 수 있도록 도와주는  Package Control plug-in을 먼저 설치하면 편리하다.


 

* Package Control plug-in 설치

: 아래의 주소로 가면 설치하는 방법을 설명하고 있으므로, 이렇게 설치를 하면 설치가 됐다는 텍스트파일이 열리면서 설치가 완료된다. 이 플러그인을 설치하고 나면 여러 가지 플러그인 패키지들을 검색으로 찾아서 쉽게 설치할 수 있게 된다.


https://sublime.wbond.net/installation


: 일단 CTRL+` (역따옴표)를 누르면 콘솔이 열리고 해당 콘솔에 Sublime text 2 인 경우에는 아래와 같은 명령을 실행하면 설치가 된다.

import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

: 그리고 Sublime text 3이면 아래와 같은 명령을 실행하면 설치가 된다.

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

: 설치를 하고나면 Sublime text에서 CTRL+SHIFT+P를 누르면 현재 실행할 수 있는 명령들이 나오고, 여기다가 "Package Control: Install Package" 를 찾아서 실행하면 해당 플러그인이 실행된다. 여기서 중요한 것은 검색할 때, 전부다 안 쳐도 검색이 된다는 점을 인지하고, 차후 자동 완성이 이러한 식으로 동작하는 것을 느껴보면 자동완성 지원이 부실한 자바스크립트 등을 개발할 때 이 툴을 이용하면 상당히 편리하다는 것을 느끼게 될 것이다.




* Git 플러그인 설치

:  위의 "Package Control: Install Package" 메뉴를 찾아서 실행하고나면 다시 여러 패키지들을 검색할 수 있는 창이 나오게 된다. 여기서 git를 검색하면 여러 가지 패키지들이 나오는데, 일단 가장 심플해보이는 "Git" 플러그인을 설치해보도록 하겠다. 플러그인마다 기능을 구현하고 있는 방법이 다르므로, 여러 가지 플러그인 중에서 본인에게 맞는 플러그인을 사용하면 될 것이다.



: 위에서는 2번째의 플러그인을 깔아보겠다. 이제 다시 CTRL+SHIFT+P를 누르고나서 "git"로 검색을 하면 다양한 git 명령어들을 Sublime text 상에서 할 수 있는 것을 확인할 수 있다.



: 이제 Sublime text에서 다양한 git 명령어들을 사용할 수 있게 되었다. 그럼 이전에 Github의 저장소에 있는 내용들을 clone해서 직접 연동해보자.


 

* Github과 연동하기

: 먼저 소스를 관리하고자하는 폴더를 선택한 다음, File > Open을 통해서 열어두자. 그리고 CTRL+SHIFT+P를 사용해서 "Git: init"을 실행하자. Git 저장소가 아닌 곳에서는 다른 명령이 안 되는 것을 볼 수 있다. 따라서 먼저 초기화를 시켜주자.



: 일단 "Git: Init"을 선택하고 나면 디렉토리를 설정하도록 되는데, 이것을 원하는 위치로 설정하자.


 

: 디렉토리까지 설정하고 다시 CTRL+SHIFT+P를 실행하고 git를 검색하면 실행할 수 있는 명령어들이 늘어난 것을 확인할 수 있다. 하지만 여기서는 clone은 없기 때문에 "Git: Custom Command"를 실행해서 clone 명령을 직접 실행해주자.



: 이렇게 실행하면 하단에 "Git command"를 입력하는 입력창이 나오게 되는데, 여기다가 clone 명령어와 함께 github을 통해서 생성한 저장소의 Clone URL을 입력하자. 중요한 것은 이 Git 플러그인은 사용자 아이디와 패스워드를 입력할 수 없으므로, Sublime Text에서 clone 할 때부터 URL에 아이디와 패스워드를 입력해야한다. 아래의 ogrean21에 github 아이디와 password에 패스워드를 입력하여 URL에 아이디와 패스워드를 명시하면 된다.



: 그러면 이제 이전의 글들에서 업로드했던 해당하는 디렉토리에 소스파일들이 정상적으로 불러와진 것을 확인할 수 있다.


: 그럼 이제 파일을 수정/추가하고 다시 Github에 올려보자. File > New 로 파일을 생성한 다음에 내용을 입력하고 저장하였다.

: 그 다음 현재 파일을 로컬의 저장소로 추가하도록 git add 를 실행하자. CTRL+SHIFT+P > Git: Add Current File 실행



: 그리고 git commit을 실행하자. CTRL+SHIFT+P > Git: Commit을 실행하면 다음과 같이 메세지를 입력하는 창이 나오게 된다. 

: 아래의 주석처리되어있는 부분을 보면 메세지를 입력하고나서 창을 닫으면 메세지가 전송된다고 써있다. 따라서, 위에 메세지를 입력하거나서 창을 닫으면, 아래의 콘솔의 master branch로 commit이 된 것을 알 수 있다.



: 그러면 이제 다시 git push를 실행하면 위에 clone으로 가져왔던 github의 저장소로 push가 된다. 이것을 github에서 다시 확인해보자.



: Sublime text 로 추가했던 파일이 추가된 것을 확인할 수 있다. 그리고 파일의 내용 또한 아래와 같이 정상적으로 올려져 있는 것을 볼 수 있다.

: 여기까지가 기본적으로 Sublime Text와 git을 이용해서 github을 연동하는 방법이고, Sublime Text의 다양한 git 플러그인들로 사이드바에서 파일에 대고 우클릭으로 바로 명령을 내리는 등 다양한 방법들로 연동을 할 수도 있으므로, 다른 플러그인들도 설치해서 한번 사용해보자.


[Git] 버전관리로 Git을 사용해보자! - Sublime text와 git 연동하기 끝.


* 여기까지 git의 기본적인 사용 방법들과 각종 툴과 연동하여 사용하는 방법을 알아봤는데 가장 중요한 기능들은 여기까지만 해도 어느 정도 활용이 가능할 것이다. 이제 다음에는 branch의 활용 방법에 대해서 살펴보도록 하자.


- 다음 편

2013/12/?? - [Git] branch 명령어 활용 작성 중


저작자 표시 비영리 동일 조건 변경 허락
신고

이 글을 공유하세요.

  • Hwijung 2014.01.02 00:18 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요~

    잘 지내시나요 ㅎ 여전히 블로그 열심히 하시네요!
    궁금한거 있어서 검색하면 항상 위에 노출되는 ㅋ

    회사 소식도 종종 전해주세요~!!

    • Unikys 2014.01.03 17:43 신고  댓글주소  수정/삭제

      안녕하세요! 요즘 바빠져서 많이는 못하고 있는데 틈틈히 하려고 노력중에요 ㅎㅎ 종종 연락드리겠습니다! 새해복 많이 받으세요~

  • dd 2017.02.07 18:14 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요... 깃하고 서브라임텍스트를 연동하려고 합니다... 하지만
    git:init 이 부분에서 진행이 전혀 안되고 있네요... 왜 그런진 모르겠는데.... Git init 누른다음 Git directory에 git 폴더가 위치할 경로를 지정시키고 enter를 누르면 글자가 다 깨진 글자가 Line1,column 1 이 부분에 나타나고 다시 ctrl+shift+p 누르면 git Custom이 뜨는게 아니라 git init이 그대로네요... 이거 어찌해야하나요 다른 곳 다 찾아봐도 뭔지 모르겠고....

    • Unikys 2017.02.09 16:04 신고  댓글주소  수정/삭제

      1. 해당 디렉토리가 정상적으로 생성되어있는지 확인
      2. git이 정상적으로 설치 되었는지 확인
      3. 디렉토리가 정상적으로 생성되었다면 열기 > 생성된 디렉토리 열기 후 ctrl+shift+p 로 git custom이 뜰겁니다.

    • ㅁㄴㅇㄹ 2017.04.17 16:15 신고  댓글주소  수정/삭제

      이 플러그인은 이미 설치된 git 프로그램과 sublime text를 연동해주는 플러그인으로 git 프로그램을 미리 설치하지 않았으면 외계문자로 된 오류가 발생합니다. git 프로그램이 시스템에 설치하면 해결될 수도 있습니다.
      https://www.git-scm.com/download/win

질문이나 의견을 댓글로 달아 주세요

티스토리 툴바