안경잡이개발자

728x90
반응형

  지난 번에는 아톰(Atom) 개발환경에서 깃허브와 연동하여 커밋(Commit) 및 푸시(Push)를 하는 방법에 대해서 알아보는 시간을 가졌습니다. 이번 시간에는 깃허브 프로젝트를 클론해서 우리의 프로젝트에서 다루는 방법에 대해 알아보도록 할게요. 클론이라는 것은 임의의 저장소(Repository)에 저장된 프로젝트를 우리의 로컬 컴퓨터로 옮겨오는 것을 의미해요. 바로 'File' -> 'Settings'에 들어가신 뒤에 'Install' 탭에 들어가시면 특정한 패키지를 검색해서 설치할 수 있어요. git-clone을 검색해서 다음과 같이 설치해봅시다.



  설치 이후에는 'Settings'를 누르면 설정 정보를 확인할 수 있어요.



  이제 여기에서 프로젝트를 클론(Clone)해서 저장할 경로를 설정해줍시다. 저는 C 드라이브에 cloned라는 이름의 폴더를 만들었어요.



  이제 다음과 같이 Settings에 클론할 프로젝트 경로를 넣어주면 되요. 이 경로로 클론이 수행될 겁니다.



  이제 한 번 클론 명령어를 입력해 실제로 클론을 수행해보도록 할게요.



  'Packages' -> 'Command Palette' -> 'Toggle'에 들어가서 명령어를 입력해보도록 할게요.



  바로 Git Clone: Clone을 입력하여 git-clone 패키지를 사용합시다.



  이제 한 번 특정한 저장소 경로를 입력해서 다운로드를 받아봅시다.


▶ HTML 이메일 템플릿: https://github.com/leemunroe/responsive-html-email-template


  저는 한 번 위 템플릿을 다운로드를 해줄게요.



  클론이 수행됩니다.




  그럼 이제 C 드라이브의 경로로 가보시면 성공적으로 프로젝트가 다운로드가 되어있네요.



  위와 같이 아톰에서도 확인할 수 있습니다.



  이제 위와 같이 git-plus를 사용해봅시다. git-plus는 이전 시간에 설치한 적이 있었죠. 클론하는 것 말고 깃을 이용해 Add하고 Commit하고 Push하는 등의 활동을 가능하게 해줍니다. 'Packages' -> 'GitHub' -> 'Toggle Git Tab'에 들어가서 git-plus를 열어볼게요.



  위와 같이 특정한 부분의 소스코드를 수정한 뒤에 저장해보시면 오른쪽에 Unstaged Changes에 수정 내용이 기록됩니다. 우클릭 이후에 Stage를 누르시면 Stage Changes에 등록됩니다.



  이제 Stage Changes에 기록된 내용은 Commit을 해 줄 수 있습니다. 한 번 커밋 해보도록 할게요.



  커밋 이후에는 Push를 시킬 수 있습니다.



  다만 해당 저장소에는 제가 푸시할 권한을 가지고 있지 않기 때문에 오류가 나오는 것을 알 수 있습니다. 원한다면 포크(Fork) 이후에 자신의 저장소에서 다양하게 푸시하여 프로젝트를 수정한 이후에 Pull Request를 하는 식으로 오픈소스에 기여할 수는 있겠지요.



728x90
반응형

728x90
반응형

  아톰(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 버튼을 눌러서 푸시를 수행할 수 있습니다.



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


728x90
반응형