YoonStudyNote

1. 동기처리되는 모습 function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } const getDog = async () => { await sleep(1000); return '멍멍'; } const getRabbit = async () => { await sleep(500); return '깡총'; } const getTurtle = async () => { await sleep(3000); return '느릿'; } async function process() { const dog = await getDog(); console.log(dog); const rabbit = await getRabbit(); conso..

async와 await은 세트로 다니는데, await은 Promise가 적용되는 함수 앞에 쓰입니다. 1. async/await 사용방법 function sleep(ms){ return new Promise(resolve => setTimeout(resolve, ms)); } async function process(){ console.log('안녕하세요'); await sleep(1000); console.log('반갑습니다!'); } process(); 이렇게 보면 굳이 Promise 뒤에 .then을 사용하지 않아도 되고 setTime을 하지않아도 await으로 설정할수있게 됩니다. 이것을 보면 다른 함수를 만들어서 선언하는것이 아니기 때문에 분기점 만드는것도 쉽습니다. 변수를 공유하는것도 쉬워져서..

ES6 버전에서 나왔고 비동기작업을 쉽게 처리할 수 있도록 도와주는 역할을 합니다. 이전에는 비동기작업이 끝나면 실행하라고 callback함수를 이용했었습니다. callback함수로 처리하게 된다면 비동기 작업이 많아질 경우 코드가 매우 복잡해지게 되었습니다. 그래서 promise가 나왔습니다. 원래는 라이브러리로 존재했었습니다. 그런데, 이제는 매우 편하다 보니 아애 자바스크립트 스팩에 추가 되었습니다. 1. Promise 사용방법 (resolve, then) 성공했을때 const myPromise = new Promise((resolve, reject)=>{ setTimeout(()=>{ resolve('hello'); }, 1000) }); myPromise.then(result=>{ console..

작업이 빨리 끝나는 순서대로 출력이 되는것입니다. 우선 예를 보여드리겠습니다. function work(){ setTimeout(()=>{ const start = Date.now(); for(let i =0; i 만약 서버쪽에서 데이터를 받아올때는 요청을 하고 서버에서 응답을 할때까지 대기를 해야하기 때문에 비동기 작업을 처리합니다. 2. 파일 읽기 --> 주로 서버쪽에서 어떤 파일을 읽어와야하는 경우에 비동기 작업을 처리합니다. 3. 암호화/복호화 --> 암호화, 복호화 하는 과정에도 시간이 걸리기 때문에 비동기 작업을 처리합니다. 4. 작업예약 --> 어떤 작업을 예약해야할때 set time out을 이용해서 비동기 작업을 처리합니다. 또한 callback, promise, async await이 ..

1. 연속되는 Promise function p(ms) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(ms); //reject(new Error('reason')) }, ms) }); } p(1000) .then(()=>p(1000)) .then(()=>p(1000)) .then(()=>{ console.log('3000ms 후에 실행'); }); 다음소스코드와 같이 체인 형식으로 되어있다. 2. 연속되는 async await function p(ms) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(ms); //reject(new Error('r..

Async-Await는 Promise를 기반으로 작동이 된다. 그러기 때문에 Promise를 확실히 공부하고 돌아오는걸 추천한다. ex) Promise 객체를 리턴하는 함수 function p(ms) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(ms); }, ms) }); } ex) Promise 객체를 이용해서 비동기 로직을 수행할 때 p(1000).then(ms=>{ console.log(`${ms} ms후에 실행 된다.`); }); ex) Promise 객체를 리턴하는 함수를 await로 호출하는 방법 const ms = await p(1000); console.log(`${ms} ms후에 실행 된다.`); --> a..

ex) value가 프로미스 객체인지 아닌지 알 수 없는 경우, 사용하면 연결된 then 메서드를 실행한다. value가 프로미스 객체면, resolve된 then 메서드를 실행한다. value가 프로미스 객체가 아니면, value 를 인자로 보내면서 then 메서드를 실행한다. Promise.resolve(new Promise((resolve, reject) => { setTimeout(() => { resolve('haha'); }, 1000); }), ).then((data) => { console.log('프로미스 객체인 경우, resolve 된 결과를 받아 then이 실행된다.', data); }); Promise.resolve('bar').then(data => { console.log('th..

동기는 순차적으로 일을끝내는 방식이다. 비동기는 엄청 효율적으로 작동을 한다. 비동기는 쓰레드나 프로세스가 여럿이 돌고 있는거라는 뜻이다. 즉 멀티테스킹을 하는 코드를 짜는것이다. 궁금증: 자바스크립트는 쓰레드가 하나만 돌아간다고 배웠는데 어떻게 그런 비동기 작업이 되는것인가? 자바스크립트는 웹 브라우저나 Node.js의 자바스크립트 엔진에서 실행된다. 이 엔진에는 자바스크립트를 돌리는 하나의 쓰레드, 자바스크립트 함수 전용 특급 선로가 있다. 궁금증: 선로라면 먼저 들어간 게 먼저나오는 큐 형태인데, 함수는 나중에 넣은걸 먼저 꺼내는 스택으로 처리되는거 아닌가? 다른 포함 레벨의 함수들이 처리되는 순서는 역순이다. 하지만 같은 포함 레벨에서의 함수들은 순서대로 처리된다. 그래서 이해하기 쉽도록 같은 레..

ex) fulfilled 되거나 rejected 된 후에 최종적으로 실행할 것이 있다면, .finally()를 설정하고, 함수를 인자로 넣는다. function p(){ return new Promise ((resolve, reject)=>{ /* pending */ setTimeout(()=>{ reject(new Error('bad')); /* fulfilled */ }, 1000); }); } p() .then((message)=>{ console.log('1000ms 후에 fullfiled 된다.', message); }) .catch((error)=>{ console.log('1000ms 후에 rejected 된다.', error); }) .finally(()=>{ console.log('end..

비동기적인 상황에서 코드를 좀 더 명확하게 표현하고 실행하도록 만들 수 있다. 1. ES6 부터 Javascript의 표준 내장 객체로 추가 되었다. ES6 를 지원하는 브라우저나 Node.js 에서 전역에 있는 Promise 를 확인할 수 있다. 2. 생성자를 통해서 프로미스 객체를 만들 수 있다. 생성자의 인자로 executor 라는 함수를 이용한다. 3. executor 함수는 resolve 와 rejcect를 인자로 가진다. (resolve, reject) -> {...} resolve 와 reject는 함수이다. resolve(), reject() 4. 생성자를 통해서 프로미스 객체를 만드는 순간 pending(대기) 상태라고 한다. 5. executor 함수 인자 중 하나인 resolve 함수..