반응형 JavaScript 기초23 Promise와 fetch API (2) fetch API란 이전 글에 이어서 fetch API에 대해서 공부했다. fetch API는 특정 URL로부터 정보를 받아오는 역할을 해준다. fetch API를 통해 정보를 받아오게 되면 비동기로 이루어지기 때문에 다소 시간이 걸린다면 blocking이 발생하면 안되므로, 특정 DOM에 정보가 표시될 때까지 로딩 창을 대신 띄우는 경우도 많다. 간단한 예제를 통해 fetch API의 사용법을 알아보겠다. let url = 'https://apiURL'; fetch(url) .then(response => response.json()) // 자체적으로 json() 메소드가 있어, 응답을 JSON 형태로 변환시켜서 다음 Promise로 전달 .then(json => console.log(json)) // 콘솔에 json을 .. 2020. 11. 11. Promise와 fetch API (1) Promise란 오늘은 Promise와 fetch API에 대해서 공부했다. Promise는 자바스크립트에서 비동기 처리를 위한 하나의 패턴으로 콜백 패턴의 단점을 보완해준다. (콜백 패턴은 처리 순서를 보장하기 위해 중첩된 괄호를 적어야 하는데 이로 인해 복잡해지고 가독성도 안 좋을뿐더러 실수를 유발하기도 한다. 또한 에러 처리도 어려워 콜백 패턴의 한계를 느끼고 새롭게 Promise패턴을 도입하게 된 것이다.) 이제 Promise의 사용법을 알아보자. const getDataFromFilePromise = filePath => { return new Promise((resolve, reject) => { fs.readFile(filePath, 'utf-8', (err, data) => { if (err) { // 에.. 2020. 11. 11. [JavaScript] ES6 Syntax 오늘은 JavaScript 최신 문법인 ES5 Syntax에 대해서 공부했다. 자바스크립트 최신 문법은 코딩을 더욱 편리하게 해 줄 뿐만 아니라 가독성에도 좋다. 여러 가지 예제들을 통해 ES6 최신 문법들에 대해서 알아보겠다. Destructuring Destructuring은 구조 분해 할당 구문으로 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식이다. // ES5 var user = { name: 'Leo', age: 25, address: '안양' }; var name = user.name; var age = user.age; console.log(name + ', ' + age); // Leo, 25 // ES6 let user = { name: 'Leo', ag.. 2020. 11. 5. [JavaScript] Prototype Chain 이란? 오늘은 Prototype Chain에 대해서 공부했다. 먼저 MDN에서 Prototype Chain의 개념에 대해서 알아보았다. 자바스크립트에서 함수는 속성을 가질 수 있으며 모든 함수에는 prototype이라는 특수한 속성이 있다. 각각의 객체는 [[Prototype]]이라는 은닉(private) 속성을 가지는데 자신의 프로토타입이 되는 다른 객체를 가리킨다. 그 객체의 프로토타입 또한 프로토타입을 가지고 있고 이것이 반복되다, 결국 null을 프로토타입으로 가지는 오브젝트에서 끝난다. null은 더 이상의 프로토타입이 없다고 정의되며, 프로토타입 체인의 종점 역할을 한다. 간단한 예시로 알아보겠다. function Human(name) { this.name = name; }; Human.prototy.. 2020. 10. 28. 이전 1 2 3 4 ··· 6 다음 반응형
