[JavaScript] 자바스크립트에서 Promise 동적 직렬 처리하기

220_자바스크립트에서 Promise 동적 직렬 처리하기 [적용] 비동기 처리를 순서대로 시작 후 모든 처리가 완료될 때까지 대기하고 싶을 때 [내용] 코드를 작성하면서 Promise 의 실행 여부를 미리 알 수 있으면 아래 링크와 같은 방식으로 코드를 사용할 수 있다. https://stonefree.tistory.com/310 [JavaScript] 자바스크립트 이벤트 작동 설정하기 125_자바스크립트 이벤트 작동 설정하기 [적용] 비동기 처리 타이밍을 표시하고 싶을 때 [문법] 메소드 의미 반환 이벤트타겟.dispatchEnvent(이벤트) 이벤트 발생 처리 진리값 new Event('이벤트', [{detail stonefree.tistory.com 하지만 동적으로 Promise의 수가 변하는 경우..

2022.07.31

[JavaScript] 자바스크립트에서 Promise 직렬 처리하기

219_자바스크립트에서 Promise 직렬 처리하기 [적용] 외부 데이터를 가져와 후속 처리 작업에 사용하고 싶을 때 [내용] 처리가 끝난 데이터를 다음 작업에 이어서 사용하는 방법을 알아보자. 외부 데이터를 가져와 다음 처리에 연결할 때 유용하다. Promise를 사용하는 방법과 await나 async를 사용해 처리하는 방법을 알아보자. 직렬 처리는 await와 async를 사용하는 것이 더 간단하다. Promise를 사용하는 방법 JavaScript main.js Promise.resolve() .then( () => new Promise((resolve) => { setTImeout(() => { console.log('첫 번째 Promise', new Date().toLocaleTimeString..

2022.07.31

[JavaScript] 자바스크립트에서 Promise 병렬 처리하기

218_자바스크립트에서 Promise 병렬 처리하기 [적용] 비동기 처리 일괄 시작 후 모든 처리가 끝나면 다음 작업을 시작하고 싶을 때 [문법] 메소드 의미 반환 Promise.all(배열) 다수의 Promise 병렬 실행 Promise [내용] Promise.all()을 사용하면 동시에 실행한 처리를 모두 끝내고 다음 작업을 시작하도록 지정할 수 있다. Promise 인스턴스를 포함한 배열을 생성하여 Promise.all()의 인수로 전달한다. 모든 처리가 끝난 뒤 then()으로 지정한 함수를 호출한다. 병렬 처리는 배열의 순서대로 작업이 완료되지 않는다. JavaScript main.js // 배열 작성 const arrFunc = []; for (let i = 0; i < 5; i ++) { c..

2022.07.30

[JavaScript] 자바스크립트에서 Promise 성공/실패 처리하기

217_자바스크립트에서 Promise 성공/실패 처리하기 [적용] 실패할 가능성이 있는 비동기 작업을 처리하고 싶을 때 [문법] 메소드 의미 반환 Promise인스턴스.catch(함수) 실패 시 콜백 함수 호출 Promise [내용] Promise로 실패한 작업을 처리하고 싶은 경우 생성자 인수에 reject를 포함하는 함수를 지정한다. reject는 처리의 실패를 나타내는 작업을 할당하며, reject가 실행되면 catch()가 호출된다. JavaScript main.js const promise = new Promise((resolve, reject) => { if (flag === true) { resolve('orange'); } else { reject('apple'); } }); promise..

2022.07.30

[JavaScript] 자바스크립트에서 비동기화 Promise 사용하기

216_자바스크립트에서 비동가화 Promise 사용하기 [적용] 비동기 처리를 다루고 싶을 때 [문법] 메소드 의미 반환 new Promise(함수) Promise 생성 Promise 인스턴스 Promise인스턴스.then(함수) 성공 시 콜백 함수 호출 Promise [내용] 비동기 처리 작업 기능을 하는 Promise 객체를 사용하면 작업이 용이해질 뿐만 아니라 코드의 가독성도 좋아진다. fetch()를 시작으로 브라우저의 표준 기능에도 Promise 사용이 증가하고 있으며, await나 async와 같은 기능도 기본적으로 알아두면 좋다. Promise 생성자의 인수는 비동기 처리 작업을 하는 함수를 지정하며, 함수 내부에서 비동기 처리 완료 메소드인 resolve()를 호출한다. Promise 인스..

2022.07.30