종우의 컴퓨터 공간

class EasyHttp { // Make a HTTP GET Request async get(url) { const response = await fetch(url); const data = await response.json(); return data; } // Make a HTTP POST Request async post(url, data) { const response = await fetch(url, { method: 'POST', headers: { 'Content-type': 'application/json' }, body: JSON.stringify(data) }); const resData = await response.json(); return resData; } // Make a ..

Async & Await 이란? - async와 await은 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와준다. 특징 - await은 async 안에서만 사용 가능하다. - async 함수는 프로미스를 반환한다. - await은 resolve로 리턴해주는 값을 꺼낸다. 예제 async function getUsers() { // await response of the fetch call const response = await fetch('https://jsonplaceholder.typicode.com/users'); // Only proceed once its resol..

easyhttp2.js class EasyHttp { // Make a HTTP GET Request get(url) { return new Promise((resolve, reject) => { fetch(url) .then(res => res.json()) .then(data => resolve(data)) .catch(err => reject(err)); }); } // Make a HTTP POST Request post(url, data) { return new Promise((resolve, reject) => { fetch(url, { method: 'POST', headers: { 'Content-type': 'application/json' }, body: JSON.stringify(da..

예제 const sayHello = function() { console.log('Hello'); } const sayHello = () => { console.log('Hello'); } // One line function does not need curly braces const sayHello = () => console.log('Hello'); const sayHello = function() { return 'Hello'; } // One line returns const sayHello = () => 'Hello'; // Return object(need to embrace with parenthesis) const sayHello = () => ({msg: 'Hello'}); // Sing..

예제 // Get local text file data document.getElementById('button1').addEventListener('click', getText); function getText() { fetch('test.txt') .then(function(res) { return res.text(); }) .then(function(data) { console.log(data); document.getElementById('output').innerHTML = data; }) .catch(function(err) { console.log(err); }); } // Get local json data document.getElementById('button2').addEventLis..

What is Promises? - alternative to callbacks - alternative way of handling asynchronous operations - the reason why they are called promises is that while they are handling asynchronous operations, they can promise to do something when that operation is finished 프라미스란? - 프라미스는 자바스크립트 비동기 처리에 사용되는 객체이다. 여기서 자바스크립트의 비동기 처리란 '특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성'을 의미한다. 프라미스가 필요한 이유..

easyHTTP.js function easyHTTP() { this.http = new XMLHttpRequest(); } // Make a HTTP GET Request easyHTTP.prototype.get = function(url, callback) { this.http.open('GET', url, 'true'); let self = this; this.http.onload = function() { if(self.http.status === 200) { callback(null, self.http.responseText); } else { callback('Error: ' + self.http.status); } } this.http.send(); } // Make a HTTP POST R..

Callback Function이란? - argument로 다른 함수에게 전달되는 함수를 의미한다. - function that can be passed into another function and then called within that function - 자바스크립트에서 함수는 Object이다. 이 때문에 함수는 다른 함수의 인자로 쓰일 수도, 어떤 함수에 의해 리턴될 수도 있다. 이러한 함수를 고차함수(higher-order function)이라 부르고 인자로 넘겨지는 함수를 콜백함수(call-back-function)이라고 부른다. Callback Function이 필요한 이유? - 자바스크립트는 이벤트 기반 언어이기 때문이다. 자바스크립트는 다음 명령어를 실행하기 전 이전 명령어의 응답을 기..