이선 브라운의 러닝 자바스크립트 책을 학습하고 기억해둘 만 한 부분을 야생학습하여 정리하였습니다. 제이쿼리는 DOM을 조작하거나 Ajax 요청을 실행할 때 널리 쓰이는 라이브러리입니다. 제이쿼리를 쓰면 얻을 수 있는 큰 갈래의 3가지 장점이 있습니다. 브라우저 호환성을 걱정하지 않아도 됩니다. 제이쿼리가 제공하는 Ajax API는 단순합니다. 내장된 DOM API를 더 유용하고 단순하게 바꾼 메서드를 제공합니다. 달러 기호 제이쿼리는 JS에서 달러기호를 식별자로 사용할 수 있다는 장점을 이용하여 제이쿼리를 사용할 때 달러기호를 이용하도록 했습니다. 제이쿼리 불러오기 DOM 기다리기 $(document).ready(function() { // DOM이 구성된 다음 실행됨 }); //단축형 $(functio..
문서객체모델(DOM) DOM은 HTML 문서의 구조를 나타내는 표기법인 동시에 브라우저가 HTML 문서를 조작하는 핵심이기도 합니다. DOM은 트리 구조로 표현합니다. DOM 트리는 노드로 구성됩니다. 루트 노드는 문서(document)이며 자식 노드는 요소 하나뿐입니다. DOM 트리의 모든 노드는 Node 클래스의 인스턴스입니다. Node 객체에는 트리 구조를 나타내는 parentNode와 childNodes 프로퍼티, 자신에 대한 프로퍼티인 nodeName과 nodeType 프로퍼티가 있습니다. 요소찾기 get 메서드 document.getElementById('content'); // HTML요소의 ID로 요소 찾기 document.getElemnetsByClassNmae('callout'); //..
자바스크립트 애플리케이션은 단일 스레드에서 동작합니다. 즉 자바스크립트는 한 번에 한 가지 일만 할 수 있습니다. 자바스크립트는 비동기적 프로그래밍에 대처하기 위해 처음에는 콜백을, 다음에는 프라미스 마지막은 제너레이터를 추가시켰습니다. 각 방법에 대해 들어가기 전 이해가 쉽도록 비유적인 표현을 책에서 명시하고 있습니다. 예약하지 않고 분주한 음식점에 방문한 경우, 콜백이란 음식점은 줄을 서서 기다리지 않도록 당신의 전화번호를 받아서 자리가 나면 전화해줍니다. 프라미스라는 음식점의 경우는 자리가 났을 때 진동하는 호출기를 당신에게 넘겨줍니다. 실행되어야 하는 타이밍을 알려주는 수단을 콜백의 경우 당신이 음식점에게, 프라미스의 경우 음식점이 당신에게 준다는 비유를 명시하면 좀 더 쉽게 이해할 수 있습니다...
함수를 바라보는 측면 서브루틴이란 반복되는 작업의 일부를 떼어내서 이름을 붙이고, 언제든지 이름을 불러 중복되는 코드를 없애며 간단하게 만드는 수단입니다. 함수는 이전부터 서브루틴으로서의 용도로 사용되어 왔습니다. 기존 서브루틴은 편리하지만 결과값을 다른곳에 활용할 수 없습니다. 이를 해결하기 위해 좀 더 나아가 값을 반환하는 서브루틴을 생각해볼 수 있습니다. 함수는 반환값을 만듦으로서 간단하게 값을 반환하는 서브루틴으로서의 역할을 수행할 수 있습니다. 이런 부수적인 측면 뿐만 아니라 당연하게도 함수는 함수 그 자체로서 생각해볼 수도 있습니다. 수학적인 정의의 함수와 마찬가지로 입력이 들어가면 결과가 나오는 함수 말입니다. 이렇게 수학적 정의에 충실한 함수를 순수한 함수라고 부릅니다. 순수한 함수가 되기..
이선 브라운의 러닝 자바스크립트 책을 학습하고 기억해둘 만 한 부분을 야생학습하여 정리하였습니다. 이터레이터와 제너레이터는 ES6에서 새로 도입되었습니다. 이터레이터는 일종의 책갈피와 비슷한 개념입니다. 예를 들어 book이란 배열이 있고 이 배열의 각 요소는 책의 한 페이지를 나타내는 문자열이라고 칩시다. const book = [ /* 문장 하나 씩 들어있는 문자열 배열 */ ]; // book 배열에 values 메서드를 써서 이터레이터를 만듭니다. const it = book.values(); //이터레이터는 보통 it이란 이름으로 변수/상수 명을 짓습니다. //읽기 시작 it.next();// { value: /* book 배열의 첫번째 문장 */, done: false } it.next();/..
이선 브라운의 러닝 자바스크립트 책을 학습하고 기억해둘 만 한 부분을 야생학습하여 정리하였습니다. 맵 ES6 이전에는 키와 값을 연결하려면 객체를 이용해야 했지만 이럴경우 여러가지 단점이 존재합니다. 프로토타입 체인 때문에 의도치 않은 연결이 생기거나, 키는 반드시 문자열이나 심볼이어야 하므로 객체를 키로 쓸 수 없고 프로퍼티 순서를 보장해주지 않습니다. Map 객체는 결함을 모두 해결했고 키와 값을 연결할 목적에 부합하기 위해 만들어 졌습니다. 아래는 Map을 사용하는 예시입니다. const u1 = { name: 'Maple"}; const u2 = { name: 'Kale"}; const u3 = { name: 'Hun"}; const u4 = { name: 'James"}; const userRo..
세종판 미니 츠타야 - 꾸메문고
지난 주부터 국토연구원에서 디자인 업무를 하는 아르바이트를 하고 있다. 지원하는 족족 붙었던 지난 여름방학과는 달리 이번에는 자리를 구하는 데 꽤나 애를 먹고 있던 중 얻게 된 일이라 꽤나 감사하게 여기며 일하고 있다. 무엇보다 유학이나 대학원 과정은 기본인 고학력자 연구원분들과 함께 일하고 국책기관의 어마무시한 복지를 체험해볼 수 있다는 점은 너무나도 감사한 기회다. 점심시간이 되면 1층에 있는 구내식당에서 밥을 먹는데 워낙 퀄리티가 좋아서 인근에 나가볼 생각도 안하고 있었다. 오늘은 같이 일하시는 연구원님이 하루종일 출장을 가셔서 점심시간이 평소보다 여유로웠던 탓에 인근을 구경해보기로 했다. 흔히 세종시 하면 떠올리는 신도시 구역은 강을 사이에 두고 영역이 나뉘어 있는데 나는 강북에서 살아 강남에 있..
이선 브라운의 러닝 자바스크립트 책을 학습하고 기억해둘 만 한 부분을 야생학습하여 정리하였습니다. 프로퍼티 나열 컨테이너의 컨텐츠를 리스트로 나열하라고 하면 일반적으로 배열을 생각하지만 자바스크립트에서 객체또한 컨테이너이고 프로퍼티 나열을 지원합니다. 주의해야할 점은 프로퍼티 나열에서 순서대로 나열된다는 보장이 없다는 점입니다. For ... in const SYM = Symbol(); const o = { a: 1, b: 2, c:3, [SYM]: 4};//for...in 루프에서는 키가 심볼인 프로퍼티는 포함X for(let prop in o){ if (!o.hasOwnProperty(prop)) continue; console.log(`${prop}: ${o[prop]}`); } hasOwnProp..