식사를 기다려며 한 가지 단원을 더 공부하기로 했다. 강의가 조금 길지만 그래도 이것까지는 공부를 마쳐볼 것이다. 점심에 고구마를 찌려고 다듬고 기다리는 중이다. 작은 요리라도 해보면 한 끼 식사의 감사함을 느낄 수 있다.
이론 3 - Promise
실행 결과를 보면 Promis의 처리가 더 먼저 되는 것을 알 수 있다.
new Promise를 사용할 수도 있고, 비동기 처리를 반환하는 fetch()를 사용할 수도 있다. promise에는 상태를 나타내는 flag가 있다. 성공의 경우 then, 실패할 때는 catch가 호출된다.
콜백 함수는 executor라고 한다. 이 코드는 0~1 값 중에서 0.5보다 작은 때는 실패는 그 외에는 성공을 호출한다.
이렇게 비동기 처리를 하는 콜백 함수를 넘길 수 있다.
내부적으로 return this라는 키워드가 생략되어 있다. 자기 자신을 리턴하는 함수가 있기 때문에 그 객체에 있는 .then 메서드가 호출될 수 있는 것이다. fetchUser가 promise를 리턴하는 함수라면 그다음 then이 호출하기 전에 기다리게 된다. 이런 식으로 비동기 처리의 순서를 쉽게 부여할 수 있다.
이것 또한 정적인 메서드이다. 모든 promise가 resolve되거나 실패할 때까지 기다린다. 모두 다 성공할 때는 배열에 넘긴다.
퀴즈 3 - Promise
문제를 풀기 전에 캡처를 하지 않아 아무거나 체크해보았다.
문제를 스스로 아주 잘 풀었다.
실습 2 - 유저 주소 검색 폼 구현하기
app.js
api.js
UserInput.js
이 문제는 유저의 ID를 이용해서 address 정보를 찾는 것이다.
문제 풀기
1. 코드 실행하기
유저를 검색하면 아직은 구현이 안되었기에 이런 메시지가 뜬다. 이제 코드를 작성해 보겠다.
2. searchAddress() 함수 구현하기
value를 넣어 findUserbyUsername을 호출한다. promise를 리턴하기 때문에 then이 되고, then의 경우 user를 반환한다. 유저의 정보를 입력하고 findAddressByUserId로 id를 넘긴다. 그런 다음 주소도 넘긴다.
3. 나머지 코드 작성하기
이렇게 작성할 수 있는데 아래쪽 then의 구문은 제거할 수 있고 불필요한 정보를 없애고 코드를 다시 작성하면 다음과 같다. 화살표 함수에서는 리턴 구문도 제거된다.
catch의 경우 에러를 반환하는데 에러 메시지를 넣는다. 그리고 promise가 리턴 구문을 반환하도록 한다.
실행 결과 빌드 오류가 떴다. 코드를 잘못 쓴 것 같아 다시 수정하기로 하자. 오류 내역은 다음과 같다.
- Promise 반환: searchAddress 함수가 Promise.resolve()를 반환하고 있는데, 실제로는 API 호출의 결과를 반환해야 한다. 따라서 findAddressByUserId의 결과를 반환해야 한다.
- catch문: catch 블록에서 발생한 에러를 처리하고 있지만, 이 에러는 Promise 체인에서 발생한 것으로, 결과적으로 Promise가 rejected 상태가 될 것이다. 따라서 이 에러를 처리하는 방법은 Promise.reject(e)를 반환하여 에러를 호출자에게 전달하는 것이다.
- Semicolon 오류: findAddressByUserId(user.id); 뒤에 불필요한 세미콜론이 있다. 세미콜론을 제거해야 한다.
3. 코드 다시 수정하기
4. 작성한 코드 실행하기
유저를 검색하는데 유저의 정보는 api.js 파일에 들어있다.
유저가 잘 검색되었다. 하지만 한 가지 오류가 있어서 점수가 깎였다.
api에 저장되어 있지 않은 유저를 검색하자 오류 메시지가 뜨지 않는다.
5. 오류 메시지가 뜨도록 코드 수정하기
드디어 맞았다. 이 문제도 정말 어렵게 풀었다. 이상하게도 선생님 코드대로 쓰면 안 될 때가 많다.
학습을 마치고
2시에는 마치고 식사를 하고 싶었는데 문제가 잘 안 풀려서 30분 정도 지체되었다. 그래도 한 단원을 다 마쳐서 정말 뿌듯했다. 이제 오후 시간에 이어서 비동기에 대해서 공부해 볼 것이다.
비동기에 대해서 조금은 알 것 같다.
'웹 개발 > 자바스크립트' 카테고리의 다른 글
| 비동기 5 - HTTP, REST API (0) | 2024.11.27 |
|---|---|
| 비동기 4 - async/ await (0) | 2024.11.27 |
| 비동기 2 - 이벤트 루프 (0) | 2024.11.27 |
| 비동기 1 - 자바스크립트 제어 흐름 (0) | 2024.11.27 |
| 자바스크립트 실행 8 - 자바스크립트 내장 객체 4 : 실습 문제 풀기 3 (미해결 문제) (0) | 2024.11.27 |
