# 프로미스

76개의 포스트
post-thumbnail

Promise 실전에서 사용해보기

이 포스트는 토스비즈니스피드에서도 읽을 수 있습니다. 비동기 작업이란 특정 코드의 로직이 끝날 때까지 기다리지 않고, 나머지 코드를 먼저 실행하는 것이에요. 웹사이트 개발에는 비동기 작업을 자주 사용해요. 서버에서 데이터를 불러올 때 오래 걸릴 수도 있는데, 그동안 다른 코드를 실행하지 않고 가만히 기다리면 웹 사이트를 로딩하는 게 굉장히 오래 걸리기 때문이죠. 하지만 순서대로 불러야 하는 코드가 있으면 어떤 일이 일어날까요? 예를 들어, 연산이 끝나기도 전에 연산 결과를 파라미터로 사용하는 함수를 실행하면 에러가 나겠죠. 그래서 이런 비동기 작업을 순차적으로 실행하기 위해 JavaScript에서는 콜백 함수를 사용해요. 콜백 함수는 특정 로직이 끝났을 때 원하는 코드를 실행할 수 있어요. 하지만 콜백에 또 콜백을 계속 호출하게 되면 코드가 복잡해지고 에러도 처리하기 어려워요. 이런 단점은

2023년 9월 13일
·
4개의 댓글
·
post-thumbnail

[JavaScript] 프로미스(Promise)

프로미스(Promise) 자바스크립트는 비동기 처리를 위해 콜백함수를 사용하는데, 콜백을 남용하게 되면 콜백 지옥에 빠질 수 있다. 또한 에러 처리가 힘들고, 여러 개의 비동기 처리를 한 번에 하는데 한계가 있다. 이런 콜백 함수의 단점을 보완하며 비동기 처리에 사용되는 객체를 프로미스(Promise)라고 한다. 프로미스를 사용하면 다음과 같은 이점을 얻을 수 있다. 비동기 처리 시점을 명확하게 표현할 수 있다. 연속된 비동기 처리 작업을 수정, 삭제, 추가하기 편하고 유연하다. 비동기 작업 상태를 쉽게 확인할 수 있다. 코드의 유지 보수성이 증가한다. 프로미스는 객체이기 때문에 생성자 함수를 호출하여 인스턴스화할 수 있다. 프로미스의 생성자 함수는 resolve와 reject 함수를 인자로 전달받는 콜백 함수를 인자로 전달 받는다. 프로미스는 인자로 전달받은 콜백 함수를 내부에서 비동기 처리한다. Promise는 비동기 처리가

2023년 9월 11일
·
0개의 댓글
·

Promise와 callback의 차이점

Promise 정의 및 역할 비동기 코드 작성 시 흔히 볼 수 있다. 한국어로 약속이라는 의미로 무언가 실행 될 것이라는 보증이다. 비동기 이벤트가 실행 되었는지 여부와 이벤트가 일어난 후 무엇을 할지 결정한다. 상태 fulfilled(resolved) 성공 rejected 실패 pending 미완료 즉, 프로미스가 성공이나 실패하지 않은 상황 예시 코드 프로미스의 매개변수(parameters) 콜백 함수(callback function, anonymous 라고도 불린다) 매개변수로 하나의 콜백 함수를 받는다. 콜백 함수의 매개변수 resolve, reject 콜백 함수 내부의 코드가 모두 제대로 실행되면 resolve를 호출한다. 만약 코드 실행 중 오류가 생기면 reject를 호출한다. 장점

2023년 8월 30일
·
0개의 댓글
·

[TIL] 콜백 함수

모던자바스크립트 - 콜백함수 콜백 콜백(callback)은 '되돌아 호출해달라'는 명령이다. 즉 어떤 함수 X를 호출하면서 '특정 조건일 때 함수 Y를 실행해서 나에게 알려달라'는 요청을 함께 보내는 것. 이 요청을 받은 함수 X는 해당 조건이 갖춰졌는지 스스로 판단하고 Y를 직접 호출한다. 콜백함수는 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이다. 콜백함수를 위임받은 코드는 자체적인 내부 로직으로 콜백함수를 적절한 시점에 시행한다.콜백 함수의 제어권을 넘겨받은 코드는 콜백 함수 호출 시점에 대한 제어권을 가진다. 비동기(asynchronous) 동작은 원하는 때에 동작을 시작하도록 할 수 있으며 setTimeout이 대표적인 예시다. 실무에서 사용하는 비동기 동작은 매우 다양하다(ex. 스크립트나 모듈 로딩) src에 있는 스크립트를 읽어오는

2023년 8월 15일
·
1개의 댓글
·

자바스크립트 Promise 개념과 사용하는 이유

자바스크립트에서 비동기 처리란, 현재 실행중인 작업과는 별도로 다른 작업을 수행하는 것을 말하는데, 예를 들어 서버에서 데이터를 받아오는 작업은 시간이 걸리기 때문에 자바스크립트의 서버 호출 함수는 비동기 함수로 이루어져 있다. 비동기는 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 방식이기 때문에 비동기 작업의 결과에 따라 다른 작업을 수행해야 할 때는 전통적으로 콜백 함수를 사용해왔다. 콜백 지옥 콜백 함수란, 비동기 작업이 완료되면 호출되는 함수의 의미로서 비동기 함수의 매개변수로 함수 객체를 넘기는 기법을 말한다. 그래서 함수 내부에서 함수 호출을 통해 비동기 작업의 결과를 받아서 인자로 주면 이를 통해 후속 처리 작업이 가능하다. 하지만 콜백 함수를 사용하면 코드가 복잡해지고 가독성이 매우 떨어지게 된다. 특히 여러개의 비동기 작업을 순차적으로 수행해야 할 때는 콜백 함수가 중첩되어 코드의 깊이가 깊어지는 이상한 현상이 발생한

2023년 7월 24일
·
0개의 댓글
·

[F-Lab 모각코 챌린지 7일차] 콜백 지옥과 비동기 제어 (2)

콜백 함수를 공부하다 콜백 지옥에 대해 접하게 되었다. 콜백 패턴은 콜백 지옥으로 인해 비동기 처리 중 에러 처리 때문에 곤란해질 수 있다고 한다. (1)에서는 콜백 함수의 단점과 콜백 지옥, 그리고 이를 해결 해주기 위해 도입된 promise 패턴에 대해서 알아보았다. (2)에서는 프로미스를 사용한 비동기 처리를 동기 처리처럼 구현할 수 있는 제너레이터와 제너레이터보다 간단하게 구현할 수 있는 async/await에 대해 알아보겠다. 콜백 지옥과 비동기 제어 제너레이터 Generator > ES6에서 도입된 제너레이터는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수 제너레이터와 일반 함수의 차이점 일반 함수를 호출하면 제어권이 함수에게 넘어가고 함수 코

2023년 6월 7일
·
0개의 댓글
·
post-thumbnail

[elice] 프로미스(Promise)

🐰 프로미스 프로미스(Promise) 는 콜백 패턴의 단점을 개선하기 위해 ES6에 도입되었다. 프로미스는 Promise 생성자 함수를 new 연산자와 함께 호출하여 객체를 생성한다. Promise 생성자 함수는 비동기 처리를 수행할 콜백 함수를 인수로 전달 받으며, 이 콜백 함수는 resolve, reject 함수를 인수로 전달받는다. 🐰 프로미스- 상태 ⭐ Promise는 비동기 처리의 진행 상태(State)를 나타내는 정보를 갖는다. **• pending (비동기 처리가 아직 수행되지 않은 상태) • fulfilled (비동기 처리가 수행되어 성공한 상태) • rejected (비동기 처리가 수행되어 실패한 상태)** 생성된 직후의 프로미스는 pending 상태이며, 비동기 처리 결과에 따라 상태가 변경된다. • 비동기 처리 성공 : resolve 함수를 호출해 fulfilled 상태로 변경 • 비동기 처리 **실패 : reject 함

2023년 6월 6일
·
0개의 댓글
·
post-thumbnail

프로미스 ?

프로미스 등장 이전의 비동기 처리 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 지옥으로 인해서 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한 번에 처리하는 데도 한계가 있다. 이와 같이 오른쪽으로 점점 치우쳐지는 형태를 콜백 지옥이라고 한다. 콜백 지옥은 가독성을 나쁘게 하며 실수를 유발하는 원인이 된다. 이와 같이 비동기 처리를 위한 콜백 패턴의 가장 심각한 문제는 에러 처리가 곤란하다는 것이다. try 코드

2023년 5월 15일
·
3개의 댓글
·
post-thumbnail

JavaScript 비동기(1) 콜백함수, 콜백지옥

1. 동기, 비동기 1) 동기와 비동기 자바스크립트 코드는 기본적으로 순서대로 실행됨 setTimeOut, setInterval, addEventListener 와 같은 함수들은 비동기 실행 코드, 비동기란 먼저 실행된 작업이 끝날 때까지 기다리지 않고 다음 작업을 수행하는 방식. 즉, 한 번에 여러 작업을 처리함. 2) JavaScript는 싱글스레드라던데 비동기가 어떻게 가능한 것일까? JS는 싱글 스레드가 맞다. 하지만 웹개발을 하거나 노드로 개발하는 과정에서 순수하게 JS만을 실행하는 경우는 많지 않다. 프론트엔드라면 자바스크립트 코드는 반드시 브라우저를 통해 실행되게 된다. 이 브라우저 때문에 싱글 스레드 언어인 자바스크립트가 우리 눈으로 보기엔 동시성을 갖는 작업을 해내는 것으로 보이게 된다. setTimeout 예시로 자바스크립트의 비동기 처리 이해하기 ![](https://velog.velcdn

2023년 4월 26일
·
0개의 댓글
·

프로미스(Promise)와 async/await

프로미스 (Promise)와 async/await에 대해 설명해보세요. Promise 자바스크립트에서 비동기 처리에 사용되는 객체 Promise의 3가지 상태 => Pending (대기), Fulfilled (이행), Rejected (실패) 비동기 처리가 완료 되지 않았다면 Pending, 완료 되었다면 Fulfilled, 실패하거나 오류가 발생하였다면 Rejected 상태를 갖는다. 값이 참이면 resolve 를 호출하고, 아닐시에는 reject 를 호출한다. resolve 한 반환 값에 대해서는 then() 을 통해 결과 값을 반환 받을 수 있고, reject 의 반환 값에 대해서는 catch() 를 통해 반환 받는다. then() 과 catch() 문의 체이닝을 통해 비동기 로직의 성공 여부에 따른 분기 처리가 가능하다. async / await 가장 최근의 나온

2023년 4월 20일
·
0개의 댓글
·

기술면접 - 비동기

콜백 함수와 프로미스의 차이점 콜백함수와 프로미스는 둘다 비동기적인 작업을 처리할 때 사용되는 자바스크립트 문법이다. 콜백함수는 일반적으로 다른 함수의 파라미터로 전달되는 함수를 말한다. 비동기 함수에서는 비동기 작업이 완료된 후 실행되는 함수를 말하는데, 간단한 비동기 처리는 콜백함수를 사용해도 아무 상관이 없지만 다뤄야 할 데이터가 많아지면 계속 중첩되어 콜백 헬이 발생하고, 코드의 가독성이 떨어진다. 콜백함수마다 에러 처리를 위한 로직을 작성해줘야하기 때문에 에러 처리가 어렵다. 반면에 프로미스는 콜백함수보다 더 직관적이고 가독성이 높은 비동기 처리 방법이다. 프로미스는 반환되는 프로미스의 상태에 따라 **then 메서드와 catch 메서드로 처리 방식이 나뉘는데, 이로 인해 에러 처리가 쉽고, than 메서드를 여러번 호출하는 프로미스 체이닝을 사용하면 콜백함수에 비해 가독성이 향상된다. 또한, Promise.all 메서드를 사용해서 여러 개의 비

2023년 3월 26일
·
0개의 댓글
·

자바스크립트 Async, Await

Promise의 문제점 Promise는 콜백지옥을 탈출할 정말 효과적이고 좋은 방식이다. 하지만 promis의 .then()을 여러번 사용한다면 ?? 콜백지옥에서 .then() 지옥이 시작되는거 아닐까?? 사실 .then()을 써봤자 얼마나 쓴다고 async await 가 나왔을까? 물론 많이 쓰면 코드가 난잡해지고 가독성 측면에서 안 좋아질 수는 있겠다. > 여튼 async await 는 프로미스를 정말 간결하고 편하게 사용할 수 있는 문법이다. ! Syntactic Sugar 라고도 한다. Syntactic Sugar : 문법적인 설탕(?) -> 문법적인 기능은 그대로인데 읽는 사람이 더 간결하게 직관적으로 코드를 읽을 수 있게 도와준다 라는 뜻이다. function 앞에 async를 붙이면 해당 함수는 항상 promise를 반환한다. 명시적으로 promise를 반환하는 것과 같으며 결과는 동일하다. await async함수

2023년 3월 26일
·
0개의 댓글
·
post-thumbnail

[JavaScript] 콜백함수와 프로미스

개발자는 코드 작성시 예측 가능한 코드를 작성하도록 노력해야 한다. 그러기 위해서는 비동기로 작동하는 코드를 제어할 수 있는 방법에 대해 잘 알고 있어야 한다. 여러 방법 중 하나는 Callback 함수를 활용하는 방법이다. 1. Callback (콜백함수) Callback 함수를 통해 비동기 코드의 순서를 제어할 수 있다. 즉, 비동기를 동기화할 수 있다는 의미이다. 실행 결과 Callback Hell Callback 함수를 통해 비동기 코드의 순서를 제어할 수 있지만 코드가 길어질 수록 복잡해지고 가독성이 낮아지는 Callback Hell이 발생하는 단점이 있다. 실행 결과 ![](https://velog.velcdn.

2023년 3월 19일
·
0개의 댓글
·
post-thumbnail

Today I Learned 2023.02.23. [코어 자바스크립트 3]

자바스크립트 엔진은 싱글 스레드로 동작한다. 자바스크립트의 메인 스레드인 이벤트 루프가 싱글 스레드이므로 자바스크립트를 싱글 스레드 언어라고 부른다. 그러나 이벤트루프만 독립적으로 실행되는 것이 아닌, 브라우저와 같은 멀티 스레드 환경에서 실행됨 -> 런타임은 싱글 스레드가 아니다. 대체 텍스트 동기식으로 코드 한줄 한줄 실행 -> 앞의 작업시간이 길수록 시간 및 자원의 낭비가 심해짐. setTimeout함수가 실행되면 callstak에 setTimeout함수가 추가된다. wep API가 setTimeout함수를 처리하고 Task Queue로 인자로 받은 callback함수를 전달한다. 이대로 내비둔 채로, 다음 동기줄이 실행된다. 동기줄이 모두 실행되어 callstack이 비워진 걸 확인한 event loop는 task

2023년 2월 23일
·
0개의 댓글
·
post-thumbnail

프로미스 직접 구현해보기

해당 포스트는 turtle601님의 "[JS] 자바스크립트 Promise 객체 직접 구현해보기" 포스트의 코드를 읽으며 직접 이해한 내용을 설명하는 포스트입니다! 서론 프론트엔드 개발을 하면서 프로미스에 대해 한번도 들어본 적이 없다면 그것은 그것 대로 대단하다고 말할 수 있을 것이다. 만약 프로미스에 대해 모르거나 아직 사용해보지 않았다는 사람의 코드를 살펴본다면 분명 알게 모르게 프로미스를 사용하고 있을 것이 분명하다. 비동기 로직을 컨트롤 하기 위해선 프로미스는 이제 선택이 아닌

2023년 2월 4일
·
0개의 댓글
·

프로미스 패턴

자바스크립트 비동기 호출을 하는 소스를 작성할 때 가독성 높은 코드로 작성할 수 있다. 프로미스(Promise) 자바스크립트에서 비동기 처리를 하는 코드를 작성할 때 사용하게 되는 객체이다. 비동기로 동작하지만 순차적으로 처리해야하는 경우 프로미스 패턴을 이용해 간결한 코드를 작성할 수 있다. 콜백지옥 예시 콜백 지옥이라는 말이 있다. 위 코드는 a, b, c, d.. 함수가 비동기로 동작한다는 가정하에 작성해보았다. 소스를 보는 사람도 소스를 수정해야 하는 사람도 가독성이 떨어지는 코드를 보며 어려움을 겪을 것 이다. 또한 만약 처리 도중 특정 메소드에서 오류가 발생하는 경우, 그 원인을 찾기가 어렵다. 이때 프로미스가 필요하다. Promise의 3가지 상태 프로미스의 상태란 프로세스 처리과정을 의미한다. 프로미스 객체를 생성하고 종료될 때 까지 3가지 상태를 갖게 되는데 대기, 이행, 실패 단계가 존재한다. Pending(대기)

2023년 2월 3일
·
0개의 댓글
·

< Javascript > 프로미스 객체

프로미스 Promise > 자바스크립트 비동기 처리에 사용되는 class 객체 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용 > 프로미스는 resolve, reject 함수 를 매개변수로 받는 콜백함수가 매개인자임 Promise 객체는 생성될 때 자동으로 실행이 시작되고 정상적으로 처리될 때 resolve , 에러일 시 reject가 실행됨 🎈 프로미스의 상태 프로미스가 생성되고 종료될 때까지 3가지 상태가 있다 Pending(대기) - 기본 상태 Fulfilled(이행) - 비동기 처리를 수행할 콜백 함수가 성공적으로 작동 Rejected(실패) - 에러 발생 시 🎈 프로미스 결과에 접근하기 ❕ 프로미스의 결과는 undefined 으로 시작 콜백 함수가 성공적으로 작동하여 resolve(value)가 호출되면 value로,

2023년 1월 27일
·
0개의 댓글
·

Callback / Promise

자바스크립트는 싱글 스레드 언어이다. 즉 일처리를 하는 사람이 혼자라는 뜻이다. 이를 봤을 땐, 자바스크립트에서 병렬처리가 불가능해보이지만, 이를 해석하고 실행하는 엔진에서 내부적으로 병렬처리가 가능하게 작동하도록 구현이 되어있다. callback은 함수가 매개변수로 받는 값중에 정수형 문자형등 있고 또 함수를 매개변수로 받을 수 있다. 이를 callback함수라 한다. 그래서 매개변수로 받은 함수를 다시 호출하는 기능을 callback이라 한다. 이 callback함수를 여러번 사용하게 되면 callback 지옥이라는 것에 빠지는데, 이것은 유지보수를 하는데 굉장히 힘들게 한다. 그리고 가독성 또한 떨어진다. promise란 promise작업이 끝난 후 실행할 함수를 제공하는 것이 아니라, 자체로 내장하고 있는 함수인 then을 실행한다. then과 같은 메소드를 연속적으로 사용이 가능한 이점이 있다. 그래서 callback 지옥과 같은 문제에 빠지지 않을 수 있다. then

2022년 12월 22일
·
0개의 댓글
·

promise

정의 promise는 JS에서 비동기 처리를 하기 위한 객체이다. 3가지 상태를 가지고 있으며 미래의 성공 혹은 실패에 대한 값을 가지고 있다. 3가지 상태는 다음과 같다. pending: 처리되지 않은 대기상태 fulfilled: 연산이 성공한 상태 rejected: 연산이 실패한 상태 특징 비동기를 쉽게 순차적으로 작성할 수 있다. 비동기 함수 func1, func2, func3를 순차적으로 실행하기 위해 아래와 같이 작성할 수 있다. then() 메소드는 promise를 반환한다. 이를 이용하여 체이닝을 하여 표현할 수 있게 된다. 함수를 composition하기 쉽다. applyAsync는 promise와 함수를 받아서 실행하는 함수이다. composeAsync 함수는 함수 배열을 받아서 reduce 메소드를 통해 순차적으로 applyAsync 함수를 실행하여 값을 얻을 수 있게 된다. 이를

2022년 12월 12일
·
0개의 댓글
·
post-thumbnail

JavaScript (18) # Promise

Promise 프로미스를 쉽게 알아보자 상점에서 물건을 주문하는데, 그 물건이 오기까지 시간이 걸린다고 가정을 해보자 또한 언제 물건이 오는지는 알 수 없을 뿐더러 가끔 물건을 만들다가 실패하는 경우도 있다고 한다. 이럴땐 소비자는 어떻게 해야할까? 10초에 한번씩 진행 상황을 물어보고 답을 받는다고 한다면, 물어봤을 때, 준비의 여부와 또는 실패했다는 답이 온다면, 다시 물건을 주문을 하면 된다. 하지만 그것 보다는 이럴땐 상점에 주문을 하고 상품이 준비되었거나 실패하면 알려달라고 약속을 하면서, 전화번호를 주고 나오는것이 나을 것이다. 상품이 준비되는 동안 다른 작업도 할 수 있고, 상점을 이번호를 기억했다고 작업이 완료되거나 실패했을 떄, 소비자에게 알려주면 되니깐 말이다. 이럴때 사용할 수 있는게 바로 프로미스(Promise)이다. 프로미스 사용법 프로미스는 아래와 같이 사용한다. new Promise로 생성하고, 함수를

2022년 12월 10일
·
0개의 댓글
·