개요진행중이던 프로젝트 중간에 투여되어 작업을 진행했던 7개월동안지속적으로 궁금했던 프로젝트내(vue) axios 관련 통신 구조를 파헤쳐보기로 했다. (공부도 할겸) 목차1. axios1-1. axios 전역설정1-2. axios instance 1-3. axios interceptors 1. axios axios란 무엇인가? 간단히 설명하고 넘어가자면,axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이며 백엔드와 프론트엔드의 통신을 간결하고 쉽게 진행하기 위해 사용한다. axios의 특징 가운데 이 포스팅에서 우리가 눈여겨 봐야할 것은 아래와 같이 3가지이다. 1. 자동으로 JSON데이터 형식으로 변환2. data 속성을 사용 3. data는..

-개요작년에 만들어두었던 프로젝트에 이용했던 공공 api가 개편이 되면서 전체적인 수정이 필요했다.(기존가입자도 모두 새로가입해야하는 상황이었고, 발급받은 key값과 가져와서 사용했던 데이터 Key값 모두가 변경되었다. -> 처음부터 다시 해야하는 상황)  - DB (mysql2) 정보 수정 Db관련 데이터를 가져올 때 host명을 'localhost'로 지정해두었었는데, 이 부분도 정확한 아이피값을 지정해줘야해서 바꿔주었다.    - 서버 수정 (express.js 관련)1. api 주소 자체가 바뀌었기 때문에, 주소를 변경하고 발급받은 Key를 변경시키면서 서버내 작성해둔 코드에도 변경을 주었다.- express를 사용하면서 status를 이용하기로 했다. status(400) / status(500..

1. 오픈 API 연결 (Axios) 및 데이터 타입 명시 오픈 api URL 을 생성하고 axios를 통해 데이터를 가져오기로 함. 그러나 데이터가 object 타입이라 읽지 못해 오류 발생 -> 데이터가 object 인 경우, 가져올 데이터의 타입을 정확하게 명시해야함. axios의 경우, 기본값이 json을 포함하고 header, body등 따로 명시할 필요가 없지만 데이터가 불려지지 않으므로 body : JSON.stringfy(data) 를 명시, .then response 영역에도 한번 더 명시. 그리고 가져오는 데이터 형식에 key 명을 기재. JSON.stringfy(data.name) 등등 -> 구체적으로 가져오는 데이터 타입을 불러야함. 정상적으로 데이터를 끌고오는게 보여짐. 2. in..