ES7에 추가된 기능으로 함수 앞에 async 키워드를 붙여 해당 함수가 Promise 객체를 리턴하도록 합니다. 따라서 비동기처리를 좀 더 간결하게 할 수 있습니다. await 키워드는 async 키워드가 붙은 함수 내부에서 Promise 객체 앞에 쓰이며, 해당 Promise 객체가 비동기 작업을 완료할 때 까지 기다립니다. async function myFunc() { const promise = new Promise((resolve, reject) => { setTimeout(() => resolve("Hello"), 1000); }); const error = false; if (!error) { // 해당 promise 객체가 resolve 될 때까지 기다린다. const res = await..

ES6에서 추가된 화살표함수를 이용하면 코드를 좀 더 짧고, 깔끔하게 작성할 수 있습니다. 아래 코드를 참조해 생략 시 주의할 점들을 파악하면 좋을 것 같아요. 또한 화살표함수를 이용하면 this 키워드의 binding이 이루어지지 않기 때문에 this를 사용할 때 주의가 필요합니다. // 기본 함수 const sayHello = function () { console.log("Hello"); } sayHello(); // function 키워드를 화살표로 대체할 수 있다. const sayHelloArrow = () => { console.log("Hello Arrow"); }; sayHelloArrow(); // 함수의 내용이 한 문장이라면 다음과 같이 중괄호를 없앨 수 있다. const sayHel..

XHR을 이용해 HTTP 요청을 보낼 수 있었던 것처럼 Fetch API를 이용해 HTTP 요청을 보낼 수 있습니다. Fetch API는 Promise 객체를 리턴합니다. 따라서 then 메서드를 이용해 비동기 작업을 진행할 수 있습니다. res에 해당하는 인자는 fetch를 이용해 보낸 HTTP 요청결과에 따른 응답객체가 만들어져 전달됩니다. 해당 응답객체의 prototype에 있는 text 메서드를 이용해 해당 응답의 body 내용을 텍스트로 가져올 수 있는데, 해당 메서드의 리턴 결과 또한 Promise 이기 때문에 그에 따른 then 메서드를 이용해야 합니다. document.querySelector("#button1").addEventListener("click", getText); functi..

비동기 작업의 다른 방법으로는 ES6에서 추가된 Promise 객체를 이용하는 방법이 있습니다. Promise라고 붙여진 이름처럼 비동기 처리를 완료한 뒤 특정한 작업을 수행하기로 '약속' 합니다. resolve 인자는 비동기요청이 끝나고 수행할 함수를 전달받기 위함이며, reject 인자는 요청 중 에러가 발생했을 때 수행할 함수를 전달받기 위해 존재합니다. resolve 인자는 Promise 객체의 then 메서드를 통해 비동기 처리완료 시 수행될 함수를 전달받고, reject 인자는 catch 메서드를 통해 함수를 전달받습니다. const posts = [ {title: "Post one", body: "this is post one"}, {title: "Post two", body: "this i..

Content-Type 헤더를 지정해주는 것과 보낼 데이터를 JSON 문자열로 변경하여 보내야 하는 점에 주의하자. // Make an Http POST Request EasyHttp.prototype.post = function (url, data, callback) { this.http.open("POST", url, true); this.http.setRequestHeader("Content-type", "application/json"); let self = this; this.http.onload = function () { callback(null, self.http.responseText); } this.http.send(JSON.stringify(data)); };

1. onload 콜백함수 내부에서 this 사용 ... // onload에 할당된 함수가 callback 함수로 이용되기 때문에 실제 동작시 this가 가리키는 객체가 달라짐에 주의하자. let self = this; this.http.onload = function () { // if (this.http.status === 200)

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 등 여러가지 비동기 통신 방법이 존재한다.