NOW OR NEVER

async & await 개념 비동기의 핵심 무언가 오래 걸리는 코드를 비동기적인 처리를 전혀 하지 않으면 js 엔진은 동기적으로 코드를 실행하기 때문에 즉 한줄이 끝나야지 그 다음줄로 넘어가는 동기적인 처리를 하기 때문에 오래 걸리는 코드가 처리가 끝날 때까지 필요한 기능을 구현하는 코드를 구현하지 못해 사용자는 텅텅 빈 웹페이지만 보게 될 수 있다. promise를 조금 더 간결하고 간편하고 그리고 동기적으로 코드를 작성하는 것처럼 보이게 만들어 주는 것들 promise chaining을 계속하게 되면 코드가 복잡해질 수 있는 데 이런 거 위에 조금 더 간편한 api로 async와 await을 사용하면 동기식으로 코드를 순서대로 작성하는 것처럼 간편하게 작성할 수 있게 도와준다. 기존에 존재하는 pr..

Promise JS에서 비동기(async)를 자동으로 처리할 수 있도록 도와주는 object 정해진 장시간의 기능을 수행 후 정상적으로 기능이 수행이 되어졌다면 성공의 메세지와 함께 처리된 결과 값을 전달 기능을 수행하다가 예상치 못한 문제 발생한다면 에러 전달 Promise is a Javascript object for asynchronous operation JS에 내장되어 있는 object async operation을 위해 쓰임 비동기적인 것을 수행할 때 callback 함수 대신에 유용하게 쓸 수 있는 object 중요 포인트 state 상태 process가 heavy(무거운)한 operation을 수행하고 있는 중인지 아니면 이 기능 수행이 다 완료가 되어서 성공했는지 실패했는지 이런 상태에..

Async 비동기 프로그래밍 관련 단어 hoisting : var 변수 선언과 function declaration 함수 선언들이 자동적으로 제일 위로 올라가는 것 callback 함수 : 전달한 함수를 나중에 불러줘 라는 개념, 보통 arrow function 형식으로 작성 1000 ms : 1초 1. 동기와 비동기 synchronous : 정해진 순서(작성한 순서)에 맞게 코드가 실행되는 것 Javascript is synchronous 자바스크립트는 동기적이다. Executing the code block in order after hoisting : hoisting이 된 이후부터 코드가 작성한 순서대로 하나 하나씩 동기적으로 실행된다(나타나는 순서대로 자동적으로 실행됨) javascript 엔진은..

async와 defer html에서 javascript 표현시 어떻게 포함하는 것이 효율적인 것인가 사용자가 html 파일 다운로드시 브라우저가 한줄 한줄 분석한다(parising HTML) > 한줄한줄 분석하고 이해한 것을 CSS와 병합해서 DOM 요소로 변환 async : boolean 타입의 속성값으로 선언하는 것만으로도 true로 설정되어 옵션 사용 가능 head 안에 script 태그 html parsing하다가 script 태그 발견시 src안 js파일을 다운받아야하네 하고 이해하게 된다. 그래서 html parsing하는 것을 잠시 멈추고 그 js을 다운받아서 실행한다음에 다시 html parsing을 시작한다. 단점 : 해당 js 파일 용량이 어마어마하게 크고 인터넷도 느리다면 사용자가 그..

Javascript 비동기(Asynchronous) 처리 비동기 처리의 이해 동기적(Synchronous) 처리 : 작업이 끝나야 비로소 다음작업을 실행, 작업이 끝날 때까지 기다리는 동안 중지 상태가 돼서 다른 작업을 할 수 없다. ex) 1번 작업이 끝날 때까지 2번 작업 수행 못하고 2번 작업이 끝날 때까지 3번 작업을 수행하지 못함 작업을 비동기적 처리 할 때는 코드 실행 시 흐름이 멈추지 않는다. 그래서 동시에 여러가지 작업 처리 가능, 기다리는 과정에서 다른 함수를 호출도 가능 비동기 처리 예시 Ajax Web API 요청: 서버 쪽에서 데이터를 받아와야 할 경우에는 요청을 하고 서버에서 응답을 할 때까지 대기를 해야 하기 때문에 주로 비동기 처리를 함 파일 읽기 : 주로 서버쪽에서 파일을 읽..

Javascript Promise 프로미스 자바스크립트에서 비동기를 처리하기 위해서 가장 기본이 되는 개념 async와 await를 배우기 위해 알아야하는 개념 프로그램에서 간단한 코드가 순차적으로 한 줄 한 줄 실행된다면 어렵지 않다. 하지만 자바스크립트에서 함수를 호출했는데 그함수가 시작되고 끝나는 동안에도 프로그램은 계속 진행되어야 할 때가 많다. 이럴 때 Promise를 사용하면 비동기적 상황에서 코드를 좀 더 명확하게 표현하고 실행하도록 만들 수 있다. Promise 개체 혹은 Promise 객체로 불림 ES6부터 자바스크립트의 표준 내장 객체로 추가됨 ES6를 지원하는 브라우저나 Node.js에서 전역에 있는 Promise 확인 가능 프로미스 객체 생성 방법 - 1. 생성자(new Promis..