JavaScript의 비동기 처리

비동기 처리란

특정 코드의 연산이 끝날 때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성

Promise

콜백과 프로미스를 알아보자

jQuery의 ajax통신

funtion getData(func) {
	$.get('서버 엔드포인트', (result) => {
    	func(result)
    })
}

getData((data) => {
	console.log(data)
})

get방식으로 원하는 서버의 엔드포인트에 클라이언트는 요청을 하는 getData 함수는 func함수라는 인자를 담고 있다.
getData함수의 body에는 위와 설명한 것과 같이 get방식으로 요청을 하고 요청 받은 결과값(데이터)를 다시 func함수에 넘겨준다.

getData 함수가 호출될 때 서버에서 받아온 결과값(데이터)를 넘겨준다.

이 정도는 알아야 프로미스를 이해할 수 있다.
사실 이것보다 팀, 개인 프로젝트를 하거나, 기업 단위의 대형 프로젝트에 투입되거나 소스코드를 볼 때 서버에 요청하는 코드에서 프로미스, async await 또는 기본적인 비동기처리방식(콜백단위)들로 이루어져 있는데 각각 구분되어 사용한 이유를 먼저 알아보자.

프로미스를 왜 사용하는지?

일단, 기본적으로는 콜백함수로 처리했을 때는 상관 없지만 순차적으로 많은 비동기 처리를 해야할 때가 많다.
그렇게 되면 콜백함수의 구조는 > 이런 모양이 된다. 모양은 콜백지옥 검색하면 바로 나온다.

많은 비동기 처리라고 하면, 이런 것

철수야, A상점가서 물건1 사고 그 물건1로 B상점가서 물건2로 바꾸고 받은 물건2로 C상점가서 팔고, 받은 돈으로 D상점가서 쌀사고, 쌀로 집에와서 밥하고, 밥하는 시간에 반찬준비좀 하고 나를 불러라!

라고 할 수 있다.
동시에 할 수 있는 것은 마지막에 밥하는 시간에 반찬준비하는 것이다. 하지만 그것도 밥짓기를 하고 반찬준비하는 것이기 때문에 프로그래밍적으로 본다면 없다. 콜백관점에서 본다면 계속 중첩이 되는 것이다.

이 때, 나온 것이 Promise이다. 우리말로 하면 약속인데, 어느 정도 뜻을 내포하는 것 같다.
A 상점 가서 물건 사고 -> then() 으로 받는다. then() 안에서 또 then()으로 이어 나갈 수 있다. -> 체이닝 이라고 부른다.

코드의 가독성은 확실히 올라간다.

async와 await는 나중에 알아볼 것이다. 사실 알고 있지만 포스팅만 나중에 하는 거

프로미스 코드로 간단하게 알아보기

프로미스 생성 방법은 new Promise((resolve, reject) { ... }) 이다.

const promise1 = function(p1) {
	return new Promise ((resolve, reject) => {
    	if(p1){
        	resolve('실행') -> 이행
        }else {
        	reject('거부') -> 실패
        }
    })
}

프로미스 객체 promise1을 만들었다.

promise1(1 === 1)
	.then((res) => {
    	console.log(res) // 실행
    }, (err) => {
    	console.log(err) // 거부
    })
    

promise1은 내가 만든 프로미스 객체이다.
프로미스 사용 방법은 내가 직접 만들었다. 반대로 만들고 내용을 반대로 적어줄 수도 있다.
마찬가지로 다른 로직을 넣을 수도 있다.

내가 JS 실무에 와서 조금 헷갈렸던것은 프로미스와 콜백이었다. async, await는 확실히 언제 사용해야 하는지 알고 있지만,
콜백과 프로미스는 기능적인 면에서의 눈에 띄는 차이를 못느꼈다. 말만 콜백지옥이라고 들었다.
근데, 알고보니 내가 사용했던 코드가 다른 사람(누군가가)이 구현한 프로미스 객체들을 끌어와(라이브러리) 쓰는 것이었다.

실무에서 프로미스 코드 (axios, fetch)

프로미스 객체 promise1은 내가 직접 만든 프로미스 객체이다. 위에서 설명했던 것처럼 다른 누군가가 설계한 프로미스 객체를 라이브러리 형태로 가져와서 사용할 수 있다.

바로 axios이다. fetch는 라이브러리가 아닌 자바스크립트 내장 객체이다. axios 쓸려면 라이브러리니깐 받아와서 쓰면 되고 fetch는 내장객체이므로 바로 쓰면 됨.
그러면 어떤거 쓰면 될까? axios쓰면 된다. axios가 fetch보다 더 좋다. 자동으로 JSON 데이터 형식으로 변환이되고, 크로스 브라우징 및 다운로드 지원도 있다. 이 외에도 더 좋으므로 그냥 일단 axios가 fetch의 상위호환이라 생각하면서 쓰면 되고 궁금한건 구글링~~

Axios 객체를 파헤쳐 보자.

Axios, 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리

저 Promise 기반이 매우 중요하다. 자, 위의 내용에서 내가 만들거나, 다른 누군가가 만든 것을 사용하면 된다고 했다. 단, 로직에 맞게만. 그렇다면 일단 Axios가 프로미스 객체 인걸 알았으니 어떻게 사용하는지를 알아보자 === 로직을 알아보자

그러면, 당연히~ 공식문서 가는건 기본중의 기본! https://axios-http.com/kr/docs/intro
들어가면 공식문서이다. 개인적으로 영어를 잘 못해서 번역을 하면 오역이 되거나 어색한 번역이 되는 경우가 많아서 영어 실력을 키우는게 가장 좋을 듯하다. -> 영어공부 또한 해야할 듯 또는 공식문서에서 사용 방법에 관한 api문서 몇 페이지 정도는 직접 번역을 해서 블로그에 옮겨 놓는 것도 좋은 방법이라고 생각한다. 실례로 필자는 곧 Vuetify에서 api문서부분을 번역에서 블로깅 할 예정이다.

공식문서를 보면 설치하는 방법, axios라이브러리 소개 부터 인스턴스 생성 및 직접사용법 등 자세하게 나와있다.
axios는 기본적으로 HTTP 통신이므로 요청헤더에 HTTP정책에 맞게끔 헤더에 정보를 담아서 보내야 한다.

그렇다면 중요한 HTTP 요청(request) 및 응답(response) 헤더들을 보고 마무리!

Cache-Control

캐시란, CPU와 주기억장치 사이에 물리적으로 존재 하는 버퍼 형태의 고속의 기억장치
사용목적은: CPU와 주기억장치 사이의 속도를 개선/제어 해준다. --> 불러올 때의 속도(read memory) 개선 및 제어

Cache-Control (공통 헤더) 이라고하면 캐시를 어떻게 이용하는 지 또는 서버에 사용해도 되는지 어디에 저장하는지 등을 설정하는 옵션이다. 공통 헤더는 밑에서 설명~~
주요 옵션을 살펴보자
no-store : 캐싱 하지 않음
no-cache : 모든 캐시를 쓰기 전에 서버에 한 번 물어보는 것 (IE6 고려) -> 고려하지 않으면 생략 가능
must-revalidate : 만료된 캐시만 서버에 확인을 받음
public : 공유 캐시에 저장
private : 브라우저 같은 특정 사용자 환경에 저장
max-age : 캐시의 유효시간 -> max-age = 3600 이면 1시간 (초단위) 1시간 동안 저장 후 이 응답캐시는 만료가 됨

응답헤더에서 사용하지만 요청 헤더로도 사용할 수 있다.
프론트 - 중개 서버 - 서버의 경우에는 요청 시 부터 Cache-Control 을 넣을 수 있다.

X-Request-With

ajax 콜을 하는 코드를 들여다보면 요청 헤더에 X-Requested-With: XMLHttpRequest코드를 볼 수 있다.

이 코드가 뜻하는 바는 해당 요청이 ajax 콜이라는 것을 의미한다. (커스텀 헤더 -> 코더가 직접 설정)
또한, 서버에 ajax 콜임을 알려줄 뿐만 아니라 JSON Hijacking을 방어하는 용도로 사용이 가능

JSON Hijacking이란, CORS 설정이 미비, 미흡한 경우에 공격자가 사용자의 데이터 등을 임의로 탈취할 수 있는 공격방법

Pragma

오래된 클라이언트에 대한 HTTP1.0 스펙 (고려하지 않는 다면 생략 가능)

Expires

기간을 뜻한다. 얼마나 보존하고 언제 만료가 될지

마찬가지로 HTTP 1.0 프록시를 위함 -> 고려하지 않는 다면 생략 가능

다음 글은 아마도 async await가 될 것!!!