Client - Server

• 리소스가 존재하는 곳과, 리소스를 사용하는 앱을 분리시킨 것을 2티어 아키텍처 또는, 클라이언트-서버 아키텍처라고 부름

Client - Server - DataBase

• 기존 2티어 아키텍처에 데이터베이스가 추가된 형태를 3티어 아키텍처

Protocol

• 프로토콜은 통신 규약, 즉 약속
• ex) 웹 애플리케이션 아키텍처에서는 클라이언트와 서버가 서로 HTTP라는 프로토콜을 이용
• ex) OSI 7 Layers

	- 응용계층 : HTTP
    		    HTTPS
                    FTP
                    SMTP
                    SSH
                    RDP
                    WebSocket
	- 전송계층 : TCP
    		    UDP

API

• Application Programming Interface
• ex) 메뉴판

URI

• Uniform Resource Identifier
• 일반적으로 URL의 기본 요소인 scheme, hosts, url-path, port, query, bookmark를 포함

URL

• Uniform Resource Locator
• scheme, hosts, url-path

Port

• 포트 번호는 0~ 65,535 까지 사용할 수 있습니다. 그 중에서 0 ~ 1024번 까지의 포트 번호는 주요 통신을 위한 규약에 따라 이미 정해져 있음
• 22 : SSH
• 80 : HTTP
• 443: HTTPS

DNS

• Domain Name System
• 호스트의 도메인 이름을 IP 주소로 변환하거나 반대의 경우를 수행할 수 있도록 개발된 데이터베이스 시스템입

HTTP

• HyperText Transfer Protocol
• Application Layer 프로토콜
• 웹 브라우저와 웹 서버의 소통을 위해 디자인

- HTTP messages

• 요청(Requests)
• 응답(Responses)

Ajax

• 페이지 전체가 렌더링 되는것이 아닌 일부만 업데이트 하기위해 만들어짐(Dynamic Web Page)
  -> Javascript, DOM 사용
  -> XMLHttpRequest(XHR) 등장
  

SSR vs CSR

SSR

• Server Side Rendering
• 웹 페이지를 브라우저에서 렌더링하는 대신에, 서버에서 렌더링
• Using SSR
  • SEO(Search Engine Optimization) 가 우선순위인 경우, 일반적으로 SSR(Server Side Rendering) 을 사용
  • 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우에도, 단일 파일의 용량이 작은 SSR 이 적합
  • 웹 페이지가 사용자와 상호작용이 적은 경우, SSR 을 활용

CSR

• Client Side Rendering
• CSR은 SSR의 반대
• CSR은 클라이언트에서 페이지를 렌더링
• Using CSR
  • 사이트에 풍부한 상호 작용이 있는 경우, CSR 은 빠른 라우팅으로 강력한 사용자 경험을 제공
  • 웹 애플리케이션을 제작하는 경우, CSR을 이용해 더 나은 사용자 경험(빠른 동적 렌더링 등)을 제공

Result

• CSR과 SSR의 주요 차이점은 페이지가 렌더링되는 위치
• SSR은 서버에서 페이지를 렌더링하고, CSR은 브라우저(클라이언트)에서 페이지를 렌더링

CORS

• 처음 전송되는 리소스의 도메인과 다른 도메인으로부터 리소스가 요청될 경우 해당 리소스는 cross-origin HTTP 요청이 있다
• 

출처: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

• 클라이언트의 어플리케이션 사용자를 보호하기 위한 자발적인 보안 조치
• 한 페이지에서 서로 다른 도메인으로 데이터를 요청할 경우 발생

preflight request

• 실질적인 요청 전 "OPTIONS"메소드를 통해 사전에 요청이 안전한지 확인하는 방법
• cross origin 요청에는 Simple requests, Preflighted requests, Requests with credentials 등이 있는데
  이중 Preflighted requests만 OPTIONS 메소드를 통해 요청을 확인

origin을 구분하는 기준은 "프로토콜", "호스트(도메인)", "포트 번호"입니다.