21.04.27 project#4 주소에 /api 붙이는 이유

1. 클라이언트와 서버를 연결시켜준다. 

자바스크립트에서는 '프로토콜, 도메인이름, 포트'로만 접근 가능하다. React 에서는 클라이언트와 서버의 포트 번호가 달라서 클라이언트가 서버에 접근할 수 없는 문제가 있다.

즉, 클라이언트 → 서버로 바로 접근할 수 없고 클라이언트 → 프록시 → 서버 를 통해 클라이언트가 서버에 접근할 수 있다. 프록시를 통해 이를 해결할 수 있다. 

 

2. 도메인 주소를 제외한 URL만 입력해도 서버와 통신 가능하다.

React 클라이언트에서 axios 같은 라이브러리로 서버와 통신할 때 서버의 절대 주소를 일일이 입력해야 하는 번거로움을 줄일 수 있다. 

로컬의 경우, axios('http://localhost:8001/login') → axios('/login') 

 

프록시를 설정하는 방법은

1. http-proxy-middleware 모듈을 사용한다.

'/api'는 다른 프록시 명으로 변경 가능

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    createProxyMiddleware("/api", {
      target: "http://localhost:8001/",
      changeOrigin: true,
    })
  );
};

2. package.json 파일에서 "proxy" : "http://localhost:3000",으로 수정한다.