프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)

프로그래머로 부터 배우는코딩 기술 プログラマから学ぶコーディングテクニック 세키야 마유코 SEKIYA Mayuko

About me

Call me!화가 날때는 저를 불러주세요! 세키야--------!!!! イライラしたときは、どうぞ私の名前を呼んでください

About me10 년 가까이Web 디자인을 했다. 10年近くWebデザインを行ってきた

지난해 새로운 회사에서3 명의 프로그래머와 함께 일하기 시작했다 昨年転職し、3人のプログラマと小さな会社で働きはじめた

Mac으로 개발 Macで開発

지금은Ruby on Rails에의한개발이 중심 今は Ruby on Rails による開発が中心

주요 역할은 Web 디자인하지만 직장에서프로그램을사용하게 되었다 主な役目はWebデザインでも仕事でプログラムも書くようになってきた

직장에서 프로그래머와 함께프로그램을 작성하도록 되었는데...그 개발 방법이효율적 이란것을 깨달았다 仕事でプログラマといっしょにプログラムを書くようになってその開発方法が効率的であると思いました

프로그래머의 개발 방법을 HTML과 CSS 코딩에 활용함으로써,여러분의 코딩 수명이 달라집니다. プログラマーの開発方法を HTMLやCSSのコーディングにも活かすことで、みなさんのコーディングライフが変わります

그 일부를4 개의 포인트를 소개 합니다 今日はその一部を 4つのポイントに絞ってご紹介したいと思います

1. 프로그래머는 거의 마우스를 사용하지 않아2. 프로그래머 시간 여행자3. 프로그래머 동일한 일을 반복하는걸 싫어함4. 프로그래머는 알기 쉬운 것이 좋아

1 프로그래머는 거의 마우스를 사용하지 않아 プログラマはあまりマウスを使わない

TextMate Emacs Vim キーボードだけでコーディングすることに特化したエディタがあります

Vimh t t p : / / w w w. v i m . o rg /

Unix에서 탄생하고,터미널에서 사용할 수 편집기 20 년 전부터 사용되어 왔습니다 Unix生まれの、ターミナルから使えるエディタ ̶ 20年も前から使われてきました

Unix에서 태어났지만,Windows, Mac 버전도 있다 Unix生まれではありますが、Windows版、Mac版もあります

Point터미널 완결시킬 수있다 Terminal ターミナルで完結させることができる

TerminalApplications ▶ Utilities ▶ Terminal.app Terminal

통합 개발 환경(Aptana, NetBeans, Eclipse ...) 나 제작 도구 (DreamWeaver. ..)에 비해 가볍다 有名な統合開発環境やオーサリングツールに比べて軽い

Why Vim ? ① 부드러운 이동 ② 부드러운 Copy & Paste ③ 자유로운 화면 레이아웃 ① スムーズな移動 ② スムーズなCopy & Paste ③ 自由な画面レイアウト

ソースを縦にも横にも自由に分割したり、カレンダーを表示したりもできます

Save & Quit 열기 　　　vim /path/to/filename 저장 　 : w 닫기 　 : w

Mode 삽입 모드 　i 노멀 모드 　 esc 비주얼 모드 Ctrl + v 명령 모드 :

Move오른쪽 h아래 j에 k왼쪽 l첫 번째 라인 g g마지막 라인 G줄 : n

Move글머리 0줄의 끝 $이전 단어 b다음 단어 w해당 괄호 %

Copy & PasteCopy(yank) yPaste p

Multiple copies이름을 붙이면서 여러 복사본을돌려 좋아하는 것을 붙여넣을 수“ + a y ... 첫 번째 복사“ + b y ... 두 번째 복사“ + a p ... 1 번째로 복사한 내용이 붙여넣기되는

Windows & Tabs상하 분할 　　　 : sp좌우로 분할 　　　 : vsp탭으로 열기 　　　 : tabnew filename창을 이동 　　　Ctrl + w w다음 탭으로 이동 　g t

커스텀.vimrc カスタマイズ

통합 개발 환경 (Aptana, NetBeans, Eclipse ...) 나 제작 도구 (DreamWeaver. ..) 에서 할 수있는 사용자 정의할 대략 보충할統合開発環境 (Aptana、NetBeans、Eclipse...)やオーサリングツール (DreamWeaver...) でできることはカスタマイズで大体補える

3923 개 Vim Script를 이용 가능 2012 년 3 월 현재 여기에서 찾을 수 있습니다 "vim scripts" 검색h t t p : / / w w w. v i m . o rg / s c r i p t s / i n d e x . p h p 2012年3月時点で、3,923個のVim Scriptを利用することが可能

➜ surround.vim h t t p : / / w w w. v i m . o rg / s c r i p t s / s c r i p t . p h p ? s c r i p t _ i d = 1 6 9 7➜ zen-coding.vim http://mattn.github.com/zencoding-vim/

Install "vim" 검색 h t t p : / / w w w. v i m . o rg / d o w n l o a d . p h p インストールは vim で検索

익숙해질 때까지 조금 땀남 ➜ 익숙해지면쓰지 않고는 못 견딘다 慣れるまでは少し大変 → 慣れるとやめられなくなる

Moreh t t p : / / w w w. y e s 2 4 . c o m / 2 4 / g o o d s / 4 8 1 0 5 9 2 ? s c o d e = 0 3 2 & O z S r a n k = 2

편리 ! 便利！

2 프로그래머 시간 여행자 プログラマはタイムトラベラー

버전 관리 도구를 사용Subversion Mercurial Git バージョン管理ツールを使う

분산 버전 관리 시스템 Git http://git-scm.com/

여러 사람이 공동 작업을 하는 경우 편리 複数人で共同作業を行うとき、とても便利

Subversion보다 좋은 곳분산 저장소 例えば Subversionよりよいところは、分散リポジトリであるという点

분산 버전 관리 시스템 Remote repositoryclone / pull➜ ➜ push Local Local Local Local repository repository repository repository 分散バージョン管理システム

Branch 여러가지 버전을 부담없이 시작 いろんなバージョンを気軽に試作

Branch 여러가지 버전을 부담없이 시작 git branch my-test いろんなバージョンを気軽に試作

Merge잘 된 것을 모두의 곳에 도입 ➜ merge うまくいった試作を取り込む

Merge잘 된 것을 모두의 곳에 도입 git merge my-test うまくいった試作を取り込む

Situation ①캠페인 페이지를 만드는 중입니다.절반 정도 작업을 마친 곳에,서둘러 편지를 수정. ➜수정 수행해야 것을 공개하고,그 캠페인 페이지 작업을 재개하고 싶다. キャンペーンページを作成中。半分くらいの作業を終えたところで、取り急ぎ、差し込みの修正が。 ↓ 修正のみ行ったものを公開して、その後キャンペーンページの作業を再開したい

Situation ① git stashstash하면 끝난 반 정도 작업을 일단 옆에 피한 상태가된다.기에서 편지를 수정하고 커밋. git stash pop 연결 수정에, 잘 걸으 놓은 작업을 되돌리고, 더 많은 작업을 계속한다. stashすると終わった半分くらいの作業をいったん横によけた状態になる。ここで差し込みの修正を行う。差し込み修正の上に、よけておいた作業を戻して、更なる作業を続けることができる

Situation ②(1) 배너를 덧붙였다(2) 오자를 수정한(3) 오탈자를 수정했지만, 오타가 아니므로 다시했다(4) FAQ를 삭제한 모두 보이기 전에 경우 (2)와 (3) 없었던 것이있다 みんなに見せる前であれば、 (2)と(3)を無かったことにできる

Situation ② git rebase -i mycommit squash ➜

Point터미널 완결시킬 수있다 Terminal ターミナルで完結させることができる

Aptana, Eclipse,DreamWeaver도플러그인이 있다 Aptana、Eclipse、DreamWeaverにもプラグインがある

단일 어플리케이션도있다Terminal SmartGit msysGit デスクトップアプリもある

More "progit" 검색 h t t p : / / p r o g i t . o rg /

Git을쓸 수 있으면GitHub를 사용할 수 있다 https://github.com git が使えると、github.comがつかえる

GitHub 유명한 오픈 소스는 대부분 여기에있다 ( WordPress도! )PHP, WordPress, jQuery, Node.js, concrete5,CakePHP, Ruby on Rails, Linux, Homebrew, Spree, Redmine, Twitter Bootstrap, MongoDB, Joomla, osCommerce ... 多くの有名なオープンソースプロジェクトも GitHubを使っています(WordPressも)

편리 ! 便利！

3 프로그래머 동일한 일을 반복하는걸 싫어함 Hello~♪ Hello ~~ ♬ Hello~♪ Hello ~~ ♬ プログラマは同じ事を繰り返すのがきらい

Sass / SCSS http://sass-lang.com/

Install 다음 명령을 칠 뿐입니다 gem install sass このコマンドを打つだけです

변수와 함수를 사용하여CSS를 생성하기 위한 소스를 만들고, 거기에서 CSS 출력 Sass ➜ CSS 変数や関数を使って、CSSを生成するためのソースをつくって、そこからCSSを出力する

엔지니어와 디자이너가 보는 것은 생성물을 만들기위한 소스만 Sass ➜ CSS エンジニアとデザイナーが見るのは、生成物をつくるためソースのみ

원인에 Less와 Stylus 것도 있고,npm는 Node Package Manager 에 설치할 수 있습니다 因にLessやStylusというのもあって, npmというNode Package Manager でインストール

특징 :① 포함② 변수③ mix-in 特長：包含、変数、mix-in

① 포함CSS :article h1 { color: #999999; }article h2 { color: #666666; }article h2 span { color: #333333; } 包含

① 포함Sass :article h1 color: #999 h2 color: #666 span color: #333 包含

"article"이라는 같은 반복 줄었습니다! article という、同じ繰り返しが減りました！

② 변수CSS :h1 { color: #666; }h2 { margin: #999; } 変数

② 변수Sass :$baseColor: #333h1 color: $baseColorh2 color: $baseColor + #333 変数

변경의 번거로움이 줄어 듭니다！変更の手間が減ります!

③ mix-inCSS :.icons { margin: 10px; float: left; border: 3px; }.thumbnails { margin: 10px; float: left; border: 5px; } mix-in

③ mix-inSass :@mixin imgBase margin: 10px float: left.icons @include imgBase border: 3px.thumbnails @include imgBase border: 5px mix-in

margin: 10pxfloat: left같은 반복이 줄었습 니다! 同じ繰り返しが減りました！

More "sass way" 검색 h t t p : / / t h e s a s s w a y. c o m

PHPプロダクトの WordPressのテーマも、Rubyのライブラリを利用して、Sassで簡単に書く事ができます

Forgeh t t p : / / f o rg e . t h e t h e m e f o u n d r y. c o m /

Forge Users manualh t t p : / / f o rg e . t h e t h e m e f o u n d r y. c o m / m a n u a l

편리 ! 便利！

1. 프로그래머는 거의 마우스를 사용하지 않아2. 프로그래머 시간 여행자3. 프로그래머 동일한 일을 반복하는걸 싫어함4. 프로그래머는 알기 쉬운 것이 좋아해

4 프로그래머는 알기 쉬운 것이 좋아해 プログラマはわかりやすいのが好き

CoffeeScript h t t p : / / c o f f e e s c r i p t . o rg /

JavaScript의 복잡성을 제거간단하게 알기 쉽게 쓰고, 출력 JavaScriptの煩雑さを除去。シンプルにわかりやすく書いて、あとは出力するだけ

출력 원본 소스가독성을 중시 生成元ソースの可読性を重視

var name라고 쓰지 않는다JavaScript : var myName; myName = "mayuco"; ➜CoffeeScript : myName = "mayuco" var name とか書かなくてよい

function라고 쓰지 않는다JavaScript : function sayHello (yourname){ return “Hello, ” + yourname }; ➜CoffeeScript : sayHello = (yourname) -> “Hello, #{yourname}“ function と書かなくてよい

Install① 설치 Node.js h t t p : / / n o d e j s . o rg② 명령을 npm install -g coffee-script ① Node.jsをインストール ②コマンドを打つ

CoffeeScript의Web 사이트에 붙여으로변환시킬 수 있습니다 ➜ h t t p : / / c o f f e e s c r i p t . o rg / CoﬀeeScriptのWebサイトに、貼付けて、変換させることができます

CodeKit " codekit " 검색http://incident57.com/codekit/ インストールは codekit で検索

CodeKit✤ Less, Sass, Stylus, CoffeeScript, Jade, Haml　이것 하나로 컴파일 가능 Less, Sass, Stylus, CoﬀeeScript, Jade, Haml がこれひとつでコンパイル可能

편리 ! 便利！

Ruby on Rails에서는 이런식으로HTML이나 JavasScript를 쓰고 있습니다 (HTML은 Haml) Ruby on Rails Ruby on Railsの開発では、このようにして、HTMLやJavascriptを書いています

이 장점은 Sass 및 CoffeeScript처럼CSS와 JavaScript의 세계로 확대되고 있기 このスマートさは、SassやCoﬀeeScriptのように、CSSやJavaScriptの世界にも広がってきてます

시간이 있으면 이야기하고 싶 은 것은 아직도있었습니다 ....✤ Jekyll http://jekyllrb.com/✤ GitHub Pages http://pages.github.com/ … 時間があればお話したいことは、まだまだたくさんありました...

Ruby 커뮤니티 주변을주시하면좋을 것 같습니다 まずはRuby周辺をウォッチしておくと良い気がします

因に、Rubyといえば、札幌Ruby会議2012という、Rubyに関するイベントを行います

" sapporo rubykaigi 2012 " 검색Check it out! 詳細については、決まり次第、Webページに掲載予定です。 Rubyに興味のある方は、ぜひお越しください

정리 まとめ

1 프로그래머는 거의 마우스를 사용하지 않아 プログラマはあまりマウスを使わない

2 프로그래머 시간 여행자 プログラマはタイムトラベラー

3 프로그래머 동일한 일을 반복하는걸 싫어함 Hello~♪ Hello ~~ ♬ Hello~♪ Hello ~~ ♬ プログラマは同じ事を繰り返すのがきらい

4 프로그래머는 알기 쉬운 것이 좋아해 プログラマはわかりやすいのが好き

오늘 소개한 Sass 샘플은 URL에 올려 둡니다.https://gist.github.com/mayuco 例えば今日紹介した SassのサンプルはこちらのURLに載せておきます

우선간단한 것으로부터좋아하는 방식으로시험해 보면 어때요? まずは、簡単そうなところから好きなやり方で試してみるとよいです

오늘 여러분께 보다 쾌적하게 코딩하는방법을 말씀드렸 습니다. 今日、みなさんは快適なコーディングライフをおくる道具をみつけました

그럼 부디Happy Coding Life 즐겨주세요 ! それではどうぞ Happy Coding Lifeをお楽しみください

감사합니다 どうもありがとうございました

http://www.okjsp.pe.kr	1446
http://reynolds.yonsei.ac.kr	1269
http://opentutorials.org	807
http://timeline.igreenbee.net	765
http://www.enishi-tech.com	763
http://crazia.tistory.com	388
http://okjsp.pe.kr	384
http://www.smallake.kr	297
https://twimg0-a.akamaihd.net	163
https://twitter.com	86
http://gw.bicore.co.kr	61
https://si0.twimg.com	50
http://blog.naver.com	44
http://localhost:4000	34
http://phpschool.com	24
http://www.okjsp.net	22
http://www.hanrss.com	21
http://webstudy.sempio.com:1004	21
http://www.scoop.it	20
http://blog.igreenbee.net	19
http://dataoven.x-y.net	18
http://a0.twimg.com	16
http://www.phpschool.com	13
http://new.okjsp.pe.kr	12
http://us-w1.rockmelt.com	11
http://vivaceg.tistory.com	10
http://192.168.1.200:8090	10
http://cdg60.local	10
http://ww.okjsp.pe.kr	9
http://aaa.okjsp.pe.kr	7
http://jira.qfun.kr	7
http://dev.opentutorials.org	6
http://pinterest.com	6
http://165.132.24.165	5
http://localhost	5
http://develop.qfun.kr	3
http://www.opentutorials.org	3
http://cafe.naver.com	3
http://twitter.com	3
http://okjsp.net	2
http://taemine.tistory.com	2
http://131.253.14.250	1
http://115.68.24.88	1
http://wwww.okjsp.pe.kr	1
http://flex.okjsp.pe.kr	1
http://master.o2.org	1
http://paper.li	1
http://o2.com	1
http://test.opentutorials.org	1
http://weblogic.okjsp.pe.kr	1

프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)

by Mayuko Sekiya

Accessibility

Categories

Upload Details

Usage Rights

50 Embeds 6,854

Statistics

프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック) Presentation Transcript