브라우저의 작동 원리(2. 보이는 곳) AJAX, SSR, CSR, CORS

<목차>

• 브라우저의 작동 원리를 이해할 수 있다
  • 1.  보이지 않는 곳의 통신을 이해할 수 있다.
    • 1-1 URL과 URI의 차이를 이해할 수 있다.
    • 1-2 IP 주소와 PORT에 대해 이해할 수 있다.
    • 1-3 DNS와 IP 주소의 관계를 설명할 수 있다.
    • 1-4 크롬 브라우저의 에러 메시지를 통해 문제를 파악할 수 있다.
  • 2. 보이는 곳의 통신을 이해할 수 있다.
    • 2-1 AJAX의 개념을 이해할 수 있다.
    • 2-2 SSR과 CSR의 차이를 이해할 수 있다.
    • 2-3 CORS의 개념을 이해할 수 있다.

 

---

👊 SPA를 만드는 기술 : AJAX (Asynchronous JavaScript and XML)

---

정의 : 비동기적으로 데이터를 서버에서 받아와 브라우저에 렌더링을한다.

 

HTML, CSS , JavaScript, DOM, XML등 기존에 사용되던 여러 기술을 함께 사용하는 웹 개발 기법이다.

AJAX는 웹 페이지 전체를 다시 로딩하지 않고도 필요한 부분의 데이터만 비동기적으로 받아와 갱신할 수 있다(화면에 그려낼 수 있다.)

이때 서버와는 아래와 같은 데이터를 주고받을 수 있다.(JSON, XML, HTML, 텍스트 파일 등) 

 AJAX 등장전: 사용자가 버튼을 클릭하거나 요청을 해야만 웹 브라우저가 새로운 내용을 가져오는 방식

 

ex) 1. 검색창( 검색창에 한 글자를 입력할 때마다, 해당 글자로 시작하는 단어들을 서버로부터 받아와  그 바로 아래 추천 검색어로 보여주게 된다. 다시말해, 검색창에서는 필요한 데이터만 비동기적으로 받아와 렌더링이 되며, 여기에 AJAX가 사용된다.)

2. 원티드 채용공고 목록을 무한 스크롤(새로운 채용 공고를 서버로부터 가져와 렌더링한다. 무한 스크롤이 발생 할 때마다 Fetch를 통해 데이터를 가져와서 업데이트를 하고 렌더링을 한다.)

3. 포털 사이트의 뉴스 탭

 비동기적으로 데이터를 서버에서 받아와 브라우저에 렌더링을한다.

 

👊 AJAX의 두 가지 핵심기술

---

AJAX의 핵심 기술은 JavaScript의 DOM, 그리고 Fetch이다.

 

과거 : 과거 웹 어플리케이션에서는 서버에 데이터를 전송하려면 <form>이라는 태그를 이용해야만 했다. 또한 서버는 요청에 대한 응답으로 새로운 웹 페이지를 제공해주어야했다. 다시 말하자면 클라이언트에서 요청을 보내면 매번 새로운 페이지로 이동해야했다.

 

현재 : Fetch를 사용하면 페이지를 이동하지 않아도 서버로부터 필요한 데이터를 받아올 수 있다. Fetch는 사용자가 현재 페이지에서 작업을 하는 동안 서버와 통신할 수 있도록 한다. 즉 브라우저는 Fetch가 서버에 요청을 보내고 응답을 받을때까지 모든 동작을 멈추는것이 아니라, 계속해서 페이지를 사용할 수 있게 하는 비동기적인 방식을 사용한다. 또한 자바스크립트에서 DOM을 사용해 조작할 수 있기 때문에, Fetch를 통해 전체 페이지가 아닌 필요한 데이터만 가져와 DOM에 적용시켜 새로운 페이지로 이동하지 않고 기존 페이지에서 필요한 부분만 변경할 수 있다.

 

// Fetch를 사용
fetch('http://52.78.213.9:3000/messages')
	.then (function(response) {
		return response.json();
	})
	.then(function (json) {
		...
});

Fetch는 XHR의 단점을 보완한 새로운 Web API 이며, XML보다 가볍고 JavaScript와 호환되는 JSON을 사용한다.

Fetch는 간편하고, promise를 지원한다. 

 

 

AJAX장점 단점적기

 

 

👊 SSR 과 CSR

---

🎟 SSR ( Server Side Rendering ) : 웹 페이지를 브라우저에서 렌더링 하는 대신에, 서버에서 렌더링을 한다. 

🎟 CSR ( Client Side Rendering ) : 클라이언트에서 페이지를 렌더링한다.

 

 

 

 

 

👊 CORS (Cross-Origin Resource Sharing)

---

- Browser Secruy Model(브라우저 보안에 관한 이야기)

 

CORS (Cross-Origin Resource Sharing) 

- 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를때 교차 출처 HTTP 요청을 실행한다.

- 브라우저가 자발적으로 앱어플리케이션을 사용하는 유저들을(클라이언트) 보호하기 위한 정책이다. 

 

 예를 들어 , http:// domain-a.com으로부터 전송되는 HTML 페이지가 <img>src 속성을 통해 http://domain-b.com/image.jpg를 요청하는 경우가 있다. 오늘날 많은 웹 페이지들은 CSS스타일시트, 이미지, 그리고 스크립트와 같은 리소스들을 각각의 출처로부터 읽어온다. 

출처 : MDN

 

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS 여기 들어가서 다시한번 자세히 보기