Pages - Menu

화요일, 11월 19, 2013

Gist로 블로그에 소스 달기

개발하는 일을 주로 하다보니 좋은 소스코드가 있으면 마치 멋진 자동차, 값비싼 시계처럼 간직하고 싶어지곤 한다. 이때 소스코드를  블로그에 남기기 위해서 이전에 주로 사용했던 방법은 많은 사람들이 사용하는 SyntaxHighlighter 였다.

물론 SyntaxHighlighter를 사용해서 충분히 나만의 멋진 코드를 남길 수 있고, 필요한 사람들과 공유가 가능하다. 그런데 필자는 좀 더 소스코드를 활용하는 관점에서 또 다른게 없을까 고민을 하다가 몇가지 괜찮은 방법을 찾았다.

대표적인 간단한 소스코드 관리 및 블로그에 삽입하기 적당한 서비스는 JSFiddle, plnkr, Gist 다. 여기서 필자는 주로 Gist를 이용해서 블로그에 소스코드를 넣을 것이다. 특별히 Gist를 택한 이유는 Github에서 서비스 되기도 하고, 소스코드를 일목 요연하게 관리할 수 있기 때문이다.  또한 앞으로 JSFiddle, plnkr도 소스코드를 직접 실행하기 위해서 사용하게 될 것이다.

위에 언급한 것들은 블로그에 소스코드를 추가하는 것과 더불어서 직접 소스를 실행해 보면서 실습도 가능한 서비스다. 하지만 Gist는 직접 소스코드를 실행해 볼수는 없다. 사실 툴이라기 보다는 서비스라고 봐야 하겠다. 물론 여기 언급한 것들 말고도 웹에서 직접 소스를 편집하는 서비스들이 많이 생기고 있으니 관심이 있는 사람들은 검색해 보는 것도 좋겠다.

그럼 어떻게 간직하고 싶은 소스 코드를 블로그에 추가하게 되는지 과정을 살펴 보자.

1. Github에 접속 및 Gist 이동
    - 접속 후에 상단의 Gist 메뉴를 클릭해서 이동

2. 우측 상단 + 버튼을 눌러서 새로운 Gist 생성

3. 소스코드 작성 및 파일명 입력
    - 파일명과 확장자를 입력하면 자동으로 Language 선택 됨
    - 편집을 완료하면 Public(공개용), Pirvate(개인용) 선택해서 Create

4. 좌측의 Embed this gist를 눌러 주소 복사


5. 원하는 블로그에 복사한 주소를 입력
    - 예를 들기 위해서 여기 복사한 주소를 넣었다.



보다시피 깔끔하게 소스코드가 출력된다. 다만 소스코드를 실행해 보지 못한다는 단점이 있기는 하다. 기회가 된다면 소스코드 직접 실행도 가능한 다른 서비스도 다뤄보도록 하겠다. Gist의 장점은 소스코드를 한 곳에서 관리가 가능하고, 협업이 가능하다는 것이다. 굳이 이런 장점이 필요없는 사람들은 간단히 SyntaxHighlighter를 사용해도 훌륭하게 코드를 블로그에 넣을 수 있다.

일요일, 11월 17, 2013

Android 옵지프로에서 Git 사용하기

안드로이드 폰에서 직접 개발을 하는 개발자는 아마 거의 없을 것이다. 필자도 주된 개발을 위해서라기보다 짬짬이 손볼 작업들이 있으면 활용하기 위해서 환경을 구축해 보았다. 특히 보안이 아주 심한 곳에서는 PC에서 작업한 결과물 이용이 불가능하기때문에 사이드 도구로 활용하면 나름 유용하게 활용이 가능하다.

요즘은 스마트폰 해상도가 아주 좋아서 소스를 보기에도 나름 적합하고(^^), 필자처럼 출퇴근 시간이 오래 걸리는 거리에 있으면, 이동하는 사이에 관리하는 프로젝트를 확인하기 더할 나위 없이 좋다. 뭐 이렇게까지 개발할 필요가 있을까 생각이 되기도 하겠지만 시간은 역시 금이다.

참고로 스마트폰에서 코딩을 하기 위해서는 키보드와 마우스 연결은 필수다. 아이패드는 기본적으로 마우스를 지원하지 않지만 안드로이드는 기본적으로 마우스도 지원하기 때문에 손으로 직접 터치 없이 코딩이 가능하다. 필자는 연결 테스트를 위해서 CS533 이라는 고가의(?) 장비를 별도로 구입해서 단축키 하나로 간단히 노트북과 스마트폰을 이동하며 키보드와 마우스를 편하게 사용하고 있다.

구축하는 환경은 간단히 아래와 같이 3단 구성으로 할 것이다.
Mac의 Sublime Text3에서 주로 프로젝트를 진행하고 작성된 소스는 Github에 push 한다. 그런 다음 옵지프로의 DroidEdit이라는 앱에서 소스를 받은 다음 수정하는 정도의 환경 구성이다. 다만 이번 글에서는 옵지프로의 편지기인 DroidEdit과 Github를 연결해서 옵지프로에서 편집한 소스를 Github에서 확인하는 과정만 다루도록 하겠다. Sublime Text와 Github의 연결은 검색하면 좋은 글이 많기 때문에 검색해 보기 바란다. 

1. DroidEdit 앱 설치하기
    - 스마트폰에서 15가지 이상의 앱들을 다운 받아서 설치해서 사용해본 다음에 위의 환경과 가장 궁합이 맞는 앱이 DroidEdit이라는 앱이었다. 편집 기능만 놓고 보면 다른 앱들이 다 나은 편집 기능을 제공하는 것들도 있었지만 위의 환경 구축을 위해서라면 역시 DroidEdit이 필자는 좋았다. 더 괜찮은 것을 사용해본 사람이 있으면 나에게도 정보 제공을 부탁드린다.

2. Github 가입 및 Repository 생성
    - 이전 글인 Github로 소스관리 하기 참고

3. DroidEdit 환경 설정
    a. Setting 메뉴를 눌러서 설정 화면을 띄운다.
   
    b. Reomte Files 메뉴를 눌러서 설정으로 들어간다.

    c. Github 가입하고 repository 생성했던 정보를 참고해서 여기에 설정하고 저장한다.

4. DroidEdit에서 소스 push
    a. 소스코드를 편집하고 저장하면 기존 등록했던 Github 가 나타난다. 필자의 경우는 hans로 등록해 놓았기 때문에  hans를 선택했다.


    b. 저장할 이름을 적고 저장을 누른다. (index.html)

    c. push 하 기
        - Save 하면 바로 Github로 push되는 것이 아니다.
          하단 메뉴의 올리기 아이콘을 눌르고 git를 선택하면 아래 화면이 나타나는데 여기서 push 메뉴를 눌러야 Github에 실제 소스가 올라간다.


5. Github에서 push된 소스 확인
    a. 로그인 후에 해당 Repository 를 선택하면 좀전에 올린 index.html이 나타난다.
     b. index.html를 클릭하면 편집한 소스코드 확인이 가능하다.

이렇게 안드로이드폰(옵지프로)에서 소스를 편집해서 Github로 올려서 직접 올려진 소스파일을 웹에서 확인해 보았다. 정말 이렇게까지 코딩을 할 사람은 별로 없으리라 생각하지만 혹여 이런 특이한 환경에서 작업이 필요한 사람들은 참고가 되면 좋겠다. 


Bitbucket 무료 비공개 저장소 만들기

요즘 대세인 Github와 거의 비슷한 기능과 저장소를 제공하지만 Github와 비교해서 무료로 개인용 저장소를 제공한다는 점이 가장 큰 장점이 아닌가 생각한다. 간혹 비공개로 프로젝트를 진행해야하는 상황이 발생되는데 Github는 비공개로 하려면 비용을 지불해야 하기 때문에 당장 비용을 투자할 필요가 없으면 Github의 좋은 대안이 될 수 있을 것 같다.

Bitbucket은 지라를 만든 회사에서 운영하는 곳이다. 기능은 점점 현재 보강되고 있는 추세다. 처음 가입하면 1개의 그룹에서 5명까지 협업이 가능하다. 그런데 이메일을 이용해서 초대장invitation을 보내고, 이메일을 통해 가입하면 3명이 더 추가 된다.

그리고 여기서는 GIT와 머큐리얼기반의 소스 버전관리 기능을 제공한다. 당연히 이슈 트래킹기능도 제공을 하고, 위키도 지원을 한다. 기존의 GIThub/SVN/Google Code에서 컨버팅하여 소스를 가지고 오는 기능도 존재한다.

필자는 테스트 및 공개용으로 작성하는 소스는 Github를 사용하고, 개인적으로 진행하거나 비공개로 사용할 경우에는 주로 Bitbucket을 사용해서 진행하고 있다.

사이트 주소는 http://bitbucket.org 이다. 이제 Bitbucket를 사용해 보자.

1. 회원 가입 하기
    - 사이트에 접속해서  Sign up 버튼을 눌러서 회원 가입
    - 간단히 이름과 메일, 비번을 입력한.
    - Google, Facebook, Twitter, GitHub 계정으로도 가능하다

2. 회원 가입 완료 후에 로그인
    - 회원가입을 완료하면 Dashboard에서 Repository관리가 가능하다.

3. 새로운 Repository 만들기
    - 상단의 Create 버튼을 누르면 Repository를 생성하는 화면이 나타난다.
    - 이름과 설명을 간단히 적고 Create repository 버튼을 눌러서 생성한다.

4. 생성된 Repository 관리
    - 생성된 Repository 관리 화면에서 각종 정보 확인이 가능하다
    - Clone 누르면 Client에서 연결하기 위한 HTTPS, SSH 정보를 볼 수 있다.

이렇게 가입하고 생성된 Reopsitory를 이제 필요한 곳에서 정보를 설정해서 사용하면 된다. 실제 활용하는 부분은 별도로 글을 작성할 예정이다. 

토요일, 11월 16, 2013

Github로 소스관리 하기

Github는 소셜코딩을 모토로 다른 사람들과의 협업할 수 있는 제일 좋은 방법 중에 하나다. 개발하는 사람들은 이미 많이 사용하기도 하지만, 우리나라에서는 아직 많이 알려지지 않은 듯하다. facebook, Yahoo, twitter, rackspace, digg, shopify, EMI 등 세계에서 유명한 업체들이 이미 github를 사용하고 있다.

개인적으로 진행하는 프로젝트라 할지라도 집, 회사등 장소가 다른 곳에서 서로 다른 장비를 가지고 개발하는 경우라면 유용하게 사용할 수 있다. 또 개인적으로 진행하다가 바로 다른 사람들과의 협업이 필요하게 되면 쉽게 소스 공유가 가능하기 때문에 공동작업도 쉬워진다.

Github는 공개용 저장소(무료)와 개인저장소(유료)로 사용가능하며, 공개용 저장소의 경우 Github 사이트에 노출이 되어 다른 사람들과 쉽게 공유 할 수 있는 장점도 있다. 만약 비공개 로 프로젝트를 진행해야 한다면 무료로 비공개 저장소를 제공하는 BitBucket을 사용해도 좋은 선택이 될 수 있다.

이제 사이트에 가입해서 repository를 만드는 과정을 알아본다. 무척 간단하다.

1. GitHub 회원 가입 하기    
    - https://github.com/ 여기로 접속해서 Sign up 버튼을 눌러 회원 가입을 한다.

2. repository 생성   
    a. 빨간색으로 표시된 New repository 버튼을 눌러서 생성 시작     
    b. Reopsitory name, Description을 넣고 Create repository 버튼 클릭     
    c. 완료되면 아래 페이지가 표시되며, repository가 생성된다.

Sublime Text 단축키 활용

Sublime Text 사용 시간이 늘어나면서 자꾸 단축키를 사용하는 빈도도 더불어 늘어났다. 필요할 때마다 찾는 것보다 이참에 정리해 두는게 좋겠다는 생각에 서핑을 하다가 미쿡 아저씨가 정리해 놓은 좋은 자료가 있어서 출처를 밝히고 여기에 옮겨 본다.

Windows, Mac 두 가지 종류로 정리되어 있고, 아마도 여기서 나열한 단축키를 모두 사용하지는 않겠지만 이중에서 꼭 필요한 단축키는 손에 익혀두는게 좋겠다.

원본 주소 : andi smith 

Windows 단축키
Mac 단축키

Sublime Text3 설치 및 설정

Sublime Text를 사용하기로 결정하고, 해당 사이트에서 Sublime Text를 다운받아 설치를 했다. Sublime Text를 잘 사용하기 위해서는 여러가지 Plugin을 설치해야 사용하기 편하다. Plugin 설치를 위해서 먼저 Package Controll을 설치해야 한다.

Package Control은 Sublime Text2, Sublime Text3에 따라서 설치하는 명령어가 살짝 다른데, 저의 경우는 S모 전자의 일을 하면서 보안 때문에 설치 명령어로는 정상적인 Package Control을 설치할 수 없었다.


그래서 여기에는 간략하게 Sublime Text3를 기준으로 설치하는 과정과 특히나 저처럼 보안 및 기타 이유로 Package Control 설치가 잘 안되는 사람들을 위해서 직접 Package Control을 받아서 설치하는 방식으로 진행해 보고자 한다.



1. Sublime Text3 받기
    - http://www.sublimetext.com/3 에서 원하는 버젼 선택
2. Sublime Text3 설치 및 실행



3. Package Control 설치
    - Sublime Text3
         : ctrl+` 또는 View > Show Console 누른 후에 아래 복사해서 실행
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 Text2
        : ctrl+` 또는 View > Show Console 누른 후에 아래 복사해서 실행
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')
    
    - 직접 Down 하기 
    1. Package Control.sublime-package 다운받기
    2. Preferences > Browse Packages… menu 열기
    3. 상위 폴더인 Installed Packages 로 이동
    4. 1번에서 다운받은 Package Control.sublime-package를 3번의 Installed Packages로 이동
    5. Sublime Text를 재시작
    6. Preference > Package Control을 눌러서 설치되었는지 확인