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์— ๋Œ€ํ•œ ์š”์ฒญ์€ ๋ณ‘๋ ฌ์ ์œผ๋กœ ์ด๋ฃจ์–ด์ง€์ง€๋งŒ ๋’ค์ชฝ์˜ ์š”์ฒญ์ด ๋จผ์ € ์ฒ˜๋ฆฌ๋˜๋”๋ผ๋„ ์•ž์ชฝ ์š”์ฒญ์ด ์ฒ˜๋ฆฌ๋˜๊ธฐ ์ „๊นŒ์ง€๋Š” ๋Œ€๊ธฐํ•ด์•ผ ํ•œ๋‹ค.