1. Technology ¶
- World Wide Web Technology Surveys - http://w3techs.com/
- Markup Language
- Cascading Style Sheet
- Client-side Script Language
- JavaScript Library
- Server-side Script Language
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.1. 2012년 7월 4일 - 실습 ¶
- 웹 기술, 환경, 레퍼런스 소개
- 실습 테마 선정 - 각자 웹 게임 제작하기
- XHTML1.0, CSS2.1 기초
- 변형진
- 젠장 집에 오니 Cloud9 IDE가 빠르게 잘 됩니다. 학교에 있는 사람들도 테스트 부탁합니다. 학교 네트워크 관련 이슈인지 그냥 그 시간대 c9.io 서비스 관련 이슈인지 궁금하군요.
- 각자 자신의 Cloud9 IDE Dashboard에서 Workspace를 만들어 과제를 진행하고 URL을 공유합시다. 과제는 "메뉴 만들기"였는데 어떤 모습으로 구현해도 좋습니다!
- 위에 링크한 저의 Workspace Project의 index.html 파일에 메뉴 샘플을 구현해두었습니다. 상단의 Preview로 확인하면서 적절히 참조해서 만들면 도움이 될겁니다.
- 정진경 - c9.io는 필요할 때 먹통이 되네요... 실습 테마가 웹 게임 제작이면 Challengers의 콘텐츠를 보강하기 위해 인공지능으로 플레이가 용이한 게임을 기획해야겠습니다...ㅋㅋ
5.2. 2012년 7월 7일 - 이론 ¶
- 네트워크와 인터넷
- 월드 와이드 웹(WWW)과 W3C 표준(Recommendation)
- HTTP(HyperText Transfer Protocol) 소개
- 변형진
- 웹은 다양한 이론적 배경을 바탕으로 탄생하고 발전해 왔습니다. 우리 스터디에서는 그런 통합적인 지식을 바탕으로 여러분들에게 현재의 웹 기술에 대한 이해는 물론이고 웹 이후의 새로운 경향을 고민하고 연구하기 위해 필요한 단서를 제공하는데 목표를 두고 있습니다. 물론 굳이 모르고 있어도 단순 웹 개발을 하는데 무리는 없으나, 관련된 문제해결 과정이나 새로운 기술 이해를 위해서 중요한 능력이 될 수 있습니다.
- 우리 스터디에서 다루는 이론은 학부 2~4학년의 여러 교과를 포괄할 뿐 아니라 그 범위를 초월할 수 있습니다. 하지만 앞으로도 학부 1학년도 쉽게 이해할 수 있도록 대부분의 이론 각론은 교과 수업을 바탕으로 하지 않고 설명하는 방향으로 진행하겠습니다.
5.3. 2012년 7월 11일 - 실습 ¶
- XHTML과 CSS 과제 해설
- Form 계열 태그 활용
- JavaScript DOM API 첫소개
- form 관련으로 사용자 입력을 받을 수 있었던 부분 실습을 주로 배웠습니다. 근데 궁금한게 도중에 html5 얘기를 하시면서 <a href=""><button>abc</button></a> html5에서는 이렇게 사용할 수 있는데 이런게 자바스크립트를 쓸 수 없는 경우에 된다고 하셨는데 그럼 원래 버튼의 onclick같은 on~는 자바스크립트인건가요? - 서영주
- 이번 주제는 형진이형한테 여러번 들었던 내용이었네요. 확실히 여러번 들으니까 무슨 이야기를 하는지 조금 더 빠르게 이해할 수 있었던 것 같습니다. 그리고 지난번 들을 때에는 궁금한게 생각 안 났었는데 이번엔 궁금한게 생기더군요. 뭐지 -ㅅ-;; ㅋㅋ 다만 다음주에 할아버지 팔순이라 참여를 못 하게 되어서 좀 아쉬울 뿐.. -_-a 그리고 공모전과 관련해서 끝나고 이런 저런 이야기가 많이 나왔었는데, 잘 진행되어 우리 잘 하고 있어요~ 라는 모습을 보여줬으면 하네요 - 권순의
- https는 정말 어려운 주제 같네요. 일단 이해 되고 나면 쉬운데 뭔가 이것 저것 얽혀있는 느낌이네요. 따지고 보면 레이어 하나 추가되었을 뿐인데 난이도는 급 상승. 세션이나 쿠키같은경우에는 나오게 된 배경을 알게되어서 확실하게 이해하고 가는 느낌이네요. - 안혁준
- 개인적으로 이래저래 많이 듣기만 한 용어들(쿠키, HTTPS 기타 등등)에 대해서 자세하게 들을 수 있어서 좋았습니다. 보안 관련은 예전 데블스 때도 잠깐 들을 기회가 있었는데, 그 때는 잘 이해를 못 했었는데 반복해서 들어서 그런지 이번에는 이해가 잘 됐습니다. 다음으로는 자바스크립트 문법에 대해서 다루신다고 하셨는데 어떤 방향으로 나갈지 궁금하네요 - 서민관
- 자바스크립트의 기초적인 부분이었는데 잘 몰랐던 구조에 대해서 알게 되어 좋았습니다. 실행 컨텍스트는 특히 잘 알아두고 갈 필요가 있다는 생각이 들었습니다. - 안혁준
- 자바스크립트에서 자주 this 얘기가 나오던데, 이번에 이야기를 들을 수 있어서 좋았습니다. 개인적인 느낌을 말하자면 함수가 데이터로 취급되는데 함수 내부에서 함수를 호출한 객체(execution context)의 정보를 사용하기 위해서 this를 사용한다는 느낌이는데 맞는지 모르겠군요. p.print를 넘기는 것도 실제로 class p에 있는 함수를 넘기는 게 아니라 p.print에 바인딩 된 어떤 함수를 넘기는 것이니까 내부의 this가 기존 OOP와 같이 해당 class의 인스턴스는 될 수 없겠죠. 그리고 제일 마음에 들었던 것은 역시 예전에 했던 스터디에서 다뤘던 자바스크립트의 네 가지 특징에 대해서 들을 수 있었다는 점이었습니다. 사실 예전 스터디 떄 무척 듣고 싶었는데 개인적인 사정으로 참가를 할 수 없어서 꽤 아쉬웠던 터라 ;;; 마지막에는 개인적인 사정으로 시간이 안 맞아서 좀 급하게 나갔는데, 그래도 최대한 들을 수 있는 데까지 듣기를 잘 한 것 같은 느낌이 들었습니다. - 서민관
- 자바스크립트의 언어 특성에 따라서 배우고 기본적인 사용 문법에 대해서 배웠습니다. 명령형 구조적 프로그래밍 언어적인 부분에 대해서는 그렇게 어려운건 없었는데 그 뒤의 함수형 선언적 프로그래밍 언어 부분에서 클로저랑 함수에 함수를 인자로 주는 부분이 같이 쓰이니까 좀 복잡했었습니다. 조금 더 공부해야 할 것 같습니다. var Person = function(){}; 같은 부분나 this가 new를 했을 때에만 제대로 동작한다는 부분도 특이했습니다. 문법적인 부분 자체는 그렇게 어려운 것 같지 않은데 함수를 중첩해서 쓰거나 그런 부분이 약간 알아보기 힘든 것 같습니다. - 서영주
- 서버에서 데이터를 가져와서 보여줘야 하는 경우에 싱글스레드를 사용하기 때문에 생기는 문제점에 대해서 배우고 이를 처리하기 위한 방법을 배웠습니다. 처음에는 iframe을 이용한 처리를 배웠는데 iframe 내부는 독립적인 페이지이기 때문에 바깥의 렌더링에 영향을 안주지만 페이지를 이동하는 소리가 나고, iframe이 서버측의 데이터를 읽어서 렌더링 해줄 때 서버측의 스크립트가 실행되는 문제점 등이 있음을 알았습니다. 이를 대체하기 위해 ajax를 사용하는데 ajax는 렌더링은 하지 않고 요청 스레드만 생성해서 처리를 하는 방식인데 xmlHttpRequest나 ActiveXObject같은 내장객체를 써서 요청 스레드를 생성한다는걸 배웠습니다. ajax라고 말은 많이 들었는데 구체적으로 어떤 함수나 어떤 객체를 쓰면 ajax인건가는 잘 몰랐었는데 일반적으로 비동기 처리를 하는거면 ajax라고 말할 수 있다고 하셨습니다. 그리고 중간에 body.innerHTML을 직접 수정하는 부분에서 문제가 생겼었는데 innerHTML을 손대면 DOM이 다시 만들어져서 핸들러가 전부 다 사라진다는 것도 기억을 해둬야겠습니다. - 서영주
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를 찾든 못 찾은 항상 배열을 반환하기 때문에 반환 결과에 상관 없이 배열에 대한 처리만 고려하면 된다.
- 웹 초기에 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
- 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에 대한 요청은 병렬적으로 이루어지지만 뒤쪽의 요청이 먼저 처리되더라도 앞쪽 요청이 처리되기 전까지는 대기해야 한다.