웹 애플리케이션 만들기 실습

버전관리

본 수업은 웹 애플리케이션 만들기 수업으로 대체 되었고, 2015년 6월 이후에 폐지됩니다. 개편된 수업에서 뵙겠습니다.http://opentutorials.org/course/1688

아래 동영상은 버전관리가 무엇인가를 설명하는 영상이다.

버전관리란?

버전(version)은 변경된 이력을 의미한다. 현실에서도 기능이 개선되었다는 의미로 버전업이라는 말을 많이 쓴다는 것을 상기해보자. 버전관리 시스템은 코드의 변화를 관리하는 시스템이다. 각각의 변화들을 저장해서 현재 코드의 상태가 어떤 맥락을 거쳐서 지금의 상태가 되었는지를 파악하고, 문제가 생겼을 때 과거로 돌리는 등의 기능을 제공한다. 특히 코드라는 중요한 데이터를 안전하게 보관한다는 의미에서 백업의 기능도 하게 된다. 또, 여러 사람이 협업을 할 때 발생할 수 있는 충돌이나 유실을 방지하는 역할도 휼룡하게 수행한다. 버전관리는 프로그래밍에 있어서 빼놓을 수 없는 체계로 자리 잡고 있다.

대안들

하지만 이번 수업은 옵션이다. 버전관리를 할 수 없다고 프로그래밍을 못하는 것은 아니다. 특히 이번 시간에 배울 버전관리 시스템인 git은 다소 난이도가 있다. 하지만 도전해볼 가치는 충분하다. 그럼에도 불구하고 도저히 못 하겠다면 '다음 클라우드'나 '구글 드라이브'라도 부디 사용하자. 버전관리는 습관이고, 이 습관은 미래의 당신을 여러번 위기에서 구해줄 것이다. 그러니 꼭 버전관리하자.

아무리 생각해도 버전관리는 초심자에게는 어렵다. 당신이 이미 프로그래머이거나, 도전정신이 투철하다면 이번 수업을 따라와도 좋다. 하지만 처음 개발에 도전하는 입장이라면 이번 수업은 시도는 하더라도 막히는 부분이 있다면 과감하게 '클라이언트 측 기술'로 점프하자. 그리고 개발이 어느 정도 손에 익었을 때, 또는 실제 프로젝트를 시작할 때 다시 버전관리를 찾아와도 좋다.

학습방법

생활코딩에서는 다양한 버전관리 시스템에 대한 수업을 제공하고 있다. 프로그래밍을 위한 본격적인 버전관리로는 SVN과 Git이 있다. SVN은 유서 깊은 버전관리 시스템이고 여전히 많이 사용하고 있다. Git은 차세대 버전관리 시스템으로 SVN의 파이를 빠른 속도로 잠식하고 있는 촉망 받는 버전관리 시스템이다. 그리고 다음 클라우드구글 드라이브는 파일 공유 서비스인데, 이들 서비스에는 자체적으로 버전관리 기능이 내장되어 있기 때문에 SVN이나 GIT과 같은 본격적인 버전관리 시스템의 대체제로 손색이 없다. 지금까지의 설명을 참조해서 자신에게 맞는 버전관리 시스템을 찾도록 하자. https://opentutorials.org/course/302

프로젝트 관리도구

버전관리만으로도 휼룡 하지만, 버전관리 시스템과 프로젝트 관리도구를 결합하면 금상첨화다. 프로젝트 관리도구는 프로젝트를 효율적으로 수행하기 위해서 필요한 업무관리, 지식공유, 소스열람과 같은 기능을 제공하는 서비스를 의미한다. 이번 시간에 살펴볼 Github는 뛰어난 프로젝트 관리도구다. 하지만 퍼블릭 서비스이기 때문에 사내에서 사용하기에는 어려움이 있다. 직장이나 조직에서 사용하기에 좋은 프로젝트 관리도구로 redmine이 있다. Github와 redmine 모두 생활코딩 수업이 있으니 참고하자. http://opentutorials.org/course/304

Git 설치 및 프로젝트에 버전관리 적용하기

다음 동영상은 Git을 설치하는 방법을 다룬다.

본 수업은 Git이라는 버전관리 시스템을 채택했다. 그리고 github.com이라는 서비스를 통해서 자신의 소스코드를 관리할 것이다. 우선 Git을 설치하는 방법을 알아보자.

1. 터미널을 열고 아래의 명령을 실행해서 Git을 설치한다.

sudo apt-get install git

2. 터미널에서 git을 입력했을 때 아래와 같은 화면이 출력된다면 잘 설치된 것이다.

3. 자신이 누구인지를 Git에 등록한다. 이것은 공동작업을 할 때 각각의 버전이 누구의 작업인지를 구별해주는 역할을 한다. 아래와 같은 명령을 자신의 상황에 맞게 수정해서 실행하자.

git config --global user.name "egoing"
git config --global user.email "opentutorialsorg@gmail.com"

4. 에디터 수업에서  생성한 /var/www/opentutorials 디렉토리의 파일들을 버전관리 해볼 것이다.

아래 명령을 입력해서 /var/www/opentutorials 디렉토리로 이동한다.

cd /var/www/opentutorials/

현재의 디렉토리에서 버전관리를 시작하겠다는 의미의 명령을 실행한다.

git init 

아래와 같은 메시지가 출력되면 현재 디렉토리(/var/www/opentutorials)의 버전관리가 시작된 것이다.

5. 아래의 명령으로 현재의 버전관리 상태를 체크한다.

git status

아래와 같은 내용이 출력될 것이다.

Untracked files: 항목 아래에 있는 파일들은 버전관리가 되고 있지 않은 파일들이라는 의미다.

참고 - GUI와 CLI 마우스와 아이콘으로 컴퓨터를 지휘하는 GUI(Graphic User Interface)의 시대가 오면서 명령어로 컴퓨터를 지배하는 CLI(Command Line Interface)는 퇴물처럼 느껴진다. 하지만 개발자들의 세계에서는 여전히 명령어가 애용되고 있는데 그것은 명령어가 논리적이고 연속적으로 컴퓨터를 제어할 수 있기 때문일 것이다. 명령어 방식의 이러한 특징은 클릭질을 단순 반복해야 하는 GUI로는 어렵거나 불가능한 것이다. 또, 아이폰의 siri가 음성명령을 지원하기 시작하면서 명령어의 시대가 다시 부활하고 있다. 여러분이 음성을 통해서 디바이스를 제어한다면 본인이 그것을 인식하건 못하건 프로그래밍을 이미하고 있는 것이다. 만약 GUI의 등장이 좀 더 지연됐다면 CLI는 지금보다 훨씬 더 인간 친화적인 모습으로 발전했을지도 모른다. 어쨌든 지금의 CLI는 인간 친화적이지 않기 때문에 프로그래밍을 처음 시작하는 입장에서는 위협적인 느낌이 들 수도 있다. 우리의 목적은 명령어 사용을 익히는 것이 아니라, 그냥 체험해보는 것이기 때문에 관광하는 마음으로 편하게 따라 해보자.

6. 파일들을 버전관리 하기 위한 명령은 아래와 같다. 그런데 이 파일 중 .project 와 .settings/ 는 Aptana가 필요에 의해서 만든 파일이다. 즉 소스코드가 아니기 때문에 버전관리를 하지 않을 것이다. index.html 파일만 버전 관리 대상이다.

git add index.html

7. git status 명령을 다시 내려본다.

git status

Change to be commited 아래에 index.html이 소속되어 있다. 이것은 index.html 파일이 버전관리 중이라는 의미다.  나머지 파일은 여전히 untracked 상태에 남아있는데, 이것은 git add index.html 명령을 통해서 index.html 파일만 버전관리를 시작했기 때문이다.

8. 변경된 파일을 저장소에 저장한다. 이때 커밋(commit)이라는 명령어를 사용하는데 커밋은 버전관리가 되고 있는 파일 중에 변경된 파일이 있다면 변경된 내용들을 저장소라는 곳에 저장하라는 의미다. 이때 이력을 남겨서 어떤 작업을 했는지 기록할 수 있다.

commit 명령을 실행해보자. '-am'의 의미는 지금은 덮어두자. 'add index.html' 는 작업이력이다. 이번 버전에 대한 일종의 메모라고 생각하면 된다.

git commit -am 'add index.html'

9. 작업이력을 살펴보자. 아래와 같이 입력한다.

git log

결과는 아래와 같다. 방금 입력한 작업이력인 add index.html이 보인다.

egoing@codingeverybody:/var/www/opentutorials$ git log
commit 7f00e223df6e892e82d16a1f49fbabc88bd191a7
Author: egoing <opentutorialsorg@gmail.com>
Date:   Thu Jul 26 00:07:36 2012 +0900

    add index.html

10. 파일을 수정한 후에 7번부터 9번까지의 과정을 반복해보면 버전관리 활동의 윤곽이 잡힐 것이다. 사실 버전관리는 이보다 복잡하지만 파일을 수정하고, 커밋하고 하는 이 단순한 습관만으로도 많은 것을 할 수 있다. 그러다 좀 더 복잡한 문제에 직면하면 절박함이라는 강력한 카리스마가 우리를 이끌 것이다. 무엇보다 지금은 버전관리를 익히는 것이 목적이 아니기 때문에, 버전관리가 무엇인지를 아는 것으로 충분하다.

참고 git log에서 빠져나가고 싶을 때는 Q 버튼을 누르면 된다.

github.com 가입 및 저장소 생성

다음 동영상은 github.com에 가입하고 저장소를 생성하는 방법을 다룬다.

github는 버전관리된 소스코드를 온라인상에서 보관하고 이를 오픈소스로 공개할 수 있는 웹서비스다. github에 대한 자세한 내용은 생활코딩의 github 수업을 참고하자. http://opentutorials.org/course/307

1. github 홈페이지로 이동한다.

https://github.com

2. 'Plans, Pricing and Signup'을 클릭한다.

3. 'Create a account'를 클릭해서 계정을 생성한다.

4. 회원정보를 기재해서 회원가입을 하고, 로그인 한다.

5. 저장소를 생성한다. 저장소는 소스코드를 저장하는 온라인상의 공간을 의미한다. 아래와 같이 생긴 버튼을 클릭한다.

6. 저장소를 생성하는 화면에서 요구하는 사항을 입력한다. 그리고 'create repository' 버튼을 클릭한다.

  • Repository name : 저장소의 이름을 입력한다. 우리의 목표는 생활코딩 플랫폼인 opentutorials.org를 만들어보는 것이기 때문에 opentutorials-자신의 아이디를 입력한다.
    예를들면 'opentutorials-egoing'
  • Description : 프로젝트에 대한 설명을 입력한다. 안적어도 된다.
  • 프로젝트가 오픈소스임을 나타내는 Public을 선택한다. Private은 돈을 내야 한다.
  • Initialize this repository with a README는 무시한다.

7, 아래와 유사한 화면이 나타났다면 성공적으로 저장소를 생성한 것이다. 이 화면은 github의 원격저장소에 접속하는 방법에 대한 내용이다.

Github에 동기화

Git과 github는 다르다. Git은 자신의 컴퓨터에 설치하는 프로그램이다. Git이라는 프로그램을 통해서 소소코드의 버전을 관리하고, github.com으로 변경된 버전을 업로드 하는 것이다. github.com은 업로드 된 소스코드를 협업자들에게 재분배해주는 역할등을 수행한다.

1. 지금부터 github.com 으로 소스코드를 업로드 하기 위한 인증절차를 수행할 것이다. 터미널을 열고 아래와 같이 입력한다.

ssh-keygen

그럼 아래와 같은 화면이 나타날 것이다.

2. 엔터를 계속 누르면 아래와 같은 화면이 출력되면서 종료될 것이다.

3. 아래와 같이 명령어를 입력한다. cat은 뒤에 따라오는 파일의 내용을 화면에 출력하라는 의미의 명령이다. 즉 ~/.ssh/id_rsa.pub 파일의 내용을 화면에 출력하라는 뜻이다. id_rsa.pub 파일은 4번 과정을 통해서 만들어진 파일이다.

cat ~/.ssh/id_rsa.pub

4, 그럼 아래와 같은 화면이 출력될 것인데, 이 중에 ssh-rsa로 시작하는 부분부터 문자열이 끝나는 부분까지 마우스로 드래그 한 다음에 오른쪽 클릭을 하고 copy를 선택해서 복사한다. 공백이 포함되면 안 되기 때문에 정확하게 복사한다. 이 내용은 인증에 사용되기 때문에 유출되면 안 된다.

5, github.com 으로 접속한다. 상단의 Account Setting 아이콘을 클릭해서 계정 정보 변경 페이지로 이동한다.

6. 왼쪽 사이드바의 SSH Keys를 선택한 후에 오른쪽 상단에 Add SSH Key 버튼을 클릭한다.

7. 현재 사용 중인 컴퓨터(우분투)의 별명을 붙여준다. 그리고 아까 복사한 (상기 6번) SSH key를 붙여넣기 한다. 아래와 같은 모습이 될 것이다.

8. 비밀번호를 요구하면 github.com의 비밀번호를 입력한다. 이렇게 해서 SSH키를 github에 등록했다.

9. 정상적으로 잘 작동하는지 확인하기 위해서 아래와 같은 명령을 터미널에서 입력한다. '-T'는 대문자를 입력해야 한다.

ssh -T git@github.com

그 결과 아래와 같은 값이 출력된다면 성공적으로 인증된 것이다.

Hi opentutorialsorg! You've successfully authenticated, but GitHub does not provide shell access.

10. 이제부터는 자신의 컴퓨터에서 github.com으로 소스코드를 업로드 할 때 비밀번호를 따로 입력하지 않아도 자동으로 인증이 된다.

여기까지다. 여기까지 성공했다면 정말로 큰 고개를 넘긴 것이다. 이걸 한 번에 했다면 정말 대단한 집중력이다. 댓글로 자신의 저장소 주소를 남겨주기 바란다. 저장소 주소를 알아내는 방법은 아래와 같다.

툴바 상단에 자신의 닉네임을 클릭하면 개인화 페이지로 이동한다.

개인화 페이지에 Repositories 항목을 보면 자신이 생성한 저장소의 목록이 나열될 것이다. 그 중에 실습에 해당하는 저장소 제목을 클릭해서 그 페이지의 URL을 댓글로 알려주면 된다.

원격저장소(github.com)를 이용하기

다음 동영상은 로컬저장소의 버전을 원격저장소와 연결하는 방법에 대한 영상이다.

지금까지 저장된 버전들을 원격 저장소에 올려보자. 원격저장소는 네트워크에 연결되어 있어서 여러 사람이 접근할 수 있는 저장소를 의미한다. github.com을 원격 저장소로 사용할 것이다.

1. http://github.com 에 방문해서 자신의 저장소를 찾는다. 직전에 설명한 내용을 참고한다.

2. SSH를 선택하고 그 URL을 복사한다.

github이 사이트의 디자인을 개편해서 현재는 오른쪽 측면에서 URL을 얻을 수 있다. 아래 그림을 참조하자.

3. 터미널에서 아래의 명령을 실행한다. 아래의 명령 중 'git@github.com:egoing/opentutorials2-egoing.git' 부분을 2번 절차를 통해서 알아낸 자신의 SSH 주소로 변경한다.

git remote add 는 로컬 저장소에 원격 저장소를 연결하는 것이다. 'git@github.com:egoing/opentutorials2-egoing.git;'는 원격 저장소의 URL이고 origin은 이 저장소의 별명이다. 원격저장소의 URL을 항상 기억하기는 어렵기 때문에 별명을 사용한다.

cd /var/www/opentutorials;
git remote add origin git@github.com:egoing/opentutorials2-egoing.git;

4. 로컬 저장소에 저장된 버전들을 원격 저장소에 동기화시키자. 아래의 명령은 로컬 저장소의 내용을 원격 저장소로 업로드 한다.

git push origin master;

이렇게 하면 github.com에 소스코드가 업로드 된다. 자신의 저장소에 방문해서 소스가 잘 업로드 됐는지 확인해보자.

이후에 작업을 진행하고 그에 따라 변경된 내용들을 commit한 후에 다시 github.com으로 소스를 업로드 할 때는 git push origin master; 명령을 실행하기 전에 다음 명령을 먼저 실행해야 한다.

git pull origin master

이 명령은 원격 저장소의 내용을 자신의 로컬 저장소로 다운로드하는 명령이다. 여러 사람이 작업하거나 다른 컴퓨터에서 작업한 내용이 원격 저장소에 있다면 git push 명령을 실행하기에 앞서서 git pull을 통해서 원격저장소와 로컬저장소의 상태를 같게 만들어야 한다.

pull은 원격저장소에서 로컬로 당겨오는 것이고, push는 로컬저장소에서 원격저장소로 밀어 넣는 것이다. 그리고 언제나 pull을 하고 그 다음에 push를 해야 한다.

커밋할 때마다 원격 저장소로 push해야 하는 것은 아니다. 혼자 작업하는 경우라면 좀 천천히 push해도 좋고, 여럿이 작업하는 것이라면 push와 pull을 자주 하는 것이 좋다. 서로 같은 부분을 수정하면 나중에 합치는데 꽤 많은 에너지가 들어가기 때문이다.

댓글

본 수업은 웹 애플리케이션 만들기 수업으로 대체 되었습니다. 개편된 수업에서 뵙겠습니다. 본 수업은 2015년 6월 이후에 폐지됩니다. http://opentutorials.org/course/1688

 

궁금하신 점은 각 강의의 댓글로 문의해주세요. 답변이 없는 것은 운영자가 못 봤거나 모르는 것입니다. 생활코딩 커뮤니티에 질문하면 더 많은 분의 도움을 받을 수 있습니다. 그리고 문제를 해결했다면 본문의 댓글로 공유해주시면 다른 분에게 큰 도움이 됩니다. 원하는 답변을 얻는 것은 확률의 문제입니다. 질문의 품질이 높으면 그 확률도 올라갑니다. 질문자의 상황을 더 잘 전달하기 위해서 screenr.com이나 이미지 캡처의 이용을 권합니다.

 

댓글 본문
  1. blue
  2. simpson
  3. 신중길
  4. https://github.com......git

    따라가겠습니다!
  5. Hye-jeong Moon
    https://github.com......ong

    강의 쉽게 잘 가르쳐 주시는 것 같아요! 감사합니다~
  6. ami7key@gmail.com
  7. gipark2001@naver.com
  8. kyun
  9. 울티메이텀
  10. 비버
    https://github.com......701

    욜~~~~~~~~~~~~~~~~~~
  11. jack
    좋네요 ㅎㅎㅎ 감사합니다
    https://github.com......une
  12. drjune
    https://github.com......une
    잘보고있습니다^^
  13. 공대라이프
  14. 몽키.D.코드
    https://github.com......nkm

    이고잉님, 감사합니다!!!
  15. 홍홍홍홍
    강의 항상 너무 잘듣고 있습니다!! 정말 감사해요!ㅜ

    그런데 제가 git pull origin master을 하였더니

    Merge branch 'master' of github.com:jihongpark/opentutorialss-jihong

    # Please enter a commit message to explain why this merge is necessary,
    # especially if it merges an updated upstream into a topic branch.
    #
    # Lines starting with '#' will be ignored, and an empty message aborts
    # the commit.


    이런메세지가 뜹니다 ㅜ 무엇이 잘못된걸까요?
  16. 찐똥구리구리
    https://github.com......g00

    감사합니다...egoing님~
  17. Alvin J
  18. yunic
    https://github.com......ics

    강의 너무 좋아요. 감사합니다!!^^
  19. 무니피코
    https://github.com......ico

    정말 잘 배우고 있습니다. 고맙습니다.
  20. 네버로스트
    git@github.com:jsleemdw/opentutorials.git
  21. 옆집참새
    https://github.com......git

    시간가는줄 모르고 하고있네요
  22. https://github.com......git
    강의 정말 감사드립니다 !! 재밌어요 > <
  23. https://github.com......som
    강의 재미있네요^^
  24. 코드러너
    https://github.com......ner

    라이브 40시간 먼저 다 듣고 이걸 들으니 알기 쉽네요.
    반대로 해도 마찬가지로 좋을 것 같습니다.
  25. https://github.com......kim

    강의 정말 잘듣고 있습니다. 감사합니다.
  26. iamsj9
    http://github.com......git 입니다

    강의잘듣고있습니다 감사합니다
  27. Sang-Won Kang
  28. egoing
    버전 관리는 모르셔도 됩니다. 편안한 마음으로 다음 수업으로 넘어가 주세요 :)
    대화보기
    • 또롱
      와... 여기서 멘붕이네요.... 따라했는데 다르게 나오더니 이제 어디서부터 손을 대야할지 모르겠습니다...
    • 또롱
    • jinho
    • ruin
    • 세계의끝3
      https://github.com......sw3
      github 저장소 성공하였습니다. 잘 보고 있습니다.감사합니다.
    • 딩코
    • 김현재
      https://github.com......456
      잘 보고있습니당~
    • 김경민
      https://github.com......225
      열심히 하겠습니다. 감사합니다.
    • https://github.com......als
      만들었습니다!
    • 서예원
      https://github.com......won 감사합니다 열심히 배우고 있습니다^_^
    • Jinsup Shin
      https://github.com......ect
      좋은 강의 감사합니다.
    • 불철주야
      주소랑 연결할때 (git remote add) origin으로 하니까
      fatal: remote origin already exists.
      라고 뜹니다. 그래서 origin 말고 임의로 이름을 정하니까 되네요.
    • 신민호
    • kroot
    • peecci
    • ojmme
    • thumos
    • minwoo
      https://github.com......woo
      잘 따라하고있습니다!!감사합니다
    • 기연
      지금 원격저장소도 활용해 볼 겸 데스크탑-윈도우와 랩탑-맥에서 동시에 수업을 진행하면서
      집에 있을땐 윈도우로, 밖에 있을땐 맥으로 강의를 들으면서 github 설정을 하려 하는데요,
      두 컴 다 가상머신을 통해 우분투 설치를 했고, ssh 키를 각각 입력해서 인증까지 마쳤습니다.
      제 github 계정안에 ssh키가 두개가 인증되어 있는 상태인거죠죠.
      이 상태에서 맥에서 작업한 뒤 push하고, 이 후에 윈도우에서 다시 pull한뒤 새로 작업하면 되는건가요?
    • qunilove
      https://github.com.........qunilove 잘보고있어요 감사합니다
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기