SlideShare a Scribd company logo
1 of 41
Download to read offline
codepolio를 만들며
내가 20일간 배운것들
miconblog@gmail.com
codepolio 이게 뭥미?
code + portfolio = codepolio
github을 기반으로 원하는 프로젝트만을 선별해서 포트폴리오를
만들어주는 도구 정도라고 설명해두겠다.
백문이 불여일견, 대충 이런 모습으로 만들고 싶었다.
http://twitter.github.io
혹은 요렇게
http://square.github.io
그런데,.. 어떻게 만들지?
쉽게 자동으로 만들어주면 좋겠는데,..
일단, 포트폴리오에 추가하고 싶은 것들을
저장소에 미리 표시를 해놓으면 어떨까?
빵에다가 쨈바르듯이 일단 표시를 해두자!
>	
  git	
  add	
  code.jam	
  
>	
  git	
  commit	
  -­‐m	
  ‘요거이	
  노출할	
  저장소임!’	
  
>	
  git	
  push
그래도	
  최소한	
  이정도	
  정보는	
  있어야겠지?	
  
?	
  데이터를	
  수집할	
  저장소는?:	
  Github	
  
?	
  어떤	
  테마로	
  만들어줄까?:	
  twitter.github.io	
  
?	
  github	
  아이디	
  좀	
  줘봐바!!:	
  
그리고 쨈 바른 녀석들만 모아서 사이트를 구성하면 되겠지?
좋아! 사이트가 만들어졌다면,..
이제 빌드를 만들어서 정보를 수집하고 배포까지 한방에!!
https://github.com/miconblog/generator-codepolio
말은 참 쉽지만,..
53commits 10weeks
첫번째 커밋에서 마지막 커밋까지 대략 10주가 걸렸다.
20days
재밌는건 일요일엔 그냥 놀았다는 거야. ㅋㅋㅋ
물론 실질적으로 커밋한 날수를 따지면 20일이 걸렸지.
자, 그럼 나의 20일간의 경험을 공유합니다.
먼저 짝코딩
혼자는 개발하기 힘드니까,
요일과 시간을 정해서 무조건 같이 개발합니다.
팀원이 모두 맥북을 쓰고 있다면 아주 좋아요!!
화면 공유 앱이 생각보다 유용합니다.
AppleID 또는 호스트 이름 안되면,
vnc:// 프로토콜 이용!!
화면 공유 FAQ
• Q1. 모디터를 쓰는데 연결이 안되요.

> 연결전에 맥북끼리 화면 공유후 모니터에 미러링을 해보
세요.
• Q2. 연결은 됐는데, 마우스가 안움직여요.

> 화면 제어 권한을 주세요.
• Q3. 여러명이 함께 해도 되나요?

> 네 됩니다!
이제 github의 세계로 빠져봅시다!
협업할때 Github의 이슈를 잘 활용하면
왠간한 이슈 트래커 부럽지 않다.
라벨도 잘 정리되어 있으니 그냥 쓰면 된다.
코드를 커밋할때는 이슈 아이디를 활용하자.
github에선 댓글을 달때도 아이디를 태깅할수있다.
마일스톤 관리는 태깅만 잘하면
덤으로 따라온다.
이슈에 라벨과 마일스톤 그리고
담당자를 꼼꼼히 태깅하자.
커밋된 코드만 있다면 릴리즈도 쉽다.
Click!!
github과 연동되는 서비스도 알아보자!
커밋하면 자동으로 테스트 해주는
CI 서버는 하나쯤 있어야겠지?
https://travis-ci.org/
Click!!
https://travis-ci.org/profile/miconblog
원하는 프로젝트를 제껴주면 끝!!
Travis CI 가입후 설정 페이지만 조금 손봐주면 된다.
실제 CI 연동은 설정 파일(.travis.yml)로 이루어진다.
따라서 설정파일을 꼭 프로젝트 저장소에 추가해주자!
설정에서 가장 중요한 부분은
어떤 언어로 테스트를 수행하는지 정의하는 부분이다.
node 프로젝트의 경우 npm test를 기본으로 수행한다.
http://docs.travis-ci.com/user/languages/javascript-with-nodejs/
다양한 언어를 지원하므로,
문서를 잘 참고하자!
http://docs.travis-ci.com/user/getting-started/
github README에 Travis 뱃지를 달아두면
테스트 성공 유무를 한눈에 알아보기 쉽다.
[![Build	
  Status](https://secure.travis-­‐ci.org/miconblog/generator-­‐
codepolio.png?branch=master)](https://travis-­‐ci.org/miconblog/generator-­‐
codepolio)	
  
마찬가지로 의존성 모듈 뱃지도 달아두면
최신 모듈 빠르게 적용해줄수있다.
[![Dependency	
  Status](https://david-­‐dm.org/miconblog/generator-­‐
codepolio.svg)](https://david-­‐dm.org/miconblog/generator-­‐codepolio)	
  	
  
[![devDependency	
  Status](https://david-­‐dm.org/miconblog/generator-­‐
codepolio/dev-­‐status.svg)](https://david-­‐dm.org/miconblog/generator-­‐
codepolio#info=devDependencies)
혹시나 내가 만든 프로젝트가 얼마나 잘 나가는지
알고 싶다면 트랜드 뱃지도 달아보자.
[![Bitdeli	
  Badge](https://d2weczhvl823v0.cloudfront.net/miconblog/
generator-­‐codepolio/trend.png)](https://bitdeli.com/free	
  "Bitdeli	
  Badge")
자, 그럼 지금까지 만든 프로젝트를
yeoman.io 공식 사이트에 배포해보자!
제너레이터를 등록하기 위해서는
package.json 파일에 키워드를 정의해야한덴다.
http://yeoman.io/generators/
Your generator must have the
"yeoman-generator" keyword and
a repo description to be listed. Official
generators are marked with
어랏! 키워드는 제대로 등록했는데, 검색이 되지 않는다!
알고 봤더니 yeoman.io 공식 사이트는
npm 모듈 저장소의 정보를 기반으로 한다.
https://www.npmjs.com/
따라서 npm 모듈 저장소에 지금까지 만든 모듈을 먼저 배포해야된다.
일단 npm 사이트부터 가입하자!
가입할때 등록한
이메일이 매우 중요하다!
$>	
  npm	
  adduser	
  
Username:	
  miconblog	
  
Password:	
  ********	
  
Email:	
  (this	
  IS	
  public)	
  miconblog@gmail.com
npm 사이트 가입후 커맨드라인에 명령어 창에
가입한 아이디와 이메일 그리고 패스워드를 입력해 npm에 로그인한다.
$>	
  npm	
  publish
https://docs.npmjs.com/getting-started/publishing-npm-packages
그리고 package.json 파일을 열어서 버전을 확인하고 배포하면된다.
너무 쉽다!!
- 끝 -

More Related Content

What's hot

Vim for php
Vim for phpVim for php
Vim for phpSol Kim
 
오픈소스가이드 win,c++
오픈소스가이드 win,c++오픈소스가이드 win,c++
오픈소스가이드 win,c++jdo
 
Qt Creator에 OpenCV 연동하기
Qt Creator에 OpenCV 연동하기Qt Creator에 OpenCV 연동하기
Qt Creator에 OpenCV 연동하기jdo
 
Dive into OpenSource
Dive into OpenSourceDive into OpenSource
Dive into OpenSourceHyun-woo Park
 
Github + Heroku + Circle CI 를 이용한 Django Application 배포 자동화
Github + Heroku + Circle CI 를 이용한 Django Application 배포 자동화Github + Heroku + Circle CI 를 이용한 Django Application 배포 자동화
Github + Heroku + Circle CI 를 이용한 Django Application 배포 자동화Jae-yeol Lee
 
오픈 소스 컨트리뷰션 가이드
오픈 소스 컨트리뷰션 가이드오픈 소스 컨트리뷰션 가이드
오픈 소스 컨트리뷰션 가이드Ted Won
 
Opensource java library deploy public repository
Opensource java library deploy public repositoryOpensource java library deploy public repository
Opensource java library deploy public repositoryKyungHo Jung
 
협업하는 디자이너 - #3 Android Studio 설치하기
협업하는 디자이너 - #3 Android Studio 설치하기협업하는 디자이너 - #3 Android Studio 설치하기
협업하는 디자이너 - #3 Android Studio 설치하기Jinkyou Son
 
초보자를 위한 Git & GitHub
초보자를 위한 Git & GitHub초보자를 위한 Git & GitHub
초보자를 위한 Git & GitHubYurim Jin
 

What's hot (9)

Vim for php
Vim for phpVim for php
Vim for php
 
오픈소스가이드 win,c++
오픈소스가이드 win,c++오픈소스가이드 win,c++
오픈소스가이드 win,c++
 
Qt Creator에 OpenCV 연동하기
Qt Creator에 OpenCV 연동하기Qt Creator에 OpenCV 연동하기
Qt Creator에 OpenCV 연동하기
 
Dive into OpenSource
Dive into OpenSourceDive into OpenSource
Dive into OpenSource
 
Github + Heroku + Circle CI 를 이용한 Django Application 배포 자동화
Github + Heroku + Circle CI 를 이용한 Django Application 배포 자동화Github + Heroku + Circle CI 를 이용한 Django Application 배포 자동화
Github + Heroku + Circle CI 를 이용한 Django Application 배포 자동화
 
오픈 소스 컨트리뷰션 가이드
오픈 소스 컨트리뷰션 가이드오픈 소스 컨트리뷰션 가이드
오픈 소스 컨트리뷰션 가이드
 
Opensource java library deploy public repository
Opensource java library deploy public repositoryOpensource java library deploy public repository
Opensource java library deploy public repository
 
협업하는 디자이너 - #3 Android Studio 설치하기
협업하는 디자이너 - #3 Android Studio 설치하기협업하는 디자이너 - #3 Android Studio 설치하기
협업하는 디자이너 - #3 Android Studio 설치하기
 
초보자를 위한 Git & GitHub
초보자를 위한 Git & GitHub초보자를 위한 Git & GitHub
초보자를 위한 Git & GitHub
 

Similar to 오픈소스따라하기

패스트캠퍼스 프론트엔드 강의 오리엔테이션
패스트캠퍼스 프론트엔드 강의 오리엔테이션패스트캠퍼스 프론트엔드 강의 오리엔테이션
패스트캠퍼스 프론트엔드 강의 오리엔테이션Taegon Kim
 
알아두면 쓸모있는 깃허브 1
알아두면 쓸모있는 깃허브 1알아두면 쓸모있는 깃허브 1
알아두면 쓸모있는 깃허브 1Hansol Kang
 
[201808] GitHub 사용하기 - GIt & 협업 활용
[201808] GitHub 사용하기 - GIt & 협업 활용[201808] GitHub 사용하기 - GIt & 협업 활용
[201808] GitHub 사용하기 - GIt & 협업 활용Ian Choi
 
좋은교사운동 워크숍05 sn_son_blog
좋은교사운동 워크숍05 sn_son_blog좋은교사운동 워크숍05 sn_son_blog
좋은교사운동 워크숍05 sn_son_blogSue Hyun Jung
 
[AIS 2018][Team Tools_Basic] Atlassian 제품 기반의 DevOps 구성 - 투씨드
[AIS 2018][Team Tools_Basic] Atlassian 제품 기반의 DevOps 구성 - 투씨드[AIS 2018][Team Tools_Basic] Atlassian 제품 기반의 DevOps 구성 - 투씨드
[AIS 2018][Team Tools_Basic] Atlassian 제품 기반의 DevOps 구성 - 투씨드Atlassian 대한민국
 
빌드 버튼이 눌린다음에 무슨일이 일어나는 걸까?
빌드 버튼이 눌린다음에 무슨일이 일어나는 걸까?빌드 버튼이 눌린다음에 무슨일이 일어나는 걸까?
빌드 버튼이 눌린다음에 무슨일이 일어나는 걸까?hyunho Lee
 
형상관리 발표자료 안정민
형상관리 발표자료 안정민형상관리 발표자료 안정민
형상관리 발표자료 안정민정민 안
 
네이버 오픈소스 세미나 - 나의코드에서 모두의 코드로 UNIST 이한
네이버 오픈소스 세미나 - 나의코드에서 모두의 코드로 UNIST 이한네이버 오픈소스 세미나 - 나의코드에서 모두의 코드로 UNIST 이한
네이버 오픈소스 세미나 - 나의코드에서 모두의 코드로 UNIST 이한NAVER Engineering
 
137 deview
137 deview137 deview
137 deviewNAVER D2
 
Popular Convention 개발기
Popular Convention 개발기Popular Convention 개발기
Popular Convention 개발기JeongHun Byeon
 
2022.08 멘토링 자료.pptx
2022.08 멘토링 자료.pptx2022.08 멘토링 자료.pptx
2022.08 멘토링 자료.pptxssuserf875e6
 
제3회인터넷리더십프로그램 : 풀뿌리단체에게 도움이 되는 오픈소스와 웹서비스
제3회인터넷리더십프로그램 : 풀뿌리단체에게 도움이 되는 오픈소스와 웹서비스제3회인터넷리더십프로그램 : 풀뿌리단체에게 도움이 되는 오픈소스와 웹서비스
제3회인터넷리더십프로그램 : 풀뿌리단체에게 도움이 되는 오픈소스와 웹서비스daumfoundation
 
파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)
파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)
파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)성일 한
 
141118 최창원 웹크롤러제작
141118 최창원 웹크롤러제작141118 최창원 웹크롤러제작
141118 최창원 웹크롤러제작Changwon Choe
 
[17.02.09] Github introduction (Korean Version)
[17.02.09] Github introduction (Korean Version)[17.02.09] Github introduction (Korean Version)
[17.02.09] Github introduction (Korean Version)Ildoo Kim
 
개알못의 오픈소스이야기 - 이상준님
개알못의 오픈소스이야기 - 이상준님개알못의 오픈소스이야기 - 이상준님
개알못의 오픈소스이야기 - 이상준님NAVER D2
 
Python 으로 Slackbot 개발하기
Python 으로 Slackbot 개발하기Python 으로 Slackbot 개발하기
Python 으로 Slackbot 개발하기성일 한
 
1. github action을 활용한 CI
1. github action을 활용한 CI1. github action을 활용한 CI
1. github action을 활용한 CIDEVELOPER.NET
 
GithubWithTerminal.pptx
GithubWithTerminal.pptxGithubWithTerminal.pptx
GithubWithTerminal.pptxJUNSHIN8
 

Similar to 오픈소스따라하기 (20)

패스트캠퍼스 프론트엔드 강의 오리엔테이션
패스트캠퍼스 프론트엔드 강의 오리엔테이션패스트캠퍼스 프론트엔드 강의 오리엔테이션
패스트캠퍼스 프론트엔드 강의 오리엔테이션
 
알아두면 쓸모있는 깃허브 1
알아두면 쓸모있는 깃허브 1알아두면 쓸모있는 깃허브 1
알아두면 쓸모있는 깃허브 1
 
[201808] GitHub 사용하기 - GIt & 협업 활용
[201808] GitHub 사용하기 - GIt & 협업 활용[201808] GitHub 사용하기 - GIt & 협업 활용
[201808] GitHub 사용하기 - GIt & 협업 활용
 
좋은교사운동 워크숍05 sn_son_blog
좋은교사운동 워크숍05 sn_son_blog좋은교사운동 워크숍05 sn_son_blog
좋은교사운동 워크숍05 sn_son_blog
 
[AIS 2018][Team Tools_Basic] Atlassian 제품 기반의 DevOps 구성 - 투씨드
[AIS 2018][Team Tools_Basic] Atlassian 제품 기반의 DevOps 구성 - 투씨드[AIS 2018][Team Tools_Basic] Atlassian 제품 기반의 DevOps 구성 - 투씨드
[AIS 2018][Team Tools_Basic] Atlassian 제품 기반의 DevOps 구성 - 투씨드
 
빌드 버튼이 눌린다음에 무슨일이 일어나는 걸까?
빌드 버튼이 눌린다음에 무슨일이 일어나는 걸까?빌드 버튼이 눌린다음에 무슨일이 일어나는 걸까?
빌드 버튼이 눌린다음에 무슨일이 일어나는 걸까?
 
형상관리 발표자료 안정민
형상관리 발표자료 안정민형상관리 발표자료 안정민
형상관리 발표자료 안정민
 
네이버 오픈소스 세미나 - 나의코드에서 모두의 코드로 UNIST 이한
네이버 오픈소스 세미나 - 나의코드에서 모두의 코드로 UNIST 이한네이버 오픈소스 세미나 - 나의코드에서 모두의 코드로 UNIST 이한
네이버 오픈소스 세미나 - 나의코드에서 모두의 코드로 UNIST 이한
 
137 deview
137 deview137 deview
137 deview
 
Popular Convention 개발기
Popular Convention 개발기Popular Convention 개발기
Popular Convention 개발기
 
2022.08 멘토링 자료.pptx
2022.08 멘토링 자료.pptx2022.08 멘토링 자료.pptx
2022.08 멘토링 자료.pptx
 
제3회인터넷리더십프로그램 : 풀뿌리단체에게 도움이 되는 오픈소스와 웹서비스
제3회인터넷리더십프로그램 : 풀뿌리단체에게 도움이 되는 오픈소스와 웹서비스제3회인터넷리더십프로그램 : 풀뿌리단체에게 도움이 되는 오픈소스와 웹서비스
제3회인터넷리더십프로그램 : 풀뿌리단체에게 도움이 되는 오픈소스와 웹서비스
 
파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)
파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)
파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)
 
141118 최창원 웹크롤러제작
141118 최창원 웹크롤러제작141118 최창원 웹크롤러제작
141118 최창원 웹크롤러제작
 
[17.02.09] Github introduction (Korean Version)
[17.02.09] Github introduction (Korean Version)[17.02.09] Github introduction (Korean Version)
[17.02.09] Github introduction (Korean Version)
 
개알못의 오픈소스이야기 - 이상준님
개알못의 오픈소스이야기 - 이상준님개알못의 오픈소스이야기 - 이상준님
개알못의 오픈소스이야기 - 이상준님
 
Python 으로 Slackbot 개발하기
Python 으로 Slackbot 개발하기Python 으로 Slackbot 개발하기
Python 으로 Slackbot 개발하기
 
Portfolio
PortfolioPortfolio
Portfolio
 
1. github action을 활용한 CI
1. github action을 활용한 CI1. github action을 활용한 CI
1. github action을 활용한 CI
 
GithubWithTerminal.pptx
GithubWithTerminal.pptxGithubWithTerminal.pptx
GithubWithTerminal.pptx
 

오픈소스따라하기