Cross-Origin Resource Sharing : 교차 출처 리소스 공유

동일 출처 정책에 의해 다른 출처의 데이터와 소통할 수 없는 문제가 생긴다. 다만 우리는 항상 같은 출처의 데이터만 이용할 수는 없다. 내가 소통하는 실제 서버의 도메인 네임이 다를수도 있고, 혹은 아예 다른 서버와 소통하는 경우도 많을 것이다. 이때 필요한 것이 CORS이다. CORS는 출처가 다른 경우에도 데이터의 교환을 하게 해준다. 이는 HTTP헤더를 추가함으로써 동작한다. 아래는 HTTP헤더를 통해서 CORS 동작이 작동되는 한 예시이다. const xhr = new XMLHttpRequest(); const url = 'https://bar.other/resources/public-data/'; xhr.open('GET', url); xhr.onreadystatechange = someHand..

Same-Origin Policy : 동일 출처 정책

만약 내가 만든 서버에서 나가는 데이터를 아무 사람이나 받게된다면 큰 문제가 생길수 있다. 반대로 아무 사람이 내 서버에 데이터를 전송해도 큰 문제가 생길 것이다. 따라서 출처가 확실한, 믿을만한 사람과 데이터를 교환해야만 한다. 물론 서버에서도 이런 보안과정을 처리하지만, 브라우저단에서도 이를 처리하는 큰 원칙이 있다. 그것이 바로 동일 출처 정책이다. 동일 출처 정책은 스크립트 사이에서 데이터를 전달할 때 중요하게 작용하는 보안 방식인데, 말 그대로 출처가 동일한 사람끼리만 데이터를 전달하게 해준다. 여기서 말하는 출처는 도메인 네임이다. http://store.company.com/dir/page.html 을 기준으로 하여 출처의 동일 여부를 판단한 결과는 아래와 같다. URL 결과 이유 http:..

CSR과 SSR의 차이

현대 대부분의 프론트 프레임워크들은 SPA를 만드는데 초점이 맞춰져 있다. 그 이유야 SPA가 MPA에 비해 더 좋은 사용자 경험을 전달해주기 때문일 것이다. 결국 우리가 필요한 웹사이트는 HTML이 보여주는 것인데, 이런 HTML을 사용자 측에서 렌더링하느냐 서버에서 렌더링하느냐로 CSR, SSR이 나뉜다. 1. CSR SPA는 기본적으로 CSR로 이루어지는데, 이는 SPA의 작동원리 때문이다. 1. SPA는 처음에만 서버에서 CSS, HTML, JS를 받는다. 2. 이 파일들을 이용하여 렌더링을 진행한다. 3. 그 후에는 데이터만 가져온다. 이는 처음에 가져온 JS를 통해 받아온 데이터를 클라이언트에서 처리하기 때문이다. 따라서 처음 CSS, HTML, JS를 받아오는 과정은 오래 걸리지만, 그 후에..

네트워크 1.2 웹 서버의 IP주소를 DNS 서버에 조회한다.

* 성공과 실패를 결정하는 1%의 네트워크 원리를 정리한 글입니다. 1.2 웹 서버의 IP 주소를 DNS 서버에 조회한다. 1. IP 주소의 기본 브라우저는 URL을 해독, HTTP 메시지를 만들지만, 이를 네트워크에 송출하는 기능은 없다. 따라서 OS가 메시지를 웹 서버에 송출한다. 이때 메시지를 웹 서버에 보내기 위해 도메인을 IP로 변환한다. TCP/IP 서브넷이란 작은 네트워크를 라우터로 연결하여 자체 네트워크를 만드는 것 따라서 서브넷 주소 → 호스트 주소 로 주소가 이어지며 이 두 개를 합친 것을 IP 주소라 한다. 따라서 IP 주소를 찾을때도 클라이언트 → 수신 서브넷 → 수신 라우터 → 허브 → 송신 라우터 → 송신 서브넷 → 서버 로 움직임 넷마스크 IP 는 32비트로 구성되어 있지만(I..

네트워크 1.1 HTTP 리퀘스트 메시지를 작성한다.

* 성공과 실패를 경정하는 1%의 네트워크 원리 책을 정리한 내용입니다. 1.1 HTTP 리퀘스트 메시지를 작성한다. 1. 브라우저에 URL을 입력한다. HTTP 는 HyperText Transfer Protocol이다. 프로토콜은 통신 동작의 규칙을 정한 약속을 의미한다. 2. 브라우저가 URL을 해독한다. URL은 다음과 같이 나뉘어진다. http: + // + 웹 서버명 + / + 디렉토리명 + / + ... + 파일명 ex) http://www.lab.cyber.co.kr/dir1/file1.html 맨 앞자리 http는 데이터 출처에 액세스 하는 방법, 즉 프로토콜을 기록한다. (Http이외에도 Ftp등이 있다.) 그 후 //는 다음 문자열이 서버의 이름임을 나타낸다. 웹 서버 다음은 데이터 출..

웹사이트 렌더링은 어떻게 되는가?

웹사이트에 접속하면 HTML, CSS, JS 파일이 전송되고, 그것을 브라우저가 읽어서 우리에게 보기 좋게 만들어 준다. 그렇다면 그 과정을 상세히 알아보자. 1. Object Model 만들기 먼저 브라우저가 HTML과 CSS 파일을 받으면 이를 각각 DOM, CSSOM으로 변환한다. DOM은 이전에 알아본 것처럼 HTML의 요소들을 트리구조로 만든 것이다. CSSOM은 CSS Object Model로 CSS의 DOM이라고 할 수 있다. 이 때 중요한 것은 DOM과 CSSOM은 서로 독립적인 데이터 구조라는 것이다. 2. 렌더링 트리 생성 하지만 완전 별개의 DOM과 CSSOM으로는 홈페이지를 보여줄 수 없다. 따라서 이 별개의 모델을 서로 합쳐줘야 한다. 이때 이둘은 DOM을 기준으로 태그에 맞는 C..

OSI 7계층이란?

OSI 7계층은 국제표준화기구(ISO)에서 만든 네트워크 전역을 7개의 계층으로 설명하는 모델이다. 7 계층은 물리 계층, 데이터 링크 계층, 네트워크 계층, 전송 계층, 세션 계층, 표현 계층, 응용 계층으로 이루어져 있다. 1. 물리 계층 물리 계층은 케이블이나 여러 물리적인 방법으로 정보를 0과 1로 전송한다. 따라서 실질적으로 굉장히 복잡한 단계로 뽑힌다. 단순 정보 전달이 가장 중요한 단계로, 오류 제어를 하지는 않는다. 2. 데이터 링크 계층 point to point 에서 신뢰성있는 전송을 보장하기 위한 계층이다. 따라서 CRC 기반의 오류 제어와 흐름 제어가 필요하다. 이 때 주소 값은 물리적인 MAC 주소를 사용한다. 3. 네트워크 계층 네트워크 계층은 IP 주소를 부여받는 단계이다. 네..

google.com으로 들어갈 때 발생하는 일

현재 51억명이 넘는 사용자들이 인터넷을 사용하고 있으며, 웹사이트의 개수는 무려 19억개 이다. 따라서 많은 웹사이트들을 관리하기 위해 웹사이트도 주소가 있다. 웹사이트들은 모두 고유의 IP 주소를 가지고 있으며, 이를 통해 웹사이트에 직접 들어갈 수 있다. IP는 0.0.0.0부터 255.255.255.255 까지 존재하며, 이론적으로 (2^8)^4 = 4,294,967,296 (약 42억) 개의 웹사이트가 존재한다. (IPv4기준) IP 주소를 사용하면 별다른 도움 없이 바로 서버에 접속하여 우리가 원하는 웹사이트를 불러올 수 있다. 하지만 너무 큰 단점이 존재하는데, 외우기 어렵다는 것이다. 우리가 google에 가고 싶으면 google.com을 입력하면 되고, naver에 가고 싶으면 naver..