안경잡이개발자

728x90
반응형

  페이팔(Paypal)다양한 방법으로 어떠한 물품을 구매하거나 판매할 때 이용할 수 있는 서비스입니다. 일종의 거래 대행 업체로서 안전하게 클라이언트와 판매자가 서로 거래를 할 수 있도록 중개해주는 역할을 수행합니다. 저 또한 유데미(Udemy) 코리아에서 인터넷 강의 활동을 하고 수익을 지급받을 때 페이팔을 이용하여 지급을 받고 있답니다. 페이팔의 사이트 URL은 https://www.paypal.com/입니다. 이 URL에 접속하시고 회원가입 및 로그인 이후에 서비스를 이용하실 수 있습니다.



  저는 현재 회원가입을 해 놓은 상태이기 때문에 바로 '로그인'을 해주도록 할게요.



  로그인 이후에는 위와 같이 '프로필' 란에 들어갈 수 있습니다. 이후에 '금융 정보' 란에 들어가시면 은행 계좌 정보가 나올 겁니다. 저는 이미 특정한 계좌를 등록 신청한 적이 있답니다. 이제 여기에서 '업데이트'를 누르시면 새로운 계좌를 등록하거나 기존의 계좌를 삭제하는 등의 활동을 할 수 있습니다.



  들어가시면 위와 같이 '새 은행 연결' 란이 있을 겁니다. 바로 새 계좌를 연결을 해보도록 할게요.



  새로운 계좌를 등록하는 경우는 위와 같이 '추가'를 누르시면 됩니다.



  이제 여기에서 은행 정보를 넣으면 됩니다. 자신의 은행임을 입증하기 위해서는 페이팔에서 보내주는 인증 코드를 계좌로 받아서 그에 대한 정보를 넣으시면 됩니다. 제가 사용하고 있는 농협 계좌의 경우 영어로 하면 National Agricultural Cooperative Federation입니다. 따라서 위와 같이 은행 이름에는 'National Agricultural Cooperative Federation'을 넣어주었습니다.



  은행 코드 및 은행 이름을 모르시는 경우에는 위와 같이 '은행 코드 보기'를 누르셔서 찾으실 수 있답니다.



  저는 위와 같이 제 계좌 번호를 입력했습니다. 이제 '계속' 버튼을 눌러 넘어가보겠습니다.



  이후에 위와 같이 확인 메시지가 나오네요. 여기에서 확인을 하시고 넘어가시면 됩니다. 기본적으로 지급 취소 수수료도 존재하기 때문에 정확하게 은행 정보를 확인하여 기입하는 것이 중요합니다.



  추가가 완료되면 위와 같이 2 ~ 4일 이내에 페이팔(PayPal)로부터 소액 입금을 통해 인증 코드가 온다고 합니다. 며칠 뒤에 이를 확인하시고 페이팔에서 입금된 금액을 기입하면 정상적으로 인증이 완료될 겁니다.



  바로 위와 같이 '프로필'에 들어가셔서 '금융 정보'에 들어가도록 합시다. 이제 여기에서 '확인 안 됨'을 눌러봅시다.



  그럼 위와 같이 입금된 두 건의 금액을 입력하라고 할 겁니다. 만약에 6원, 15원이 입금되었다면 6, 15를 입력하시면 될 겁니다. 만약 입금을 해도 처리가 안 된다면 고객센터 02-3483-1131로 전화하여 문의를 주시면 처리를 해 주실 겁니다.



  저는 시간이 조금 흐른 뒤에 11원과 3원이 통장에 입금되었습니다. 그래서 위와 같이 입력을 한 뒤에 '확인'을 눌렀습니다.



  이제 위와 같이 성공적으로 은행 계좌과 확인된 것을 알 수 있습니다.


  (+ 추가 정보)


  추가적으로 많은 분들이 잘 모르는 내용에 대해서 말씀드리려고 합니다. 아직 인증이 되지 않은 계좌라고 하더라도 인출은 가능합니다. 다만 그 한계가 500 달러($)로 한정되어있을 뿐이지요. 한 번 제 페이팔 계정에 있는 잔액 중에서 $20을 인출해보도록 하겠습니다.



  위와 같이 페이팔 '메인' 페이지로 가보시면 왼쪽 부분에 '자금' 란이 보이고 아래쪽에 '자금 인출' 영역이 보이실 겁니다.



  위와 같이 긍액 이체 영역에서 '출금 계좌'와 '입금 계좌'를 선택하시고 인출을 신청하시면 됩니다. 



  그러면 바로 위와 같이 확인 메시지가 출력됩니다. 한번 '이체' 버튼을 눌러서 이체를 수행해보도록 하겠습니다.



  이제 위와 같이 이체 확인 메시지가 뜨면서 성공적으로 이체가 완료된 것을 확인할 수 있습니다.

728x90
반응형

Comment +0

728x90
반응형

  흔히 웹 서버 프로그램을 개발할 때 가장 중요한 것은 보안입니다. 저는 개발을 할 때 보안성을 강화하는 모듈화 방법에 대해서 많이 고민합니다. 예를 들어 특정한 소스코드를 깃 허브(Git Hub)에 올리고 있는 상황에서, 데이터베이스 연결 구문 등을 작성하고자 할 때 데이터베이스 연동 구문에는 데이터베이스의 ID와 비밀번호가 그대로 노출이 될 텐데 그걸 그대로 깃 허브로 푸시(Push) 하지는 않겠죠? 이럴 때 사용하는 것이 바로 파일에서부터 데이터베이스 관련 정보를 불러오도록 하는 것입니다.


  파일에서부터 데이터베이스 관련 정보를 불러오도록 하면 웹 쉘 업로드 공격이 들어오지 않는 이상 데이터베이스 관련 정보를 노출당할 일이 없고, 데이터베이스 또한 적절하게 권한 분리를 함으로써 웹 서버에서 접근할 수 있는 데이터베이스 영역을 잘 관리한다면 상당히 보안성이 높아집니다. (물론 웹 서버를 Root 권한으로 돌리거나, 데이터베이스 또한 Root 권한으로 접속하도록 개발된 서버라면 웹 쉘 한 방에 초전 박살날 수 있습니다.)


  아무튼 카페 24와 같은 호스팅 서비스를 이용할 때 파일에서부터 데이터베이스 관련 정보를 읽어 처리하는 방법에 대해 알려드리고자 합니다.



  먼저 위와 같이 현재의 컨텍스트 경로를 출력하도록 하는 JSP 프로그램을 작성해서 호스팅 서버에 올립니다.


  실행 결과 위와 같이 리눅스 경로가 출력되는 것을 알 수 있어요. 제 루트 디렉토리는 바로 위와 같다고 할 수 있습니다.



  이제 한번 루트 디렉토리의 바로 부모 폴더로 가서 file이라는 폴더를 만들어줍니다. 이제 정상적인 사용자들이 이 경로에 웹 브라우저로 접근할 수 없습니다.



  이제 위와 같이 특정한 텍스트 파일에 아이디 값을 적어서 올려볼게요.


  이제 바로 위와 같이 아까 확인했던 경로 값을 이용해 해당 파일에서 글자를 읽어 출력하도록 해봅시다.



  바로 위와 같이 성공적으로 아이디 값을 읽어온 것을 알 수 있습니다. 그럼 즐거운 시큐어 코딩 되세요!


728x90
반응형

Comment +0

728x90
반응형

  이번 시간에도 지난 시간에 이어서 자바 FX(Java FX)를 이용한 서버 및 클라이언트 채팅 프로그램을 개발하도록 합시다. 이번 시간이 마지막 시간입니다. 클라이언트 프로그램의 GUI를 작업하도록 할 것입니다. 서버로 메시지를 전송하고, 서버로부터 메시지를 받는 전반적인 과정이 모두 그래픽 환경에서 출력될 것입니다. 클라이언트 프로그램 또한 프로그램 자체가 작고 디자인 구성요소가 별로 없다는 점에서 자바 소스코드로 간단하게 작성할 수 있을 것입니다.


  바로 클라이언트 프로그램을 실질적으로 작동시키는 start() 함수를 작업해보도록 하겠습니다.

 


  소스코드가 조금 긴 감이 있는데요. 클라이언트의 경우에는 UI 요소가 많기 때문에 어쩔 수 없습니다. 보시면 접속을 할 때 clientStart() 메소드를 실행해서 서버에 연결한 이후에 메시지를 전송하게 되면 서버로 send() 메소드를 이용해 통신하게 되는 것을 알 수 있습니다. 실행 결과는 다음과 같습니다.



  실제로 상용화를 위해서는 갖가지 예외 처리를 더욱 자세하게 해주어야 합니다. 일단 전반적인 작동이 원활히 이루어지는 것을 확인했으므로 프로젝트를 완료하겠습니다.

728x90
반응형

Comment +4

  • 자바사용자 2018.04.06 21:32

    정상적으로 작동이 잘 되네요!
    데스크탑에 서버,클라이언트 하나 노트북에 클라이언트 하나두고 해봤는 데 잘 됩니다!
    근데 jsp영상도 공부하려고 하는데 솔직히 웹개발에 이클립스는 별로이지 않나요????
    안경님이 능숙하게 사용하시는게 신기해보입니다..(코드도 매우 깔끔하게 짜시고)
    어쨋든 채팅강의 잘보았습니다. 좋은 하루되세요!

    • 이클립스가 전자정부 덕에 강세를 보인 것은 사실입니다. 사실 저는 그렇게 불편하다고 못느껴서 사용하고 있습니다. 정상적으로 잘 작동한다니 정말 다행이네요.

  • 홍길동 2018.07.10 09:48

    관리자의 승인을 기다리고 있는 댓글입니다

  • kdu 2019.10.01 17:56

    관리자의 승인을 기다리고 있는 댓글입니다

728x90
반응형

  이번 시간은 자바 FX(Java FX)를 이용한 서버 및 클라이언트 채팅 프로그램 개발하기의 네 번째 시간입니다. 바로 클라이언트 기능 모듈을 개발하는 것입니다. 일단 클라이언트 프로그램이라고 할 수 있는 Chat Client 프로젝트를 생성해주도록 합시다. 기본적으로 GUI 멀티 채팅 시스템에서 채팅 클라이언트(Chat Client) 프로그램은 서버로 접속하여 서버와 통신하는 구조를 가집니다. 바로 한 번 이클립스에서 JavaFX 프로젝트를 새롭게 생성하여 이름을 Chat Client라고 설정해줍시다. 서버 프로그램을 만들었을 때와 비슷하죠.



  바로 프로젝트를 생성해주겠습니다. JavaFX로요.



  위와 같이 이름을 Chat Client라고 설정해줍시다.



  이제 위와 같이 Main.java 클래스를 살펴보도록 합시다. 다음과 같이 틀을 잡아주세요.



  이제 바로 세부 메소드들을 작업해주도록 하겠습니다. 클라이언트 프로그램에서는 쓰레드 풀을 사용할 필요가 없기 때문에 기본적으로 Thread 클래스를 이용해서 쓰레드 모듈을 처리합니다.



  먼저 위와 같이 startClient() 메소드를 작업합니다. 클라이언트 프로그램을 동작하게 해주는 메소드입니다.



  이후에 서버로부터 메시지를 받거나 보내는 receive() 함수와 send() 함수를 작업해줍니다. 단순하게 InputStream과 OutputStream을 이용해서 서버와 통신하는 모듈이 작성된 것을 알 수 있습니다.



  이제 위와 같이 stopClient()를 작업해주시면 끝입니다.

728x90
반응형

Comment +2

728x90
반응형

  이번 시간에도 지난 시간에 이어서 자바 FX(Java FX)를 이용한 서버 및 클라이언트 채팅 프로그램을 개발하도록 합시다. 지난 시간에는 서버 프로그램의 서버 기능 모듈을 작업하는 시간을 가졌습니다. 이번 시간에는 실제로 GUI 환경에서 해당 서버가 작동하고 있는지의 여부를 출력하도록 해보겠습니다. 자바 FX도 다른 GUI 환경의 프로그램 도구와 흡사하게 작동합니다. 일반적으로 자바 FX는 FXML이라는 별도의 디자인 관련 소스코드를 사용하는데 특별한 GUI가 필요한 건 아니므로 소스코드 상으로 작업해보겠습니다.


  바로 실제로 서버 GUI를 작동시키는 start() 프로그램을 작업해보도록 할게요.



  위와 같이 작업하면 됩니다. 실행 결과는 다음과 같습니다.




728x90
반응형

Comment +3

728x90
반응형

  이번 시간은 자바 FX(Java FX)를 이용한 서버 및 클라이언트 채팅 프로그램 개발하기의 두 번째 시간입니다. 바로 서버 기능 모듈을 개발하는 것입니다. 일단 서버 프로그램이라고 할 수 있는 Chat Server 프로젝트를 생성해주도록 합시다. 기본적으로 GUI 멀티 채팅 시스템에서는 채팅 서버(Chat Server) 프로그램은 클라이언트(Client) 간의 중계자 역할을 수행합니다. 나아가 쓰레드 풀(Thread Pool)을 이용하기 위해서 Executer Service 라이브러리를 사용합니다.


  바로 이클립스에서 하나의 프로젝트를 생성해주도록 합시다.



  위와 같이 프로젝트 부분에서 마우스 우클릭 -> New -> Other에 들어갑니다.



  바로 위와 같이 JavaFX 프로젝트를 하나 생성해줍시다.



  프로젝트의 이름은 Chat Server라고 지어줄게요.

  


  처음에 프로젝트를 생성하면 바로 위와 같이 application 패키지가 존재하고 그 안에 Main 클래스가 존재할 겁니다.



  가장 먼저 위와 같이 application 패키지 내에 하나의 Client 라는 이름의 클래스를 생성해주겠습니다.



  이제 위와 같이 Main 클래스의 틀을 잡아보도록 합시다. 기본적으로 우리 프로젝트에서는 하나의 서버 프로그램은 오직 하나의 서버만 작동시킬 수 있도록 했습니다. 구현을 하고자 한다면 지난 시간에 보여드렸던 다이어그램처럼 하나의 서버 프로그램에서 여러 개의 서버 쓰레드를 작동시킬 수는 있지만 일반적으로는 하나의 서버 프로그램은 하나의 서버 모듈을 구동시킨다는 점에서 이렇게 개발하고자 합니다.


  간단히 부가설명을 하자면 ExecutorService는 여러 개의 쓰레드를 효율적으로 관리하기 위한 대표적인 라이브러리입니다. Thread Pool로 쓰레드를 처리하게 되면 기본적인 쓰레드 숫자의 제한을 두기 때문에 갑작스런 Client 폭증에도 쓰레드의 수에는 제한이 있어 서버의 성능 저하를 방지할 수 있습니다. 한정된 자원을 '안정적으로' 관리하기 위한 대비책이죠.


  바로 한 번 Client 클래스를 작성해보도록 합시다.


 먼저 바로 위와 같이 receive() 함수를 작성할 수 있습니다. 반복적으로 해당 클라이언트로부터 메시지를 전달 받는 메소드입니다. 소름 돋는 부분은 메시지를 전달 받자마자 곧바로 모든 클라이언트에게 그대로 전달해준다는 것입니다.



  이후에 send() 함수입니다. 특정한 클라이언트에게 특정 시기에 메시지를 전달하는 메소드입니다. 이제 특정한 클라이언트가 접속하게 되면 바로 위의 receive() 메소드와 send() 메소드를 이용해 메시지를 전달 받고 전달 할 수 있습니다.




  이제 위와 같이 serverStart() 함수를 작성합시다.



  마지막으로 stopServer() 메소드입니다. 이 메소드는 서버 작동 종료 이후에 전체 자원을 할당 해제해주는 메소드입니다. 사실 이 메소드의 작성 여부가 서버 프로그램의 품질에 큰 영향을 미친다고 할 수 있습니다. 자원 해제는 굉장히 중요합니다.

728x90
반응형

Comment +0

728x90
반응형

  이번에 진행해 볼 미니 프로젝트는 자바 FX(Java FX)를 이용한 서버 및 클라이언트 채팅 프로그램 개발하기입니다. 자바 FX로 개발 된 프로그램으로는 무엇이 있을까요? 바로 대표적인 것이 이클립스(Eclipse) 개발환경입니다. 우리가 흔히 자바 프로그래밍을 연습하기 위해 사용하는 개발 도구인 이클립스 또한 사실은 자바로 개발되었다는 거죠. 알 바 아니라고요? 바로 시작해보도록 하겠습니다.


  기본적으로 서버와 클라이언트를 포함하는 프로그램이 있다면, 응당 서버와 클라이언트는 서로 다른 컴퓨터 환경에서 작동을 한다고 보시면 됩니다. 실제로 프로그램을 구현한 이후에는 서버 프로그램은 실제 서버(Server)에서 작동시키고, 클라이언트는 해당 서버에 접속을 하는 식으로 개발을 해야 하는 겁니다.


  또한 하나의 서버 프로그램은 여러 개의 서버를 구동시킬 수 있습니다. 하나의 서버 단위마다 쓰레드를 이용해서 작동시킬 수 있습니다. 이 때는 연결을 받아야 하는 것이므로 특정한 포트 번호를 설정시켜줘야 할 것입니다. 이후에 특정한 서버로 클라이언트가 접속하면 어떻게 처리할 수 있을까요? 바로 다음과 같이 해당 서버 쓰레드에서 단위 쓰레드를 클라이언트의 갯수만큼 만들어주어 클라이언트가 접속할 때마다 쓰레드를 실행하여 작동시킬 수 있습니다.



  다만 여기에서 단순하게 쓰레드만 돌리면 상당히 프로그램이 위험한 상태에 처할 수 있습니다. 그래서 일반적으로 쓰레드 풀(Thread Pool) 기법을 사용하여 쓰레드를 관리할 수 있습니다. 다음 시간부터 제대로 개발을 해 볼 건데요. 전체적인 구성은 바로 위와 같습니다. 우리는 서버 프로그램과 클라이언트 프로그램을 모두 개발할 것입니다. 실제로 만약에 이 프로그램을 배포한다면 개발자의 컴퓨터에서는 서버 프로그램을 돌릴 수 있고 다른 컴퓨터에서는 클라이언트 프로그램을 돌리면 됩니다.


  필요한 개발 도구는 다음과 같습니다.


  ▶ 이클립스 개발 환경: http://www.eclipse.org/



  ▶ JavaFX Scene Builder: http://www.oracle.com/technetwork/java/javafxscenebuilder-1x-archive-2199384.html



  ▶ 이클립스 JavaFX 플러그 인


728x90
반응형

Comment +1

  • 혼자본다고생각 2021.09.05 21:19

    관리자의 승인을 기다리고 있는 댓글입니다

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
반응형

Comment +0

728x90
반응형

  흔히 노트북에는 기본적으로 캠(Cam)이 내장되어 있습니다. 캠은 카메라(Camera)의 약자입니다. 최근에 있는 캠들은 카메라가 켜지면 자동으로 불이 들어오곤 하는데 그렇지 않은 캠들은 해킹을 당하는 경우에 카메라가 촬영 중인 상태가 되더라도 사용자가 눈치를 못 챌 수도 있습니다. 즉 의도치 않게 해커에게 개인정보를 빼앗길 수 있는 것입니다. 한 번 노트북 캠을 끄는 방법을 알아봅시다.



  바로 윈도우 키를 눌러서 '장치 관리자'를 검색하도록 하세요.



  이제 장치 관리자가 실행되면 현재 자신의 컴퓨터에 존재하는 장치(Device)들의 정보가 출력됩니다. 여기에서 '카메라'가 보이시죠?



  카메라를 우클릭 한 뒤에 '속성(R)'에 들어가서 카메라의 드라이버를 강제로 종료시켜주도록 하겠습니다.



  위와 같이 '디바이스 사용 안 함(D)'이 보일 텐데요. 이걸 눌러주시면 됩니다. 일단은 누르지 말아보세요.



  이제 한 번 카메라를 실행해보도록 할게요.



  카메라를 켜서 아이스크림을 먹고 있는 저를 찍어보았습니다.



  이제 한 번 드라이버를 사용 안 함 처리를 해서 카메라를 꺼볼게요.



  그랬더니 띠요오오오오옹? 카메라 프로그램에서 드라이버를 찾을 수 없어 캠을 실행할 수 없다고 나오네요. 기본적으로 드라이버란 컴퓨터와 장치 사이의 통신을 담당하는 것인데, 지금 드라이버를 없애버렸으니 카메라에서 보이는 정보를 컴퓨터에 실시간으로 출력해주지 못해 당연히 위와 같이 실행이 안 되는 겁니다.



  다시 캠을 실행하고 싶으실 때는 위와 같이 '디바이스 사용' 버튼을 눌러서 다시 드라이버를 실행해주시면 됩니다. 드라이버를 삭제하셔서 영원히 캠을 꺼버리셔도 돼요. 물론 그렇게 하더라도 나중에 다시 드라이버를 설치하면 되기 때문에 큰 문제는 없을 겁니다.


728x90
반응형

Comment +0

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
반응형

Comment +2