Ch3. 그리디 greedy

1. 당장 좋은 것만 선택하는 그리디

    - 현재 상황에서 당장 좋은 것만을 골라 현재의 선택이 나중에 미칠 영향은 고려하지 않는 방법

    - 보통 코딩 테스트에서 출제되는 유형은 창의력, 즉 문제를 풀기 위한 최소한의 아이디어를 떠올릴 수 있는 능력을 요구한다.

      특정한 문제를 만났을 때, 그리디로 문제를 풀 수 있을지 파악할 수 있어야 한다.

   - 기준에 따라 좋은 것을 선택하는 알고리즘이기에 기준을 제시해주고, 정렬 알고리즘과 함께 짝을 이루어 출제된다.

      1-1. 예제 거스름돈

             - 문제

             - 소스 코드

             - 정당성
               : 가지고 있는 동전 중에서 큰 단위가 항상 작은 단위의 배수이므로 작은 단위의 동전들을 조합해 다른 해가 나올 수 X
 

                 때문에 화폐이 단위가 무작위로 주어졌을 때에 그리디 알고리즘으로 해결할 수 없다.

    

      1-2. 그리디 알고리즘의 정당성

             - 대부분의 문제는 그리디 알고리즘을 이용했을 때 '최적의 해'를 찾을 수 없는 가능성이 다분하다.

               따라서, 그리디 알고리즘으로 문제의 해법을 찾았을 때는 그 해법이 정당한지 검토할 수 있어야 한다.

               Tip. 그리디 -> 다이나믹, 그래프 알고리즘

 

2. 큰 수의 법칙

    - 문제

    - 문제 해결

       : 가장 큰 수와 두번째로 큰 수를 저장한다. 연속으로 더할 수 있는 횟수는 최대 K번이므로

         '가장 큰 수를 K번 더하고, 두 번째로 큰수를 한 번 더하는 연산'을 반복하면 된다.

    - 소스 코드 1(python, M이 10,000 이하일 때)

    - 소스 코드 2(python, M이 100억 이상일 때)

       : 반복되는 수열 first와 second가 더해질 때 특정한 수열 형태로 일정하게 반복해서 더해지는 특징이 있다.

         반복되는 수열의 길이는 (K+1)이고 M을 (K+1)로 나눈 몫이 수열이 반복되는 횟수가 된다.
         여기에 (K+1)*M은 first가 반복하는 횟수가 되고, M이 (K+1)로 나누어 떨어지지 않는 것을 고려했을 때,

         '가장 큰 수가 더해지는 횟수는 int(M/(K+1)) * K + M%(K+1)'

    - 소스 코드 3(c++, M이 100억 이상일 때)

 

3. 숫자 카드 게임

    - 문제

    - 문제 해결

       : 각 행마다 가장 작은 수를 찾은 뒤에 작은 수들 중에서 가장 큰 수를 찾는 것이다.

    - 소스 코드

 

4. 1이 될 때까지

    - 문제

    - 문제 해결

       : 주어진 n에 대하여 최대한 많이 나누기 연산을 수행하면 된다.

    - 소스 코드

Ch2. 코딩 테스트 개요16~20년 코테 기출 유형 분석

1. 최신 출제 경향과 준비 방향

    - IT 직군에서 코딩 테스트를 보는 대표적인 기업은 삼성전자, 카카오, 라인이 있다.

    - 보통 2~5시간 동안 8개 이하의 알고리즘 문제들을 풀도록 한다. (얼마나 정확하고, 빠른 알고리즘인지 순위를 매김)

         1-1. 코딩테스트는 문제 해결 능력을 확인하는 시험

                - 잘못된 편견
                 : 기업에서 주관하는 코딩 테스트는 매우 높은 사고력이나 어려운 알고리즘 기반의 지식을 요구하지 않는다.

                   따라서 코딩 테스트에는 주로 기초 알고리즘에 기반하는 문제가 출제된다.

                - 코딩 테스트 기출 유형 빈도수

                   simulation or BFS/DFS > greedy >> sort or dynamic programming > binary search or shortest path

                   (구현 or BFS/DFS > 그리디 > 정렬 or 다이나믹 > 이진 탐색 or 최단 경로)

 

        1-2. 기업별 문제 출제 경향

               - 카카오는 문자열을 처리하는 구현 문제와 다양한 케이스를 고려해야 안정적으로 만점을 받을 수 있는 문제들이,

                 삼성전자는 문제를 바르게 읽고, 예외 상황을 적절히 처리하는 방식으로 소스코드를 작성해야 하는 문제들이

                 출제되었다.

               - 보통 합격자는 문제의 평균 69%를 풀었으며, 불합격자는 평균 38%의 문제를 풀었다고 한다.

 

2. 연도별 코딩 테스트 유형 분석

   - 알고리즘 대회 수상 경험이 있는 응시자는 삼성전자, 카카오, 라인 모두 합격권에 있다.

     (국제 알고리즘 대회 기준, 코드포스 블루 이상, ACM-IMPC 서울 지역 대회 본선에 안정적으로 진출할 수 있는 수준)

  - 공채를 기준으로 설명하지만, 인턴 채용의 경우에도 비슷한 수준과 유형의 문제로 출제된다.

 

        2-1. 2020년

              - 삼성전자(완전 탐색, 시뮬레이션, DFS/BFS)
                : 완전 탐색 유형에서 시뮬레이션 유형으로 바뀌고 있는 추세이다. 둘 다 요구하는 문제가 출제되고 있으
므로
                  사소한 조건을 고려하면서, 약간 응용된 BFS/DFS 소스 코드를 작성할 수 있는 수준으로 공부하자.

              - 라인(시뮬레이션, 문자열, 자료구조 [4/6])

 

        2-2. 2019년

              - 삼성전자(완전 탐색, 시뮬레이션, DFS/BFS)
                 : 기출문제가 잘 알려져 좋은 성적을 받고 있기 때문에 2문제를 맞혀야 통과할 수 있었다.

              - 카카오(1차:시뮬레이션, 이진 탐색, 자료 구조 중 7문제 [3/7]예상)(2차:추천 시스템 개발 1 문제)

                 : REST API, JSON 등의 원리에 대해 이해하고 있어야 풀 수 있는 개발형 코딩 테스트가 출제되었다. -> 부록 C

              - 라인(상:탐색,시뮬레이션,문자열,다이나믹 프로그래밍 [3/5]예상)(하:자료구조,완전탐색,시뮬레이션 [4/6])

 

        2-3. 2018년

              - 삼성전자(완전 탐색, 시뮬레이션, DFS/BFS)

              - 카카오(1차:시뮬레이션, 그리디, 자료 구조 중 7문제 [3/7]예상)(2차:시뮬레이션 개발 1 문제)

                 : REST API, JSON 등의 원리에 대해 이해하고 있어야 풀 수 있는 개발형 코딩 테스트가 출제되었다. -> 부록 C

              - 라인(상:탐색,시뮬레이션,그리디,다이나믹 프로그래밍 [2/5])(하:그리디,탐색,시뮬레이션,문자열 [2/4]예상)

 

        2-4. 2017년

              - 삼성전자(완전 탐색, 시뮬레이션, DFS/BFS)

              - 카카오(1차:시뮬레이션, 그리디, 문자열 중 7문제 [4/7]예상)(2차:클롤러 개발 1 문제)

                            (3차:시뮬레이션, 그리디, 문자열 중 5문제 [3/5]예상)

                 : REST API, JSON 등의 원리에 대해 이해하고 있어야 풀 수 있는 개발형 코딩 테스트가 출제되었다. -> 부록 C

              - 라인(상:탐색,시뮬레이션,그리디 [3/5])(하:그리디,시뮬레이션,문자열 [2/5]예상)

 

        2-5. 2016년(이하 생략)

 

3. 성공적인 취업을 위한 가이드

    3-1. 채용 프로세스
           : [서류 검토] -> [코딩 테스트] -> [기술 면접] -> [인성 면접]

            3-1.1) 대기업과 스타트업의 채용 프로세스 비교

                   - 대기업은 코딩 테스트에, 스타트업은 기술 면접에 더 비중을 둔다.

            3-1.2) 알고리즘 문제만 잘 풀면 될까?

                   - 알고리즘 외에도 컴퓨터 구조, 운영체제 등 컴퓨터 공학 전반에 대한 다양한 지식에 관해 공부해야 한다.

                   - 인성 면접에 대한 질의 응답도 준비해야 한다.

 

    3-2. 기술 면접의 대표 유형

           : 알고리즘 문제 풀이와 질의응답/ 포트폴리오 질의응답/ 컴퓨터공학 지식 질의응답 유형으로 진행한다.

           : 본질은 업무에서 요구하는 만큼의 컴퓨터 이론 지식을 갖추고 있으며, 필요한 관련 프로젝트에 경험이 있고,

             알고 있는 내용을 논리 정연하게 설명할 수 있으면 된다.

            3-2).1) 알고리즘 문제 풀이와 질의응답 형식

            3-2).2) 포트폴리오 질의응답 형식

            3-2).3) 컴퓨터 공학 지식 질의응답 형식

             // 추후에 p73

 

    3-3. 기술 면접의 준비

           : 기업에서 원하는 직원은 문제를 풀어 정답 판정을 받는 지원자가 아니라, 자신이 어떤 방법으로 문제에 접근하여

             어떠한 알고리즘을 사용했는지를 논리 정연하게 설명할 수 있는 지원자를 원한다.

             -> 평소 기술 블로그나 깃허브 저장소를 운영하며 능력을 키워갈 수 있다.

            3-3).1) 깃허브 사용하기

            3-3).2) 기술 면접의 어려움

            3-3).3) 인성 면접 질문 리스트
                        Q1.

                        Q2.

                        Q3.

 

    3-4. 알고리즘 문제 사이트
           : 외국계 기업에 취업하려는 취업 준비생이나 국제 알고리즘 대회를 준비하는 학생은 아래 사이트를 추천한다.

             (영어 문제를 해석하는 능력 또한 필요하다)

             3-4).1) 코드 시그널

             3-4).2) 코드 포스

             3-4).3) 정올

 

    3-5. 커뮤니티 사이트

             3-4).1) 생활코딩

             3-4).2) BOJ Slack

Ch1. 코딩 테스트 개요

1. 코딩테스트 개념과 배경

    - 온라인 저지 사이트(Online Judge)

      : 프로그래밍 대회나 코딩 테스트에서 나올 법한 문제를 시험해보는 온라인 시스템이다.

          1-1. 코딩테스트의 유형

                1) 온라인 코딩 테스트

                    : 온라인 코딩 테스트는 타인과 문제 풀이를 공유하지 않는 선에서 인터넷 검색을 허용하는 경우가 많지만, 

                      명확한 규정을 안내 사항으로 명시하고 있으니, 규칙과 주의 사항을 반드시 확인해야 한다.

                      온라인 IDE를 이용하는 경우 소스코드가 공개 상태로 온라인에 배포되어 부정행위로 간주될 수 있으므로 주의!!

                      (Ideone과 같은 온라인 IDE 서비스에서 소스 코드 옵션이 public일 경우 구글 등의 검색 엔진에 노출되므로!)


                2) 오프라인 코딩 테스트 

                    : 응시자가 많이 좁혀진 상태이므로 코딩 테스트를 보고 별도의 면접실로 안내되어 화이트보드 혹은 종이와 함께

                      자신이 문제를 해결한 과정 등에 대해서 설명하기도 한다.

 

         1-2. 코딩 테스트 준비를 돕는 다양한 서비스

                1) 코드업

                    : [문제] - [문제집]에서 [기초 100제]를 꼭 풀어보고 백준 온라인 저지로 넘어가기

                2) 백준 온라인 저지

                    : 알고리즘 분류 태그와 난이도를 부여하는 크롬의 확장 프로그램 solved.ac를 설치하기

                      [문제] - [알고리즘 분류]으로 이동하면 유형별 알고리즘을 풀 수 있는데, 책의 진도와 맞게 풀기

                      책을 완독한 이후에 SW 역량 테스트 문제를 풀기

                3) 프로그래머스

                   : 카카오 공채 문제를 모두 제공하는 사이트이다.

                     책을 통해서 기초 개념을 잡고, 추가로 프로그래머스에서 문제를 풀기

                4) SW Expert Academy

                   : 삼성에서 '상시 SW 역량테스트' 제도를 운영하고 있는데, A형을 응모해서 실력을 확인하길 바란다.

 

        1-3. 어떤 언어가 코딩 테스트에 유리할까?

              -  가장 유리한 언어는 Python과 C++이다.

 

2. 실습 환경 구축하기

   - 일반적인 코딩 테스트는 문제마다 소스코드를 1개만 제출하므로 굳이 별도의 개발 환경을 구축하지 않아도 된다.

     따라서 온라인 IDE를 사용하는 게 좋다.

 

        2-1. 온라인 개발 환경

              - 리플릿, 파이썬 튜터, 온라인 GDB이 있다.

나는 온라인 IDE로 리플릿을 선택했다.

 

        2-2. 오프라인 개발 환경

              - 파이참, 주피버 노트북, 비주얼 스튜디오 코드 등이 있다.

혹시 몰라 오프라인으로 파이참을 설치했다.
Run은 되는데..
뭐가 문제인지.. Python console은 안 된다ㅠㅜ 검색을 해도 잘 안 나온다ㅠ

일단 갈 길이 멀기 때문에 이렇게 만족하고 다음 장으로 넘어간다!

 

3. 복잡도

        - 복잡도의 종류

          1) 시간 복잡도: 알고리즘을 위해 필요한 연산의 횟수

          2) 공간 복잡도: 알고리즘을 위해 필요한 메모리의 양

          +) 실제로 메모리를 더 많이 사용해 시간을 비약적으로 줄이는 방법으로 메모이제이션(memorization) 기법이 있는데
              이 내용은 8장에서 다룬다.

 

        3-1. 시간 복잡도

              - 시간 제한이 있다. (1~5초)
                 : 작성한 프로그램이 모든 입력을 받아 이를 처리하고 실행 결과를 출력하는데 걸리는 시간

              - 빅오(Big-O) 표기법을 사용한다.

                 : 가장 빠르게 증가하는 항만을 고려하는 표기법 // 연산의 횟수에 focus

                    - 시간 복잡도는 언제나 최악의 경우를 우선적으로 고려해야 한다. (차수가 작은 항들을 완전히 무시하지 말 것!)

                 [연산]: 프로그래밍 언어에서 지원하는 사칙 연산, 비교 연산 등의 기본 연산을 의미

              - 일반적으로 CPU 기반의 개인 컴퓨터나 채점용 컴퓨터에서는 연산 횟수가 10억을 넘어가면 C 언어를 기준으로
                통상 1초 이상의 시간이 소요된다.

                따라서 능숙한 개발자들은 문제의 조건을 확인한 뒤에 사용할 수 있는 알고리즘을 좁혀 나간다.

 

 

        3-2. 공간 복잡도

              - 메모리 제한이 있다. (128 ~ 512MB)
                 int arr[1000] : 4KB, int arr[1000000] : 4MB, int arr[2000][2000] : 16MB

              - 빅오(Big-O) 표기법을 사용한다.

 

        3-3. 시간과 메모리 측정

              - 파이썬에서는 프로그램 수행과 메모리 사용량을 측정할 수 있다. 자신이 설계한 알고리즘의 성능을 실제로 확인하며

                시간 측정 라이브러리를 사용해보는 습관을 기르는 것이 좋다.

                (ex. 선택 정렬과 기본 정렬 라이브러리 수행 시간 비교 가능)

코딩 테스트를 준비하다가 확실하게 회사의 산업에 따라서 유리한 언어가 있다는 생각이 들었다.

삼성 기출 문제만 열심히 풀던 내가 라인이나 카카오 온라인 코딩 테스트를 접했을 때의 충격이란...!
(문자열만 나오면 C++을 사랑하는 저는 웁니다..ㅠㅜ)

 

그래서 미루고 미루다 Python에 대해서 공부해야겠다는 다짐을 했고, 

이것이 취업을 위한 코딩 테스트다! 라는 책을 보고 python과 추가로 있는 c++ 파일까지 보면서 알고리즘을 뽀개보려고 한다.

(진짜 대학생 때도 한빛미디어에서 나온 책들의 덕을 톡톡히 봤는데 진짜 사랑합니다)

 

책에서 추천하는 단계가 있다.   

1. 초급 단계     

      1) 파이썬 문법 공부(부록 A 이용)

      2) 코드업에서 쉬운 문제부터 200문제 가량 풀기

      3) 유형별 알고리즘 이론(2부)과 기출문제(3부)학습하기

      4) 백준 온라인 저지에서 유형별 문제 5개 이상 풀기

 

   2. 중급 단계

      5) 책 완독 후 백준 온라인 저지에서 삼성 SW 역량테스트 문제집 풀기

      6) 프로그래머스에서 카카오 문제집 풀기

      7) 책의 2부와 3부를 중심으로 주요 알고리즘 유형 복습하기

 

나는 5단계에 있는 삼성 SW 역량테스트 문제를 풀었고, DFS 또는 BFS로 푼 다른 풀이와 좋은 풀이를 공부한 상태이다.
(이것도 차근차근히 올려야하는데.. 이제 깃허브도 알고, 블로그에 기록도 하니까 잘 올려야지!!)
파이썬은 처음 배우는 거니까 1단계부터 빠르게 훑어볼 생각이다ㅎㅎ

 

필자의 직강 동영상을 볼 수 있는 링크이다.

www.youtube.com/playlist?list=PLRx0vPvlEmdBFBFOoK649FlEMouHISo8N

 

필자에게 질문을 남기거나 코드를 볼 수 있는 github이다.

github.com/ndb796

 

현재 책에 나온 부록 A(파이썬 문법 공부)를 한 번 훑었고, 1장부터 공부하러 고고!

 

 

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 실행 및 [폴더 열기] 선택
4장 실습을 위해 만들어둔 loc-git을 사용한다. [폴더 선택] 클릭!
선택된 폴더 안에 포함된 파일의 목록이 나타나고, 해당 파일을 누르면 편집 화면에 나타난다.

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

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

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

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

 

더 이상 작업 폴더를 사용하지 않는다면 [File -> Close Folder]를 클릭!

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

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

나는 vs2017 프로젝트가 저장되는 source/repos 폴더에 mysources 폴더를 생성했다.
visual studio code에 my resources 폴더 열기
폴더 아래는 비어있다.
왼쪽 사이드 아이콘을 클릭한 후, [Initialize repository]를 클릭
깃이 초기화되면서 현재 폴더에 저장소가 만들어진다.

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

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

 

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

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

새 문서 만들기 (여기선 README 파일) 커서를 올려놓아야 아이콘들이 보임에 주의!
.md 확장자까지 꼭 입력하기
마크 다운 문법을 사용해서 간단한 내용을 입력하고 [Ctrl + S]를 눌러 저장하기

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

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

 

만든 파일을 스테이지에 올리기
스테이지에 있는 파일 위로 마우스 커서를 올리면 '인덱스 추가됨' 메시지가 표시된다.

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

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

 

commit을 위해 커밋 메시지를 입력하고 창 위에 [체크]아이콘을 클릭 or [Ctrl + Enter]를 클릭 / Changes에 있던 파일이 사라진다.

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

책에는 스테이징과 커밋 취소를 알려주는데.. 흠 좀 바뀐 것 같다!

 

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

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

README 파일은 어차피 만들어 놓았으니 뺐다

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

 

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

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

[View] - [Terminal] 클릭
작업 폴더의 경로를 기본 경로로 설정하여 터미널 창이 열린다.
git remote add origin 복사한 원격 저장소 주소 입력 후 [Enter] 클릭

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

 

     7-5. 깃허브로 push하기

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

[...] -> [Pull, Push] -> [다음으로 push하기] -> 앞서 연결한 원격 저장소로 commit을 push할 원격 저장소를 선택!
위 파란선이 끝나면 push가 끝난다. 왼쪽 아이콘이나 아래 상태 표시줄을 보면 변화를 알 수 있다.
업데이트된 파일을 확인할 수 있다!

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

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

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

원하는 내용을 추가한 후 저장 -> 'M' 파일이 수정되었다는 표시가 뜬다.
파일 이름을 클릭하면 어느 부분이 추가/삭제되었는지 한눈에 확인할 수 있도록 두 개의 창이 뜬다.

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

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

 

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

 

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

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

수정했기 때문에 소스 제어 아이콘 1이 뜨고, 소스 제어 창에 커밋 메시지를 입력한 후 [체크] 또는 [Ctrl+Enter] 클릭
자동 스테이징할 것인지 묻는 창이 나타나면 [Yes]를 클릭
다시 깃허브로 push하기!! [...] -> [Pull, Push] -> [Push to ...] -> 원격 저장소 선택
수정한 파일의 내용이 업데이트된 것을 알 수 있다.

 

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

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

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

원격 저장소의 README 파일 수정 -> [commit changes] 클릭
소스 제어창에서 [...] -> [Pull, Push] -> [Pull from ...] 클릭
연결된 원격 저장소를 선택한다
원격 저장소에서 어떤 Branch를 가져올 것인지 선택한다 (여기선 origin/master)
수정했던 내용이 업데이트된 것을 볼 수 있다

 

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

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

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 사용하기

         

[New repository] 클릭하기
repository name 필드에 계정.github.io라고 입력 및 해당 옵션을 선택한 후 [create repository] 클릭
만들어진 저장소에서 [Upload files] 클릭

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

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

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

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

 

파일 전송이 끝나면 커밋 메시지를 작성한 후 [commit changes] 클릭
[Settings] 목록을 클릭
사이트가 만들어졌다는 메시지와 함께 홈페이지 주소가 나타난다.
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋWoW!!!

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

          - Jekyll Theme

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

              수정해서 사용할 수 있다.

 

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

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

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

                 

깃허브 사이트에서 소스를 제공하므로 검색하기

 

검색 결과에 표시된 오픈 소스 설명에서 'blog'나 'theme'가 있으면 Jekyll 테마일 가능성이 높다. demo link도 있다!
demo 사이트에 접속해본 화면

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

jekyllthemes.org/에 접속해서 테마의 디자인을 한눈에 볼 수 있다.

jekyllthemes.org/

 

Jekyll Themes

 

jekyllthemes.org

download 하여 소스 파일을 내려받으면 된다.

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

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

 

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

저자가 실습으로 지정한 jekyll 테마 저장소에 들어가 fork하기
fork를 하게 되면 katherine/jekyll-now로 복제된다.

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

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

그전에 이미 존재하는 저장소를 수정한다.
Repository name 항목에  '계정.github.io'로 작성한 후 [Rename]을 클릭한다.
환경을 설정하기 위해 저장소에 있는 파일 목록 중 _config.yml 파일을 클릭한다.
우리 환경에 맞게 설정해야 하기 때문에 Edit 아이콘을 클릭
주석들을 잘 읽어보고 수정해야할 부분들은 꼭 수정한 후 Commit 한다.

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

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

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

기본 포스트 파일인 '2014-3-3-Hello-World.md'파일 클릭
포스트를 작성할 때에도 기본적으로 지켜야할 형식이 있으므로 파일이 어떻게 작성되었는지 본다.
--- ... --- 부분은 모든 포스트에 들어가야 할 내용이다. 새 포스트를 위해 복사한다.
_posts 폴더로 돌아와서 [Create new file] 클릭
오늘 날짜, 파일 이름, .md에 맞춰 파일 이름 입력/  --- ... ---  title 수정/ 원하는 내용을 입력 => [commit new file] 클릭
파일이 생성되었다
https://katherine4191.github.io/에도 post가 올라왔다.

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

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

저장소의 images 디렉토리에 필요한 파일을 올리고 커밋한다.

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

이미지 링크 생성
post 내용 수정
!!!!!!!!!!!!!!!! YEAH !!!!!!!!!!

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

오오 성공했다..!! 흠 전에는 그럼 images가 아니라 Images라 틀렸나.. 다시 봐야겠다!

+ Recent posts