Proxy2

• 

  [NextJS] NextJS에서의 proxy설정 1. React와는 다른 설정 CRA+Typescript조합에서의 proxy설정은 매우 간단했다. 앞선 포스팅에도 언급했듯이 그저 package.json파일에 "proxy": "http://localhost:5000/" 다음과 같은 한 줄만 추가하면 되었다. 저기서 주소는 내가 설정한 백엔드 서버의 주소로 port번호가 5000이 아니어도 괜찮다. 나는 express서버를 5000번 포트에서 열기로 했으므로 다음과 같이 설정해주었다. 하지만 nextjs에서는 proxy설정이 조금 달라진다. 2. next.config.js의 수정 nextjs에서 proxy설정을 해주려면 다음과 같은 코드만 작성해주면 간단히 끝난다. 1. next.config.js module.exports = { async rewrite.. front-end/Nextjs 2022. 7. 1.

• 

  [React] CRA + Typescript Proxy 구축 1. Proxy란? 프록시란 대리라는 의미로 네트워크 기술에서 대리 응답을 해주는 개념이다. 보안 상이 문제로 직접 통신을 주고 받을 수 업는 사이에서 프록시를 이용해서 중계를 해준다. 그렇다면 proxy는 왜 사용하는 것일까? 캐쉬를 이용해 더 빠른 통신을 가능하게 한다. 차단된 사이트를 IP우회하여 접속이 가능하게 한다. 보안 문제를 해결해준다. 개발을 하면서 발생하는 CORS(Cross-Origin Resource Sharing)문제를 해결할 수 있다. 2. CORS(Cross Origin Resource Sharing) 일반적으로 브라우저에서는 보안 문제로 인해 동일 출처 정책을 따른다. 두 URL의 프로토콜, 호스트, 포트가 모두 같아야 동일한 출처로 볼 수 있는데 이 경우에서는 express... front-end/react 2022. 6. 22.