티스토리

종우의 컴퓨터 공간

검색하기

블로그 홈

종우의 컴퓨터 공간

jwlim94.tistory.com/m

종우공간 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

Custom HTTP Library (Fetch with Async Await) 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 .. 공감수 0 댓글수 0 2021. 8. 17.
★Async & Await 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.. 공감수 1 댓글수 0 2021. 8. 17.
[ES6]Custom HTTP Library (Fetch with Promises) 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.. 공감수 0 댓글수 0 2021. 8. 16.
★[ES6]Arrow Functions 예제 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.. 공감수 0 댓글수 0 2021. 8. 13.
★[ES6]Fetch API 예제 // 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.. 공감수 0 댓글수 0 2021. 8. 13.
★[ES6] Promises 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 프라미스란? - 프라미스는 자바스크립트 비동기 처리에 사용되는 객체이다. 여기서 자바스크립트의 비동기 처리란 '특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성'을 의미한다. 프라미스가 필요한 이유.. 공감수 0 댓글수 0 2021. 8. 11.
Custom HTTP Library (Ajax with Callbacks) 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.. 공감수 0 댓글수 0 2021. 8. 11.
Callback Functions 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이 필요한 이유? - 자바스크립트는 이벤트 기반 언어이기 때문이다. 자바스크립트는 다음 명령어를 실행하기 전 이전 명령어의 응답을 기.. 공감수 0 댓글수 0 2021. 8. 11.
REST API & HTTP Requests API(messenger) - Application Programming Interface - contracted provided by one pirce of software to another - Structured request and response - API endpoints: URL REST(HTTP Request to format that message) - Representational State Transfer - architecture style for designing networked applications - relies on stateless, client-server protocol, almost always HTTP Http Requests - GET: retrieve data.. 공감수 0 댓글수 0 2021. 8. 11.
Data From an External API document.querySelector('.get-jokes').addEventListener('click', getJokes); function getJokes(e) { const number = document.querySelector('input[type="number"]').value; const xhr = new XMLHttpRequest(); // get it from the external API xhr.open('GET', `http://api.icndb.com/jokes/random/${number}`, true); xhr.onload = function() { if (this.status === 200) { const response = JSON.parse(this.responseTe.. 공감수 0 댓글수 0 2021. 8. 10.
Working with Ajax & JSON document.getElementById('button1').addEventListener('click', loadCustomer); document.getElementById('button2').addEventListener('click', loadCustomers); // Load Customer function loadCustomer(e) { const xhr = new XMLHttpRequest(); xhr.open('GET', 'customer.json', true); xhr.onload = function() { if(this.status === 200) { // console.log(this.responseText); const customer = JSON.parse(this.respons.. 공감수 0 댓글수 0 2021. 8. 10.
XHR Object Methods & Working With Text File .open(method, url, async?) - initializes a newly-created request, or re-initializes an existing one - parameters method: HTTP request method such as GET, POST, PUT, DELETE, etc url: a DOMString representing the URL to send the request to async?: an optional boolean parameter .onprogress() - onprogress() is the function called periodically with information when an XMLHttpReqeust before success co.. 공감수 0 댓글수 0 2021. 8. 10.
★Ajax & XHR introduction Ajax 란? - Asynchronous(비동기) JavaSciprt And Xml의 약자이다. - 자바스크립트의 라이브러리 중 하나로 브라우저가 가지고 있는 XmlHttpRequest 객체를 이용해서 전체 페이지를 새로고침 할 필요 없이 필요한 일부분의 데이터만을 갱신할 수 있게 도와준다. - 비동기(async) 방식이란? 웹 페이지를 리로드하지 않고 데이터를 불러오는 방식을 말한다. Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포하고 있다. - Ajax는 아래와 같은 기술들이 혼합적으로 사용되며, 서버와 [JSON, XML, HTML, 텍스트 파일] 등을 주고 받을 수 있게된다. HTML DOM JavaScript XmlHttpRequest .. 공감수 0 댓글수 0 2021. 8. 10.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.