아톰(Atom) 개발 환경과 깃허브(GitHub) 연동하는 방법

  아톰(Atom) 개발 환경(IDE)은 일반적으로 웹 디자인을 할 때 많이 사용됩니다. 아톰은 깃허브(GitHub)와 연동해서 편하게 다른 사람들과 함께 개발을 할 수 있습니다. 사실 처음에 설정하는 과정만 귀찮지 한 번 하고 나면 함께 개발하는 과정이 굉장히 편해지기 때문에 미리 하는 방법을 익혀 놓으시는 게 좋습니다. 일단 아톰을 설치하는 방법부터 알아보도록 하겠습니다.

  ▶ 아톰(Atom) 다운로드 사이트: https://atom.io/

  위와 같이 'Download Windows 64-bit Installer'를 눌러서 개발 환경을 설치할 수 있습니다. 설치는 단순히 'Next'만 누르면 설치가 완료됩니다. 이후에 다음과 같이 실행되는 것을 알 수 있습니다.

  이후에 한 번 깃허브에 새로운 레포지터리(Repository)를 만들어보도록 하겠습니다. 레포지터리는 말 그대로 소스코드를 저장하는 공간을 의미합니다. 말 그대로 오픈 소스(Open Source)로 프로젝트를 만들고자 한다면 즉시 만들 수 있습니다.

  ▶ 깃 허브(GitHub) 사이트: https://github.com/

  위와 같이 깃 허브 사이트로 이동한 뒤에 회원가입 및 로그인을 하도록 합시다.

  저 또한 로그인을 해주었구요. 로그인 이후에는 위와 같이 새로운 레포지터리를 할 수 있는 탭이 나올 겁니다. 저걸 눌러서 레포지터리를 하나 새롭게 만들어주도록 하겠습니다. 이후에 저는 다음과 같이 Atom-Test라는 이름으로 프로젝트를 생성해줄게요.

  한 번 위와 같이 설정하고 'Create Repository'를 눌러서 레포지터리를 만들도록 합시다.

  이제 위와 같이 레포지터리가 생성된 것을 알 수 있습니다. 이후에는 우리의 컴퓨터에 깃(Git)을 설치하면 됩니다.

▶ 깃 다운로드 사이트: https://git-scm.com/download/win

  이제 깃을 다운로드해서 실질적으로 아톰에서 깃 허브와 연동될 수 있답니다. 바로 위와 같이 깃 설치 프로그램을 실행해봅시다.

  기본적으로 저는 바탕화면에 깃 아이콘도 놓도록 설정해주겠습니다.

  프로그램 숏 커트(이름)은 그냥 Git으로 기본 설정으로 넘어갈게요.

  이후에 간지의 끝 Vim 에디터를 기본 에디터로 설정하겠습니다.

  이후에 디폴트로 명령 프롬프트를 사용하도록 하겠습니다.

  통신 라이브러리는 OpenSSL을 쓰는 것이 일반적입니다.

  이후에 위와 같이 디폴트 설정으로 설치를 진행해주시면 됩니다.

  이제 위와 같이 깃이 설치가 완료되었습니다.

  설치 이후에는 명령 프롬프트(CMD)를 실행해서 git을 입력하시면 깃이 성공적으로 설치가 되어있는 것을 확인할 수 있어요.

※ 아톰과 깃허브 연동하기 ※

  이제 한 번 아톰과 깃허브를 연동해보도록 합시다.

  이제 위와 같이 아톰을 실행한 이후에 File -> Settings에 들어가신 뒤에 위와 같이 Install로 가셔서 git-plus를 검색합니다.

  인스톨 이후에는 바로 위와 같이 나오는데 Settings를 누르시면 설정을 할 수 있습니다.

  Settings에서 아래쪽으로 내려가다 보면 위와 같이 명령어(Command) 모음을 볼 수 있습니다. 다양한 명령어들이 존재하네요. 이제 한 번 간단하게 프로젝트를 생성해서 소스코드를 작성해봅시다. 저는 간단히 index.html을 작성해보았어요.

  이제 현재 Git-Plus가 설치가 된 상태이므로 Packages -> GitHub -> Toggle Git Tab을 누릅니다.

  혹은 Ctrl + Shift + 9를 누르셔도 됩니다.

  이제 위와 같이 저장소 경로를 설정하라고 나오는데 현재 자신의 프로젝트 경로를 그대로 넣어주시는 게 좋습니다.

  이후에 위와 같이 해당 프로젝트 경로에서 깃 설정을 해주시면 됩니다.

▶ git config user.name 이름

▶ git config user.email 이메일

▶ git remote add origin 저장소

▶ git remote -v

  이제 한 번 가볍게 커밋(Commit)과 푸시(Push)를 해봅시다.

▶ git add 파일

▶ git commit -m 커밋 메시지

▶ git push -u origin master

  푸시를 하려고 하면 위와 같이 깃허브에 로그인하라는 메시지가 나올 수 있습니다.

  로그인을 해주면 바로 위와 같이 푸시가 완료된 것을 알 수 있습니다. 이제 이러한 과정을 아톰(Atom) 개발환경을 이용해서 똑같이 수행해주도록 하겠습니다. 바로 다음과 같이 아톰에서 Ctrl + Shift + 9를 눌러서 깃 모듈을 띄우도록 합니다.

  이제 다음과 같이 한 번 index.html 파일을 수정하고 저장(Ctrl + S)를 해보도록 할게요.

  이제 위와 같이 바뀐 내용이 Unstaged Changes에 나오는 것을 알 수 있습니다.

  이제 이를 우클릭한 뒤에 'Stage'를 눌러서 스테이지 변화 탭으로 내용을 옮겨봅시다.

  이제 Staged Changes에 있는 변화 사항들을 Commit해 줄 수 있습니다. 바로 Second Commit이라고 메시지를 입력한 뒤에 커밋을 해볼게요.

  커밋 이후에는 아래쪽에 있는 Push 버튼을 눌러서 푸시를 수행할 수 있습니다.

  푸시 이후에는 위와 같이 커밋된 내용들이 다 적용되어 있는 것을 볼 수 있습니다.