[TIL] 자바스크립트 Promise 와 Week3 미션 레이아웃 구현

샤이니·2023년 4월 11일

Codeit TIL

learned.log

목록 보기

18/46

오늘의 나는 무엇을 잘했을까?

Week3 Mission의 레이아웃을 구현했다.
특히 signin과 signup의 레이아웃 구성이 유사해서 하나의 css로 묶어줬다. 이 과정에서 css와 imgs를 static이라는 폴더로 리팩토링했고, html의 경우에도 폴더명/index.html로 리팩토링하였다. 이렇게 할 경우 url로 접근할 때 확장자명까지 적지 않아도 되어서 편리하다. (~~물론 리액트나 다른 프래임워크를 사용하여 네비게이션을 하면 신경 안써도 되는 부분이다~~)
알고리즘 3문제를 풀었다. 실버 레벨 문제들로 감을 되찾기 위해서 가볍게 풀었다. 특히 ramda를 써서 pythonic한 문법을 익히고자 노력했다.

오늘의 나는 무엇을 배웠을까?

자바스크립트 웹개발 기본기 - Promise 편

JSON 데이터 다루기

Javascript Object Notation의 줄임말로, 자바스크립트의 Object Literal 문법 및 배열 표현법 등과 일정 부분 호환되는 데이터포맷

JSON.parse : 역직렬화
JSON.stringify : 직렬화
json 메소드
- response의 내용이 JSON 데이터에 해당하는 경우, 바로 Deserialization까지 수행한다. 단, response가 JSON데이터가 아닐 경우 error

Response

상태코드

각 코드에 대응하는 상태 메시지를 가지고 있다

100 Continue : 클라이언트가 서버에게 계속 리퀘스트를 보내도 괜찮은지 물어봤을 때, 계속 리퀘스트를 보내도 괜찮다고 알려주는 상태 코드
101 Switching Protocols : 클라이언트가 프로토콜을 바꾸자는 리퀘스트를 보냈을 때, 서버가 '그래요, 그 프로토콜로 전환하겠습니다'라는 뜻을 나타낼 때 쓰이는 상태 코드
200 OK
301 Moved Permanently : 리소스의 위치가 바뀌었음
302 Found : 리소스의 위치가 일시적으로 바뀌었음. response에 리소스에 접근할 수 있는 url을 담아서 보내고 그 url로 다시 request를 보내는 redirection을 수
304 Not Modified : 웹에서 '캐시(cache)'를 활용한 상태코드
404 Not Found
405 Method Not Allowed : 해당 리소스에 대해서 요구한 처리는 허용되지 않는다는 뜻
413 Payload Too Large : 현재 리퀘스트의 바디에 들어있는 데이터의 용량이 지나치게 커서 서버가 거부한다는 뜻
429 Too Many Requests : 일정 시간 동안 클라이언트가 지나치게 많은 리퀘스트를 보냈다는 뜻
500 Internal Server Error : 현재 알 수 없는 서버 내의 에러로 인해 리퀘스트를 처리할 수 없다는 뜻
503 Service Unavailable : 현재 서버 점검 중이거나, 트래픽 폭주 등으로 인해 서비스를 제공할 수 없다는 뜻

Content-Type 헤더

현재 request 또는 response의 바디에 들어있는 데이터가 어떤 타입인지 나타낸다. main type/sub type 형식이다.

text/html: html 데이터
image/jpeg: jpeg, jpg 이미지 데이터
audio/mpeg: mp3, mpeg 오디오 데이터
application/json: json 데이터
application/octet-stream : 확인되지 않은 바이너리 파일 (텍스트 파일 이외의 파일을 binary file이라고 함. 즉 특정 확장자(mp4 등)에 해당하지 않는 바이너리 파일)
application/x-www-form-urlencoded
- html의 form태그가 리퀘스트를 보낼 때의 타입.
- id=6&name=Jason&age=34&department=engineering 이런 식으로 “이름=값” 프로퍼티를 “&”으로 연결된 데이터타입이다.
- URL encoding을 해 리퀘스트를 보낸다.
  - Percent encoding을 사용해서 URL을 인코딩함. UTF-8 인코딩 규칙을 적용해 1과 0의 조합으로 인코딩 후 한 바이트 당 그 앞에 %기호를 붙인다.
multipart/form-data: 여러 종류의 데이터를 하나로 합친 데이터 ex) 텍스트 + 이미지 + 동영상 데이터

Ajax

Asynchronous JavaScript And XML

웹브라우저가 현재 페이지를 그대로 유지한 채로 서버에 리퀘스트를 보내는 response를 받아서 새로운 페이지를 로드하지 않고도 변화를 줄 수 있게 해주는 기술

JavaScript에서는 XMLHttpRequest() 객체를 통해 Ajax 통신이 가능.(구버전)
- 이를 기반으로 한 axios라는 외부 패키지 사용
fetch 함수를 사용해서 Ajax 통신 가능 (외부 패키지 axios를 설치 X고 싶은 경우 사용)

HTTP 메소드

GET, POST, PUT, DELETE
PATCH - 새 데이터로 기존의 데이터의 일부를 수정할 때 사용하는 메소드
- PUT은 기존 데이터를 아예 새로운 데이터로 덮어씀으로써 수정하려고 할 때 쓰는 메소드
HEAD - GET 메소드와 동일하지만 response에서 바디 부분은 제외하고, 헤드부분만 받는다.
- 실제 데이터가 아니라 데이터에 관한 정보만 얻으려고 하는 상황에서 사용 (파일 용량정보 등)

웹통신이 아닌 다른 통신도 있다

컴퓨터끼리 통신하는 프로토콜에는 HTTP, HTTPS 이외에도, FTP, SSH, TCP, UDP, IP, Ethernet 등 정말 다양한 종류의 프로토콜이 있다.

(고수준 프로토콜) HTTP / TCP / IP / Etherent (저수준 프로토콜)
네트워크 레이어와 매칭되는 프로토콜 알아두기

비동기 실행

비동기 실행에서는 코드가 꼭 등장하는 순서대로 실행되는 것이 아니다.

console.log('Start!');

fetch('https://www.google.com')
  .then((response) => response.text()) // 콜백 1
  .then((result) => { console.log(result); });  // 콜백 2

console.log('End');

fetch 함수가 리퀘스트를 보내고, 서버의 리스폰스를 받게 되면 콜백들이 순서대로 실행

console.log('Start');
fetch 함수(리퀘스트 보내기 및 콜백 등록)
console.log('End');
리스폰스가 오면 2. 에서 then 메소드로 등록해뒀던 콜백 실행

비동기 실행 함수들

setTimeout 함수
setInterval 함수 - n초 간격으로 계속 실행
**addEventListener 메소드**
- 특정 이벤트가 발생했을 때 실행할 콜백을 등록하는 DOM 객체의 메소드
- . 파라미터로 전달된 콜백이 당장 실행되는 것이 아니라, 나중에 특정 조건(클릭 이벤트 발생)이 만족될 때(마다) 실행된다.

promise 객체

작업에 관한 상태정보를 가지고 있는 객체

fetch함수는 Promise 객체를 리턴한다. 이때 promise객체는 pending 상태

then 메소드로 작업이 성공하여 promise객체가 pending → fulfilled가 되면 실행할 콜백을 등록할 수 있다.
3가지의 상태 정보
- pending : 진행 중
- fulfilled : 성공.
  - fulfilled 상태가 되면 promise는 작업 성공 결과(response)를 가진다.
- rejected : 실패
  - rejected 상태가 되면 promise는 작업 실패 결과(response)를 가진다.

promise chaining

프로미스 객체에 then 메소드를 연속적으로 작성하는 것.

then 메소드는 새로운 프로미스 객체를 리턴한다.

callback이 ① promise 객체를 리턴하는 경우, ② promise 객체가 아닌 일반 문자열 등의 값을 리턴하는 경우. ③ 아무 값도 리턴하지 않는 경우 ****④ 실행된 콜백 내부에서 에러가 발생 ****가 있다. ⑤ 아무런 콜백도 실행되지 않을 때
- ① 의 경우 then 메소드가 return한 promise 객체는 callback이 return한 promise 객체와 동일한 상태와 결과를 가진다
- ② 의 경우 then 메소드가 return한 promise 객체는 fulfilled 상태와 작업 성공 정보를 가진다.
- ③ 의 경우는 ① 경우와 똑같이 then 메소드가 리턴했던 Promise 객체는 fulfilled 상태가 되고, 그 작업 성공 결과로 undefined를 가진다.
- ④ then 메소드가 리턴한 Promise 객체는 rejected 상태가 되고, 그 작업 실패 정보로 해당 Error 객체를 갖게 된다
- ⑤의 경우 then 메소드가 리턴하는 promise 객체는 이전 promise 객체와 동일한 상태와 결과를 가진다.
  
  잠깐! text 메소드, json 메소드는 promise 객체를 반환한다.

promise chaining이 필요한 경우

비동기 작업을 순차적으로 진행해야 할 때 전체 코드를 깔끔하게 나타내기 위해 사용

catch 메소드

promise 객체가 rejected 상태가 되면 실행할 callback을 등록하는 method
= then(undefiend, 콜백)
보통 마지막에 쓴다. 중간에 에러가 발생해서 어느 Promise 객체가 rejected 상태가 되더라도 항상 대처할 수 있도록 해야 한다
헷갈리는 개념 다잡기
```
fetch("https://jsonplaceholder.typicode.commmmm/users")
	.then((response) => response.text()) //①
	.then((result) => { 
		console.log(result);
		throw new Error('test'); // ②
	})
	.catch((error) => {console.log(error);});

//결과 - TypeError: Failed to fetch
```
유효하지 않은 url로 request를 보냈을 때 fetch가 return 한 promise는 rejected 상태와 error라는 작업 실패 정보를 가진다. ①의 callback은 실행되지 않고 then이 return한 promise는 fetch가 return 한 promise 와 똑같은 상태와 작업정보를 가진다.
- 즉 ①의 then의 promise는 rejected 상태와 error라는 작업 실패 정보를 가진다.
  
  ②의 callback은 실행되지 않고 ②의 then의 promise는 직전 promise와 동일하게 rejected 상태와 error라는 작업 실패 정보를 가진다.
  
  따라서 catch문은 rejected 상태와 error라는 작업 실패 정보를 출력하는 것이다!

finally 메소드

promise 객체가 fulfilled 상태가 되든 rejected 상태가 되든 상관없이 항상 실행하고 싶은 콜백이 있는 경우 finally 메소드로 등록한다.
finally 메소드 안의 콜백은 작업 성공 결과나 작업 실패 정보가 필요하지 X → 파라미터가 필요 X
보통 catch 메소드 바로 뒤에 쓴다

callback hell에서 빠져나오기 위해 promise 객체가 생겼다.

함수에 콜백을 직접 넣는 형식은 콜백 헬이 발생할 수 도 있다.
콜백 헬 : 순차적으로 비동기 실행함수들을 실행하려고 하면 콜백 안에 또 콜백이 있고, 그 안에 또 콜백이 있는…
ES6에서 추가되었다.

promise 객체 만들기

executor 함수 : Promise 객체가 생성될 때 자동으로 실행되는 함수
- resolve 파라미터 - promise 객체를 fulfilled 상태로 만들 수 있는 함수가 연결됨
- reject 파라미터 - promise 객체를 rejected 상태로 만들 수 있는 함수가 연결됨

const p = Promise((resolve, reject) => {
	setTimeout(() => { resolve('success');}, 2000);
})

p.catch((error) => {console.log(error); });

Promisify 작업을 할 때 사용한다. : 전통적인 형식의 비동기 실행 함수를 사용하는 코드(ex. setTimeout 함수)를 Promise 기반의 코드로 변환하기 위해 Promise 객체를 직접 만든다
- 콜백 헬을 해결할 수 있다.
- 그 콜백을 한번만 실행하는 함수들에서 사용가능하다
Promisify를 하면 안되는 함수들
- Promise 객체는 한번 pending 상태에서 fulfilled 또는 rejected 상태가 되고 나면 그 뒤로는 상태와 결과가 바뀌지 않기 때문에 콜백을 여러번 실행하는 함수에서는 하면 안된다.
  - setInterval, addEventListener 등

이미 상태가 결정된 Promise 객체 만들기

const p = Promise.resolve('success')
	.then(//어쩌고~)
const p = Promise.reject(new Error('fail'));

여러 개의 Promise 객체를 다뤄야할 때 사용되는 Promise 메소드

all 메소드 - all([p1, p2, p3 ...])
- 아규먼트로는 배열 하나가 들어있다.
- 아규먼트로 들어온 배열 안에 있는 모든 Promise 객체가 pending 상태에서 fulfilled 상태가 될 때까지 기다린다.
- 모든 Promise 객체들이 fulfilled 상태가 되면, all 메소드가 리턴했던 Promise 객체는 fulfilled 상태가 되고, 각 Promise 객체의 작업 성공 결과들로 이루어진 배열을 작업 성공 결과로 가진다.
  - 작업 성공 결과 배열 예시
- 아규먼트로 들어온 Promise 객체 중 하나라도 rejected 상태가 될 경우?
  - all 메소드가 리턴한 Promise 객체는 rejected 상태가 되고 동일한 작업 실패 정보를 갖게 된다.
  - 즉 하나라도 rejected 상태가 되면 전체 작업이 실패한 것으로 간주해야할 때 사용한다.
race 메소드 - .race([p1, p2, p3 ... ])
- 마찬가지로 아규먼트로 배열 하나가 들어있다.
- race 메소드가 리턴한 Promise 객체는 아규먼트로 들어온 배열의 여러 Promise 객체들 중에서 가장 먼저 fulfilled 상태 또는 rejected 상태가 된 Promise 객체와 동일한 상태와 결과를 갖게된다.
allSettled 메소드
- 배열 내의 모든 Promise 객체가 fulfilled or rejected 상태가 되기까지 (즉, settled 상태가 되기까지) 기다리고 pending 상태의 Promise 객체가 하나도 없게 되면
  1. allSettled 메소드가 리턴한 promise 객체의 상태값은 fulfilled 상태가 되고
  2. 작업성공결과로 하나의 배열을 갖게된다.
  - 이 배열에는 아규먼트로 받았던 배열 내의 각 promise 객체의 ① 최종 상태를 status 프로퍼티 ② 그 작업 성공 결과는 value 프로퍼티 ③ 그 작업 실패 정보는 reason 프로퍼티 에 담은 객체들이 요소로 존재한다.
- fulfilled 상태와 rejected 상태를 묶어서 settled 상태라고 함
any
- Promise 객체들 중에서 가장 먼저 fulfilled 상태가 된 Promise 객체의 상태와 결과가 any 메소드가 return한 promise 객체에 반영된다.

Axios

Ajax 통신을 할 수 있는 외부 패키지
axios 객체에서 리퀘스트를 보내는 많은 메소드들은 Promise 객체를 리턴한다.
fetch 함수에는 없는 장점
- 모든 requset, reponse에 대한 공통 설정 및 공통된 전처리 함수 삽입 가능
- serialization, deserialization을 자동으로 수행
- 특정 리퀘스트에 대해 얼마나 오랫동안 리스폰스가 오지 않으면 리퀘스트를 취소할지 설정 가능(request timeout)
- 업로드 시 진행 상태 정보를 얻을 수 있음
- 리퀘스트 취소 기능 지원

오늘의 나는 어떤 어려움이 있었을까?

컨디션 조절이 필요한 요즘이다. 이사 준비 때문에 정신이 하나도 없어서 학습을 자칫 놓치고 있는 것 같다.

내일의 나는 무엇을 해야할까?

Week3 js 구현

샤이니

이전 포스트

[TIL] 자바스크립트 웹 개발 기본기 (상)과 Week2 리팩토링

다음 포스트