4주차 프리코스 회고를 이제야 작성하게 되었다. 이번 4주차 과제는 나에게 어렵고 복잡했다. 마지막 날까지도 해결하지 못해 포기하고 싶었지만, 끝까지 도전한 덕분에 늦은 오후가 되어서야 겨우 완성할 수 있었다. 과제를 제출한 후에는 심적으로 큰 일이 있어 정신이 없었다. 설상가상으로 독한 감기까지 걸리면서 한동안 회고를 작성할 여유가 없었다. 이제야 몸과 마음이 조금 나아져 4L 회고를 작성하게 되었다.
Liked, 미션을 수행하면서 좋았던 점
포기하지 않으면 해결하지 못할 문제는 없다는 것을 경험한 점이 가장 좋았다. 프리코스 마지막 과제는 어려울 것이라 예상했지만, 생각보다 훨씬 어렵고 복잡했다. 요구사항이 너무 많아 스크롤을 내려도 끝이 보이지 않을 정도였다. 처음에는 "일주일이라는 시간이 있으니 어떻게든 해결할 수 있지 않을까?"라는 마음으로 여유롭게 시작했다. 3주 동안 피드백을 받으며 공부했으니 충분히 가능할 거라고 생각했다. 하지만 제출 마감일 오전까지도 해결하지 못해 "포기해야 하나?"라는 고민이 들었다. 그러다 문득, "못 풀어도 좋으니 할 수 있는 데까지 요구사항을 하나씩 해결해 보자"는 마음으로 다시 도전하기로 했다. 그렇게 하나씩 요구사항을 해결해나가다 보니 프리코스에서 제공하는 예제 테스트를 통과할 수 있을 정도로 과제를 구현해 낼 수 있었다. 과제를 제출한 뒤, 모든 예제 테스트를 통과한 것을 확인했을 때 느꼈던 기쁨은 정말 이루 말할 수 없었다. 이번 경험을 통해 끝까지 포기하지 않는 도전 정신이 얼마나 중요한지 깨닫게 되었다.
Learned, 미션을 수행하면서 배운 점
사용자 입력 처리에서 발생한 문제를 해결하며 Promise.all()에 대해 배우게 되었다. 4주차 프리코스 과제의 요구사항 중 하나는 사용자가 잘못 입력한 경우 에러 메시지를 보여주고 다시 입력받는 기능이었다. 이 기능을 구현하면서 코드가 비동기적으로 실행되는 문제가 발생했다. 분명 async/await 키워드를 사용했음에도, 사용자의 입력을 기다리지 않고 다음 코드가 실행되는 오류였다.
예를 들어, 사용자가 구매할 상품과 수량을 입력한 뒤(이때, 구매할 상품은 여러 개일 수 있음), 이를 바탕으로 각 구매할 상품의 프로모션 할인과 멤버십 할인 여부를 확인하고 입력을 받아야 했다. 그러나 프로모션 할인 관련 질문에 대한 입력을 받기도 전에 멤버십 할인 질문으로 넘어가 버리는 문제가 발생했다. 이를 해결하기 위해 Promise.all() 메서드를 사용해 각 비동기 작업을 병렬로 실행하고, 모든 작업이 완료될 때까지 기다린 후 결과를 한 번에 모으는 방식으로 수정했다.
Promise.all() 메서드를 적용한 코드
async addPurchaseItems(items) {
const purchasePromises = items.map(async ([name, quantity]) => {
const findProduct = this.products.find(product => product.name === name);
const findPromotion = this.promotions.find(promotion => promotion.name === findProduct.promotion);
const purchaseItem = await this.createPurchaseItem(quantity, findProduct, findPromotion);
return purchaseItem;
});
const purchaseResults = await Promise.all(purchasePromises);
this.purchaseItems = purchaseResults;
}Promise란?
Promise는 자바스크립트에서 비동기 작업을 처리하기 위한 객체이다. 비동기 작업은 시간이 걸리므로 결과를 바로 얻을 수 없지만, Promise는 그 작업의 결과값을 나중에 받을 수 있다는 "약속"을 나타낸다. 즉, Promise는 "이 작업이 끝나면 결과를 알려줄게"라는 약속을 가진 객체이다.
- 대기 상태(Pending): Promise가 아직 실행되지 않았거나 결과를 반환하지 않은 상태
- 이행 상태(Fulfilled): 작업이 성공적으로 완료되고 결과를 반환한 상태
- 거부 상태(Rejected): 작업이 실패하여 에러를 반환한 상태
Promise는 비동기 작업을 처리할 때, 결과를 기다리고 나서 실행해야 할 후속 작업을 처리할 수 있게 도와준다.
Promise.all()
- Promise.all()이란? Promise.all()은 여러 개의 Promise를 동시에 실행하고, 모든 Promise가 성공적으로 완료되면 그 결과를 반환하는 정적 메서드다. 만약 하나의 Promise라도 실패하면 전체가 실패로 간주된다.
- 언제 사용하는가? Promise.all()은 여러 비동기 작업을 동시에 실행하면서 모든 작업이 완료되기를 기다릴 때 사용된다. 예를 들어:
- 여러 API 요청을 병렬로 보내고, 응답이 모두 완료된 후 결과를 처리할 때
- 서로 의존하지 않는 비동기 로직을 동시에 실행해야 할 때
- Promise.all()이 만들어진 이유는? 기존에는 비동기 작업을 순차적으로 실행하거나 콜백 지옥(callback hell)을 통해 병렬 작업을 처리해야 했다. Promise.all()은 이러한 비효율성을 해결하고, 코드의 가독성을 높이며 비동기 작업을 더욱 간단하게 관리할 수 있도록 도입되었다.
프로모션 할인 여부와 멤버십 할인 여부를 묻는 작업을 Promise.all()을 사용해 모든 입력을 기다린 후 결과를 처리할 수 있었다. 이를 통해 코드가 명확해지고, 비동기 작업을 효율적으로 관리할 수 있음을 깨달았다.
이번 경험을 통해, Array.prototype.map() 메서드와 같이 배열의 요소를 비동기적으로 순회하는 메서드를 사용할 경우, 각 비동기 작업의 결과를 한 번에 기다릴 수 있도록 Promise.all() 메서드를 사용하여 처리하는 방법에 대해 알게 되었다.
Lacked, 미션을 수행하면서 부족했던 점
이번 미션을 수행하면서 동기/비동기 개념에 대한 이해가 부족하다는 것을 깨달았다. 위에서 언급한 것처럼, 동기적으로 실행되도록 구현한 코드가 비동기적으로 실행되는 문제를 해결하는 데 2~3시간을 소모했다. 이 과정에서 동기와 비동기의 차이를 정확히 이해하지 못하고 있다는 것을 알게 되었다. 특히, Array.prototype.map() 메서드가 비동기적으로 동작하는 방식에 대해 명확히 이해하지 못했던 점이 아쉬웠다. 또한, 비동기 코드가 어떻게 동기적으로 동작하도록 만들 수 있는지에 대해서도 부족한 부분이 있음을 느꼈다. 이 부분은 개념을 다시 공부하고, 비동기 처리에 대한 이해를 더 깊이 할 필요가 있다고 생각했다.
두 번째로 부족했던 점은 시간 관리였다. 4주차 미션에서는 시간 관리에 실패했다. 1, 2, 3주차에 받은 공통 피드백을 미션 구현에 반영을 거의 못했고, 예제 테스트를 통과하는 수준에서 급하게 제출하게 되었다. 마지막 날에 완성한 부분도 있었고, 완성 후에는 미션 회고에 시간을 투자해야 했기 때문에 리팩토링은 거의 하지 못했다. 회고를 제출한 시간이 과제 제출 마감 직전에 가까웠기 때문이다. 앞으로는 이런 미션을 수행할 때 시간 관리에 좀 더 철저히 신경 써야겠다고 느꼈다.
Longed For, 앞으로 개선하고 싶은 점
- 동기와 비동기 개념에 대해 더 깊이 공부하고, 각 개념이 실제 코드에서 어떻게 적용되는지 이해를 높이고 싶다.
Promise와Promise.all()에 대해 추가적으로 공부하여, 비동기 처리를 효율적으로 관리할 수 있는 능력을 배우고자 한다.- 마감 기한 내에 급하게 해결하지 않도록 시간 관리 방법에 대해 찾아보고, 이를 실제 미션에 적용하여 더 여유 있게 작업을 진행할 수 있도록 개선하고 싶다.
- 과제: 4주차 프리코스 과제 보러가기
