아마 프론트 엔드를 개발하시는 분들이라면 한 번씩을 다 CORS에 대해서 보셨을꺼라고 생각합니다. 😫
➡️ 여기서 교차 출처란 다른 출처를 의미합니다. 즉 다른 출처로 자원을 요청하면 CORS 오류가 발생하는 것입니다. (하나의 정책)
URL을 보면 Protocol, Host, 그리고 :3000, :8080 과 같은 포트 번호를 모두 합친 것이 출처(Origin) 입니다.
✅ 두 개의 출처가 같다는 것은 Scheme
, Host
, Port
이 3가지가 동일하다는 뜻입니다.
여기서 Scheme
은 https:// 같은 프로토콜이라고 생각하시면 됩니다.
출처: https://evan-moon.github.io/2020/05/21/about-cors/
이렇게 비교하는 로직은 브라우저에 구현되어있습니다. 위의 사진에서 확인할 수 있습니다.
➡️ 인증된 요청을 사용하는 방법으로 다츤 출처 간 통신에서 좀 더 보안을 강화하고 싶을 때 사용하는 방법입니다.
credentials
옵션을 주어 인증과 관련된 정보를 담을 수 있습니다.
옵션 값 | 설명 |
---|---|
same-origin (기본값) | 같은 출처 간 요청에만 인증 정보를 담을 수 있다. |
include | 모든 요청에 인증 정보를 담을 수 있다 |
omit | 모든 요청에 인증 정보를 담지 않는다 |
✅ Access-Control-Allow-Origin 헤더에 알맞은 값을 세팅해주면 해결할 수 있습니다.
Access-Control-Allow-Origin: http://jaggutrace.com
이런식으로 명시적으로 출처를 적어주면 해결됩니다.
💡 최신 버전의 브라우저 동작 방식은 위의 방식에서 몇 가지가 추가되었습니다.
➡️ Update Layer Tree와 Composite가 추가되었습니다.
(실제로 네이버 인턴 면접에서 추가적인 과정에 대해 질문이 들어왔습니다.)
렌더링에 사용될 최종 Layer들을 계산해서 생성하는 과정.
Layer 로 분리해서 합치는 방식으로 렌더링한다.
Layer 는 빠르지만 메모리를 많이 사용한다.
레이어들을 합성하여 한장의 Bitmap으로 만드는 과정
paint 는 Layer 별로 paint하며, Tiled backing store 기법을 사용함.
오늘은 웹 개발에 있어서 필요한 개념에 대해서 알아보았습니다.
꼭 숙지해야 하는 내용이라고 생각합니다. 😃
헷갈렸던 부분에 대해 잘 알아갑니다:)