프로그래머로 부터 배우는 코딩 기술...
DESCRIPTION
This is a presentation I gave at CSS Nite in SEOUL Vol.3 on March 24, 2012.TRANSCRIPT
![Page 1: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/1.jpg)
세키야 마유코
프로그래머로 부터 배우는
코딩 기술 プログラマから学ぶ コーディングテクニック
S E K I Y A M a y u k o
![Page 2: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/2.jpg)
About me
![Page 3: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/3.jpg)
Call me!
화가 날때는 저를 불러주세요!세키야--------!!!!
イライラしたときは、どうぞ私の名前を呼んでください
![Page 4: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/4.jpg)
10 년 가까이Web 디자인을 했다.
10年近くWebデザインを行ってきた
About me
![Page 5: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/5.jpg)
지난해 새로운 회사에서3 명의 프로그래머와 함께 일하기 시작했다
昨年転職し、3人のプログラマと小さな会社で働きはじめた
![Page 6: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/6.jpg)
Mac으로 개발
Macで開発
![Page 7: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/7.jpg)
지금은
Ruby on Rails에의한
개발이 중심
今は Ruby on Rails による開発が中心
![Page 8: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/8.jpg)
주요 역할은 Web 디자인하지만 직장에서
프로그램을
사용하게 되었다
主な役目はWebデザイン でも仕事でプログラムも書くようになってきた
![Page 9: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/9.jpg)
仕事でプログラマといっしょに プログラムを書くようになって その開発方法が効率的であると思いました
그 개발 방법이효율적이란것을 깨달았다
직장에서 프로그래머와 함께프로그램을 작성하도록 되었는데...
![Page 10: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/10.jpg)
プログラマーの開発方法を HTMLやCSSのコーディングにも活かすことで、みなさんのコーディングライフが変わります
프로그래머의 개발 방법을
HTML과
CSS 코딩에 활용함으로써,
여러분의 코딩 수명이 달라집니다.
![Page 11: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/11.jpg)
今日はその一部を 4つのポイントに絞って ご紹介したいと思います
그 일부를
4 개의 포인트를
소개 합니다
![Page 12: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/12.jpg)
1. 프로그래머는 거의 마우스를 사용하지 않아
2. 프로그래머 시간 여행자
3. 프로그래머 동일한 일을 반복하는걸 싫어함
4. 프로그래머는 알기 쉬운 것이 좋아
![Page 13: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/13.jpg)
프로그래머는 거의마우스를 사용하지 않아
プログラマは あまりマウスを使わない
1
![Page 14: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/14.jpg)
キーボードだけでコーディングすることに特化したエディタがあります
EmacsTextMate Vim
![Page 15: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/15.jpg)
http : / /www.v im.org/
Vim
![Page 16: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/16.jpg)
Unix에서 탄생하고,
터미널에서 사용할 수
편집기
20 년 전부터 사용되어 왔습니다
Unix生まれの、ターミナルから使えるエディタ ̶ 20年も前から使われてきました
![Page 17: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/17.jpg)
Unix에서 태어났지만,
Windows, Mac 버전도 있다
Unix生まれではありますが、Windows版、Mac版もあります
![Page 18: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/18.jpg)
Point
터미널 완결시킬 수있다
ターミナルで完結させることができる
Terminal
![Page 19: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/19.jpg)
Terminal
Applications ▶ Utilities ▶ Terminal.app
Terminal
![Page 20: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/20.jpg)
통합 개발 환경
(Aptana, NetBeans, Eclipse ...) 나
제작 도구(DreamWeaver. ..)에 비해
가볍다
有名な統合開発環境やオーサリングツールに比べて軽い
![Page 21: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/21.jpg)
Why Vim ?
① 부드러운 이동
② 부드러운 Copy & Paste
③ 자유로운 화면 레이아웃
① スムーズな移動 ② スムーズなCopy & Paste ③ 自由な画面レイアウト
![Page 22: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/22.jpg)
ソースを縦にも横にも自由に分割したり、カレンダーを表示したりもできます
![Page 23: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/23.jpg)
Key
![Page 24: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/24.jpg)
열기 vim /path/to/filename
저장 : w
닫기 : w
Save & Quit
![Page 25: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/25.jpg)
삽입 모드 i
노멀 모드 esc
비주얼 모드 Ctrl + v
명령 모드 :
Mode
![Page 26: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/26.jpg)
오른쪽
아래
에
왼쪽
첫 번째 라인
마지막 라인
줄
h
j
k
l
g g
G
: n
Move
![Page 27: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/27.jpg)
글머리
줄의 끝
이전 단어
다음 단어
해당 괄호
0
$
b
w
%
Move
![Page 28: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/28.jpg)
Copy(yank)
Paste
y
p
Copy & Paste
![Page 29: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/29.jpg)
“ + a y ... 첫 번째 복사
“ + b y ... 두 번째 복사
“ + a p ... 1 번째로 복사한 내용이 붙여넣기되는
이름을 붙이면서 여러 복사본을돌려 좋아하는 것을 붙여넣을 수
Multiple copies
![Page 30: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/30.jpg)
상하 분할 : sp
좌우로 분할 : vsp
탭으로 열기 : tabnew filename
창을 이동 Ctrl + w w
다음 탭으로 이동 g t
Windows & Tabs
![Page 31: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/31.jpg)
커스텀
カスタマイズ
.vimrc
![Page 32: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/32.jpg)
통합 개발 환경
(Aptana, NetBeans, Eclipse ...) 나
제작 도구
(DreamWeaver. ..)에서 할 수있는
사용자 정의할
대략 보충할
統合開発環境 (Aptana、NetBeans、Eclipse...)や オーサリングツール (DreamWeaver...) でできることは カスタマイズで大体補える
![Page 33: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/33.jpg)
3923 개Vim Script를
이용 가능2012 년 3 월 현재
여기에서 찾을 수 있습니다
http : / /www.v im.org/scr ipts/ index.php
"vim scripts" 검색
2012年3月時点で、3,923個のVim Scriptを利用することが可能
![Page 34: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/34.jpg)
➜ surround.vimhttp : / /www.v im.org/scr ipts/scr ipt .php?scr ipt_ id=1697
➜ zen-coding.vimhttp : / /mattn .g i thub.com/zencoding-v im/
![Page 35: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/35.jpg)
"vim" 검색http : / /www.v im.org/download.php
インストールは “vim” で検索
Install
![Page 36: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/36.jpg)
익숙해질 때까지 조금 땀남
익숙해지면쓰지 않고는 못 견딘다
慣れるまでは少し大変 → 慣れるとやめられなくなる
➜
![Page 37: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/37.jpg)
http : / /www.yes24.com/24/goods/4810592?scode=032&OzSrank=2
More
![Page 38: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/38.jpg)
편리 !
便利!
![Page 39: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/39.jpg)
1. 프로그래머는 거의 마우스를 사용하지 않아
2. 프로그래머 시간 여행자
3. 프로그래머 동일한 일을 반복하는걸 싫어함
4. 프로그래머는 알기 쉬운 것이 좋아
![Page 40: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/40.jpg)
프로그래머시간 여행자
プログラマは タイムトラベラー
2
![Page 41: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/41.jpg)
バージョン管理ツールを使う
버전 관리 도구를 사용
MercurialSubversion Git
![Page 42: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/42.jpg)
http : / /g i t -scm.com/
분산 버전 관리 시스템
Git
![Page 43: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/43.jpg)
여러 사람이 공동 작업을
하는 경우 편리
複数人で 共同作業を行うとき、 とても便利
![Page 44: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/44.jpg)
Subversion보다
좋은 곳
例えば Subversionより よいところは、分散リポジトリであるという点
분산 저장소
![Page 45: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/45.jpg)
分散バージョン管理システム
Localrepository
Localrepository
Localrepository
Localrepository
Remoterepository
clone / pull➜
➜
분산 버전 관리 시스템
push
![Page 46: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/46.jpg)
いろんなバージョンを気軽に試作
여러가지 버전을부담없이 시작
Branch
![Page 47: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/47.jpg)
いろんなバージョンを気軽に試作
여러가지 버전을부담없이 시작
Branch
git branch my-test
![Page 48: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/48.jpg)
うまくいった試作を取り込む
잘 된 것을 모두의 곳에 도입
Merge
➜merge
![Page 49: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/49.jpg)
うまくいった試作を取り込む
잘 된 것을 모두의 곳에 도입
Merge
git merge my-test
![Page 50: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/50.jpg)
캠페인 페이지를 만드는 중입니다.
절반 정도 작업을 마친 곳에,
서둘러 편지를 수정.
수정 수행해야 것을 공개하고,
그 캠페인 페이지 작업을 재개하고 싶다.
Situation ①
キャンペーンページを作成中。半分くらいの作業を終えたところで、取り急ぎ、差し込みの修正が。 ↓修正のみ行ったものを公開して、その後キャンペーンページの作業を再開したい
➜
![Page 51: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/51.jpg)
stash하면 끝난 반 정도 작업을 일단 옆에 피한 상태가된다.기에서 편지를 수정하고 커밋.
Situation ①
git stash pop
stashすると終わった半分くらいの作業をいったん横によけた状態になる。ここで差し込みの修正を行う。差し込み修正の上に、よけておいた作業を戻して、更なる作業を続けることができる
연결 수정에, 잘 걸으 놓은 작업을 되돌리고,더 많은 작업을 계속한다.
git stash
![Page 52: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/52.jpg)
모두 보이기 전에 경우
(2)와 (3) 없었던 것이있다みんなに見せる前であれば、
(2)と(3)を無かったことにできる
Situation ②(1) 배너를 덧붙였다
(2) 오자를 수정한
(3) 오탈자를 수정했지만, 오타가 아니므로 다시했다
(4) FAQ를 삭제한
![Page 53: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/53.jpg)
Situation ②
git rebase -i mycommit
➜squash
![Page 54: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/54.jpg)
터미널 완결시킬 수있다
Point
ターミナルで完結させることができる
Terminal
![Page 55: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/55.jpg)
Aptana, Eclipse,DreamWeaver도
Aptana、Eclipse、DreamWeaverにもプラグインがある
플러그인이 있다
![Page 56: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/56.jpg)
단일 어플리케이션도있다
デスクトップアプリもある
SmartGitTerminal msysGit
![Page 58: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/58.jpg)
Git을쓸 수 있으면
GitHub를 사용할 수 있다
git が使えると、github.comがつかえる
https: / /g i thub.com
![Page 59: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/59.jpg)
GitHub유명한 오픈 소스는
대부분 여기에있다
PHP, WordPress, jQuery, Node.js, concrete5,CakePHP, Ruby on Rails, Linux, Homebrew,
Spree, Redmine, Twitter Bootstrap,MongoDB, Joomla, osCommerce ...
多くの有名なオープンソースプロジェクトも GitHubを使っています(WordPressも)
( WordPress도! )
![Page 60: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/60.jpg)
편리 !
便利!
![Page 61: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/61.jpg)
1. 프로그래머는 거의 마우스를 사용하지 않아
2. 프로그래머 시간 여행자
3. 프로그래머 동일한 일을 반복하는걸 싫어함
4. 프로그래머는 알기 쉬운 것이 좋아
![Page 62: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/62.jpg)
프로그래머 동일한 일을반복하는걸싫어함
プログラマは 同じ事を繰り返すのが きらい
3 Hello~♪ Hello ~~ ♬Hello~♪ Hello ~~ ♬
![Page 63: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/63.jpg)
Sass / SCSS
http : / /sass- lang.com/
![Page 64: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/64.jpg)
gem install sass
다음 명령을칠 뿐입니다
このコマンドを打つだけです
Install
![Page 65: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/65.jpg)
변수와 함수를 사용하여
CSS를 생성하기 위한 소스를 만들고,
거기에서 CSS 출력
変数や関数を使って、CSSを生成するためのソースをつくって、そこからCSSを出力する
➜ CSSSass
![Page 66: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/66.jpg)
➜ CSSSass
엔지니어와 디자이너가 보는 것은
생성물을 만들기위한 소스만
エンジニアとデザイナーが見るのは、生成物をつくるためソースのみ
![Page 67: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/67.jpg)
因にLessやStylusというのもあって, npmというNode Package Manager でインストール
원인에 Less와 Stylus 것도 있고,
npm는 Node Package Manager
에 설치할 수 있습니다
![Page 68: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/68.jpg)
특징 :
特長: 包含、変数、mix-in
① 포함
② 변수
③ mix-in
![Page 69: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/69.jpg)
① 포함
包含
article h1 { color: #999999; }
article h2 { color: #666666; }
article h2 span { color: #333333; }
CSS :
![Page 70: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/70.jpg)
① 포함
包含
article h1 { color: #999999; }
article h2 { color: #666666; }
article h2 span { color: #333333; }
CSS :
![Page 71: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/71.jpg)
① 포함
包含
article h1 color: #999 h2 color: #666 span color: #333
Sass :
![Page 72: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/72.jpg)
"article"이라는
같은 반복
줄었습니다!“article” という、同じ繰り返しが減りました!
![Page 73: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/73.jpg)
② 변수
変数
h1 { color: #666; }
h2 { margin: #999; }
CSS :
![Page 74: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/74.jpg)
② 변수
変数
$baseColor: #333
h1 color: $baseColor
h2 color: $baseColor + #333
Sass :
![Page 75: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/75.jpg)
변경의 번거로움이
줄어 듭니다!
変更の手間が減ります!
![Page 76: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/76.jpg)
③ mix-in
.icons { margin: 10px; float: left; border: 3px; }
.thumbnails { margin: 10px; float: left; border: 5px; }
CSS :
mix-in
![Page 77: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/77.jpg)
③ mix-in
.icons { margin: 10px; float: left; border: 3px; }
.thumbnails { margin: 10px; float: left; border: 5px; }
CSS :
mix-in
![Page 78: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/78.jpg)
③ mix-in@mixin imgBase margin: 10px float: left
.icons @include imgBase border: 3px
.thumbnails @include imgBase border: 5px
Sass :
mix-in
![Page 79: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/79.jpg)
③ mix-in@mixin imgBase margin: 10px float: left
.icons @include imgBase border: 3px
.thumbnails @include imgBase border: 5px
Sass :
mix-in
![Page 80: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/80.jpg)
같은 반복이 줄었습니다!
同じ繰り返しが減りました!
margin: 10pxfloat: left
![Page 82: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/82.jpg)
PHPプロダクトの WordPressのテーマも、Rubyのライブラリを利用して、Sassで簡単に書く事ができます
![Page 83: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/83.jpg)
Forgehttp : / / forge. thethemefoundry.com/
![Page 84: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/84.jpg)
Forgehttp : / / forge. thethemefoundry.com/manual
User's manual
![Page 85: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/85.jpg)
편리 !
便利!
![Page 86: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/86.jpg)
1. 프로그래머는 거의 마우스를 사용하지 않아
2. 프로그래머 시간 여행자
3. 프로그래머 동일한 일을 반복하는걸 싫어함
4. 프로그래머는 알기 쉬운 것이 좋아해
![Page 87: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/87.jpg)
프로그래머는알기 쉬운 것이 좋아해
プログラマは わかりやすいのが好き
4
![Page 89: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/89.jpg)
JavaScript의
복잡성을 제거
JavaScriptの煩雑さを除去。 シンプルにわかりやすく書いて、あとは出力するだけ
간단하게 알기 쉽게 쓰고,
출력
![Page 90: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/90.jpg)
출력 원본 소스
가독성을 중시
生成元ソースの可読性を重視
![Page 91: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/91.jpg)
var name とか書かなくてよい
var name라고 쓰지 않는다
var myName;myName = "mayuco";
myName = "mayuco"
➜
JavaScript :
CoffeeScript :
![Page 92: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/92.jpg)
function라고 쓰지 않는다
function と書かなくてよい
function sayHello (yourname){ return “Hello, ” + yourname };
sayHello = (yourname) -> “Hello, #{yourname}“
➜
JavaScript :
CoffeeScript :
![Page 93: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/93.jpg)
npm install -g coffee-script
① Node.jsをインストール ②コマンドを打つ
Install
② 명령을
http : / /nodejs .org
① 설치 Node.js
![Page 94: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/94.jpg)
Try
![Page 95: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/95.jpg)
CoffeeScript의Web 사이트에 붙여으로 변환시킬 수 있습니다
http : / /coffeescr ipt .org/
CoffeeScriptのWebサイトに、貼付けて、変換させることができます
➜
![Page 96: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/96.jpg)
" codekit " 검색
http : / / inc ident57.com/codeki t /インストールは “codekit” で検索
CodeKit
![Page 97: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/97.jpg)
✤ Less, Sass, Stylus, CoffeeScript,
Jade, Haml
이것 하나로 컴파일 가능
Less, Sass, Stylus, CoffeeScript, Jade, Haml がこれひとつでコンパイル可能
CodeKit
![Page 98: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/98.jpg)
편리 !
便利!
![Page 99: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/99.jpg)
Ruby on Rails에서는이런식으로
HTML이나 JavasScript를쓰고 있습니다
(HTML은 Haml)
Ruby on Railsの開発では、このようにして、HTMLやJavascriptを書いています
Ruby on Rails
![Page 100: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/100.jpg)
이 장점은 Sass 및 CoffeeScript처럼
CSS와 JavaScript의 세계로 확대되고 있기
このスマートさは、SassやCoffeeScriptのように、CSSやJavaScriptの世界にも広がってきてます
![Page 101: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/101.jpg)
시간이 있으면 이야기하고 싶은 것은아직도있었습니다 ....
✤ Jekyll
✤ GitHub Pages
http: / / jeky l l rb .com/
http : / /pages.g i thub.com/…
時間があればお話したいことは、まだまだたくさんありました...
![Page 102: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/102.jpg)
Ruby 커뮤니티 주변을
주시하면
좋을 것 같습니다
まずはRuby周辺をウォッチしておくと良い気がします
![Page 103: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/103.jpg)
因に、Rubyといえば、札幌Ruby会議2012という、Rubyに関するイベントを行います
![Page 104: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/104.jpg)
Check it out!
" sapporo rubykaigi 2012 " 검색
詳細については、決まり次第、Webページに掲載予定です。 Rubyに興味のある方は、ぜひお越しください
![Page 105: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/105.jpg)
정리
まとめ
![Page 106: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/106.jpg)
프로그래머는 거의마우스를 사용하지 않아
プログラマは あまりマウスを使わない
1
![Page 107: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/107.jpg)
프로그래머시간 여행자
プログラマは タイムトラベラー
2
![Page 108: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/108.jpg)
프로그래머 동일한 일을반복하는걸싫어함
プログラマは 同じ事を繰り返すのが きらい
3 Hello~♪ Hello ~~ ♬Hello~♪ Hello ~~ ♬
![Page 109: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/109.jpg)
프로그래머는알기 쉬운 것이 좋아해
プログラマは わかりやすいのが好き
4
![Page 110: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/110.jpg)
例えば 今日紹介した Sassのサンプルは こちらのURLに載せておきます
https: / /g ist .g i thub.com/mayuco
오늘 소개한 Sass 샘플은
URL에 올려 둡니다.
![Page 111: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/111.jpg)
우선
간단한 것으로부터
좋아하는 방식으로
시험해 보면 어때요?
まずは、簡単そうなところから 好きなやり方で 試してみるとよいです
![Page 112: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/112.jpg)
오늘 여러분께 보다 쾌적하게 코딩하는방법을 말씀드렸
습니다.
今日、みなさんは快適なコーディングライフをおくる道具をみつけました
![Page 113: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/113.jpg)
그럼 부디
Happy Coding Life즐겨주세요 !
それではどうぞ Happy Coding Lifeを お楽しみください
![Page 114: 프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)](https://reader037.vdocuments.pub/reader037/viewer/2022102316/5560b960d8b42afe3b8b4d42/html5/thumbnails/114.jpg)
감사합니다
どうもありがとうございました