본문 바로가기

0/javascript

 (11)
Mastering Design Patterns (1) Modules There is no first class support for namespaces. To create modules just attach an object to the global namespace. Westeros = {} This object is, by default, attached to the top-level object, so we need not do anything more than that. This allows you to spread your definitions over a number of files. Westeros = Westeros || {} Westeros.Castle = function(name) { this. name }; // constructor W..
Learning JavaScript 요약 정리 (4) 12장 ~ 14장 (이터레이터와 제너레이터, 비동기 프로그래밍) 12장 이터레이터와 제너레이터 이터레이터 이터레이터는 '지금 어디 있는지' 파악할 수 있도록 돕는다는 면에서 일종의 책갈피와 비슷한 개념이다. 배열은 이터러블 객체의 좋은 예이다. const it = book.values(); let current = it.next(); while(!current.done){ console.log(current.value); current = it.next(); } 제너레이터 제너레이터란 이터레이터를 사용해 자신의 실행을 제어하는 함수이다. 제너레이터는 두 가지 새로운 개념을 도입했다. 함수의 실행을 개별적 단계로 나눔으로써 함수의 실행을 제어한다는 것과 실행 중인 함수와 통신한다는 것이다. 제너레이터는 언제든 호출자에게 제어권을 넘길 수 있다. 제너레이터는 호출한 즉시..
Learning JavaScript 요약 정리 (3) 8장~10장 (배열, 객체지향 프로그래밍, 맵과 셋) 8장 배열과 처리 배열의 마법 reduce 누적값이 제공되지 않으면 reduce는 첫 번째 배열 요소를 초기값으로 보고 두 번째 요소에서부터 함수를 호출한다. const words = ["Beachball", "Rodeo", "Angel", "Aardvark", "Xylophone", "Npvember", "Chocolate"]; const longWords = words.reduce((a, w) => w.length>6 ? a + " " + w : a, "").trim(); 9장 객체와 객체지향 프로그래밍 OOP의 기본 아이디어는 단순하고 직관적이다. 객체는 데이터와 기능을 논리적으로 묶어놓은 것이다. OOP의 기본 용어에 대해 알아보자. 클래스 : 추상적이고 범용적인 것 (ex. 어떤 자동차) 인스턴..
Learning JavaScript 요약 정리 (2) 7장 (스코프) 7장 스코프 스코프는 변수와 상수, 매개변수가 언제 어디서 정의되는지 결정한다. 가시성(visibility) 이라고도 불리는 스코프는 프로그램의 현재 실행 중인 부분, 즉 실행 컨텍스트에서 현재 보이고 접근할 수 있는 식별자들을 말한다. 반면 존재한다는 말은 그 식별자가 메모리가 할당된(예약된) 무언가를 가리키고 있다는 뜻이다. 정적 스코프와 동적 스코프 자바스크립트의 스코프는 정적이다. 소스 코드만 봐도 변수가 스코프에 있는지 판단할 수 있다는 뜻이다. 다만, 소스 코드만 봐도 즉시 스코프를 분명히 알 수 있다는 뜻은 아니다. 정적 스코프는 어떤 변수가 함수 스코프 안에 있는지 함수를 정의할 때 알 수 있다는 뜻이다. 호출할 때 알 수 있는 것은 아니다. const x = 3; function f(){..
Learning JavaScript 요약 정리 (1) (2장 ~ 6장) 2장 자바스크립트 개발 도구 깃 : 프로젝트가 커져도 쉽게 관리할 수 있고 다른 개발자와 협력할 수 있게 돕는 버전 컨트롤 도구. 노드 : 브라우저 밖에서 자바스크립트를 실행할 수 있게 하는 도구. 노드와 함꼐 설치되는 npm은 이 리스트의 다른 도구를 설치할 때 필요. 걸프 : 반복적인 개발 작업을 자동화하는 빌드 도구. 그런트도 널리 쓰임. (현재는 웹팩.. 아니 parcel?) 바벨 : ES6 코드를 ES5 코드로 변환하는 트랜스컴파일러. ES린트 : 자주 하는 실수를 피하고 더 나은 프로그래머가 되도록 돕는 린트 프로그램. 새 프로젝트 시작시 필요한 것. 프로젝트에 사용할 전용 디렉터리. 이 디렉터리를 프로젝트 루트라고 부른다. 깃 저장소 (git init) package.json 파일 (npm ..
JavaScript 표준의 선구자들 : CommonJS와 AMD 범용적으로 JavaScript를 사용하기 위해 필요한 조건은 모듈화입니다. 이 모듈화 작업의 선두 주자는 CommonJS와 AMD입니다. CommonJS와 AMD의 JavaScriot 모듈화에 대해 간략하게 살펴봅시다. CommonJS JS를 브라우저에서뿐만 아니라, 서버사이드 애플리케이션이나 데스크톱 애플리케이션에서도 사용하려고 조직한 자발적 워킹 그룹. CommonJS의 'Common'은 JS를 브라우저에서만 사용하는 언어가 아닌 일반적인 범용 언어로 사용할 수 있도록하겠다는 의지를 나타내고 있는 것이라고 이해할 수 있다. 이 그룹은 JS를 범용적으로 사용하기 위해 필요한 '명세(Specification)'를 만드는 일을 한다. 탄생 배경 1996년 JS가 탄생한 후, JS를 브라우저 밖에서도 사용하..
외부 API를 사용해서 데이터를 끌어오는 방법 (AJAX, Fetch API & Async/Await) AJAX AJAX는 Asynchronous Javascript and XML의 약자이다. (하지만 요즘 많은 API들이 XML 대신 JSON 데이터를 제공한다.) HTML, CSS, JavaScript, DOM 조작 과 XMLHttpRequest 객체를 활용한 프로그래밍 방식으로 AJAX를 사용하는 가장 큰 목적은 전체 페이지가 다시 로드되지 않고 일부분만 업데이트하기 위해서이다. 또한 AJAX를 사용하면 웹페이지 일부가 리로드 되는 동안에도 코드가 계속 실행되어 비동기식으로 작업할 수 있다. // XHR 객체 생성 let xhr = new XMLHttpRequest; // 요청 초기화 xhr.open('GET', '원하는 주소', true); // XMLHttpRequest 처리가 완료되면 실행 xhr..
What is a Hoisting? Conceptually, a strict definition of hoisting suggests that variable and function declarations are physically moved to the top of your code, but this is not in fact what happens.Instead, the variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code. Example Technical exampleOne of the advantage of JavaScript putting functi..

티스토리툴바