JavaScript

[객체] 자바스크립트에서 객체를 생성하는 다양한 방법

객체 객체는 데이터를 key:value 쌍으로 저장하는 자료구조다. 그래서 하나의 변수(식별자)에 여러 데이터들을 저장하여 관리할 수 있다. 사실, 자바스크립트의 거의 모든 것들은 객체다. 배열, 함수, 객체, 날짜, 정규표현식 등등! 원시값을 제외한 값들은 모두 객체다. 물론 모든 객체들에 대해 다루기보단, 모듈의 기반이 되며 key:value의 쌍을 가지는 객체를 중심으로 살펴보자. 먼저 객체를 생성하는 다양한 방법들에 대해서 알아본다! 1. 객체 리터럴 가장 친근한 {}를 이용해서 객체를 만드는 방법이다. const coder = { name: 'jiho', hobby: 'coding', selfIntroduction(){ console.log('안녕하세요? 제 이름은 ' + this.name + ..

[자바스크립트] 비동기 작업의 동기 처리를 위한 Async/Await

첫 비동기 글로 돌아가기 [자바스크립트] 동기와 비동기 동기와 비동기 동기 Synchronous : 동시에 발생하는 순차적, 직렬적으로 태스크를 수행한다. 요청을 보냈다면, 응답을 받아야 다음 동작이 이루어진다. 순차적으로 실행되기 때문에, 어떤 작업이 수 gobae.tistory.com 이전 글 [자바스크립트] 마이크로 태스크 큐 이전 글 [자바스크립트] 프로미스를 이용한 비동기 작업 병렬 처리 이전 글 [자바스크립트] 프로미스 객체 이전 글 [자바스크립트] 비동기로 데이터 가져오기, 콜백 헬 이전 포스팅 [자바스크립 gobae.tistory.com 비동기 시리즈 마지막이다. 지금까지 1. 동기와 비동기 작업을 구분하고, 2. 자바스크립트에서 비동기 작업을 실행할 수 있는 이유 3. 비동기 작업의 콜백..

[자바스크립트] 마이크로 태스크 큐와 프로미스

이전 글 [자바스크립트] 프로미스를 이용한 비동기 작업 병렬 처리 이전 글 [자바스크립트] 프로미스 객체 이전 글 [자바스크립트] 비동기로 데이터 가져오기, 콜백 헬 이전 포스팅 [자바스크립트] 비동기 작업, 이벤트 루프와 태스크 큐 이전 글 [자바스크립트] gobae.tistory.com 마이크로 태스크 큐? 태스크 큐 포스팅에서 태스크 큐를 알아봤다. 태스크 큐는 이벤트 루프와 함께 비동기 작업을 돕기 위해 만들어졌으며, 실행할 콜백함수가 대기하는 큐다. 이벤트 루프가 콜스택이 비어있을 때 태스크 큐에서 콜백을 가져온다. 하지만, 이벤트 루프가 태스크 큐에서 콜백을 가져오기 전에 먼저 고려하는 것이 있다. 이것이 마이크로 태스크 큐다. 환상적인 그림을 발견해서 가져와봤다. 마이크로 태스크 큐가 더 우..

[자바스크립트] 프로미스를 이용한 비동기 작업 병렬 처리

이전 글 [자바스크립트] 프로미스 객체 이전 글 [자바스크립트] 비동기로 데이터 가져오기, 콜백 헬 이전 포스팅 [자바스크립트] 비동기 작업, 이벤트 루프와 태스크 큐 이전 글 [자바스크립트] 동기와 비동기 동기와 비동기 동기 Synchro gobae.tistory.com 프로미스의 정적 메서드 알아보기 앞선 포스팅에서는, 프로미스 객체 프로토타입 메서드인 then, catch, finally에 대해 살펴봤다. 이번에는 프로미스의 5가지 정적 메서드를 예시와 함께 알아보자. 프로미스의 정적 메서드는 5가지가 있다. resolve reject all race allSettled resolve, reject 메서드는 이전 포스팅에서 콜백에 넣어뒀던 인자와 유사하다. const pr = Promise.reso..

[자바스크립트] 프로미스 객체

이전 글 [자바스크립트] 비동기로 데이터 가져오기, 콜백 헬 이전 포스팅 [자바스크립트] 비동기 작업, 이벤트 루프와 태스크 큐 이전 글 [자바스크립트] 동기와 비동기 동기와 비동기 동기 Synchronous : 동시에 발생하는 순차적, 직렬적으로 태스크를 수행한 gobae.tistory.com 이전 글에서는 비동기 처리를 통해 데이터를 가져올 수 있었고 데이터를 가져오는 과정에서 콜백 헬과 에러 처리에 대한 곤란함을 겪었다. 이를 개선하기 위해 ES6에서 도입된 프로미스 객체에 대해 알아보자. 프로미스 객체 프로미스란 비동기 작업이 맞이할 미래의 완료 or 실패와 그 결과 값을 말한다. ....? 무슨 말인지 정말 모르겠지만, mdn에서 본 내용이다. 아무튼 비동기 작업을 돕기 위해 ES6에서 도입된 ..

[자바스크립트] 비동기로 데이터 가져오기, 콜백 헬

이전 글 [자바스크립트] 비동기 작업, 이벤트 루프와 태스크 큐 이전 글 [자바스크립트] 동기와 비동기 동기와 비동기 동기 Synchronous : 동시에 발생하는 순차적, 직렬적으로 태스크를 수행한다. 요청을 보냈다면, 응답을 받아야 다음 동작이 이루어진다. 순차 gobae.tistory.com 이전 글에서는 어떻게 자바스크립트에서 비동기 작업이 수행되는지를 열심히 알아봤다. 이제 비동기 작업과 주된 목적중 하나인 데이터를 가져오는 작업에 대해 알아보자. 비동기로 데이터 요청하기. ( AJAX, XHR 객체 ) AJAX(Asynchronous JavaScript And XHR) 자바스크립트와 XHR를 이용해 비동기로 뭔가를 하겠다는 거다. (= 그래서 javascript, xhr를 이용한 서버와의 비동..