Today I Learned
[Front-End] - React
오늘은 어제
express로 todo list의 백엔드 구축해놓은 것에 이어 프론트엔드 작업을 하였다. 그리고 웹개발을 하다보면 생기는 문제인CORS에 대해서도 알아보았다.
Origin
CORS에 대해 알아보기 전에origin이란 출처를 의미하며,url구조에서Protocol,Host,Port를 합친 것을 의미한다.
예를 들어,https://site.com:3000이면https가 프로토콜,site.com이 호스트,3000이 포트이다.
SOP(Same-Origin Policy)
그럼
SOP란 무엇일까.
말그대로 같은 출처를 가진 곳에서만 리소스를 요청할 수 있는 정책이다.
같은 출처에서만 리소스를 요청해야 하는 이유는 웹 브라우저의 개발자 도구를 통해 완벽한 카피 사이트를 만들 수 있기 때문에 같은 출처에서만 요청을 해야한다. 따라서 SOP 정책이 만들어진 이유이다.
CORS(Cross-Origin Resource Sharing)
SOP와 반대로 다른 출처간의 리소스를 공유할 수 있는 정책이다.
기본적으로 CORS 정책은 서버와 서버 간에 발생하지 않고, 서버와 브라우저 간에 발생한다.
따라서 CORS 정책을 위반하면 브라우저 측에서 해당 요청을 파기 시킨다. (하지만 서버 측에서는 정상적으로 요청을 응답했다고 판단하기 때문에 주의해야 한다.)
해결 방법
nodejs기준으로는CORS라이브러리를 설치한 후 express 미들웨어로 추가한다. (이 때의 CORS는 정책의 CORS가 아니라 nodejs의 패키지 중 하나인 CORS이다.)app.use( cors({ origin: "http://localhost:3000", // 경로를 입력해야 모든 요청에 대해 CORS를 허용하지 않음. credentials: true, }) );
이외 수업내용
npm을-D명령어와 함께 설치하는 이유는 개발 상황에서는 사용하지만 배포 이후에는 안쓰기 때문에 devDependencies에 설치하는 것이다.
get요청을 통해 조회할 때 말고는 전체 데이터를 보여주지 않고 완료된 상태만 보여줘도 된다.
express에서 쿼리를 받아올 때는req.query로 받아올 수 있다. get 요청 시에 자주 쓰인다.
<></>는React Fragment로 리액트만의 문법으로html에선 쓸 수 없음.
