proxy 설정 2

[Proxy] Proxy 설정 (또 다른 방법!)

😄 팀 프로젝트를 진행하면서 백엔드 서버 연결 시 발생하는 CORS 문제를 Proxy 설정을 통해 해결한 적이 있다. 이전에 Vite에서 제공하는 자체적인 방식으로 환경 변수를 로드하는 loadEnv를 사용하여 Proxy 설정을 했었는데, Vite나 Next.js 등이 아닌 CRA와 같이 설정이 없는 환경에서는 어떻게 Proxy를 설정해야 할지 간단하게 소개하려고 한다. 추가로 Vite, CRA 등 Proxy 설정 시, 어떻게 하면 더욱 편리하게 관리할 수 있는지 새로운 방법으로 소개하려 한다! 💁‍♀️ 기존 소개 방법 (Vite + Proxy) ✅ loadEnv(mode, process.cwd(), ‘’ ) 🤔 현재 작업 디렉터리에 있는, 모드에 해당하는 ‘.env’ 파일을 찾아서 모든 환경 변수를 로..

[Vite + Proxy] 백엔드 서버 연동 CORS 문제 Proxy 설정으로 해결!

🫠 팀프로젝트를 진행하면서 백엔드 서버로 연동할 때, CORS 문제가 정말 어마어마하게 많이 발생했다. 연동 하나 하려고 하면 CORS 문제가 계속 떠버려서,, 프론트 인원 중 한 명은 언젠가는 해야 할 일이었다..! 어찌어찌해서 Proxy 설정을 담당하게 되었다 💪🏻 📌 Proxy란? 👉🏻 프록시(Proxy)는 클라이언트와 서버 간의 통신을 중개하는 서버 ➡️ 클라이언트는 프록시 서버를 통해 요청을 보내고, 프록시 서버는 해당 요청을 받아서 대신 서버로 전달 ➡️ 서버는 응답을 프록시 서버로 보내고, 프록시 서버는 다시 클라이언트에게 응답을 전달 ✅ 프록시 서버 사용하면 클라이언트와 서버 사이의 통신을 조정하고, 네트워크에서 발생할 수 있는 일부 문제를 해결 ✏️ Proxy 적용하기 import { d..