HTTP request

외부 api 연동을 해서 물류 자동화 작업을 맡게 되었다. 어쩄든 외부 api를 이용해야했다. 이번 회사에서는 B2B 영역까지 맡게 되어서(일이 많아졌다..)
따라서 C 회사의 api document 를 받아서 작업하게 되었다.

여기서 외부 api란 (External Application Programming Interface)로서 다른 소프트웨어 애플리케이션끼리 상호 작용하기 위한 인터페이스나 규약입니다 라고 나와있다.

아 매번 이런식이지 ㅎㅎ
문서나 책은 이렇게 어렵게 써놓는다. 좀 쉽게 이해할 순 없을까??
그냥 간단하게 api는 기계들끼리, 개발자들끼리 소통하기 위해 만들어진 규칙이다. 외부 api는 open api 와 동일한 말이다.
protocol, rest api, packet 전부 비슷한 의미다. 소통하기 위해 만든 규칙 규약이다.
컴퓨터의 모니터나 스마트폰의 화면은 gui(그래픽 유저 인터페이스)다. 그냥 기계와 인간이 소통하기 위해 만들어진 것이다. gui 몰라도 된다.

아무튼 예를들어 카카오맵이나 구글맵, 그리고 통계청에서 제공하는 api를 활용하면 해당 지도나 통계자료를 불러올 수 있다. (오픈이 되어있다면)

에러발생

그래서 swegger, postman으로 먼저 request 규칙에 맞게
headers, body 를 싣어서 보냈지만 어떤 요청은 성공하고 어떤 요청은 실패했다.

원인

요청에 맞지 않는 request.
postman을 쓰는게 익숙치 않아 에러를 찾는데 오래걸렸다. 결과적으로 정확한 header, body를 넣지 않아서 생긴 문제였다.

로컬에서 작업할 경우에도 마찬가지.

js에선 객체 필드에는 따옴표를 써야하는경우가 있다.
(특수문자, 공백, 동적값인 경우)

AND
ES6(ECMAScript 2015)부터는 필드 이름에 따옴표 없이도 공백이나 일부 특수 문자를 포함할 수 있도록 향상된 객체 리터럴 문법이 도입됐다.

But
가독성을 위해서 따옴표로 감싸는게 일반적이다.

주소가 문제가 아니었음에도 불구하고 요청 형식에 맞지 않으면 이런 에러가 발생한다. 그래서 찾기 어려웠다.

해결

    // 두번쨰 axios 방법
    const api = axios.create({
      baseURL: 'https://엔드포인트주소/api', 
      withCredentials: true,
      headers: {
        'Content-Type': 'application/json; charset=utf-8', // 여기 필드값이 문제였음.
        Accept: 'application/json;charset=utf8',
        code: 'user_code',
        apikey: 'from open apikey',
        a2b: 'false',
      },
    });

    

    const reqBody = {
      appointment_at: '2023-09-22T12:30:00+09:00',
      
      .... 중략 
    };

    api
      .post('/order/price', reqBody) //  baseURL 뒤에 추가 될 상대경로.
      .then((response) => {
        console.log('응답이 제대로 옴 :', response.data);
      })
      .catch((error) => {
        console.error('Error 발생 :', error);
      });