axios major version 업데이트

axios v1.x 버전의 몇 가지 변경점을 살펴보자

 

axios 버전이 v0.x에서 v1.x으로 업데이트되었다. v0.x에서 오랫동안 업데이트되지 않고 있었는데 한 번에 v1.x이 릴리즈 되었다. 당연히 메이저 버전이 올라갔으니 바뀐 사항들이 많을 것이고, 기존에 동작하던 기능들이 동작하지 않을 수도 있다.

semantic-versioning에도 메이저 버전 변경 시에는 기존 API가 삭제/변경되거나 호환되지 않을 수 있다고 나와있다.

 

 

• Major Version: 기존 API의 변경/삭제로 update하면 동작하지 않을 수 있다는 경고의 의미
• Minor Version: 이전 버전과 호환되는 방식으로 API가 추가되었으니 살펴보라는 의미
• Patch Version: 이전 버전과 호환되는 버그 수정을 했을 경우

 

v1.x의 CHANGELOG를 보면 변경된 사항이 많이 보인다. v0.x을 사용하다가 v1.x로 버전을 올렸더니 역시나 제대로 에러가 발생하는 곳이 있어서 에러가 발생하는 부분에 대한 변경점을 몇 가지 살펴보았다.

 

1) URL params serializer

먼저 기존에 사용하던 paramsSerializer이 변경되었다. 기존에는 paramsSerializer를 함수로 바로 사용하였지만 v1.x부터는 스펙 자체가 변경되었다. 그래서 v0.x 버전에서 이 내용을 적용하지 않으면 "options must be an object" 에러가 발생한다. 새로운 paramsSerializer에서는 기존에 사용하던 customSerializer을 serialize로 넣으면 그대로 사용할 수 있을 뿐만 아니라 인코딩과 indexes 옵션을 통한 기본 직렬화(serialize)도 제공한다.

 

 

encode는 커스텀 인코딩이 필요한 경우 넣는 옵션이고, seiralize는 기존에 paramSerializer로 넣던 customSerializer를 넣는 부분이다. indexes는 기본 직렬화 옵션이다. 여기서 주목해야 할 건 indexes 옵션이다. 이번 버전부터는 axios 라이브러리 자체에서 기본 직렬화를 제공한다. 거기에 indexes 옵션을 함께 사용하면 배열 직렬화도 용도에 맞게 할 수 있다.

코드 내에서 직렬화를 실제로 수행하는 건 buildURL 함수이다. 아래처럼 테스트 코드를 작성하여 buildURL 함수를 실행해보면

 

 

indexes가 null이면 URL에서 괄호(bracket)가 없는 것을 볼 수 있고, false면 인덱스가 없고, true면 인덱스가 있는 걸 볼 수 있다. 보통 나는 null로 세팅했을 때 나오는 결과, 괄호가 없는 버전의 직렬화된 URL만 사용했기 때문에 다른 직렬화 옵션이 왜 필요할까 찾아봤고, 그 이유를  Send an Array with an HTTP Get에서 찾을 수 있었다.

URL에 array를 자바(서블릿)는 괄호가 없이 "foo=value1&foo=value2&foo=value3"처럼 보내면 되지만, PHP, RoR 같은 언어에서는 "foo[]=value1&foo[]=value2&foo[]=value3"처럼 괄호를 사용한다고 한다.

 

 

2) interceptor에서 일부 header 키 접근 불가

v1.x부터는 interceptor안에서 get, post, common 등의 헤더키에 바로 접근할 수 없다. 아래처럼 인터셉터가 동작하기 전에 delete, get, head, post, put, patch, common를 헤더에서 삭제한다.

 

 

common은 Global Header용도로만 사용하도록 바뀌었으며, 인터셉터 안에서는 헤더 값을 세팅해야 하는 경우에는 common을 사용하지 않고 직접 세팅하면 된다. Global 헤더를 세팅하는 경우에는 아래처럼 세팅하면 된다.

 

 

 

예전에 axios-extensions 라이브러리 코드를 보면서 axios에 캐시를 어떻게 구현하였는지 본적이 있었는데, 이번엔 axios 코드를 직접 보게 되었는데 많은 인사이트를 얻었다.