[네트워크] 웹 애플리케이션 작동원리

Web app / Native app

	웹 애플리케이션	네이티브 애플리케이션
정의	웹 브라우저를 통해 접근 가능한 애플리케이션	Apple iOS 나 Android OS, Windows 처럼 특정 환경에서 동작하는 애플리케이션
장점	설치나 다운로드 불필요 스토어 승인 불필요 비교적 개발하기 간편 업데이트 등의 유지관리 쉬움	인터넷 없이 사용가능 비교적 속도 빠름 사용자 접근성 좋음 비교적 안전(앱스토어 승인)
단점	인터넷 필요 비교적 속도느림 사용자 접근성이 떨어짐 비교적 보안성 위험 노출성 큼	비교적 개발비가 더 들어감 빠른 업데이트 힘듦 앱스토어 승인 받기 힘들고 비용 발생

 

 

네트워크 구성 기술

• TCP/IP 모델

	TCP/IP 4계층 모델	주요 프로토콜	역할
4층	응용계층	HTTP,DNS, FTP, ...	app에 맞춰 통신
3층	전송계층	TCP, UDP, ...	IP와 APP을 중개해 데이터를 확실하게 전달
2층	인터넷 계층	IP, ICMP, ARP, RARP,	네트워크 주소를 기반으로 데이터를 전달
1층	네트워크 접근 계층	Ethernet, wifi, ...	컴퓨터를 물리적으로 네트워크에 연결해서 기기 간에 전송이 가능하도록 하게 함

 

• OSI 모델 (7계층)

Layers of OSI Model - GeeksforGeeks

 

• Dns Lookup

What is a DNS server?

 

 

웹 구성 기술  

• Web Application Architecture: CLIENT - SERVER(Web Server, Application Server, Database) 

 

• Web Server 와 WAS 차이

 

[Web] Web Server와 WAS의 차이와 웹 서비스 구조 - Heee's Development Blog

 

• SSR/CSR

	SSR(Server Side Rendering)	CSR(Client Side Rendering)
정의	JS가 웹 페이지를 브라우저에서 렌더링하지 않고 서버에서 렌더링	JS 가 클라이언트에서 렌더링
언제 사용할지	- SEO(Search Engine Optimization)이 우선순위인 경우 - 첫 화면 렌더링이 빠르게 필요한 경우 - 웹 페이지가 사용자와 상호작용이 적은 경우	- SEO이 우선순위가 아닌 경우 - 사이트에 풍부한 상호작용이 있는 경우 - 웹 애플리케이션을 제작하는 경우
단점	- 자원이용이 서버에 집중되기 때문에 애플리케이션 유지비용이 높음 - 일부 서드파티 자바스크립트 라이브러리의 경우 서버사이드 렌더링이 불가능할 수 있음	-느린 렌더링 속도,사용자에 따라서 경험이 달라질 수 있음

 

• CORS

추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이

다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS#the_http_response_headers

교차 출처 리소스 공유 (CORS) - HTTP | MDN

 

 

• SPA  

단일 웹 문서를 로드하고 XMLHttpRequest, Fetch 같은 JS API를 이용해 바디 컨텐츠를 업데이트하는 웹 애플리케이션 구현방법

 

SPA (Single-page application) - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

 

 

• HTTP message 

서버와 클라이언트 간에 데이터가 교환되는 방식

요청: 시작줄, 헤더, 본문

응답: 상태줄, 헤더, 본문

 

 

• 요청 시작줄

1. HTTP 메서드
2. URL
3. HTTP 버전

 

• HTTP Request 헤더

Header

 

• Request 바디

바디는 HTTP Message 마지막에 위치

모든 요청에 바디가 필수이진 않고

업데이트를 하기 위해 서버에 데이터를 전송하는 POST 와 같은 요청일 때 필요

 

 

• 응답 상태줄

1. 프로토콜 버전
2. 상태 코드
3. 상태 텍스트

 

• HTTP Response 헤더

 

• Response 바디

응답의 본문은 Message 마지막에 위치
201, 204와 같은 상태코드를 가지는 응답은 본문이 필요하지 않다.

Body 2가지 종류

• Single-resource bodies (단일-리소스 본문)
  1. 길이가 알려진 단일-리소스 본문은 헤더 2개(Content-Type, Content-Length)로 정의
  2. 길이를 모르는 단일 파일로 구성된 단일-리소스 본문은 Transfer-Encoding이 chunked로 설정되어 있으며, 파일은 chunk로 나뉘어 인코딩되어 있다.
• Multiple-resource bodies(다중-리소스 본문)
  서로 다른 정보를 담고있는 body

 

HTTP 메시지 - HTTP | MDN