🌸웹(WEB)
인터넷에서 제공되는 하이퍼텍스트 시스템
HTML로 대표되는 하이퍼텍스트와 인터넷의 융합
하이퍼텍스트
문서 안에 다른 문서의 위치정보 등을 포함하여 문서 간 정보를 참조할 수 있는 문서
웹사이트와 웹애플리케이션
웹사이트 정적 페이지들의 집합체
웹 애플리케이션 상호작용, 특정 기능, 콘텐츠 관리 시스템을 포함
클라이언트-서버 아키텍처
2티어 아키텍처 : 클라이언트-서버
3티어 아키텍처 : 클라이언트-서버-데이터베이스
웹 애플리케이션 아키텍처
신뢰성(reliability)
확장성(scalability)
보안성(security)
견고성(robustness)을 고려할것
🐟웹 애플리케이션 구조 요소 3단계
Presentation Layer
클라이언트와의 접촉 Web Server단계, UI를 포함
Application Layer
입력된 요청을 처리하는 단계. App Server가 이 계층에 포함 됨.
Business Layer, Business Logic 혹은 Domain Logic 라고도 불리며
데이터 접근 경로를 규격화하는 과정을 포함
Data access layer
DB 접근하여 데이터를 로드, 저장 Application Layer의 로직에 따라 최적화
그 외에 Cross-cutting(보안, 통신, 운영 관리등), Third-party integrations(제3의 API 서비스의 사용) 등이 있다
🐟웹 애플리케이션 구성 방법
싱글페이지 애플리케이션(SPA)
입력에 따른 콘텐츠나 정보의 최신화가 새 페이지가 아닌 현재 페이지에서 이루어짐
AJAX, Asynchronous JavaScript, XML
마이크로서비스 아키텍처
작고 가벼운 특정한 한 가지 기능에 집중한 웹 애플리케이션
애플리케이션의 각 요소들이 독립적
서버리스 아키텍처
웹 애플리케이션의 서버를 클라우드 서비스 제공자에게 의탁하는 방식
🐟웹 애플리케이션의 구현 기술
HTTP(HyperText Transfer Protocol)
요청에 대한 응답을 전송하는 무상태성의 프로토콜
쿠키 : 유저의 정보를 클라이언트에 따로 보관해 필요시 서버가 식별
세션 : 고유한 Session-Id를 할당해 유저를 식별
사용자 인증 : 애플리케이션의 보안과 사용자 식별(로그인, 토큰, 세션..)
🐟AJAX(Asynchronous JavaScript and XML)
웹 애플리케이션에서 비동기적으로 데이터를 가져오고 서버와 상호 작용하는 기술
🌸SSR/CSR
☀Server-Side Rendering
서버에서 웹 페이지를 완성하여 클라이언트에게 전달하는 방식
서버가 직접 데이터베이스의 데이터를 불러와 제공SEO(Search Engine Optimization)가 우선순위인 경우
첫 화면의 빠른 렌더링이 필요한 경우, 단일 파일의 용량이 적은 SSR이 적합
사용자와 상호작용이 적은 경우에도 유리but 비용이 많이들고 일부 서드파티 자바스크립트 라이브러리의 경우 불가능
☀Client-Side Rendering
클라이언트에서 JavaScript를 사용하여 웹 페이지를 동적으로 생성하는 방식
클라이언트가 직접 필요한 데이터를 API를 요청SEO(Search Engine)가 우선순위가 아닌 경우
상호 작용이 있는 경우, 빠른 라우팅으로 강력한 사용자 경험을 제공
웹 애플리케이션을 제작시 빠른 동적 렌더링으로 보다 나은 사용자 경험을 제공but 클라이언트에 따라 경험의 차이가 생김
랜더링이 느려 사용자 경험에 불리하며 Search Engine에 불리.
🌸브라우저 보안 모델
SOP(Same Origin Policy)
타 Origin으로 요청을 보낼 수 없도록 금지하는 브라우저의 기본적인 보안 정책
CORS(Cross-Origin Resource Sharing)
cross-origin HTTP요청을 위해 지켜야 하는 정책(사전 검사 요청)
단순 요청(simple requests)
사전 검사 요청을 발생시키지 않는 요청
HEAD, GET, POST 메서드 만을 쓰며 사용자 지정 헤더가 아닌 기본 헤더만 사용하는 경우
사전 검사 요청(Preflighted requests)
CORS로 사전 검사 요청을 발생시킴
HEAD, GET, POST 외의 메서드를 사용하거나 사용자 지정 헤더를 쓰는 경우OPTIONS메서드로 사전검사 요청->응답
Requests with credentials
쿠키 관련 요청
🌸HTTP messages
웹상 클라이언트와 서버 사이에서 데이터가 교환되는 방식
☀요청(Requests)
Start line(Request Line)
- HTTP 메서드: 수행할 작업(GET, PUT, POST..), 방식(HEAD or OPTIONS)을 설명
- 요청 대상: 보통 URL이나 URI
- 사용된 프로토콜, 포트, HTTP 버전
HTTP headers
추가적인 요청 정보를 가진 헤더 필드들
1. General headers : 모든 종류의 HTTP message에 적용하는 헤더(기본)
2. Request headers : fetch를 통해 가져올 리소스나 클라이언트에 대한 정보를 포함
3. Representation headers : body에 담긴 리소스의 정보를 포함
Body
요청 메서드에 따라 선택적으로 요청 데이터를 포함
서버에 리소스를 요청하는 경우에는 불필요
POST나 PUT과 같은 일부 요청은 데이터가 전송 됨(업데이트)
- 단일-리소스 본문 : 헤더 두 개로 정의된 단일 파일로 구성
- 다중-리소스 본문 : 여러 파트로 구성, 각 파트마다 다른 정보를 지님
☀응답(Responses)
Status line
- 사용된 프로토콜의 버전(HTTP/1.1)
- 응답 상태 코드: 요청 결과를 나타낸다(200, 302, 404 등)
- 상태 메세지: 상태 코드에 대한 설명이 적혀있다
HTTP/1.1 404 Not Found.
Headers
- General headers: 모든 종류의 HTTP message에 적용하는 헤더(기본)
- Response headers: 위치나 서버에 대한 정보와 같이 응답에 대한 부가적인 정보를 가짐
- Representation headers: body에 담긴 리소스의 정보를 포함
Body
요청이나 응답 관련된 데이터를 포함. 상태 코드를 가지는 응답에는 불필요
단일-리소스 Body
길이가 알려진 본문 - 두 개의 헤더로 정의
길이를 모르는 본문 - Transfer-Encoding이 chunked, 파일은 chunk로 나뉘어 인코딩다중-리소스 Body
서로 다른 정보를 담고 있는 body
☔☔☔
스파르타에서 입문강의를 들은게 도움이 되네