프론트엔드는 서버의 데이터가 필요하면 API를 통해 백엔드에게 데이터를 요청해야 한다.

백엔드에서 받은 데이터를 화면에 출력하도록 해야 한다.

SPA

1. 계정 서비스 구현
   1. 백엔드 API를 호출해서 회원의 계정 데이터를 처리하는 기능 제공
      1. 회원가입 페이지
      2. 로그인 페이지

1. CORS (Cross-Origin Resource Sharing)

   1. 클라이언트와 서버의 URL http://localhost 포트가 서로 다르기 때문에 CORS (Cross-Origin Resource Sharing) 문제가 발생함.

      → 서버 객체에 proxy를 추가한다.

      ⇒ 프론트와 백을 독립적으로 구성하고 경로에 대한 충돌없이 연결할 수 있다.

      proxy : 중간에 요청을 전달해 주는 서버

   <aside> 💡

   CORS : 웹 브라우저에서 보안상 적용하는 정책

   </aside>

   • 웹 브라우저
     • http://localhost:5173 : 프론트엔드
     • http://localhost:8080 백엔드
   • Fe ⇒ 같은 출처의 proxy 서버에 요청을 전달한다.
     • ⇒ 프록시 서버는 백엔드 서버에 요청을 대신 전달
     • ⇒ 응답을 받아 프론트엔드 다시 전달

   브라우저 ⇒ http://localhost:5173/api/account/check 요청

   프록시 서버가 http://localhost:8080/api/account/check 요청을 대신 보냄

   • 백엔드 서버가 응답을 프록시 서버에 전달
   • 프록시 서버가 브라우저에 응답 전달

   브라우저는 같은 출처 요청으로 간주되므로 CORS 정책을 우회

   CORS : 브라우저의 보안 정책, 다른 출처에 대한 요청을 제한
   Proxy : 클라이언트 대신 백엔드 서버에 요청을 전달해주는 중간 서버
   				CORS 에러를 우회하여 같은 출처처럼 요청을 보내게 하는 역할
   

• 프록시 사용이유
  1. CORS 에러방지
  2. 실제 백엔드 주소를 숨기고 개발용 주소로 통일할 수 있음.
  3. 동일 출처 정책 우회
  4. 코드 배포 전까지 프론트와 백을 완전히 분리해서 구현할 수 있다.