Day : 19, 20
React : 9, 10

CORS(Cross-origin resource sharing)

• CORS
  : Cross-origin resource sharing is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served.
  : 웹에서는 다른 출처로 리소스를 요청하는 것을 제한하고 있다(SOP). 이에 대한 예외적은 사항으로 CORS 정책을 지킨 리소스 요청은 허용한다.
  : CORS정책은 브라우저에서 적용됨. 즉 서버간 통신에서는 문제가 발생하지 않음(postman실행시 정상 작동). 서버 측은 정상적으로 요청을 응답했다고 판단.
  : CORS 정책 위반이 발생하면 브라우저 측에서는 해당 요청을 파기 시킴.
  
  
• SOP(Same-Origin Policy)
  : 같은 Origin(출처)를 가진 곳에서만 resource를 요청할 수 있는 정책
  : RFC에 명시된 보안 정책. RFC는 Request for Comments 문서로 IETF(국제 인터넷 표준화 기구)에서 관리하는 기술 표준
  
  
• CORS(SOP-RFC) 좀 더 자세히 알아보기
  : https://evan-moon.github.io/2020/05/21/about-cors/
  : https://opentutorials.org/module/6257/32185
  : https://hannut91.github.io/blogs/infra/cors

---

Node.js에서 CORS 해결법
1. npm i cors (이 때의 CORS는 정책의 CORS가 아니라 NodeJS의 패키지 중 하나인 CORS 입니다. - 동일이름)
2. Express 미들웨어로 추가

const cors = require("cors");
app.use(cors());

3. 경로 입력
   : 위의 경우 모든 요청에 대해 cors를 허용하게 되므로, 경로를 추가로 입력해줘 함

   app.use(
   cors({
     origin: "http://localhost:3000",
     credentials: true,
   })
   );

Axios

: axios는 HTTP 클라이언트 라이브러리로, 주로 프론트엔드에서 백엔드 서버와 통신하기 위해 사용됨.
: axios를 사용하여 서버에 요청을 보내고 응답을 받아와서 프론트엔드에서 데이터를 처리할 수 있다.
: 브라우저, Node.js를 위한 Promise API 를 활용하는 HTTP 비동기 통신 라이브러리
: client-side rendering을 가능하게 해주는 라이브러리 ; 리액트에서 만든 브라우저에서 DB로부터 get 요청을 보내 데이터를 받아 올 수 있음

• 사용법

1. npm i axios
2. app.jsx 파일에서import axios from "axios";

---

➕ axios 사용 시 주의점
: 보안을 위해서 .env 파일 생성 후 주소 기입
: .env파일 수정시 frontend 다시 켜주기
: .env 작성시 띄어쓰기 금지 (띄어쓰면 인식을 못함)
ex) REACT_APP_BACKEND_URL=http://localhost:3030

• react - node.js 상관관계(client-side rendering):
  https://codingapple.com/unit/nodejs-react-integration/