axios
IT 및 일상을 공유합니다.
[TypeScript] Axios TypeScript 적용하여 사용해보자
화창하지만 황사로 인해 미세먼지 많은 날씨 다들 마스크 쓰며 열일하셨나요? 이번 포스팅에서는 Nuxt와 React에서 서버로 HTTP 통신을 위해 사용되는 Axios에 대해서 TypeScript 적용하여 인스턴스 생성 및 사용하는 방법을 설명해 볼까 합니다. 23.07월 기준으로 포스팅 내용이 수정되었습니다. Axios 설치하기 npm install axios@1.4.0 // 23.07월 기준 1.4.0 최신버전입니다. 만약에 Nuxt2에서 axios 1.4.0버전을 사용한다면 Es Module 에러가 나오는데 nuxt.config.js에 아래와 같이 추가해주면됩니다. // nuxt.config.js build: { transpile: [ 'axios' ], } Axios 인스턴스 타입 확인 node_m..
[Nuxt] Axios 와 Proxy 사용 방법 (CORS)
이번 포스팅은 NuxtJS에서 Axios 구성과 Proxy 설정 방법에 대해서 설명해보려고 합니다. 회사에서 백엔드와 작업할때 CORS 문제와 API 작업에서 삽질했던 부분을 정리하고자 합니다. CORS 란? Cross Origin Resource Sharing의 약자로, 현재 웹페이지 도메인에서 다른 웹페이지 도메인으로 리소스가 요청되는 경우를 말한다. HTTP , HTTPS 와 같은 프로토콜이 다른경우 domainA.com과 domainB.com처럼 도메인이 다른 경우 8080 포트와 3000 포트처럼 다른 경우 이처럼 Cross-Origin 이란 위 3가지 중 한 가지라도 다른 경우를 말합니다. CORS가 없이 모든 곳에서 데이터를 요청할 수 있으면, 다른 사이트에서 본인이 개발한 사이트를 흉내 낼..