웹 애플리케이션의 작동원리
⭐️ 네트워크를 만드는 기술
웹을 배우기 앞서 우리가 웹을 이용하려면 네트워크 연결이 되어있어야 서버에서 정보를 받아 웹을 볼 수 있다. 모든 사람, 모든 지역에서 연결이 되려면 같은 통신 방식을 사용해야 하며 TCP/IP이 통신약속이다. 그래서 제조사에서 할당하는 고유 시리얼인 MAC 주소와 IP주소를 통하여 우리는 네트워크 통신을 할 수 있다.
연결이 되고 이 네트워크의 연결의 규모에 따라 LAN(지역), MAN(도시), WAN(나라규모)으로 나뉠수 있다.
MAC주소와 달리, IP 주소는 처음부터 주어디는 것이 아니라 할당이 되는것
- www.naver.com 검색하면 어떠한 동작으로 웹사이트가 출력이 될까?
1.DNS(Domain Name System) 에서 도메인 이름과 매칭된 IP 주소 확인.
2.ip 주소의 서버에 HTTPS 요청을 보냄
3.네이버 서버에서 요청에 맞는 정보를 클라이언트에게 전달
4.클라이언트는 정보를 화면에 표시
⭐️ 웹을 구성하는 기술
클라이언트와 - 서버 ( 2 Tier 아키텍처 )
클라이언트와 - 서버 - 데이터베이스 ( 3 Tier 아키텍처 )
웹의 역사
Staic Site - 1990년대 ( 웹 페이지를 교체해 가면서 페이지를 업데이트 )
iframe태그 등장 - 1996년 ( 웹 페이지 부분부분을 업데이트 가능)
XmlHttpRequest - 1998~ ( html 문서 전체가 아니라 json을 통하여 가볍게 서버에서 필요한 데이터만 가져옴
-> 데이터를 자바스크립트를 이용하여 동적으로 html 요소를 생성하여 페이지를 업데이트 )
AJAX - 2005 ( 공식적인 방식이 나옴 ) -> SPA = Sing Page Application
-> 하나의 페이지에서 모든것을 할 수 있음 ( 부분적으로만 업데이트 해가며 ) Googlemap, facebook 등
이후 컴퓨터의 성능이 좋아지고 자바스크립트가 많이 활용이 되면서 Angular, react, vue.js 등이 나오고
CSR 시대로 접어들게 된다.
(클라이언트에서 모든것을 해버림 - 서버는 처음에 json 파일을 받아올 때만 받아올 때 위의 Angular, react, vue.js 등이 사용이 되므로 1. 사용자가 첫 화면을 보기까지 시간이 오래 걸릴수 있음... 2. 검색 엔진이 느림(SEO)가 약함 )
CSR 단점을 잡기위한 -> SSR 시대 (서버를 통하여 HTML을 조작 가능 = 서버에 과부하가 걸릴수도 있음)
SSR 과 CSR ( 페이지가 렌더링 되는 위치가 다름 )
ServerSideRendering (서버에서 렌더링)
- 블로그와 같은 웹사이트가 SSR 방식을 사용
-> 글을 사용하거나 블로그의 화면을 사용자가 직접 바꿀수 있기 때문에 서버측 변경이 필요하고 그로인해 서버에서 렌더링을 진행하는게 더 효율적.
- 사용자와 상호작용이 적을 경우 많이 활용
- SEO(Search Engine Optimization) 가 우선순위인 경우, 일반적으로 SSR(Server Side Rendering) 을 사용
ClientSideRendering (클라이언트에서 렌더링)
- SEO 가 우선순위가 아닌 경우, CSR을 이용
- 사이트에 풍부한 상호 작용이 있는 경우 (클라이언트에서 실행이 되므로 빠름)
-> 일반적으로 웹 사이트에서 제공되는 정보를 이용만 하는 사이트 ( 구글맵, 예약 웹사이트 등)
CORS - 다른 출처 요청도 할 수 있도록 기준을 만든 체제
Protocol + Host + Port 3가지가 같으면 동일 출처라고 한다. (같은 서버에 있으면 동일 출처)
유튜브같은 곳에서 광고같은 경우를 클릭하는 경우 클릭은 유튜브서버에서 이루어지지만 클릭의 출처는 유튜브 서버가 아니라 다른 서버로 이동하게 되는 경우.
댓글