Callback 다른 함수의 인자로 전달되는 함수를 뜻한다. 아래의 코드를 실행해보면 setTimeout이 비동기적 처리를 하기 때문에 새로 추가한 포스트가 getPost 메서드를 통해 표출되지 않는다. const posts = [ { title: "Post One", body: "This is post one" }, { title: "Post Two", body: "This is post Two" } ]; function createPost(post) { setTimeout(function () { posts.push(post); }, 2000); } function getPost() { setTimeout(function (){ let output = ""; posts.forEach(function ..

REpresentational State Transfer API 네트워크 애플리케이션을 설계하기 위한 아키텍쳐 스타일이다. Stateless, client-server protocol 등에 의존하며, 따라서 대부분 HTTP이다. 서버 측 객체들을 다루기 위해 사용된다. HTTP Request Types HTTP method DESC GET 특정 자원으로부터 데이터를 찾아내기 위해 사용된다. POST 특정 자원에 데이터를 추가(제출)하기 위해 사용된다. PUT 특정 자원에 데이터를 수정(업데이트)하기 위해 사용된다. DELETE 특정 자원으로부터 데이터를 제거하기 위해 사용된다. HEAD Get과 같은 기능이나 body를 리턴하지 않고 header만 리턴한다. OPTIONS 서버에서 지원하는 요청타입을 리..

xhr.open() 요청 타입 및 요청 대상의 URL 또는 파일이름을 상세하여 초기화시키는 메서드이다. 세번째 파라미터는 비동기 여부이다. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open XMLHttpRequest.open() - Web APIs | MDN The XMLHttpRequest method open() initializes a newly-created request, or re-initializes an existing one. developer.mozilla.org xhr.onload 요청한 데이터를 받았을 때 실행될 함수를 담는 프로퍼티이다. *참고: HTTP 상태코드 https://developer.mozilla..

AJAX (Asynchronous Javascript And XML) 프로그래밍 언어나 프레임워크 또는 라이브러리가 아닌 클라이언트와 서버 간에 데이터를 비동기적으로 주고 받는 기법이다. 따라서 웹 페이지의 새로고침 없이 이루어진다. XML이 약자에 포함되어 있긴 하나 자주 쓰이진 않는다. XMLHttpRequest (XHR) 객체의 메서드를 이용해 클라이언트와 서버 간 데이터를 주고 받을 수 있으며, 이 외에도 fetch API, axios, jquery 등 여러가지 비동기 통신 방법이 존재한다.

Synchronous code 어떤 하나의 작업이 끝난 후에 다음 작업을 수행함. 작업이 끝날 때까지 block 되는 점에서 blocking code라고도 함. Asynchronous code 작업의 수행완료 여부와 상관 없이 다음 작업을 수행함. non blocking.

ES6 에서는 해당 클래스 내부에 static키워드를 이용해 static 메서드를 선언할 수 있었는데 ES5에서 똑같이 구현하려니 방법이 바로 떠오르지 않아 검색해보았다. 생성자 함수에 점 표기법을 이용하여 메서드를 바로 선언하면 된다. 아래는 모두 Store의 static 메서드들이다. // Store function Store() {} Store.getBooks = function () { let books; if (localStorage.getItem("books") === null) { books = []; } else { books = JSON.parse(localStorage.getItem("books")); } return books; }; Store.displayBooks = functio..

class 키워드를 이용했을 때 상속 구현 방법을 알아보자. extends 라는 키워드를 이용해 상속받을 클래스를 기재하고, 해당 클래스를 상속받은 클래스의 생성자에 super()를 이용해 부모 클래스의 생성자를 호출할 수 있다. class Person { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } greeting() { return `Hello there ${this.firstName} ${this.lastName}`; } } class Customer extends Person { constructor(firstName, lastName, phone, membership) { sup..

앞서 공부했던 OOP의 개념을 ES6에서는 class를 이용해 문법적 이득(syntatic sugar)을 취하며 구현할 수 있다. 물론 prototype 기반으로 작동하며 원리 또한 거의 비슷하다. class Person { constructor(firstName, lastName, dob) { this.firstName = firstName; this.lastName = lastName; this.birthday = new Date(dob); } greeting() { return `Hello there ${this.firstName} ${this.lastName}`; } calculateAge() { const diff = Date.now() - this.birthday.getTime(); const..

JS에서 Constructor는 함수이다. 따라서 다음과 같은 코드실행이 가능하다. // Person Constructor function Person(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } // Customer constructor function Customer(firstName, lastName, phone, membership) { Person.call(this, firstName, lastName); this.phone = phone; this.membership = membership; } // Create customer const customer1 = new Customer("Tom", "..

ES5에서 상속을 구현하기 위해 만들었다. (ES6에서는 class 키워드를 이용해 똑같이 구현이 가능하다) pseudo property이기 때문에 loop문을 이용해 해당 속성을 이용한다거나 하는 것이 불가능하다. literal로 object를 생성할 때 항상 object라는 prototype으로부터 상속을 받는다. (object가 최상위 prototype이기 때문) // Object.prototype // Person.prototype function Person(firstName, lastName, dob) { this.firstName = firstName; this.lastName = lastName; this.birthday = new Date(dob); } // Calculate age Pe..