웹을 구성하는 기술

웹 (WEB) : 인터넷에서 제공되는 하이퍼텍스트 시스템

 

클라이언트 - 서버 아키텍처 

 

클라이언트 - 서버아키텍처

 

웹에서 제공되는 서비스는 서비스를 이용하는 클라이언트 와 서비스 제공하는 서버로 나뉜다

이런 구조를 클라이언트 - 서버 아키텍처라고 부른다

 

웹 사이트는 정적페이지들의 집합체이다 여기에 동적페이지까지 포함하게 된다면 웹애플리케이션이 된다

웹 애플리케이션 아키텍처는 클라이언트 서버간의 연결에 대한 설명방법이다

어떻게 애플리케이션 내부의 요소들이 소통하는지 설명한다 ex.네이버,페이스북..

 

유저의 다양한 요청과 입력에 대해 알맞은 응답을 할 수 있는가?

웹 애플리케이션은 신뢰성 확장성 보안성 견고성을 고려해야한다.

 

웹 애플리케이션의 요청흐름

유저가 요청하면 크게 두 프로그램이 작동 유저의 입력에 따라 브라우저에서 작동 / HTTP요청에 따라 서버에서 요청처리

1. client-side HTML CSS JavaScript.. 브라우저에 의해 분석되어 처리

2. server-side Java Python JavaScript ... HTTP요청에 응답할수있는 언어

 

웹 애플리케이션의 3단계 구조

 

Presentation Layer : 유저와 브라우저를 통해 직접적으로 접촉 Web Server 유저 인터페이스 요소 포함

Application Layer : 유저의 요청을 브라우저로 받아서 처리 데이터접근을 위한 경로를 규격화

Data access layer : 애플리케이션의 데이터 저장소에 접근하여 데이터를 불러오거나 저장

 

웹 애플리케이션의 구현 방식

Single page application

유저의 입력과 요청에 의한 콘텐츠나 정보의 최신화가 페이지를 새로 불러오지않고 현재페이지에서 이루어짐

Microservice architecture

작고 가벼운 특정한 한가지 기능에 집중한 웹 애플리케이션

Serverless Architectures

서버와 기능들에 대해 외부의 3자인 클라우드 서비스제공자에게 의탁

 

웹 애플리케이션의 구현 기술

HTTP 클라이언트와 서버간의 통신을 담당하는 프로토콜

클라이언트에서의 데이터요청과 서버요청에 대한 응답을 반복하면서 웹 애플리케이션을 작동

HTTP 요청을 할때는 하고 싶은 처리의 종류를 나타내는 메서드의 이름과 처리의 대상의 이름 포함

HTTP 응답에는 요청에 대한 처리 결과를 나타내는 상태코드와 헤더,실제 처리결과인 메시지가 포함

 

Cookie와 Session

HTTP는 데이터를 요청하고 요청에대한 응답을 전송하는 무상태성의 프로토콜

쿠키 : 유저정보를 클라이언트에 보관 다음 접속부터는 그 정보를 클라이언트가 서버로 보내서 식별하게 한다

설정한 항목을 저장해서 다음에 같은 방식으로 작동하게 도와줌

 

세션 : 서버에 고유 아이디를 할당해서 유저를 식별 단순하고 유출이 되면 안되는 정보는 서버에서 관리하면서

세선ID와 매칭해서 저장해 관리 세션정보는 쿠키에서 관리 실제 매칭값은 서버측에서 관리

 

사용자 인증

정보보안을 위해 사용

 

SSR과 CSR

SSR은

JavaScript가 브라우저에서 렌더링하는 대신에 서버에서 렌더링한다

브라우저가 서버의 URI로 GET요청을 보내면 서버는 정해진 웹페이지 파일을 브라우저로 전송한다

그리고 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링된다

보내기 전에 서버에서 렌더링 했기때문에 Server Side Rendering이라고 한다

데이터베이스의 데이터가 필요한 경우 데이터를 불러온 다음

웹페이지를  완전히 랜더링된 페이지로 변환후 응답으로 보냄

사용자가 웹페이지를 사용하다가 브라우저의 다른경로로 이동할때마다 이 작업을 다시 수행한다

 

ex. 주문을 하면 조립되어서 오는 가구,

네이버 블로그(검색엔진 최적화),

뉴욕타임스(검색엔진에 노출,빠른 초기로딩속도 완성된 html파일을 받아와서 렌더링)

 

 

CSR은

SSR의 반대로 여겨진다 SSR이 서버측에서 Javascript가 페이지를 랜더링한다면

CSR은 클라이언트에서 Javascript가 렌더링한다

클라이언트가 웹페이지를 받으면 웹페이지와 함께 전달된 javascript파일은

브라우저에서 완전히 렌더링된 페이지로 바꾼다

데이터베이스의 데이터가 필요한 경우 데이터를 가져와서 웹페이지에 렌더링을 해야한다

이때 API가 사용된다 웹페이지를 렌더링하는 데에 필요한 데이터를 API요청으로 해소

브라우저가 다른 경로로 이동하면 서버가 웹페이지를 다시 보내지 않는다 브라우저가 요청한 경로에 따라 페이지를

다시 렌더링 한다 이때 보이는 파일은 맨 처음 서버로부터 전달받은 파일과 동일한 파일이다.

 

ex. 주문을 하면 부품이 나뉘어진채로 배송이와서 집에서 조립하는 가구,

아고다등 많은 예약 사이트( 필요한 데이터만 넘겨주기때문에 서버부담이 적다,빠른 라우팅으로 사용자 경험제공)

 

서로 다른점은??

렌더링 되는 위치

SSR은 서버에서 페이지를 렌더링하고

CSR은 브라우저(클라이언트)에서 렌더링한다

다른 경로를 요청할때마다 페이지를 새로고침하지 않고 동적으로 라우팅 관리

 

SSR은 자원이용이 서버에 집중되기때문에 애플리케이션 유지비용이 높다

일부 서드파티 자바스크립트 라이브러리의 경우 서버사이드 렌더링이 불가능할 수 있다

CSR은 느린 렌더링 속도로 사용자 경험이 안좋아질 수 있다, search engine bots와 상성이 안좋다

 

HTTP

HTTP Messages

HTTP 는 HTML과 같은 문서를 전송하기위한 프로토콜, 무상태성이 특징

 

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

-요청(Requests)

-응답(Responses)

HTTP Messages는 텍스트 정보로 구성되지만 구성파일,API 기타 인터페이스에서 자동으로 완성한다

 

1. start line : start line 에는 요청이나 응답의 상태를 나타냄 첫번째 줄 위치 , 응답에서는 status line이라고 함

2. HTTP headers : 요청을 지정하거나 메시지에 포함된 본문을 설명하는 헤더의 집합

3. empty line :  헤더와 본문을 구분하는 빈 줄

4. body : 요청과 관련된 데이터나 응답과 관련된 데이터 또는 문서를 포함 (선택적사용)

 

1,2를 묶어 요청이나 응답의 헤드(head)라고 하고 payload는 body 라고 한다

 

요청(Requests)

 

출발선

HTTP요청은 클라이언트가 서버에 보내는 메시지

Start line 세가지 요소

1. 수행할 작업이나 방식 설명 HTTP method

2. 요청 대상(URL URI)또는 프로토콜,포트, 도메인의 절대 경로는 요청컨텍스트에 작성

3. HTTP버전에 따라 구조가 달라진다 1번에 버전을 같이 입력

 

헤더

헤더이름(대소문자 구분이 없는 문자열), 콜론(:), 값을 입력 (헤더에 따라 다름)

General headers : 메시지 전체에 적용되는 헤더 body랑 관련x

Request headers : fetch를 통해 가져올 리소스나 클라이언트 자체에 대한 자세한 정보를 포함하는 헤더

Representation headers : 이전에는 Entity headers로 불렀으며 body에 담긴 리소스의 정보를 포함하는 헤더

 

몸

마지막에 위치 모든요청에 필요하진 않음(리소스 요청하는 경우 본문이 필요없다)

Single - resource bodies( 단일 리소스 본문) 헤더 두개(Content - Type , Content-Length)로 정의된 단일파일

Multiple - resource bodies(다중 리소스 본문) 여러파트로 구성된 본문에서 각 파트마다 다른 정보를 지닌다

 

응답(Responses)

 

상태표시줄

응답의 첫 줄은 Status line이라고 부른다

1. 현재 프로토콜의 버전(HTTP/1.1)

2. 상태코드 - 요청의 결과 ( 200, 302, 404등)

3. 상태 텍스트 - 상태코드에 대한 설명

HTTP/1.1 404 Not Found.

헤더

응답의 헤더와 동일한 구조 대소문자 구분없는 문자열과 콜론(),값 입력

값은 헤더에 따라 다르다 몇 그룹으로 나눌수 있다 :

General headers : 메시지 전체에 적용되는 헤더 body랑 관련x

Response headers : 위치또는 서버 자체에 대한 정보, 응답에 대한 부가적인 정보를 갖는 헤더, 추가정보 제공

Representation headers : 이전에는 Entity headers로 불렀으며 body 에 담긴 리소스의 정보를 포함

 

몸

구조의 마지막에 위치 모든응답에 필요 x 201,204같은 상태를 가지는 응답에는 필요없다

Single - resource bodies(단일 리소스 본문)

길이가 알려진 단일 리소스 본문은 두개의 헤더로 정의

길이를 모르는 파일로 구성된 본문은 Transfer-Encoding으로 설정되어 있으며 파일은 chunk로 나뉘어 인코딩 chunkded

Multiple-resource bodies (다중 리소스 본문)

서로 다른 정보를 담고있는 body

 

상태비저장

Stateless 상태를 가지지 않는다

HTTP가 클라이언트나 서버의 상태를 확인하지 않는다

무상태성이 HTTP의 큰 특징