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

34,867 views
34,790 views

Published on

This is a presentation I gave at CSS Nite in SEOUL Vol.3 on March 24, 2012.

Published in: Design
28 Comments
223 Likes
Statistics
Notes
No Downloads
Views
Total views
34,867
On SlideShare
0
From Embeds
0
Number of Embeds
35
Actions
Shares
0
Downloads
510
Comments
28
Likes
223
Embeds 0
No embeds

No notes for slide

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

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

×