[[TableOfContents]] [wiki:ZeroPage_200_OK/note ê°•ì˜ë…¸íЏ] == Technology == * World Wide Web Technology Surveys - http://w3techs.com/ * Markup Language * '''XHTML1.0 (Transitional / Strict)''' - http://www.w3.org/TR/2002/REC-xhtml1-20020801/ * HTML4.01 (Transitional / Frameset / Strict) - http://www.w3.org/TR/1999/REC-html401-19991224/ * HTML5 * Cascading Style Sheet * '''CSS2.1 (with HTML4.01 / XHTML1.0)''' - http://www.w3.org/TR/CSS2/ * CSS3 (with HTML5) * Client-side Script Language * '''JavaScript 1.4~1.6''' / JScript (ECMAScript)''' - http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf * Flash ( ActionScript) / Silverlight * Java Applet * VBScript * JavaScript Library * '''jQuery 1.7.x''' - http://jquery.com/ * prototype.js * MooTools * YUI * Dojo Toolkit * Server-side Script Language * PHP (Top million sites) * Java (Top thousand sites) * '''Node.js (JavaScript)''' - http://nodejs.org/ == References == * Mozilla Developer Network(MDN) - https://developer.mozilla.org/ko/ * MSDN - http://msdn.microsoft.com/ko-kr/ * W3Schools - http://www.w3schools.com/ == Runtime Environment == * Google Chrome for Windows * JSFiddle (Client) - http://jsfiddle.net/ * Cloud9 IDE (Server/Client) - http://c9.io/ == 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/ == ì§„í–‰ == * http://c9.io/kesarr/zeropage_200_ok * [ZeroPage_200_OK/소스] === 2012ë…„ 7ì›” 4ì¼ - 실습 === * 웹 ê¸°ìˆ , 환경, ë ˆí¼ëŸ°ìФ 소개 * 실습 테마 ì„ ì • - '''ê°ìž 웹 게임 ì œìž‘í•˜ê¸°''' * XHTML1.0, CSS2.1 기초 ==== 후기 ==== * [변형진] * ì 장 ì§‘ì— ì˜¤ë‹ˆ Cloud9 IDEê°€ ë¹ ë¥´ê²Œ 잘 ë©ë‹ˆë‹¤. í•™êµì— 있는 ì‚¬ëžŒë“¤ë„ í…ŒìŠ¤íŠ¸ ë¶€íƒí•©ë‹ˆë‹¤. í•™êµ ë„¤íŠ¸ì›Œí¬ ê´€ë ¨ ì´ìŠˆì¸ì§€ 그냥 ê·¸ 시간대 c9.io 서비스 ê´€ë ¨ ì´ìŠˆì¸ì§€ ê¶ê¸ˆí•˜êµ°ìš”. * ì˜ ëŠë¦¬ë©´ 조만간 ì—¬ìœ ê°€ ìžˆì„ ë•Œ [https://github.com/ajaxorg/cloud9/ Cloud9]ì„ ZeroPage ì„œë²„ì— ì„¤ì¹˜í•´ë³¼ ìƒê°ìž…니다. * http://support.cloud9ide.com/entries/21068062-ide-file-saving-hangs ... í’‹! * ê°ìž ìžì‹ ì˜ Cloud9 IDE Dashboardì—서 Workspace를 만들어 ê³¼ì œë¥¼ ì§„í–‰í•˜ê³ URLì„ ê³µìœ í•©ì‹œë‹¤. ê³¼ì œëŠ” "메뉴 만들기"ì˜€ëŠ”ë° ì–´ë–¤ 모습으로 êµ¬í˜„í•´ë„ ì¢‹ìŠµë‹ˆë‹¤! * 혹시 ì—¬ì „ížˆ Cloud9 IDEì´ ë™ìž‘하지 않으면 ì´ë²ˆ ë‚´ìš©ì€ í´ë¼ì´ì–¸íЏ 구현만 있으므로 JSFiddleì— Saveí•˜ê³ URLì„ ë§í¬í•˜ê±°ë‚˜ [ZeroPage_200_OK/소스] 페ì´ì§€ì— ì˜¬ë¦¬ì…”ë„ ë©ë‹ˆë‹¤. * ìœ„ì— ë§í¬í•œ ì €ì˜ Workspace Projectì˜ index.html 파ì¼ì— 메뉴 ìƒ˜í”Œì„ êµ¬í˜„í•´ë‘었습니다. ìƒë‹¨ì˜ Preview로 확ì¸í•˜ë©´ì„œ ì ì ˆížˆ 참조해서 만들면 ë„ì›€ì´ ë ê²ë‹ˆë‹¤. * [ì •ì§„ê²½] - c9.io는 í•„ìš”í• ë•Œ ë¨¹í†µì´ ë˜ë„¤ìš”... 실습 테마가 웹 게임 ì œìž‘ì´ë©´ Challengersì˜ ì½˜í…ì¸ ë¥¼ 보강하기 위해 ì¸ê³µì§€ëŠ¥ìœ¼ë¡œ í”Œë ˆì´ê°€ ìš©ì´í•œ ê²Œìž„ì„ ê¸°íší•´ì•¼ê² 습니다...ã…‹ã…‹ === 2012ë…„ 7ì›” 7ì¼ - ì´ë¡ === * 네트워í¬ì™€ ì¸í„°ë„· * 월드 와ì´ë“œ 웹(WWW)ê³¼ W3C 표준(Recommendation) * HTTP(HyperText Transfer Protocol) 소개 ==== 후기 ==== * [변형진] * ì›¹ì€ ë‹¤ì–‘í•œ ì´ë¡ ì ë°°ê²½ì„ ë°”íƒ•ìœ¼ë¡œ 탄ìƒí•˜ê³ ë°œì „í•´ 왔습니다. 우리 스터디ì—서는 그런 통합ì ì¸ ì§€ì‹ì„ 바탕으로 여러분들ì—게 í˜„ìž¬ì˜ ì›¹ ê¸°ìˆ ì— ëŒ€í•œ ì´í•´ëŠ” ë¬¼ë¡ ì´ê³ 웹 ì´í›„ì˜ ìƒˆë¡œìš´ ê²½í–¥ì„ ê³ ë¯¼í•˜ê³ ì—°êµ¬í•˜ê¸° 위해 필요한 단서를 ì œê³µí•˜ëŠ”ë° ëª©í‘œë¥¼ ë‘ê³ ìžˆìŠµë‹ˆë‹¤. ë¬¼ë¡ êµ³ì´ ëª¨ë¥´ê³ ìžˆì–´ë„ ë‹¨ìˆœ 웹 ê°œë°œì„ í•˜ëŠ”ë° ë¬´ë¦¬ëŠ” 없으나, ê´€ë ¨ëœ ë¬¸ì œí•´ê²° ê³¼ì •ì´ë‚˜ 새로운 ê¸°ìˆ ì´í•´ë¥¼ 위해서 중요한 ëŠ¥ë ¥ì´ ë 수 있습니다. * 우리 스터디ì—서 다루는 ì´ë¡ ì€ í•™ë¶€ 2~4í•™ë…„ì˜ ì—¬ëŸ¬ êµê³¼ë¥¼ í¬ê´„í• ë¿ ì•„ë‹ˆë¼ ê·¸ 범위를 ì´ˆì›”í• ìˆ˜ 있습니다. 하지만 ì•žìœ¼ë¡œë„ í•™ë¶€ 1í•™ë…„ë„ ì‰½ê²Œ ì´í•´í• 수 있ë„ë¡ ëŒ€ë¶€ë¶„ì˜ ì´ë¡ ê°ë¡ ì€ êµê³¼ ìˆ˜ì—…ì„ ë°”íƒ•ìœ¼ë¡œ 하지 ì•Šê³ ì„¤ëª…í•˜ëŠ” 방향으로 ì§„í–‰í•˜ê² ìŠµë‹ˆë‹¤. === 2012ë…„ 7ì›” 11ì¼ - 실습 === * XHTMLê³¼ CSS ê³¼ì œ 해설 * Form 계열 태그 활용 * JavaScript DOM API 첫소개 ==== 후기 ==== * form ê´€ë ¨ìœ¼ë¡œ ì‚¬ìš©ìž ìž…ë ¥ì„ ë°›ì„ ìˆ˜ ìžˆì—ˆë˜ ë¶€ë¶„ ì‹¤ìŠµì„ ì£¼ë¡œ ë°°ì› ìŠµë‹ˆë‹¤. ê·¼ë° ê¶ê¸ˆí•œê²Œ ë„ì¤‘ì— html5 얘기를 하시면서 <a href=""><button>abc</button></a> html5ì—서는 ì´ë ‡ê²Œ ì‚¬ìš©í• ìˆ˜ ìžˆëŠ”ë° ì´ëŸ°ê²Œ ìžë°”스í¬ë¦½íŠ¸ë¥¼ 쓸 수 없는 ê²½ìš°ì— ëœë‹¤ê³ í•˜ì…¨ëŠ”ë° ê·¸ëŸ¼ ì›ëž˜ ë²„íŠ¼ì˜ onclickê°™ì€ on~는 ìžë°”스í¬ë¦½íЏì¸ê±´ê°€ìš”? - [서ì˜ì£¼] === 2012ë…„ 7ì›” 14ì¼ - ì´ë¡ === ==== 후기 ==== * ì´ë²ˆ ì£¼ì œëŠ” 형진ì´í˜•한테 여러번 ë“¤ì—ˆë˜ ë‚´ìš©ì´ì—ˆë„¤ìš”. 확실히 여러번 들으니까 무슨 ì´ì•¼ê¸°ë¥¼ 하는지 조금 ë” ë¹ ë¥´ê²Œ ì´í•´í• 수 ìžˆì—ˆë˜ ê²ƒ 같습니다. ê·¸ë¦¬ê³ ì§€ë‚œë²ˆ ë“¤ì„ ë•Œì—는 ê¶ê¸ˆí•œê²Œ ìƒê° 안 ë‚¬ì—ˆëŠ”ë° ì´ë²ˆì—” ê¶ê¸ˆí•œê²Œ ìƒê¸°ë”êµ°ìš”. ëì§€ -ã……-;; ã…‹ã…‹ 다만 다ìŒì£¼ì— í• ì•„ë²„ì§€ 팔순ì´ë¼ 참여를 못 하게 ë˜ì–´ì„œ 좀 아쉬울 ë¿.. -_-a ê·¸ë¦¬ê³ ê³µëª¨ì „ê³¼ ê´€ë ¨í•´ì„œ ëë‚˜ê³ ì´ëŸ° ì €ëŸ° ì´ì•¼ê¸°ê°€ ë§Žì´ ë‚˜ì™”ì—ˆëŠ”ë°, 잘 ì§„í–‰ë˜ì–´ 우리 잘 í•˜ê³ ìžˆì–´ìš”~ ë¼ëŠ” ëª¨ìŠµì„ ë³´ì—¬ì¤¬ìœ¼ë©´ 하네요 - [권순ì˜] * https는 ì •ë§ ì–´ë ¤ìš´ ì£¼ì œ 같네요. ì¼ë‹¨ ì´í•´ ë˜ê³ 나면 ì‰¬ìš´ë° ë”ê°€ ì´ê²ƒ ì €ê²ƒ 얽혀있는 ëŠë‚Œì´ë„¤ìš”. ë”°ì§€ê³ ë³´ë©´ ë ˆì´ì–´ 하나 추가ë˜ì—ˆì„ ë¿ì¸ë° 난ì´ë„는 급 ìƒìй. 세션ì´ë‚˜ ì¿ í‚¤ê°™ì€ê²½ìš°ì—는 나오게 ëœ ë°°ê²½ì„ ì•Œê²Œë˜ì–´ì„œ 확실하게 ì´í•´í•˜ê³ 가는 ëŠë‚Œì´ë„¤ìš”. - [안í˜ì¤€] * ê°œì¸ì 으로 ì´ëž˜ì €ëž˜ ë§Žì´ ë“£ê¸°ë§Œ 한 용어들(ì¿ í‚¤, HTTPS 기타 등등)ì— ëŒ€í•´ì„œ ìžì„¸í•˜ê²Œ ë“¤ì„ ìˆ˜ 있어서 좋았습니다. 보안 ê´€ë ¨ì€ ì˜ˆì „ ë°ë¸”스 ë•Œë„ ìž ê¹ ë“¤ì„ ê¸°íšŒê°€ 있었는ë°, ê·¸ 때는 잘 ì´í•´ë¥¼ 못 í–ˆì—ˆëŠ”ë° ë°˜ë³µí•´ì„œ 들어서 그런지 ì´ë²ˆì—는 ì´í•´ê°€ 잘 ë습니다. 다ìŒìœ¼ë¡œëŠ” ìžë°”스í¬ë¦½íЏ ë¬¸ë²•ì— ëŒ€í•´ì„œ ë‹¤ë£¨ì‹ ë‹¤ê³ í•˜ì…¨ëŠ”ë° ì–´ë–¤ 방향으로 나갈지 ê¶ê¸ˆí•˜ë„¤ìš” - [서민관] === 2012ë…„ 7ì›” 21ì¼ - ì´ë¡ === ==== 후기 ==== * ìžë°”스í¬ë¦½íŠ¸ì˜ ê¸°ì´ˆì ì¸ ë¶€ë¶„ì´ì—ˆëŠ”ë° ìž˜ 몰ëžë˜ êµ¬ì¡°ì— ëŒ€í•´ì„œ 알게 ë˜ì–´ 좋았습니다. 실행 컨í…스트는 특히 잘 알아ë‘ê³ ê°ˆ 필요가 있다는 ìƒê°ì´ 들었습니다. - [안í˜ì¤€] * ìžë°”스í¬ë¦½íЏì—서 ìžì£¼ this 얘기가 나오ë˜ë°, ì´ë²ˆì— ì´ì•¼ê¸°ë¥¼ ë“¤ì„ ìˆ˜ 있어서 좋았습니다. ê°œì¸ì ì¸ ëŠë‚Œì„ ë§í•˜ìžë©´ 함수가 ë°ì´í„°ë¡œ 취급ë˜ëŠ”ë° í•¨ìˆ˜ ë‚´ë¶€ì—서 함수를 호출한 ê°ì²´(execution context)ì˜ ì •ë³´ë¥¼ 사용하기 위해서 this를 사용한다는 ëŠë‚Œì´ëŠ”ë° ë§žëŠ”ì§€ ëª¨ë¥´ê² êµ°ìš”. p.print를 넘기는 ê²ƒë„ ì‹¤ì œë¡œ class pì— ìžˆëŠ” 함수를 넘기는 게 ì•„ë‹ˆë¼ p.printì— ë°”ì¸ë”© ëœ ì–´ë–¤ 함수를 넘기는 것ì´ë‹ˆê¹Œ ë‚´ë¶€ì˜ thisê°€ 기존 OOP와 ê°™ì´ í•´ë‹¹ classì˜ ì¸ìŠ¤í„´ìŠ¤ëŠ” ë 수 ì—†ê² ì£ . ê·¸ë¦¬ê³ ì œì¼ ë§ˆìŒì— ë“¤ì—ˆë˜ ê²ƒì€ ì—시 ì˜ˆì „ì— í–ˆë˜ ìŠ¤í„°ë””ì—서 ë‹¤ë¤˜ë˜ ìžë°”스í¬ë¦½íŠ¸ì˜ ë„¤ 가지 íŠ¹ì§•ì— ëŒ€í•´ì„œ ë“¤ì„ ìˆ˜ 있었다는 ì ì´ì—ˆìŠµë‹ˆë‹¤. 사실 ì˜ˆì „ 스터디 ë–„ 무척 ë“£ê³ ì‹¶ì—ˆëŠ”ë° ê°œì¸ì ì¸ ì‚¬ì •ìœ¼ë¡œ 참가를 í• ìˆ˜ 없어서 꽤 ì•„ì‰¬ì› ë˜ í„°ë¼ ;;; 마지막ì—는 ê°œì¸ì ì¸ ì‚¬ì •ìœ¼ë¡œ ì‹œê°„ì´ ì•ˆ 맞아서 좀 급하게 나갔는ë°, ê·¸ëž˜ë„ ìµœëŒ€í•œ ë“¤ì„ ìˆ˜ 있는 ë°ê¹Œì§€ 듣기를 잘 한 것 ê°™ì€ ëŠë‚Œì´ 들었습니다. - [서민관] * ìžë°”스í¬ë¦½íŠ¸ì˜ ì–¸ì–´ íŠ¹ì„±ì— ë”°ë¼ì„œ ë°°ìš°ê³ ê¸°ë³¸ì ì¸ ì‚¬ìš© ë¬¸ë²•ì— ëŒ€í•´ì„œ ë°°ì› ìŠµë‹ˆë‹¤. ëª…ë ¹í˜• 구조ì í”„ë¡œê·¸ëž˜ë° ì–¸ì–´ì ì¸ ë¶€ë¶„ì— ëŒ€í•´ì„œëŠ” ê·¸ë ‡ê²Œ ì–´ë ¤ìš´ê±´ ì—†ì—ˆëŠ”ë° ê·¸ ë’¤ì˜ í•¨ìˆ˜í˜• ì„ ì–¸ì í”„ë¡œê·¸ëž˜ë° ì–¸ì–´ 부분ì—서 í´ë¡œì €ëž‘ í•¨ìˆ˜ì— í•¨ìˆ˜ë¥¼ ì¸ìžë¡œ 주는 ë¶€ë¶„ì´ ê°™ì´ ì“°ì´ë‹ˆê¹Œ 좀 복잡했었습니다. 조금 ë” ê³µë¶€í•´ì•¼ í• ê²ƒ 같습니다. var Person = function(){}; ê°™ì€ ë¶€ë¶„ë‚˜ thisê°€ new를 í–ˆì„ ë•Œì—ë§Œ ì œëŒ€ë¡œ ë™ìž‘한다는 ë¶€ë¶„ë„ íŠ¹ì´í–ˆìŠµë‹ˆë‹¤. 문법ì ì¸ ë¶€ë¶„ ìžì²´ëŠ” ê·¸ë ‡ê²Œ ì–´ë ¤ìš´ 것 같지 않ì€ë° 함수를 중첩해서 쓰거나 그런 ë¶€ë¶„ì´ ì•½ê°„ 알아보기 íž˜ë“ ê²ƒ 같습니다. - [서ì˜ì£¼] === 2012ë…„ 7ì›” 25ì¼ - 실습 === ==== 후기 ==== * 서버ì—서 ë°ì´í„°ë¥¼ ê°€ì ¸ì™€ì„œ 보여줘야 하는 ê²½ìš°ì— ì‹±ê¸€ìŠ¤ë ˆë“œë¥¼ 사용하기 ë•Œë¬¸ì— ìƒê¸°ëŠ” ë¬¸ì œì ì— ëŒ€í•´ì„œ ë°°ìš°ê³ ì´ë¥¼ 처리하기 위한 ë°©ë²•ì„ ë°°ì› ìŠµë‹ˆë‹¤. 처ìŒì—는 iframeì„ ì´ìš©í•œ 처리를 ë°°ì› ëŠ”ë° iframe 내부는 ë…립ì ì¸ íŽ˜ì´ì§€ì´ê¸° ë•Œë¬¸ì— ë°”ê¹¥ì˜ ë Œë”ë§ì— ì˜í–¥ì„ 안주지만 페ì´ì§€ë¥¼ ì´ë™í•˜ëŠ” 소리가 ë‚˜ê³ , iframeì´ ì„œë²„ì¸¡ì˜ ë°ì´í„°ë¥¼ ì½ì–´ì„œ ë Œë”ë§ í•´ì¤„ 때 ì„œë²„ì¸¡ì˜ ìŠ¤í¬ë¦½íŠ¸ê°€ 실행ë˜ëŠ” ë¬¸ì œì ë“±ì´ ìžˆìŒì„ 알았습니다. ì´ë¥¼ 대체하기 위해 ajax를 ì‚¬ìš©í•˜ëŠ”ë° ajax는 ë Œë”ë§ì€ 하지 ì•Šê³ ìš”ì² ìŠ¤ë ˆë“œë§Œ ìƒì„±í•´ì„œ 처리를 하는 ë°©ì‹ì¸ë° xmlHttpRequest나 ActiveXObjectê°™ì€ ë‚´ìž¥ê°ì²´ë¥¼ ì¨ì„œ ìš”ì² ìŠ¤ë ˆë“œë¥¼ ìƒì„±í•œë‹¤ëŠ”ê±¸ ë°°ì› ìŠµë‹ˆë‹¤. ajaxë¼ê³ ë§ì€ ë§Žì´ ë“¤ì—ˆëŠ”ë° êµ¬ì²´ì 으로 ì–´ë–¤ 함수나 ì–´ë–¤ ê°ì²´ë¥¼ ì“°ë©´ ajaxì¸ê±´ê°€ëŠ” 잘 몰ëžì—ˆëŠ”ë° ì¼ë°˜ì 으로 비ë™ê¸° 처리를 하는거면 ajaxë¼ê³ ë§í• 수 ìžˆë‹¤ê³ í•˜ì…¨ìŠµë‹ˆë‹¤. ê·¸ë¦¬ê³ ì¤‘ê°„ì— body.innerHTMLì„ ì§ì ‘ ìˆ˜ì •í•˜ëŠ” 부분ì—서 ë¬¸ì œê°€ ìƒê²¼ì—ˆëŠ”ë° innerHTMLì„ ì†ëŒ€ë©´ DOMì´ ë‹¤ì‹œ ë§Œë“¤ì–´ì ¸ì„œ 핸들러가 ì „ë¶€ 다 사ë¼ì§„다는 ê²ƒë„ ê¸°ì–µì„ í•´ë‘¬ì•¼ê² ìŠµë‹ˆë‹¤. - [서ì˜ì£¼] === 2012ë…„ 7ì›” 28ì¼ - ì´ë¡ === === 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를 ì°¾ë“ ëª» ì°¾ì€ í•ìƒ ë°°ì—´ì„ ë°˜í™˜í•˜ê¸° ë•Œë¬¸ì— ë°˜í™˜ ê²°ê³¼ì— ìƒê´€ ì—†ì´ ë°°ì—´ì— ëŒ€í•œ 처리만 ê³ ë ¤í•˜ë©´ ëœë‹¤. ==== 후기 ==== * 웹 ì´ˆê¸°ì— cssì„¤ëª…í–ˆì„ ë•Œ cssì…€ë ‰í„° ë¬¸ë²•ë„ ì„¤ëª…ì„ í•´ì£¼ì…¨ì—ˆëŠ”ë° ë§Žì´ ê¹Œë¨¹ì–´ì„œ í—·ê°ˆë ¸ì—ˆìŠµë‹ˆë‹¤. -_- ì—시 한 ë‘ ë²ˆ 본걸로는 금방 잊어버리기 쉬운 것 같습니다. jQueryí•¨ìˆ˜ì˜ ëŒ€ë¶€ë¶„ì€ í˜¸ì¶œ 후 jQueryê°ì²´ë¥¼ 리턴하기 ë•Œë¬¸ì— í•¨ìˆ˜ì˜ ì²´ì´ë‹ì´ 가능하다는 얘기를 í•˜ì…¨ì—ˆëŠ”ë° êµ¬ê¸€ì˜ guavaë„ ê·¸ë ‡ê³ ìš”ì¦˜ì€ ì´ëŸ° í˜•íƒœì˜ êµ¬í˜„ì´ ë§Žì€ê±´ì§€ ê¶ê¸ˆí•©ë‹ˆë‹¤. ê·¸ë¦¬ê³ ê²°ê³¼ ê°’ì„ ë°›ì•„ì„œ 계ì†í•´ì„œ 다른 ìž‘ì—…ì„ í•˜ëŠ” 경우가 아니ë¼ë©´ ì²´ì´ë‹ì´ë‚˜ 그냥 한 ë²ˆì— ê³„ì‚°í•˜ëŠ” ë°©ì‹ì´ë‚˜ 별 ì°¨ì´ê°€ 없는건가요? - [서ì˜ì£¼] === 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 === 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를 사용. === 2012ë…„ 8ì›” 18ì¼ í† ìš”ì¼ === * Load web page faster!!! * CSS -> HTML -> JavaScript 순서로 htmlì„ ìž‘ì„±í•œë‹¤. - CSSê°€ ë’¤ì— ìžˆìœ¼ë©´ HTML ë Œë”ë§ì„ 한 í›„ì— CSSê°€ ì ìš©ëœë‹¤. JavaScriptê°€ ì•žì— ìžˆìœ¼ë©´ JavaScriptê°€ 다 ë°›ì•„ì§€ê³ ë‚˜ì„œ ë’·ë¶€ë¶„ì´ ì‹¤í–‰ë˜ê¸° ë•Œë¬¸ì— ì†ë„ì— ë¬¸ì œê°€ ìžˆì„ ìˆ˜ 있다. * JavaScriptê°€ ë’¤ì— ìžˆìœ¼ë©´ ì´ë²¤íŠ¸ê°€ 늦게 걸리게 ëœë‹¤. -> Command Queue 패턴 사용. * Scriptì˜ ìš”ì² - importì— ëŒ€í•œ ìš”ì²ì€ ë³‘ë ¬ì 으로 ì´ë£¨ì–´ì§€ì§€ë§Œ ë’¤ìª½ì˜ ìš”ì²ì´ ë¨¼ì € 처리ë˜ë”ë¼ë„ 앞쪽 ìš”ì²ì´ 처리ë˜ê¸° ì „ê¹Œì§€ëŠ” 대기해야 한다. * <script defer - html íŒŒì‹±ì„ í•˜ë©´ì„œ scriptì— ëŒ€í•œ ìš”ì²ì„ ë³‘ë ¬ì 으로 보낸 ì´í›„ì— ëª¨ì¸ script를 í•œêº¼ë²ˆì— ì²˜ë¦¬í•œë‹¤. script ìš”ì²ì˜ 순서가 지켜진다. * <script async - html íŒŒì‹±ì„ í•˜ë©´ì„œ scriptì— ëŒ€í•œ ìš”ì²ì„ ë³‘ë ¬ì 으로 ë³´ë‚´ê³ , ë¨¼ì € 처리가 ëœ script를 ë¨¼ì € 처리한다. ìš”ì²ì˜ 순서가 지켜지지 않는다. * JSONP * Web Server - http requestì— ëŒ€í•´ ìžì‹ ì˜ file systemì—서 해당 파ì¼ì„ 찾아서 보낸다. * Static resources * GET, POST, PUT * Dynamic resources * Logical file * CGI * module * process per request <-> thread per request * asynchronous and event driven * FastCGI ==== 후기 ==== * Nginx + Fast CGI + nodejsì˜ ì¡°í•©ì´ ì–¼ë§ˆë‚˜ ê°•ë ¥í•œ ì¡°í•©ì¸ì§€ 새삼 êº ë‹«ê²Œ ë˜ì—ˆìŠµë‹ˆë‹¤. 하지만 ì•ˆì •ì„±ì„ ì›í•œë‹¤ë©´ ì—시나 Apache... - [안í˜ì¤€] ---- [2012년활ë™ì§€ë„], [스터디분류]