E D R , A S I H C RSS
ZeroWiki

Zero Page_200_OK



1. Technology

2. References

3. Runtime Environment

4. Integrated Development Environment

  • Microsoft Visual Studio (AJAX.NET -> jQuery)
  • JetBrains WebStorm
  • Oracle NetBeans
  • Aptana Studio (Titanium Studio)
  • Cloud9 IDE (Node.js)
    • Mozilla Bespin -> Mozilla Skywriter -> Ajax.org Ace -> Cloud9 -> http://c9.io/

5. 진행

5.1. 2012λ…„ 7μ›” 4일 - μ‹€μŠ΅

  • μ›Ή 기술, ν™˜κ²½, 레퍼런슀 μ†Œκ°œ
  • μ‹€μŠ΅ ν…Œλ§ˆ μ„ μ • - 각자 μ›Ή κ²Œμž„ μ œμž‘ν•˜κΈ°
  • XHTML1.0, CSS2.1 기초

5.1.1. ν›„κΈ°

  • λ³€ν˜•μ§„
    • μ  μž₯ 집에 μ˜€λ‹ˆ Cloud9 IDEκ°€ λΉ λ₯΄κ²Œ 잘 λ©λ‹ˆλ‹€. 학ꡐ에 μžˆλŠ” μ‚¬λžŒλ“€λ„ ν…ŒμŠ€νŠΈ λΆ€νƒν•©λ‹ˆλ‹€. 학ꡐ λ„€νŠΈμ›Œν¬ κ΄€λ ¨ μ΄μŠˆμΈμ§€ κ·Έλƒ₯ κ·Έ μ‹œκ°„λŒ€ c9.io μ„œλΉ„μŠ€ κ΄€λ ¨ μ΄μŠˆμΈμ§€ κΆκΈˆν•˜κ΅°μš”.
    • 각자 μžμ‹ μ˜ Cloud9 IDE Dashboardμ—μ„œ Workspaceλ₯Ό λ§Œλ“€μ–΄ 과제λ₯Ό μ§„ν–‰ν•˜κ³  URL을 κ³΅μœ ν•©μ‹œλ‹€. κ³Όμ œλŠ” "메뉴 λ§Œλ“€κΈ°"μ˜€λŠ”λ° μ–΄λ–€ λͺ¨μŠ΅μœΌλ‘œ κ΅¬ν˜„ν•΄λ„ μ’‹μŠ΅λ‹ˆλ‹€!
      • ν˜Ήμ‹œ μ—¬μ „νžˆ Cloud9 IDE이 λ™μž‘ν•˜μ§€ μ•ŠμœΌλ©΄ 이번 λ‚΄μš©μ€ ν΄λΌμ΄μ–ΈνŠΈ κ΅¬ν˜„λ§Œ μžˆμœΌλ―€λ‘œ JSFiddle에 Saveν•˜κ³  URL을 λ§ν¬ν•˜κ±°λ‚˜ ZeroPage_200_OK/μ†ŒμŠ€ νŽ˜μ΄μ§€μ— μ˜¬λ¦¬μ…”λ„ λ©λ‹ˆλ‹€.
    • μœ„μ— λ§ν¬ν•œ μ €μ˜ Workspace Project의 index.html νŒŒμΌμ— 메뉴 μƒ˜ν”Œμ„ κ΅¬ν˜„ν•΄λ‘μ—ˆμŠ΅λ‹ˆλ‹€. μƒλ‹¨μ˜ Preview둜 ν™•μΈν•˜λ©΄μ„œ 적절히 μ°Έμ‘°ν•΄μ„œ λ§Œλ“€λ©΄ 도움이 λ κ²λ‹ˆλ‹€.

  • 정진경 - c9.ioλŠ” ν•„μš”ν•  λ•Œ 먹톡이 λ˜λ„€μš”... μ‹€μŠ΅ ν…Œλ§ˆκ°€ μ›Ή κ²Œμž„ μ œμž‘μ΄λ©΄ Challengers의 μ½˜ν…μΈ λ₯Ό λ³΄κ°•ν•˜κΈ° μœ„ν•΄ 인곡지λŠ₯으둜 ν”Œλ ˆμ΄κ°€ μš©μ΄ν•œ κ²Œμž„μ„ κΈ°νšν•΄μ•Όκ² μŠ΅λ‹ˆλ‹€...γ…‹γ…‹

5.2. 2012λ…„ 7μ›” 7일 - 이둠

  • λ„€νŠΈμ›Œν¬μ™€ 인터넷
  • μ›”λ“œ μ™€μ΄λ“œ μ›Ή(WWW)κ³Ό W3C ν‘œμ€€(Recommendation)
  • HTTP(HyperText Transfer Protocol) μ†Œκ°œ

5.2.1. ν›„κΈ°

  • λ³€ν˜•μ§„
    • 웹은 λ‹€μ–‘ν•œ 이둠적 배경을 λ°”νƒ•μœΌλ‘œ νƒ„μƒν•˜κ³  λ°œμ „ν•΄ μ™”μŠ΅λ‹ˆλ‹€. 우리 μŠ€ν„°λ””μ—μ„œλŠ” 그런 톡합적인 지식을 λ°”νƒ•μœΌλ‘œ μ—¬λŸ¬λΆ„λ“€μ—κ²Œ ν˜„μž¬μ˜ μ›Ή κΈ°μˆ μ— λŒ€ν•œ μ΄ν•΄λŠ” 물둠이고 μ›Ή μ΄ν›„μ˜ μƒˆλ‘œμš΄ κ²½ν–₯을 κ³ λ―Όν•˜κ³  μ—°κ΅¬ν•˜κΈ° μœ„ν•΄ ν•„μš”ν•œ λ‹¨μ„œλ₯Ό μ œκ³΅ν•˜λŠ”λ° λͺ©ν‘œλ₯Ό 두고 μžˆμŠ΅λ‹ˆλ‹€. λ¬Όλ‘  ꡳ이 λͺ¨λ₯΄κ³  μžˆμ–΄λ„ λ‹¨μˆœ μ›Ή κ°œλ°œμ„ ν•˜λŠ”λ° λ¬΄λ¦¬λŠ” μ—†μœΌλ‚˜, κ΄€λ ¨λœ λ¬Έμ œν•΄κ²° κ³Όμ •μ΄λ‚˜ μƒˆλ‘œμš΄ 기술 이해λ₯Ό μœ„ν•΄μ„œ μ€‘μš”ν•œ λŠ₯λ ₯이 될 수 μžˆμŠ΅λ‹ˆλ‹€.
    • 우리 μŠ€ν„°λ””μ—μ„œ λ‹€λ£¨λŠ” 이둠은 ν•™λΆ€ 2~4ν•™λ…„μ˜ μ—¬λŸ¬ ꡐ과λ₯Ό 포괄할 뿐 μ•„λ‹ˆλΌ κ·Έ λ²”μœ„λ₯Ό μ΄ˆμ›”ν•  수 μžˆμŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ μ•žμœΌλ‘œλ„ ν•™λΆ€ 1학년도 μ‰½κ²Œ 이해할 수 μžˆλ„λ‘ λŒ€λΆ€λΆ„μ˜ 이둠 각둠은 ꡐ과 μˆ˜μ—…μ„ λ°”νƒ•μœΌλ‘œ ν•˜μ§€ μ•Šκ³  μ„€λͺ…ν•˜λŠ” λ°©ν–₯으둜 μ§„ν–‰ν•˜κ² μŠ΅λ‹ˆλ‹€.

5.3. 2012λ…„ 7μ›” 11일 - μ‹€μŠ΅

  • XHTMLκ³Ό CSS 과제 ν•΄μ„€
  • Form 계열 νƒœκ·Έ ν™œμš©
  • JavaScript DOM API μ²«μ†Œκ°œ

5.3.1. ν›„κΈ°

  • form κ΄€λ ¨μœΌλ‘œ μ‚¬μš©μž μž…λ ₯을 받을 수 μžˆμ—ˆλ˜ λΆ€λΆ„ μ‹€μŠ΅μ„ 주둜 λ°°μ› μŠ΅λ‹ˆλ‹€. 근데 κΆκΈˆν•œκ²Œ 도쀑에 html5 μ–˜κΈ°λ₯Ό ν•˜μ‹œλ©΄μ„œ <a href=""><button>abc</button></a> html5μ—μ„œλŠ” μ΄λ ‡κ²Œ μ‚¬μš©ν•  수 μžˆλŠ”λ° 이런게 μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό μ“Έ 수 μ—†λŠ” κ²½μš°μ— λœλ‹€κ³  ν•˜μ…¨λŠ”λ° 그럼 μ›λž˜ λ²„νŠΌμ˜ onclick같은 on~λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈμΈκ±΄κ°€μš”? - μ„œμ˜μ£Ό

5.4. 2012λ…„ 7μ›” 14일 - 이둠

5.4.1. ν›„κΈ°

  • 이번 μ£Όμ œλŠ” ν˜•μ§„μ΄ν˜•ν•œν…Œ μ—¬λŸ¬λ²ˆ λ“€μ—ˆλ˜ λ‚΄μš©μ΄μ—ˆλ„€μš”. ν™•μ‹€νžˆ μ—¬λŸ¬λ²ˆ λ“€μœΌλ‹ˆκΉŒ 무슨 이야기λ₯Ό ν•˜λŠ”μ§€ 쑰금 더 λΉ λ₯΄κ²Œ 이해할 수 μžˆμ—ˆλ˜ 것 κ°™μŠ΅λ‹ˆλ‹€. 그리고 μ§€λ‚œλ²ˆ 듀을 λ•Œμ—λŠ” κΆκΈˆν•œκ²Œ 생각 μ•ˆ λ‚¬μ—ˆλŠ”λ° μ΄λ²ˆμ—” κΆκΈˆν•œκ²Œ μƒκΈ°λ”κ΅°μš”. 뭐지 -γ……-;; γ…‹γ…‹ λ‹€λ§Œ λ‹€μŒμ£Όμ— 할아버지 νŒ”μˆœμ΄λΌ μ°Έμ—¬λ₯Ό λͺ» ν•˜κ²Œ λ˜μ–΄μ„œ μ’€ μ•„μ‰¬μšΈ 뿐.. -_-a 그리고 곡λͺ¨μ „κ³Ό κ΄€λ ¨ν•΄μ„œ λλ‚˜κ³  이런 μ €λŸ° 이야기가 많이 λ‚˜μ™”μ—ˆλŠ”λ°, 잘 μ§„ν–‰λ˜μ–΄ 우리 잘 ν•˜κ³  μžˆμ–΄μš”~ λΌλŠ” λͺ¨μŠ΅μ„ λ³΄μ—¬μ€¬μœΌλ©΄ ν•˜λ„€μš” - ꢌ순의

  • httpsλŠ” 정말 μ–΄λ €μš΄ 주제 κ°™λ„€μš”. 일단 이해 되고 λ‚˜λ©΄ μ‰¬μš΄λ° λ­”κ°€ 이것 저것 μ–½ν˜€μžˆλŠ” λŠλ‚Œμ΄λ„€μš”. 따지고 보면 λ ˆμ΄μ–΄ ν•˜λ‚˜ μΆ”κ°€λ˜μ—ˆμ„ 뿐인데 λ‚œμ΄λ„λŠ” κΈ‰ μƒμŠΉ. μ„Έμ…˜μ΄λ‚˜ μΏ ν‚€κ°™μ€κ²½μš°μ—λŠ” λ‚˜μ˜€κ²Œ 된 배경을 μ•Œκ²Œλ˜μ–΄μ„œ ν™•μ‹€ν•˜κ²Œ μ΄ν•΄ν•˜κ³  κ°€λŠ” λŠλ‚Œμ΄λ„€μš”. - μ•ˆν˜μ€€

  • 개인적으둜 μ΄λž˜μ €λž˜ 많이 λ“£κΈ°λ§Œ ν•œ μš©μ–΄λ“€(μΏ ν‚€, HTTPS 기타 λ“±λ“±)에 λŒ€ν•΄μ„œ μžμ„Έν•˜κ²Œ 듀을 수 μžˆμ–΄μ„œ μ’‹μ•˜μŠ΅λ‹ˆλ‹€. λ³΄μ•ˆ 관련은 μ˜ˆμ „ λ°λΈ”μŠ€ λ•Œλ„ 잠깐 듀을 κΈ°νšŒκ°€ μžˆμ—ˆλŠ”λ°, κ·Έ λ•ŒλŠ” 잘 이해λ₯Ό λͺ» ν–ˆμ—ˆλŠ”λ° λ°˜λ³΅ν•΄μ„œ λ“€μ–΄μ„œ κ·ΈλŸ°μ§€ μ΄λ²ˆμ—λŠ” 이해가 잘 λμŠ΅λ‹ˆλ‹€. λ‹€μŒμœΌλ‘œλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ 문법에 λŒ€ν•΄μ„œ 닀루신닀고 ν•˜μ…¨λŠ”λ° μ–΄λ–€ λ°©ν–₯으둜 λ‚˜κ°ˆμ§€ κΆκΈˆν•˜λ„€μš” - μ„œλ―Όκ΄€

5.5. 2012λ…„ 7μ›” 21일 - 이둠

5.5.1. ν›„κΈ°

  • μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ 기초적인 λΆ€λΆ„μ΄μ—ˆλŠ”λ° 잘 λͺ°λžλ˜ ꡬ쑰에 λŒ€ν•΄μ„œ μ•Œκ²Œ λ˜μ–΄ μ’‹μ•˜μŠ΅λ‹ˆλ‹€. μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” 특히 잘 μ•Œμ•„λ‘κ³  갈 ν•„μš”κ°€ μžˆλ‹€λŠ” 생각이 λ“€μ—ˆμŠ΅λ‹ˆλ‹€. - μ•ˆν˜μ€€
  • μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ 자주 this μ–˜κΈ°κ°€ λ‚˜μ˜€λ˜λ°, μ΄λ²ˆμ— 이야기λ₯Ό 듀을 수 μžˆμ–΄μ„œ μ’‹μ•˜μŠ΅λ‹ˆλ‹€. 개인적인 λŠλ‚Œμ„ λ§ν•˜μžλ©΄ ν•¨μˆ˜κ°€ λ°μ΄ν„°λ‘œ μ·¨κΈ‰λ˜λŠ”λ° ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•œ 객체(execution context)의 정보λ₯Ό μ‚¬μš©ν•˜κΈ° μœ„ν•΄μ„œ thisλ₯Ό μ‚¬μš©ν•œλ‹€λŠ” λŠλ‚Œμ΄λŠ”λ° λ§žλŠ”μ§€ λͺ¨λ₯΄κ² κ΅°μš”. p.printλ₯Ό λ„˜κΈ°λŠ” 것도 μ‹€μ œλ‘œ class p에 μžˆλŠ” ν•¨μˆ˜λ₯Ό λ„˜κΈ°λŠ” 게 μ•„λ‹ˆλΌ p.print에 바인딩 된 μ–΄λ–€ ν•¨μˆ˜λ₯Ό λ„˜κΈ°λŠ” κ²ƒμ΄λ‹ˆκΉŒ λ‚΄λΆ€μ˜ thisκ°€ κΈ°μ‘΄ OOP와 같이 ν•΄λ‹Ή class의 μΈμŠ€ν„΄μŠ€λŠ” 될 수 μ—†κ² μ£ . 그리고 제일 λ§ˆμŒμ— λ“€μ—ˆλ˜ 것은 μ—­μ‹œ μ˜ˆμ „μ— ν–ˆλ˜ μŠ€ν„°λ””μ—μ„œ λ‹€λ€˜λ˜ μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ λ„€ 가지 νŠΉμ§•μ— λŒ€ν•΄μ„œ 듀을 수 μžˆμ—ˆλ‹€λŠ” μ μ΄μ—ˆμŠ΅λ‹ˆλ‹€. 사싀 μ˜ˆμ „ μŠ€ν„°λ”” λ–„ 무척 λ“£κ³  μ‹Άμ—ˆλŠ”λ° 개인적인 μ‚¬μ •μœΌλ‘œ μ°Έκ°€λ₯Ό ν•  수 μ—†μ–΄μ„œ κ½€ μ•„μ‰¬μ› λ˜ 터라 ;;; λ§ˆμ§€λ§‰μ—λŠ” 개인적인 μ‚¬μ •μœΌλ‘œ μ‹œκ°„μ΄ μ•ˆ λ§žμ•„μ„œ μ’€ κΈ‰ν•˜κ²Œ λ‚˜κ°”λŠ”λ°, κ·Έλž˜λ„ μ΅œλŒ€ν•œ 듀을 수 μžˆλŠ” λ°κΉŒμ§€ λ“£κΈ°λ₯Ό 잘 ν•œ 것 같은 λŠλ‚Œμ΄ λ“€μ—ˆμŠ΅λ‹ˆλ‹€. - μ„œλ―Όκ΄€
  • μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ μ–Έμ–΄ νŠΉμ„±μ— λ”°λΌμ„œ 배우고 기본적인 μ‚¬μš© 문법에 λŒ€ν•΄μ„œ λ°°μ› μŠ΅λ‹ˆλ‹€. λͺ…λ Ήν˜• ꡬ쑰적 ν”„λ‘œκ·Έλž˜λ° 언어적인 뢀뢄에 λŒ€ν•΄μ„œλŠ” κ·Έλ ‡κ²Œ μ–΄λ €μš΄κ±΄ μ—†μ—ˆλŠ”λ° κ·Έ λ’€μ˜ ν•¨μˆ˜ν˜• 선언적 ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄ λΆ€λΆ„μ—μ„œ ν΄λ‘œμ €λž‘ ν•¨μˆ˜μ— ν•¨μˆ˜λ₯Ό 인자둜 μ£ΌλŠ” 뢀뢄이 같이 μ“°μ΄λ‹ˆκΉŒ μ’€ λ³΅μž‘ν–ˆμ—ˆμŠ΅λ‹ˆλ‹€. 쑰금 더 곡뢀해야 ν•  것 κ°™μŠ΅λ‹ˆλ‹€. var Person = function(){}; 같은 λΆ€λΆ„λ‚˜ thisκ°€ newλ₯Ό ν–ˆμ„ λ•Œμ—λ§Œ μ œλŒ€λ‘œ λ™μž‘ν•œλ‹€λŠ” 뢀뢄도 νŠΉμ΄ν–ˆμŠ΅λ‹ˆλ‹€. 문법적인 λΆ€λΆ„ μžμ²΄λŠ” κ·Έλ ‡κ²Œ μ–΄λ €μš΄ 것 같지 μ•Šμ€λ° ν•¨μˆ˜λ₯Ό μ€‘μ²©ν•΄μ„œ μ“°κ±°λ‚˜ 그런 뢀뢄이 μ•½κ°„ μ•Œμ•„λ³΄κΈ° νž˜λ“  것 κ°™μŠ΅λ‹ˆλ‹€. - μ„œμ˜μ£Ό

5.6. 2012λ…„ 7μ›” 25일 - μ‹€μŠ΅

5.6.1. ν›„κΈ°

  • μ„œλ²„μ—μ„œ 데이터λ₯Ό κ°€μ Έμ™€μ„œ λ³΄μ—¬μ€˜μ•Ό ν•˜λŠ” κ²½μš°μ— μ‹±κΈ€μŠ€λ ˆλ“œλ₯Ό μ‚¬μš©ν•˜κΈ° λ•Œλ¬Έμ— μƒκΈ°λŠ” λ¬Έμ œμ μ— λŒ€ν•΄μ„œ 배우고 이λ₯Ό μ²˜λ¦¬ν•˜κΈ° μœ„ν•œ 방법을 λ°°μ› μŠ΅λ‹ˆλ‹€. μ²˜μŒμ—λŠ” iframe을 μ΄μš©ν•œ 처리λ₯Ό λ°°μ› λŠ”λ° iframe λ‚΄λΆ€λŠ” 독립적인 νŽ˜μ΄μ§€μ΄κΈ° λ•Œλ¬Έμ— λ°”κΉ₯의 λ Œλ”λ§μ— 영ν–₯을 μ•ˆμ£Όμ§€λ§Œ νŽ˜μ΄μ§€λ₯Ό μ΄λ™ν•˜λŠ” μ†Œλ¦¬κ°€ λ‚˜κ³ , iframe이 μ„œλ²„μΈ‘μ˜ 데이터λ₯Ό μ½μ–΄μ„œ λ Œλ”λ§ 해쀄 λ•Œ μ„œλ²„μΈ‘μ˜ μŠ€ν¬λ¦½νŠΈκ°€ μ‹€ν–‰λ˜λŠ” 문제점 등이 μžˆμŒμ„ μ•Œμ•˜μŠ΅λ‹ˆλ‹€. 이λ₯Ό λŒ€μ²΄ν•˜κΈ° μœ„ν•΄ ajaxλ₯Ό μ‚¬μš©ν•˜λŠ”λ° ajaxλŠ” λ Œλ”λ§μ€ ν•˜μ§€ μ•Šκ³  μš”μ²­ μŠ€λ ˆλ“œλ§Œ μƒμ„±ν•΄μ„œ 처리λ₯Ό ν•˜λŠ” 방식인데 xmlHttpRequestλ‚˜ ActiveXObject같은 λ‚΄μž₯객체λ₯Ό μ¨μ„œ μš”μ²­ μŠ€λ ˆλ“œλ₯Ό μƒμ„±ν•œλ‹€λŠ”κ±Έ λ°°μ› μŠ΅λ‹ˆλ‹€. ajax라고 말은 많이 λ“€μ—ˆλŠ”λ° ꡬ체적으둜 μ–΄λ–€ ν•¨μˆ˜λ‚˜ μ–΄λ–€ 객체λ₯Ό μ“°λ©΄ ajaxμΈκ±΄κ°€λŠ” 잘 λͺ°λžμ—ˆλŠ”데 일반적으둜 비동기 처리λ₯Ό ν•˜λŠ”κ±°λ©΄ ajax라고 말할 수 μžˆλ‹€κ³  ν•˜μ…¨μŠ΅λ‹ˆλ‹€. 그리고 쀑간에 body.innerHTML을 직접 μˆ˜μ •ν•˜λŠ” λΆ€λΆ„μ—μ„œ λ¬Έμ œκ°€ μƒκ²Όμ—ˆλŠ”λ° innerHTML을 μ†λŒ€λ©΄ DOM이 λ‹€μ‹œ λ§Œλ“€μ–΄μ Έμ„œ ν•Έλ“€λŸ¬κ°€ μ „λΆ€ λ‹€ μ‚¬λΌμ§„λ‹€λŠ” 것도 기얡을 ν•΄λ‘¬μ•Όκ² μŠ΅λ‹ˆλ‹€. - μ„œμ˜μ£Ό

5.7. 2012λ…„ 7μ›” 28일 - 이둠

5.8. 2012λ…„ 8μ›” 1일 - μ‹€μŠ΅

  • 비동기 HTTP Request 볡슡.
  • JSON
    • μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ 객체λ₯Ό ν‘œν˜„ν•˜κΈ° μœ„ν•œ ν‘œκΈ°λ²•.
    • μžκΈ°μžμ‹ μ˜ 레퍼런슀(사이클릭 레퍼런슀), μ»€μŠ€ν…€ 였브젝트(ν•¨μˆ˜ or 객체) 등은 직렬화가 μ–΄λ ΅κΈ° λ•Œλ¬Έμ— λŒ€μƒμ— 듀어가지 μ•ŠλŠ”λ‹€.
    • JSON.stringify() λ©”μ†Œλ“œμ™€ JSON.parse() λ©”μ†Œλ“œλ₯Ό μ΄μš©ν•΄μ„œ JSON의 Serialization <-> Deserialization이 κ°€λŠ₯ν•˜λ‹€.
  • jQuery
    • Builder Pattern의 μΌμ’…μœΌλ‘œ jQuery의 λ©”μ†Œλ“œλ₯Ό μ‹€ν–‰ν•œ 이후에 jQuery λ°°μ—΄ 객체λ₯Ό λ°˜ν™˜ν•¨μœΌλ‘œμ¨ ν•¨μˆ˜μ˜ chainning을 ν•΄μ„œ μ‚¬μš©ν•  수 μžˆλ‹€.
    • DOM 객체λ₯Ό wrapping ν•œ κ²ƒμœΌλ‘œ CSS selector λ¬Έλ²•μœΌλ‘œ DOMμ—μ„œ Elementλ₯Ό μ°Ύμ•„ 올 수 μžˆλ‹€.
    • Elementλ₯Ό 찾을 λ•Œ CSS 문법을 μ΄μš©ν•˜μ—¬ μž‘μ—…μ„ ν•  μˆ˜λ„ 있고 jQuery의 λ©”μ†Œλ“œλ₯Ό μ΄μš©ν•΄μ„œ μž‘μ—…μ„ ν•  μˆ˜λ„ μžˆλŠ”λ°, λ³΅μž‘ν•œ λŒ€μƒμ„ ν•œ 번만 μ°Ύμ•„μ„œ μž‘μ—…μ„ ν•  κ²½μš°μ—λŠ” CSS 문법을 μ΄μš©ν•˜λŠ” 것이 μ’‹κ³ , 찾은 λŒ€μƒμ—μ„œ μ—¬λŸ¬ μž‘μ—…μ„ ν•  κ²½μš°μ—λŠ” jQuery ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•˜κ±°λ‚˜ ν•΄λ‹Ή Elementλ₯Ό λ³€μˆ˜μ— μ €μž₯ν•΄ λ‘μ—ˆλ‹€κ°€ μ‚¬μš©ν•˜λŠ” 것이 μ„±λŠ₯ λ©΄μ—μ„œ μ’‹λ‹€.
    • λŒ€μƒ Elementλ₯Ό μ°Ύλ“  λͺ» 찾은 항상 배열을 λ°˜ν™˜ν•˜κΈ° λ•Œλ¬Έμ— λ°˜ν™˜ 결과에 상관 없이 배열에 λŒ€ν•œ 처리만 κ³ λ €ν•˜λ©΄ λœλ‹€.

5.8.1. ν›„κΈ°

  • μ›Ή μ΄ˆκΈ°μ— cssμ„€λͺ…ν–ˆμ„ λ•Œ cssμ…€λ ‰ν„° 문법도 μ„€λͺ…을 ν•΄μ£Όμ…¨μ—ˆλŠ”λ° 많이 κΉŒλ¨Ήμ–΄μ„œ ν—·κ°ˆλ Έμ—ˆμŠ΅λ‹ˆλ‹€. -_- μ—­μ‹œ ν•œ 두 번 λ³Έκ±Έλ‘œλŠ” 금방 μžŠμ–΄λ²„λ¦¬κΈ° μ‰¬μš΄ 것 κ°™μŠ΅λ‹ˆλ‹€. jQueryν•¨μˆ˜μ˜ λŒ€λΆ€λΆ„μ€ 호좜 ν›„ jQuery객체λ₯Ό λ¦¬ν„΄ν•˜κΈ° λ•Œλ¬Έμ— ν•¨μˆ˜μ˜ 체이닝이 κ°€λŠ₯ν•˜λ‹€λŠ” μ–˜κΈ°λ₯Ό ν•˜μ…¨μ—ˆλŠ”λ° κ΅¬κΈ€μ˜ guava도 κ·Έλ ‡κ³  μš”μ¦˜μ€ 이런 ν˜•νƒœμ˜ κ΅¬ν˜„μ΄ λ§Žμ€κ±΄μ§€ κΆκΈˆν•©λ‹ˆλ‹€. 그리고 κ²°κ³Ό 값을 λ°›μ•„μ„œ κ³„μ†ν•΄μ„œ λ‹€λ₯Έ μž‘μ—…μ„ ν•˜λŠ” κ²½μš°κ°€ μ•„λ‹ˆλΌλ©΄ μ²΄μ΄λ‹μ΄λ‚˜ κ·Έλƒ₯ ν•œ λ²ˆμ— κ³„μ‚°ν•˜λŠ” λ°©μ‹μ΄λ‚˜ 별 차이가 μ—†λŠ”κ±΄κ°€μš”? - μ„œμ˜μ£Ό

5.9. 2012λ…„ 8μ›” 4일 - 이둠

  • JavaScript (prototype/closure)
    • Private instance property
  • URI encode
    • Charset
      • ASCII, EUC-KR, CP949, Unicode(UCS), UTF-8
    • JavaScript functions
      • escape, unescape (deprecated) : encoding μŠ€νŽ™μ΄ μ •ν•΄μ Έ μžˆμ§€ μ•Šμ•„μ„œ λΈŒλΌμš°μ €λ§ˆλ‹€ κ΅¬ν˜„μ΄ λ‹€λ₯Ό 수 μžˆλ‹€.
      • encodeURI, decodeURI
      • encodeURIComponent, decodeURIComponent
  • document.cookie
  • Browser Object Model : μžλ°”μŠ€ν¬λ¦½νŠΈλ‘œ Browser와 μƒν˜Έμž‘μš©ν•˜κΈ° μœ„ν•΄ μ œκ³΅λ˜λŠ” APIλ“€μ˜ 집합. 곡식적인 ν‘œμ€€μ€ μ‘΄μž¬ν•˜μ§€ μ•Šμ•„μ„œ μ‘°κΈˆμ”© λ‹€λ₯Ό 수 μžˆλ‹€.
    • window.history
    • window.location
      • Same origin policy
        • Iframe/frames
          • document.domain
        • Ajax(XHR)
    • window.navigator

5.10. 2012λ…„ 8μ›” 15일 - μ‹€μŠ΅

  • jQueryUI
    • $(document).ready() - μ²˜μŒμ— μžλ°”μŠ€ν¬λ¦½νŠΈ μ½”λ“œλ₯Ό 해석할 λ•Œ ν•΄λ‹Ή 객체가 없을 수 있기 λ•Œλ¬Έμ— DOM 객체가 μƒμ„±λ˜κ³  λ‚˜μ„œ jQuery μ½”λ“œκ°€ μ‹€ν–‰λ˜λ„λ‘ μ½”λ“œλ₯Ό ready() μ•ˆμ— λ„£μ–΄μ£Όμ–΄μ•Ό ν•œλ‹€.
    • setter, getter - 같은 ν•¨μˆ˜κ°€ set용 μΈμžκ°€ λ“€μ–΄μžˆμ„ κ²½μš°μ—λŠ” setter둜, 그렇지 μ•Šμ„ κ²½μš°μ—λŠ” getter둜 μ‹€ν–‰λœλ‹€.
    • 이벀트 λ©”μ†Œλ“œ - 이벀트 λ©”μ†Œλ“œμ— ν•¨μˆ˜λ₯Ό 인자둜 주지 μ•Šκ³  μ‹€ν–‰μ‹œν‚€λ©΄ 이벀트λ₯Ό λ°œμƒμ‹œν‚€λŠ” 것이고, ν•¨μˆ˜ 인자λ₯Ό μ£Όκ³  μ‹€ν–‰μ‹œν‚€λ©΄ 이벀트 ν•Έλ“€λŸ¬μ— ν•΄λ‹Ή ν•¨μˆ˜λ₯Ό λ“±λ‘ν•œλ‹€. (ex. $(".add_card").click() / $(".add_card").click(function() { ... }))
    • data() λ©”μ†Œλ“œ - 이벀트 ν•Έλ“€λŸ¬μ— ν΄λ‘œμ €λ₯Ό μ“°λ©΄ ν•Έλ“€λŸ¬κ°€ λ“±λ‘λ˜μ—ˆμ„ μ‹œμ κ³Ό ν•Έλ“€λŸ¬κ°€ ν˜ΈμΆœλ˜μ—ˆμ„ μ‹œμ μ˜ λ³€μˆ˜ 값이 λ‹€λ₯Ό μˆ˜κ°€ μžˆλ‹€. ν΄λ‘œμ €λ₯Ό 쓰지 μ•ŠκΈ° μœ„ν•΄μ„œλŠ” .data()λ₯Ό μ΄μš©ν•˜λ©΄ ν•΄λ‹Ή dataκ°€ key/value ν˜•νƒœλ‘œ DOMνŠΈλ¦¬μ— λ“±λ‘λœλ‹€.
    • append(), appendTo() - jQueryμ—λŠ” 같은 κΈ°λŠ₯의 ν•¨μˆ˜μΈλ° 체이닝을 μ‰½κ²Œ ν•˜κΈ° μœ„ν•΄μ„œ caller와 parameterκ°€ 뒀바뀐 ν•¨μˆ˜λ“€μ΄ μžˆλ‹€. (ex. A.append(B) == B.appendTo(A))
    • live() - μ²˜μŒμ— ready() λ•Œμ— 이벀트 ν•Έλ“€λŸ¬λ₯Ό κ±Έμ–΄μ£ΌλŠ” μ‹μœΌλ‘œ μ½”λ“œλ₯Ό 짰을 경우 쀑간에 μƒμ„±ν•œ κ°μ²΄μ—λŠ” 이벀트 ν•Έλ“€λŸ¬κ°€ κ±Έλ €μžˆμ§€ μ•Šλ‹€. ν•˜μ§€λ§Œ ready()μ—μ„œ live() λ©”μ†Œλ“œλ₯Ό μ‚¬μš©ν•΄μ„œ 이벀트 ν•Έλ“€λŸ¬λ₯Ό κ±Έ 경우 맀 μ΄λ²€νŠΈκ°€ λ°œμƒν•œ λ•Œλ§ˆλ‹€ 이벀트 ν•Έλ“€λŸ¬κ°€ κ±Έλ €μ•Ό ν•  객체λ₯Ό μ°Ύμ•„μ„œ μ—†μœΌλ©΄ 이벀트 ν•Έλ“€λŸ¬λ₯Ό μ•Œμ•„μ„œ κ±Έμ–΄μ€€λ‹€. ν•˜μ§€λ§Œ μ²˜μŒμ— ν•Έλ“€λŸ¬λ₯Ό κ±Έμ–΄μ£ΌλŠ” 것과 λΉ„κ΅ν•΄μ„œ λΉ„μš©μ΄ λ‹€μ†Œ λΉ„μ‹Έλ‹€.
  • Trello λ§Œλ“€κΈ°
    • sortable(), appendTo(), data(), focus(), blur(), clone() λ“±μ˜ jQuery APIλ₯Ό μ‚¬μš©.

5.11. 2012λ…„ 8μ›” 18일 ν† μš”μΌ

  • Load web page faster!!!
    • CSS -> HTML -> JavaScript μˆœμ„œλ‘œ html을 μž‘μ„±ν•œλ‹€. - CSSκ°€ 뒀에 있으면 HTML λ Œλ”λ§μ„ ν•œ 후에 CSSκ°€ μ μš©λœλ‹€. JavaScriptκ°€ μ•žμ— 있으면 JavaScriptκ°€ λ‹€ 받아지고 λ‚˜μ„œ 뒷뢀뢄이 μ‹€ν–‰λ˜κΈ° λ•Œλ¬Έμ— 속도에 λ¬Έμ œκ°€ μžˆμ„ 수 μžˆλ‹€.
    • JavaScriptκ°€ 뒀에 있으면 μ΄λ²€νŠΈκ°€ 늦게 걸리게 λœλ‹€. -> Command Queue νŒ¨ν„΄ μ‚¬μš©.
    • Script의 μš”μ²­ - import에 λŒ€ν•œ μš”μ²­μ€ λ³‘λ ¬μ μœΌλ‘œ μ΄λ£¨μ–΄μ§€μ§€λ§Œ λ’€μͺ½μ˜ μš”μ²­μ΄ λ¨Όμ € μ²˜λ¦¬λ˜λ”λΌλ„ μ•žμͺ½ μš”μ²­μ΄ 처리되기 μ „κΉŒμ§€λŠ” λŒ€κΈ°ν•΄μ•Ό ν•œλ‹€.