마쏘's 개발 성장기

1. 우선 Visual Studio에 'Github Extension for Visual Studio'를 설치해야한다.

2. 새 프로젝트 생성

3. GIT repository 만들고 해당 프로젝트와 연동하기

만약 이미 생성되어 있는 레포지토리를 복사하고 싶다면, git 옵션에서 repository 복제를 해주면 된다!

7. 비주얼 스튜디오 코드에서 깃 활용하기

    - 실제로 개발할 때는 소스 편집기로 소스를 작성할텐데, 저장한 소스 파일을 깃으로 관리하려면 어떻게 해야할까?

      터미널 창을 열어 깃을 사용할 수 있지만, 소스 편집기로 visual studio code를 사용하면 더 편하게 파일을 관리할 수 있다.

      왜냐! visual studio code는 터미널 기능뿐만 아니라 깃과 연동되어 소스를 관리하는 기능을 가지고 있기 때문이다.

     7-1. 원격 저장소에 연결된 폴더 열기 및 닫기

     7-2. 새 폴더를 만들고 깃 환경 구성하기

     7-3. stage에 올리고 commit하기

     7-4. 원격 저장소 만들고 연결하기

     7-5. 깃허브로 push하기

     7-6. 변경 내용 확인하기

     7-7. commit하면서 자동 staging하기

     7-8. 깃허브에서 pull하기

     7-1. 원격 저장소에 연결된 폴더 열기 및 닫기

           - visual studio code는 이곳에서 다운받으면 된다. (code.visualstudio.com/download)

visual studio code에서 깃이나 깃허브를 사용하기 위한 메뉴는 '소스 제어(source control)'이다.

(왼쪽 사이드 바에 아이콘을 클릭)

Changes(변경 내용): 해당 항목이 보인다면 깃을 사용할 수 있는 상태라는 것이다.

visual studio code 상태 표시줄 왼쪽에 master: 현재 폴더가 원격 저장소에 연결되어 있다는 것이다.

     7-2. 새 폴더를 만들고 깃 환경 구성하기

          - 새 폴더를 작업 폴더로 추가했을 때, visual studio code에서 바로 깃을 초기화하고, 원격 저장소에 연결하기

상태 표시줄에 master -> 현재 폴더에 깃 저장소가 만들어졌다는 뜻이다.

아직 아무 파일도 변경하지 않았기에 >Changes 항목은 비어있다.

     7-3. stage에 올리고 commit하기

           - visual studio code에서 작성하거나 수정한 문서를 바로 staging하고 commit하기

README.md 파일을 만든 직후부터 사이드바 탐색기에 있는 파일 이름 오른쪽에 글자 'U'가 나타나고,

파일 이름 위로 마우스 커서를 올려놓으면 'Untracked'라는 내용이 나타난다.
(untracked file: 한 번도 commit하지 않아서 변경 이력을 추적할 수 없는 파일)

터미널 창을 사용할 때는 스테이지가 보이지 않았지만,

visual studio code에서는 스테이지에 어떤 파일이 있는지 확인할 수 있다.

     +) 스테이징이나 커밋 취소하기

     7-4. 원격 저장소 만들고 연결하기

            7-4.1) 원격 저장소 만들기

            7-4.2) 원격 저장소와 연결하기

지역 저장소를 원격 저장소에 연결하려면 터미널 창에서 명령을 입력해야한다.

visual studio code에서는 따로 터미널 창을 실행하지 않아도 터미널 기능을 사용할 수 있다.

오류 메시지 없이 프롬프트가 나타면 원격 저장소 연결이 끝난 것이다!

     7-5. 깃허브로 push하기

           - 작업 폴더를 원격 저장소에 연결했으니 지역 저장소의 커밋을 원격 저장소로 push하기

     7-6. 변경 내용 확인하기

           - visual studio code에는 수정한 내용을 손쉽게 확인할 수 있는 기능이 포함되어 있다.

             (commit 하기 전 파일을 비교할 때 편리하다)

오른쪽 창의 Tab 부분에 README.md(Working Tree)라고 되어 있는데,

아직 스테이징이나 커밋하기 전 작업 폴더(working tree)에 있는 파일이라는 것을 의미한다.

+) 소스 제어 아이콘을 한 번 클릭하면, Tab이 닫히면서 편집 창을 더 넓게 볼 수 있다. (다시 누르면 Tab이 나온다)

     7-7. commit하면서 자동 staging하기

           - visual studio code에서 git commit -am 명령 기능을 찾아보자.

     7-8. 깃허브에서 pull하기

           - 다른 사람들과 협업하고 있다면 자신의 작업을 진행하기 전에 반드시 pull을 해야한다.

           7-8.1) 원격 저장소에 변경 사항 만들기
                     - 원격 저장소를 pull하기 위해서는 원격 저장소에 변경 사항이 있어야 하기 때문에!

와..!! 드디어 깃&깃허브 입문 책 한권이 끝났다..!

이거 적용해서 앞으로 내가 이때까지 개발해온 것, 개발할 것들 잘 정리해서 올려놓아야지!!

4. 깃허브에 개인 블로그 만들기

    - Github Pages 기능을 이용하면 별도의 웹 호스팅 서비스를 사용하지 않고도 무료로 자기만의 홈페이지를 열 수 있다.

    4-1. Github Pages 기능 알아보기

          - 보통 홈페이지를 열고 싶어서 사용자 컴퓨터에 홈페이지 파일을 만들어 놓아도 웹 서버에 올리지 않으면 다른 사람에게
            보여줄 수 없기 때문에 보통 웹 서버 기능을 제공하는 사이트를 통해서 홈페이지를 연다.
          - 이런 서비스를 '웹 호스팅 서비스'라고 하는데 대부분 매달 일정 금액을 지불해야한다...! 깃허브에 있는 Github Pages
            기능으로 저장소에 홈페이지 파일을 올린 뒤 저장소의 주소를 그대로 홈페이지 주소로 사용할 수 있다.

            (깃허브 저장소를 웹 서버처럼 활용할 수 있기 때문에 무료로 깃허브의 저장소를 블로그나 홈페이지 공간으로 사용!)

          4-1.1) 정적인 페이지를 제공할 때 사용하기 쉽다.
                   - 정적인 페이지: 게시판 or 회원가입이 없고, 내용을 바꾸려면 서버에 올라가 있는 파일을 수정해야 하는 페이지

                      ex) 그동안의 작업 결과를 보여주는 포트폴리오 사이트나 기술 정보를 정리해놓은 블로그

                    - 기본적으로 Github Pages로 만든 주소에는 github.io라는 이름이 붙는다.

          4-1.1) Github Pages 사용하는 두 가지 방법

                    1. HTML과 CSS, javascript(or jQuery) 등 홈페이지 파일이 있는 경우
                       - 직접 준비한 파일을 깃허브 저장소에 올리고, Github Pages 기능을 사용해 홈페이지를 만든다.

                    2. 홈페이지 파일이 따로 없고 만들 엄두가 안 나는 경우

                       - 깃허브에서 지원하는 지킬 테마(Jekyll theme)를 사용해 홈페이지를 만든다.

    4-2. 홈페이지 파일이 있을 때 Github Pages 사용하기

[깃허브에 파일을 올리는 두 가지 방법]

1. 탐색기에서 올릴 파일을 깃허브 화면 위로 드래그&드랍하기

2. [choose your files]를 누른 뒤 올릴 파일을 선택하기

(만일 올릴 파일에 하위 폴더가 있다면 1번 추천)

    4-3. 홈페이지 파일이 없을 때 Github Pages 사용하기

          - Jekyll Theme

            : Github Pages로 블로그나 사이트를 열 때 쓸 수 있는 디자인과 스타일 모음을 말한다. 사용자의 필요에 따라 소스를

              수정해서 사용할 수 있다.

          4-3.1) 지킬 테마 알아보고 선택하기

                   - 블로그를 만드는 목적을 먼저 생각해야한다.
                    1) 온라인 이력서 등을 올리는 경우(블로그 전체를 살펴볼 수 있도록, 작은 수정은 고려하지 않아도 된다)

                    2) 포털사이트 블로그처럼 게시물을 자주 작성할 경우(수정이 편리하고, 최근 게시글이 앞에 보이도록)

+) 시각적으로 편하게 찾는 방법!

jekyllthemes.org/

          4-3.1) 블로그 만들고 기본 환경 설정하기

                   - 지킬 테마 사용하는 방법
                    1) 지킬 테마 소스를 그대로 fork해서 사용하기(테마를 그대로 사용하면서 블로그 포스팅만 하는 경우)
                    2) 지킬 테마 소스를 사용자 저장소에 내려받아 사용하기
                        (테마 디자인을 바꾸거나 소스를 수정하는 것처럼 수정할 파일이 많은 경우)

                    여기서는 1) 방법을 실천한다.

저장소를 github pages로 사용하려면 저장소의 이름을 '계정.github.io'로 바꿔야 한다.

따라서 해당 저장소의 [Settings] 목록에 들어간다.

    4-4. 블로그에 포스트 작성하기

          - 지킬 테마에서 블로그 포스트는 _posts 디렉터리에 저장된다.

          - 또한 포스트 파일의 이름은 '20xx-x-x-파일이름.md'의 형식을 사용한다. (.md: 포스트도 마크 다운 기법을 사용!)

    4-5. 포스트에 이미지 삽입하기

          - 포스트에 이미지를 삽입하려면 먼저 이미지 파일을 저장소로 올려야 한다.

이미지를 추가하는 방법은 masso.tistory.com/52?category=879153 블로그 하단에 나와있다.

+) 책에서 안됬던 방법 다시 해본다..

3. 오픈 소스 프로젝트에 기여하기

    - 깃허브를 자신의 소스 저장 공간으로 사용하는 것도 좋지만, 깃허브의 핵심이라고 할 수 있는 오픈 소스 프로젝트에

      기여해 보는 경험은 자신의 실력을 키우고, 나아가 타인에게 증명할 수 있는 좋은 기회가 될 것이다.

    3-1. contribution의 종류

          - 깃허브에서 기여 활동을 나타내는 말인 contribution에는 소스의 버그를 수정하는 것뿐만 아니라

            그 오픈 소스에 도움이 될만한 거의 모든 활동이 포함된다.

          1) 막 특정 오픈 소스에 대해 공부하기 시작했을 경우

            : 대부분 오픈 소스의 README 파일이 영문으로 작성되어 있는데 이를 한국어로 번역하는 것을 해보자.

              (분량이 적은 문서부터 천천히 해보고, 오픈 소스 개발자에게 메일을 통해 번역을 해도 되는지 확인하고 진행하자)

          2) 해당 오픈 소스 프로젝트를 어느 정도 이해하고 있는 경우

            : 문서화 작업을 도울 수 있다. (소스나 문서의 오타 수정 또는 잘못 번역된 한글 수정)

          3) 소스 코드 수정
            : 오픈 소스의 버그를 찾거나 그 버그를 수정한다. 또는 추가되었으면 하는 기능을 제안할 수 있다.

    3-2. 오픈 소스 저장소 복제하기

          - 오픈 소스 프로젝트에 기여하려면 가장 먼저 수정하려는 오픈 소스 저장소 를 자신의 저장소로 복제해야한다.

            (이 과정을 'fork한다'고 한다)

저장소를 fork 했다면 그 저장소에 있는 소스나 README 파일일 수정할 수 있다.

    3-3. 포크한 저장소를 지역 저장소로 클론하기

          - 포크한 소스는 깃허브의 원격 저장소에 있기 때문에 사용자 컴퓨터로 복제(clone)한 뒤 지역 저장소에서 수정하고 

             push한다.

하지만! 원래 소스가 있던 peacein/doit 저장소에 반영되자 않았다.

오픈 소스 개발자에게 수정한 내용을 원래 소스에 합쳐 달라고 알려주어야 한다.

그 방법은 다음 실습에서 하도록 하자.

    3-4. 오픈 소스 프로젝트로 pull request 보내기

          - fork 해온 원격 저장소의 새로운 커밋을 원본 저장소에 합치는 방법을 알아보자.

          - 먼저 원본 저장소의 개발자에게 내가 수정한 것을 반영해달라고 요청해야 하는데, 이 요청을 pull request라고 한다.

원본 저장소의 개발자에게 문서의 어떤 부분을 수정했는지 설명할 내용을 입력하는 것이 좋다.

(원본 저장소에서 영문을 사용한다면, 커밋 메시지와 설명도 영문으로 작성하는 센스!)

보통 이 공간에서 저장소의 개발자와 질문과 답변을 주고 받고,

수정한 내용을 원본 소스에 반영할지 여부를 결정한다.

    +) 내가 만든 소스를 누군가가 수정한다면???

2. README 파일 작성하기

    - 프로필과 contribution 그래프만 살펴보는 것으로는 그 저장소의 주인이 어떤 활동을 했는지 구체적으로

      알기가 어렵다.

    - 따라서 대부분 깃허브 사용자는 방문자가 편하게 자신의 저장소를 살펴볼 수 있도록 안내문을 만들어

      첫 화면에 띄워두는데, 이를 README 파일이라고 한다.

    2-1. README 파일 만들기

          - README 파일은 마크다운 문법을 사용하기 때문에 확장자는 .md를 사용한다.

          - 단순히 텍스트만 나열하는 것이 아니라 제목과 본문을 다르게 표현하거나 글씨체를 바꾸는 등

            여러 서식을 다르게 적용할 수 있다. 또한 이미지나 외부 링크도 넣을 수 있다.

    2-2. 마크 다운 문법 알아보기

           - 마크 다운의 장점: 사용이 쉽고 HTML 태그에 비해 간단하기 때문에 문서 작성이 편리하다.

           - 마크 다운의 단점: 마크 다운을 지원하는 프로그램이나 사이트에서면 사용할 수 있다.

           2-2.1) 제목

                     - #을 붙여서 제목 글자 크기를 정할 수 있다.

           2-2.2) 텍스트 단락 줄 바꾸기

                     - [Enter]를 두번 눌러준다. 

           2-2.3) 가로 줄

                     - 아래 방법 중 하나를 사용하면 된다.

           2-2.4) 순서 있는 목록

                     - 1,2,3... 처럼 번호를 붙여서 나타낼 수 있다.

           2-2.5) 순서 없는 목록

                     - '+' or '-' or '*' 를 붙여서 나열하면 자동으로 글머리 부호가 붙는다.

                     - Tab을 눌러 항목을 들여 쓰면 여러 단계를 가진 목록을 만들 수 있다.

           2-2.6) 텍스트 강조

                     - 굵게: 텍스트의 앞뒤를 __ or ** 로 감싼다.

                     - 기울임체: 텍스트의 앞뒤를 - or *로 감싼다.

                     - 굵은 기울임체: 텍스트의 앞뒤를 ___ or ***로 감싼다.

                     - 취소선: 텍스트의 앞뒤를 ~~로 감싼다.

           2-2.7) 인용

                     - 인용문을 삽입할 때마다 >를 추가하면 된다.

           2-2.8) 소스코드

                    - 텍스트 사이에 소스 코드를 삽입하고 싶다면, 키보드 1 옆에 있는 grave 키`를 삽입하면 된다.

                    - 소스 코드로 표시하면 고정폭 글꼴로 나타난다.

           2-2.9) 링크

                     - 아래 여러 가지의 형태로 삽입할 수 있다.

                        1) <링크 주소>
                           : 링크 주소가 그대로 화면에 나타나고, 누르면 해당 주소로 이동한다.

                        2) [링크 텍스트](링크 주소)

                           : 링크 텍스트만 나타나며 텍스트를 누르면 괄호에 입력한 주소로 이동한다.
                        3) [링크 텍스트](링크 주소, "부가 설명") 

                           : 결과 화면에서 링크 텍스트에 커서를 올렸을 때 부가 설명이 말풍선 형태로 나타난다.

           2-2.10) 이미지

                       - 
                       - 이미지 파일이 경로를 가지려면, 웹에 올라와 있어야 한다!
                       - 대체 테스트: 이미지를 나타낼 수 없는 상황이나 화면 낭독기에서 이미지를 소리로 설명할 수 있도록
                                               삽입하는 텍스트이다.

    2-3. 깃허브에 이미지 올리고 README에 삽입하기

          - 일반적으로 따로 웹사이트를 운영하지 않기 때문에 위에 작성한 이미지 삽입 방법은 사용하기 어렵다.

          - 이럴 때는 이미지를 깃허브 저장소에 올린 다음 그 경로를 README 파일에 지정하면 된다.

          2-3.1) Images 디렉토리 생성하기

                    - 깃허브 저장소에 직접 이미지를 올릴 수도 있지만, 커밋 관리 중인 파일들과 섞이지 않도록

                      별도의 디렉토리를 만들어 관리한다.

                    - 사용자 컴퓨터에 디렉터리 안에 필요한 이미지들을 모아둘 Images 디렉토리를 생성한다.

                      (어디에 있든지 상관없지만, 계속 이미지를 추가해 사용한다면 지역 저장소 안에 넣어두는 것이 관리가 편리함)

          2-3.2) 업로드하기

          2-3.3) README 파일에 이미지 삽입하기

      +) 다른 방법을 찾았다.

제 6장 깃허브로 협업하기

           - 깃허브는 자신이 커밋한 소스를 보여줄 수 있을 뿐만 아니라 다른 개발자들과 그 소스에 대한 여러 의견들을

             나눌 수 있는 공간이다.

           - 오픈 소스 프로젝트에 참여하면서 자신의 깃허브 활동을 풍부하게 만드는 방법을 알아본다.

           - 또한 깃허브 저장소를 사용해 개인 블로그를 작성하는 방법도 함께 살펴본다.

            1. 깃허브 프로필 관리하기

            2. README 파일 작성하기

            3. 오픈 소스 프로젝트에 기여하기

            4. 깃허브에 개인 블로그 만들기

1. 깃허브 프로필 관리하기

    - 깃허브에 커밋을 꾸준히 쌓아놓으면 자신이 성실하게 맡은 프로젝트를 관리하고 있다는 것을 보여줄 수 있다.

    - 깃허브 프로필을 보고 협업이나 일자리 제안을 받을 수도 있기 때문에 자신의 개발 경력을 잘 드러내는 것이 좋다.

    1-1. 프로필 작성하기

           - 'https://github.com/깃허브아이디'로 접속하면 해당 아이디 사용자의 프로필 사진을 비롯해서,

             저장소 목록과 커밋 현황 등 다양한 정보가 있는 화면이 나타난다.

	1) Profile: 프로필 정보를 입력하거나 수정한다.
	2) account: 사용자의 이름을 바꾸거나 계정을 삭제한다.
	3) account security: 비밀변호를 변경하거나, 이중 인증을 켤 수 있다.
	4) Security log:
	5) Security & analysis:
	6) Emails: 사용자 메일 주소를 추가 or 주 메일&백업 메일 주소를 지정할 수 있다.
	7) Notification: 깃허브에서 알림을 받을 때 어떤 방법을 사용할지 지정한다.
	8) Billing: 유료 계정으로 전환할 수 있다.
	9) SSH and GPG keys: SSH 키나 GPG 키를 입력할 수 있다.
	10) Blocked Users: 특정 사용자를 차단한다.
	11) Repositoires: 저장소를 관리한다. (필요하다면 저장소를 삭제할 수 있다)
	12) Organizations: 해당 계정이 속한 조직이 있을 때 따로 저장해두고 사용할 수 있다.
	13) Saved replies: 반복해 작성하는 댓글이 있을 경우 따로 저장해두고 사용할 수 있다.
	14) Applications: 깃허브 앱이나 깃허브 인증 관련 앱이 나타난다.
	15) Developer settings: 깃허브와 관련된 개발을 할 때, 앱을 등록하고 개발 관련 정보를                                            참고한다.

    1-2. contribution 살펴보기

           - contribution graph(컨트리뷰션 그래프)
              : 사용자가 1년 동안 깃허브에서 얼마나 활발하게 활동했는지 보여주는 곳이다.

             특징)

               - 작은 사각형 하나하나가 하루에 해당하고, contribution이 있는 날에는 사각형에 초록색이 칠해진다.

               - 초록색이 진할수록 그날 contribution이 많았다는 뜻이며

               - 사각형 위에 마우스를 올리면 날짜와 contribution 개수가 나타나고,

                 사각형을 클릭하면 그래프 아래에 선택한 날짜의 contribution 활동이 나열된다.

               - contribution은 개인이 작성한 소스 코드를 커밋하는 것과 오픈 소스 프로젝트에 기여하는 것 모두 포함된다.