개발자 커리어 컨퍼런스를 듣고, 자기가 가지고 있는 지식을 공유하는 것 또한 자신이 아는 것을 정리하는 데 도움이 되는 하나의 방법이라는 이야기를 듣고, 회사내 사내 강사를 신청하였습니다.

부제 : 세중 github Copy & Paste 하기

준비물

노트북
wifi 속도를 위해 미리 download 받아 오기!
- 노트북에 ATOM download(145mb) : 링크
- 노트북에 git download(38.7mb) : 링크
git 에 사용할 계정아이디 고민하기 : 링크
자신에 알맞는 지킬 테마 고민하기 : 링크
(강의시 획일화하기 위해 세중 github 를 fork 받을 예정입니다.)

1일차

시작하며(20분)
git 설명(40~1시간)
github 계정 생성(5분)
jekyll 설명(10분)
jekyll thema 설명(5분), 어차피 세중 github fork!!, star 주는법!

2일차

Atom 설치(5분)
Atom 설명(20분)

git 설치(10분) 설치후

C:\Users\bymin>git config --global user.email 'useremail'
C:\Users\bymin>git config --global user.name 'username'

jekyll thema fork(20~30분) : 세중 github 를 fork

3일차

jekll markdown 설명(20분)
git commit, push(git config username 등등 설정하기) 20~30분
git blog 완성 20~30분
Google Analytics 계정 생성 및 스크립트 발급 10분 (회원가입)

4일차

최종적으로 자신의 github blog를 posting 하는 방법 설명 (10~20분)
Google Analytics 유입 확인 및 설명 (10~20분)
Google Adsense 생성 및 스크립트 설치 등록 (10~20분)

Git 이 뭔가요?

기트, 깃 이이라고 부름. 분산 형상 관리 시스템.

리눅스 개발 커뮤니티에서 리눅스커널 프로젝트를 위해 자체 개발하며 시작됨
- 리눅스의 아버지라 불리는 리누스 토발즈가 만든 완벽한 분산 형상 관리 시스템
라이선스: GPLv2, LGPL2.1
- GPLv2 : GNU General Public License
  - 컴퓨터 프로그램을 어떤 목적으로든지 사용할 수 있다
  - 컴퓨터 프로그램의 복사를 언제나 프로그램의 코드와 함께 판매 또는 무료로 배포할 수 있다
  - 컴퓨터 프로그램의 코드를 용도에 따라 결정할 수 있다
  - 변경된 컴퓨터 프로그램 역시 프로그램의 코드와 함께 자유로이 배포할 수 있다
- LGPL2.1 : Lesser General Public License
  - LGPL로 배포되는 library를 수정하는 경우 → 이를 다시 LGPL로 공개
  - LGPL library를 바탕으로 수정된 library를 만들 경우
    - 파일 수정 시 수정했다는 사실과 수정일자를 명시
    - library 전체를 다시 LGPL로 공개
    - library에 포함된 모든 함수는 프로그램의 도움 없이도 수행 가능해야 함.
스냅샷 스타일의 버전 정보 저장
무결성 검사는 SHA-1 해시 체크섬
파일은 다음 3가지 상태 중 하나
- Committed: 로컬DB에 저장됨
- Modified: 수정파일이 로컬DB에 커밋되지 않음
- Staged: 수정파일이 곧 커밋예정
프로젝트 폴더의 3가지 단계
- Working Driectory: 파일 수정 공간
- Staging Area: 곧 커밋예정 정보 저장
- .git directory (Repository): 영구적 스냅샷 저장

목표

빠른 속도
단순한 구조
비선형적인 개발 (수천 개의 동시다발 브랜치)
완벽한 분산
Linux 커널 같은 대형 프로젝트에도 유용할 것 (속도, 데이터 크기 측면)

장점

로컬 저장소를 보유하는 분산 환경이 가능하기 때문에 offline 개발이 많다면 유리합니다.
git 기반의 Open Source 개발의 참여가 가능합니다.
Github를 사용 할 수 있습니다.

단점

다른 형상관리 시스템에 비해 복잡하기 때문에 진입 장벽이 높습니다.

1일차

github 계정 생성하기

GitHub은 가장 큰 Git 저장소 호스트입니다.
수백만 개발자가 모여서 수백만 프로젝트를 수행하는 중추기도 합니다.
Git 저장소를 GitHub에 만들어 운영하는 비율이 높습니다.
많은 오픈 소스 프로젝트는 GitHub을 이용해서 Git 호스팅, 이슈 트래킹, 코드 리뷰, 등등의 일을 합니다.
Git을 많이 사용하다 보면 Git 프로젝트 자체에는 참여하지 않더라도 GitHub을 꼭 써야 하는 상황이 오거나 스스로 쓰고 싶어질 것입니다.

Github 란 무엇인가?

기트허브, 깃허브, 깃헙 이라고 합니다.

Git 웹호스팅 중 하나입니다.
소스코드 호스팅서비스의 일종입니다.
공개용은 무료, 비공개용은 유료.
버전관리 + 협업을 위한 공간.
소셜 코딩 공간.
Git 기반 개발자 네트워크.
Git 기반 오픈소스 SNS.

소스코드 호스팅서비스?

.io 도메인

국가코드 최상위도메인(ccTLD)의 하나
영국령 인도양 지역(Indian Ocean Territory)에 할당되어 있습니다.
1997년 도입되었으며, 웹앱, 컴퓨터과학 분야에서 “입출력(Input/Output))”이라는 의미로 선호되고 있습니다.
2013년, GitHub 프로젝트 페이지 도메인을 username.github.io 로 제공(웹호스팅)하게되었습니다.

소셜 코딩 공간(?) – (퍼블리셔 개발자를 위한 참고 사항)

그렇다면 기획자는? – (기획자 참고 사항)

훌륭한 기획자가 되려면 먼저 뛰어난 블로거가 되라

IT트렌드에 관심을 갖게 됩니다.
글을 쓰며 자연스레 공부가 됩니다.
글쓰기 실력이 향상됩니다.
CSS와 개발을 이해할 수 있습니다.
기획자에게 블로그는 최고의 테스트베드 입니다.
취업 등의 커리어 관리에 도움이 됩니다.
- 블로그로 본인의 전문성도 높일 수 있는데다 좋은 곳으로 이직할 기회도 생길 수 있습니다.
꼭 git 이 아니더라도, 좋은 기획자가 되기 위해 블로그를 운영!!!?
참고주소

결론

그냥 어렵게 생각하지 않고, git이라는 특정 명령어를 사용하는 github 블로그라고 생각합시다.

jekyll 설명

지킬(Jekyll)은 개발자/연구자들이 가장 좋아하는 브랜드(?) 중 하나인 깃허브(Github)에서 개발한 사이트 개발 툴입니다. 지킬은 정적 사이트이며, 정적 사이트의 단점과 장점은 다음과 같습니다.

Static website의 장점

개발하기가 쉽고 개발 비용도 쌉니다.
용량이 적어 호스트 비용이 쌉니다.

Static website의 단점

사이트를 업데이트 하기 위해선 전문 지식이 필요합니다.
일반 유저가 접근하기 쉽지 않습니다.
컨텐츠가 고립될 수 있습니다.

지킬은 정적 사이트이기 때문에 PHP 언어 등을 이용한 서버 소프트웨어 없이
HTML, CSS 등의 정적파일들 만으로 사용자의 컴퓨터에서 사이트 생성이 가능합니다. 따라서 매우 빠르고, 가볍습니다.

특히 지킬은 Markdown이라는 온라인 문서 편집 표준 양식을 따르는데,
위키, 깃허브 ReadMe 파일 등을 작성하듯 글을 작성할 수 있습니다. 따라서 Markdown에 익숙한 사용자라면 기존 블로그보다 오히려 글 작성에 편안함을 느낄 수도 있으며, 반대로, 지킬의 Markdown 문법을 읽혀두면, 위키 같은 마크다운 문법을 사용하는 서비스에서도 손쉽게 사용할 수 있습니다.

지킬은 일반 블로그들 처럼 웹에디터에서 글을 작성하는 방식이 아닌,
Markdown과 같은 정적파일들을 미리 생성한 후 업로드(또는 서브밋! commit, push….)하는 방식을 취하기 때문에, 일반인들에겐 매번 코드를 서브밋해야하는 것이 번거롭고 어렵게 느껴질 수 있겠지만,
오히려 개발자/연구자들에겐 이것이 더욱 재미있을 수 있습니다.

jekyll thema 선택

지킬 테마 사이트 선택
해당 사이트에서 자신이 원하는 테마를 fork 받아 사용하면됩니다.

2일차

Atom?

아톰은 코딩, 디버그, 컴파일, 배포 등을 모두 수행하는
통합개발툴(IDE, Integrated Development Environment)은 아닙니다.
오직 codding만을 위한 text editor 입니다.

GitHub에서 제작하였으며,
Sublime Text처럼 패키지들을 개별적으로 설치하거나 삭제할 수 있고,
심지어 Atom의 코어기능도 패키지들로 구성되어 있어 이들에 대해서도 on/off할 수 있는 등,
커스터마이징의 자유도가 매우 높습니다.
‘이런 기능이 있으면 좋겠다’
싶은 것들은 검색만 잘 하면 얼추 비슷한 패키지를 찾을 수 있을 만큼 패키지 제작 참여가
활발히 이뤄지고 있습니다.

다운로드

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

아쉬운점

오픈 소스이고, 플러그인으로 기능을 쉽게 확장할 수 있으며, 윈도우즈, 리눅스, macOS를 모두 지원하며, HTML, CSS, JavaScript와 같은 웹 기술로 화면을 구현했기 때문에 웹 페이지를 편집하듯이 UI를 제어할 수 있는 특징이 있습니다. 실제로도 웹 관련 스크립트 언어를 작성할 때 많이 사용됩니다.

텍스트 에디터치고는 실행 속도가 다소 느리며, 소스 파일의 용량이 좀 크다 싶으면 Sublime Text에 비해 자주 뻗어버리는 문제가 있긴합니다.
이 때문인지 최근에는 Visual Studio Code로 넘어가는 경우도 많아졌습니다.

깃허브에서 만든게 ATOM 이라는 단순한 이유 때문에 이걸 사용합니다.

Atom 설치 후 package 추가 방법

단축키 모음 사이트
맥과 윈도우의 차이는 ctrl 키와 command 키 이 두개의 차이라고 생각하고,
나머지는 같다라고 생각하고 사용하면 편합니다.
대부분은 Command Palette 이라고 하는 기능을 써서 불러와서 사용하므로,
커맨드패널!! 매우 유용한 명령어. [컨트롤(커맨드) + 쉬프트 + P] !!

package 설치하는 법

단축키

윈도우의 경우 : 컨트롤 + 쉬프트 + P -> 입력후 install packages 입력후 엔터
맥의 경우 : 커맨드 + 쉬프트 + P -> 입력후 install packages 입력후 엔터

직접 경로

File > Settings > install

github 을 위해 설치해야하는 최소 패키지

꼭 필요한 것은 아니며, 기본 설정으로도 충분히 처리 가능함.

- git-plus  : 우측 마우스 버튼을 눌러 메뉴 호출시 git 관련 메시지 확인가능.
- git-clone  : github의 내용을 download 받음.

jekyll

평범한 텍스트 파일을 정적 웹사이트 또는 블로그로 변신!
간단한 지킬에 대한 소개 사이트

Markdown Preview package —

This is a link

Show the rendered HTML markdown to the right of the current editor using ctrl-shift-m.

Ctrl-Shift-M
현재 편집기의 오른쪽에 렌더링 된 HTML markdown을 표시

atom 이 설치될때 자동으로 같이 설치되어있습니다. atom 이라는 작은 코어에 얼마만큼 여러가지 플로그인(패키지)가 붙어있는지 설명가능한 부분입니다.

파일명으로 찾아 열기
Ctrl+T 및 Ctrl+B를 누르면 나오는 Fuzzy Finder

3일차

마크다운(Markdown) 사용법

마크다운 문법에 대해 간략하게 설명.

제목(Heading)

문서를 작성할 때 가장 기본이 되는 제목은 HTML의 <h1>~<h6> 태그와 유사합니다.
#의 개수에 따라 글자의 크기가 달라집니다. #은 <h1>, ###은 <h3> ######은 <h6>

Heading

인용(Blockquotes) — 인용은 >를 넣어서 작성합니다. 인용안에 인용은 » 를 넣어 작성합니다.

> Lorem ipsum dolor sit amet, consectetur adipisicing elit
>> Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit

리스트

* 또는 -를 사용해서 순서가 없는 리스트를 작성할 수 있습니다.
tab 또는 2칸 띄어쓰기를 통해 중첩된 항목을 작성할 수 있습니다.

* Frontend
  * HTML
  * CSS
  * JavaScript
    * Vue.js

- Frondend
  - HTML
  - CSS
  - JavaScript
    - Vue.js

Frontend
- HTML
- CSS
- JavaScript
  - Vue.js
Frondend
- HTML
- CSS
- JavaScript
  - Vue.js

순서가 있는 리스트(Ordered List) —

HTML
CSS
JavaScript
* * *
HTML
CSS
JavaScript
* * *
Frontend
HTML
CSS
JavaScript
        1. Vue.js
Backend

HTML
CSS
JavaScript
HTML
CSS
JavaScript
Frontend
1. HTML
2. CSS
3. JavaScript
  1. Vue.js

Backend

수평선(Horizontal Rules) —

문단과 문단 사이를 나눌 때 등 사용되는 수평선은 HTML의 <hr />과 같이 동작합니다.

* * *
***
*****
- - -

강조(Emphasis)

HTML의 <em>과 같은 동작을 하는 강조는 *, _가 있고 <strong>은 **와 __를 사용합니다.
취소선은 ~~을 사용합니다.

*강조*한 텍스트  
__강조__한 텍스트  
**강조**한 텍스트  
~~취소~~한 텍스트

강조한 텍스트
__강조__한 텍스트
강조한 텍스트
취소한 텍스트

이미지 삽입(Images)

이미지는 역시 HTML의 태그와 동일하게 작동합니다. 대체 택스트를 삽입할 수 있으며, 링크 또는 로컬의 이미지파일을 연결할 수 있습니다.

![대체 텍스트](/경로/example.jpg)  
![megacat](https://octodex.github.com/images/megacat-2.png)
<img src="https://octodex.github.com/images/megacat-2.png" width="200px">

대체 텍스트

작업 목록

- [x] 완료 아이템
- [ ] 아직 미완료 아이템

완료 아이템
아직 미완료 아이템

이모티콘

www.emoji-cheat-sheet.com 참조
:+1: :tada: :octocat:

www.emoji-cheat-sheet.com 참조
:+1: :tada: :octocat:

Tables 삽입

hellow

world

| test | Test |
| ---- : ------- |
| hellow | world |

| Left-Aligned  | Center Aligned  | Right Aligned |
| :------------ |:---------------:| -----:|
| col 3 is      | some wordy text | $1600 |
| col 2 is      | centered        |   $12 |
| zebra stripes | are neat        |    $1 |

위와같은 기본적인 마크다운 문법을 알고 있으면, 기본적인 기능은 끝났다고 보여집니다.

atom에서 git사용기

git plus설치합니다. —

atom 프로그램을 실행한다.
file → settings → install → install packages 에서 ‘git plus’를 검색합니다.
git plus를 설치합니다.
사용 방법
ctrl+shift+h 를 누르면 git bash처럼 명령어를 칠수 있습니다.
(마우스 우측 버튼을 누르고 git 명령어를 사용할 수 있습니다.)

명령어 add or commit를 누르면 오른쪽에 새로운 창이 뜨면서 add시킨 파일에 관해 summary할 수 있는 부분이 나옵니다. summary 작성 후 ctrl+s 하면, 해당 메시지가 자동으로 저장됩니다. github에서 commit시키는 것과 같습니다. 명령어 push를 누릅니다. push가 성공적으로 이루어지면 페이지 하단에 어디에 저장이 되었는지 확인 됩니다.

Jekyll 에 대한 구조 설명

등장 배경

웹 사이트의 발전: static -> dynamic
static
- DB 통신 없이 html, css 등의 정적 파일의 text를 바로 전달.
- 단순해서 빠르지만 자체 기능이 부족하고, 콘텐츠 수정이 힘듭니다.
dynamic
- DB와 연동하여 댓글, 좋아요 등 다양한 기능이 가능
- 콘텐츠 수정, 추가가 용이
개인 블로그나 간단한 사이트의 경우 필요로 하는 기능이 많지 않고, 대표적인 추가 기능들(댓글, form, 글 검색 등)이 각각 서비스화되면서(disqus, wufoo, typeform, google 등등) 정적 사이트로 블로그를 만들더라도 원하는 대부분의 기능을 충족할 수 있게 됩니다.
Jekyll 창시자가 GitHub의 창업자이자 전 CEO인 Tom Preston-Werner 라서 GitHub에서 호스팅도 제공하고 GitHub Pages에서도 자주 사용되는 등의 연결고리가 있음 (현재는 Parker Moore(GitHub 직원)가 리딩)
Jekyll은 ruby 언어 기반이지만 엔진을 커스텀해서 사용할 것이 아니라면 루비 문법을 알 필요는 없으며, 웹디자인에 관심이 있다면, 기본문법 정도만 알면 무리없이 사용 가능.

_config.yml — Jekyll내의 모든 설정은 _config.yml을 통해서 관리합니다.
환경설정을 관리한다고 생각하시면 됩니다. 선택한 테마에서 데모를 위해 설정되어 있는 내용을 블로그를 위해 별도의 추가 수정을 하시면됩니다.

링크를 위한 소셜아이콘의 추가와 간단한 문구가 담긴 Footer를 위해 footer.html를 아래와 같이 수정합니다.

3일차 마지막 시간에는 미리 가입하여 스크립트를 BLOG에 삽입.

구글 애널리틱스에 가입합니다 https://analytics.google.com/ (TIP: 회사에서 쓸 용도라면 회사 개인 메일계정 말고, ‘smartstudy@smartstudy.com’처럼 회사 공식 계정으로 가입하시기 바랍니다. 소유권 이전이 되지 않는다는 설이 있기 때문입니다.)
가입하고 새 컨테이너를 만듭니다. 설치하면 바로 ‘추적 코드’가 나오는데, 이는 관리 > 추적 정보 > 추적 코드에서도 다시 볼 수 있습니다. 이 코드를 사이트 소스코드 </head>바로 위에 붙여넣으시면 됩니다. 추적하고 싶은 모든 페이지에 첨부되어 있어야 합니다. footer 에 등록함.

4일차

Why Google Analytics?

이번에 오픈한 우리 쇼핑몰엔 어떤 사람들이 많이 들어올까요. 남자가 많을까요, 여자가 많을까요? 예상외로 30대가 많이 들어온다면 마케팅의 방향이 달라지지 않을까요. 또 사이트에 들어와 가장 먼저 누르는 곳은 어디일까요, 3페이지에 위치해 있는데 메인에 노출되어 있는 상품보다 잘 팔린다면 그 제품을 어떻게 해야할까요?

이를 위하여 고객의 행동 패턴과 전자상거래 기록을 수집하는 툴 중 하나가 ‘Google Analytics‘입니다. 사이트 소스코드에 간단히 설치해두면, 구글 애널리틱스 홈페이지에 들어가 구글이 사용자 행태를 분석해 모아둔 데이터를 볼 수 있습니다.

Google Analytics란 무엇인가?

GA는 ‘문지기‘입니다. store.pinkfong.com 사이트 코드에 GA 코드 조각을 모두 붙여두면 접속한 사람들이 하는 행태를 모두 기록해 GA 서버에 보냅니다.

뿐만 아니라 접속한 사람들의 나이, 성별, 그리고 이 페이지에서 평균 몇 분 머물렀는지도 알 수 있습니다.

또한 여러 가지 조합을 통하여

모바일 접속자인가 데스크톱 접속자인가?
신규 방문자인가 재방문자인가?
이번 달 무슨 상품이 가장 많이 팔렸는가?
카테고리 목록에서 가장 많이 클릭되는 버튼은?
페이스북에 올린 링크 중 무엇이 가장 도달률이 높은가?
몇시에 가장 활발히 접속하는가?
무슨 광고배너가 가장 인기가 많지?
구매자는 어떤 결제 스텝에서 가장 이탈률이 높은가?

등의 무궁무진한 통계들을 알 수 있습니다.

결국 블로그나 홈페이지를 운영할 때, 실제적으로 얼마나 많은 사람들이 오고, 어떤 페이지를 보고 얼마나 페이지뷰가 있는지, 블로그나 홈페지를 방문하는 사람들을 분석할 수 있는 구글에서 제공하고 있는 분석툴이라고 생각하시면 됩니다.

애드센스와 애널리틱스 연결 하기

구글 애드센스(Google Adsense)를 달고 광고를 하면서 블로그를 하는 분들은 꼭 가입해서 분석하는걸 추천합니다.

애널리틱스 설정에서 애드센스와 연결하려는 사이트를 선택하고, 속성에 있는 애드센스 연결을 클릭합니다. 애드센스 서비스를 선택하고, 계속을 클릭합니다.

어떤 글에서 얼마나 수익이 났는지 알려주는 보고서는 [행동 – 게시자 – 게시자 페이지]를 보면, 글 별로 노출 수, 클릭수, 수익, RPM 등을 볼 수 있습니다.

Recent Posts

Links

Jun 4, 2018 - 비개발자도 Atom Text Editor를 사용하여 github 에 jekyll 과 makdown 문법으로 blog를 만들어 Google Analytics와 Google Adsense 까지 활용

부제 : 세중 github Copy & Paste 하기

준비물

1일차

2일차

3일차

4일차

Git 이 뭔가요?

목표

장점

단점

1일차

Github 란 무엇인가?

소스코드 호스팅서비스?

소셜 코딩 공간(?) – (퍼블리셔 개발자를 위한 참고 사항)

그렇다면 기획자는? – (기획자 참고 사항)

결론

jekyll 설명

jekyll thema 선택

2일차

Atom?

아쉬운점

Atom 설치 후 package 추가 방법

package 설치하는 법

jekyll

마크다운(Markdown) 사용법

제목(Heading)

Heading

Heading

Heading

리스트

강조(Emphasis)

이미지 삽입(Images)

작업 목록

이모티콘

Tables 삽입

atom에서 git사용기

Jekyll 에 대한 구조 설명

Footer

Why Google Analytics?

Google Analytics란 무엇인가?

애드센스와 애널리틱스 연결 하기