2022/7/27 TIL

1. 자바스크립트 딥다이브 책 프로미스 파트를 마무리 

 

- 프로미스는 then, catch, finally 이렇게 세 가지 후속 처리 메서드를 갖는다.

 

이 후속 처리 메서드가 언제나 프로미스를 반환하므로 프로미스 체이닝이 생긴다.

=> 이 프로미스 체이닝으로 비동기 처리 결과를 받으므로 콜백 헬에 빠지지 않을 수 있게 된다!

 

- 프로미스는 다섯 가지의  정적 메서드를 갖는다.

 

1.Promise.resolve, Promise.reject

=> 이미 존재하는 값을 래핑하여 프로미스를 생성하기 위해 사용

=> new 연산자로 Promise 만든 후 resolve나 reject하는 것과 같게 작동

2.Promise.all

=> 여러 개의 비동기 처리를 모두 병렬 처리할 때 사용

=> 모든 프로미스가 fullfilled 상태가 되면 resolve된 처리 결과를 모두 저장하는 것

=> 인수로 전달받은 요소가 프로미스가 아닌경우 Promise.resolve로 래핑한다.

3.Promise.race

=> all과 동일하게 프로미스를 요소로 갖는 배열 등의 이터러블을 인수로 전달받음 

=> 다른 점은 가장 먼저 fullfilled되는 프로미스의 처리 결과를 resolve하는 새로운 프로미스 반환 (모두 reject면 all과 동일)

4.Promise.allSettled

=> 이것도 프로미스를 요소로 갖는 배열등의 이터러블 인수로 전달받음

=> fullfilled와 reject 상관없이 프로미스의 처리 결과를 담는다.  (fullfilled일 경우 value, reject일 경우 reason)

 

*프로미스의 후속 처리메서드의 콜백함수는 태스크 큐가 아니라 마이크로태스크 큐에 저장된다. (마이크로 태스크 큐가 우선순위 높음)

 

# fetch

=> XMLHttpRequest 객체와 마찬가지로 HTTP 요청 전송 기능을 제공하는 클라이언트 사이드 Web API

=> HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환

 

2. DOM Array Method(map, filter, forEach, sort, reduce)를 활용한 간단한 어플리케이션 만들기

 

random user API에서 response를 받아와 그 데이터로 유저를 관리하는 어플리케이션를 Vanilla JS로 만들었다.

간단하게 async/await, fetch 를 활용해 API 통신을 했다.

 

- ForEach를 활용한 DOM 추가 및 요소 업데이트 

- map과 스프레드 연산을 활용한 새로운 객체 반환

- sort를 활용한 내림차순 정렬

- filter를 활용해 내가 원하는 조건의 새로운 객체 반환

- reduce로 내가 원하는 인덱스로 부터 얻은 값 반환

 

정리해보면 이렇게 활용해보고 썼던 것 같다.

 

3. MODAL, Menu Slider 바가 들어간 간단한 포트폴리오 어플리케이션 만들기

 

이 어플리케이션 만들기로 모달창과 메뉴 슬라이더 바를 만드는 연습을 했다.

modal창 display: none; 을 했다가 Sign in 버튼을 누르면 classList에 show-modal을 추가해 css를 추가했다.

메뉴 슬라이더 바는 transform: translateX(-100%)로 화면에 보이지 않게 하다가,

버튼 클릭시 transform: translate(200px);로 화면에 나오게 했다.