[네트워크] 웹(Web)의 이해와 웹을 구성하는 기술

웹은 인터넷에서 제공되는 하이퍼 텍스트 시스템이다.

  # 하이퍼 텍스트 시스템이란?

   문서안에 다른 문서의 위치정보 등을 서로 연관지어 참조할 수 있는 문서

 

웹은 HTML로 대표되는 하이퍼텍스트 언어와 인터넷이 융합하여 탄생하게 되었다.

 

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

 

 

웹에서 제공되는 서비스는 주로 서비스를 이용하는 (클라이언트) 와 서비스 제공쪽(서버)으로 나뉜다.

이러한 구조를 클라이언트-서버 아키텍처(2티어 아키텍처)라고 한다.

 

# 상품 정보와 같은 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것

 

그러나,

일반적으로 서버는 리소스를 전달만하며, 리소스를 저장하는 공간을 별도로 마련하기도 하는데 이 공간을 데이터베이스(DB / Data Base)라고 한다. 

 

클라이언트의 구분

 

클라이언트는 플랫폼에 따라 구분된다.

• 웹앱(Web Application) : 브라우저를 통해 주로 이용 (웹사이트 라고도 한다.)
• 애플리케이션: IOS나 안드로이드 등 스마트폰 플랫폼, 데스크탑 플랫폼 등

서버는 무엇을 하느냐에 따라 구분된다.

• 파일 서버: 파일을 제공하는 앱
• 웹 서버: 웹사이트에서 필요로하는 정보들을 제공하는 앱(백엔드에서 주로 만듦)
• 메일 서버: 메일을 주고받을 수 있도록 도와주는 앱

 

웹 애플리케이션 아키텍처

 

 

 

웹사이트는 일반적으로 정적 페이지들의 집합을 뜻한다.

그러나, 웹 애플리케이션은 여기에 동적 페이지를 포함한 개념이다.

 

그렇다면 웹 애플리케이션 아키텍처란 무엇일까?

웹 애플리케이션 아키텍처는 어떻게 애플리케이션 내부의 요소들이 상호간에 소통하는지 설명하는 것을 뜻한다. 

웹 애플리케이션은 애플리케이션의 다양한 요소들(브라우저, 유저 인터페이스, 미들웨어, 서버, 데이터베이스,)이 상호작용할 수 있도록 서로를 연결시켜주는 뼈대다.

 

 

 

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

 

웹 애플리케이션의 요소들

 

웹 애플리케이션의 요소는 크게 두가지의 컴포넌트로 나눌 수 있다.

• 유저 인터페이스 요소
  • 유저인터페이스와 유저 경험과 관련된 요소다, 
  • 화면 출력. 로그, 알림, 시스템 통계와 같은 기능적인 부분 외 적인 요소
• 구조 요소
  • 기능적인 부분을 담당
  • 유저와의 상호작용, 제어, 데이터베이스 등
  • 웹 브라우저, 웹 애플리케이션 서버, 데이터베이스 등 전체적인 구조를 담당

 

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

 

• Single Page Application
• Microservice architecture
• Serverless Architectures

 

Single Page Application

 

 

Single Page Application은 직관적으로 알기 쉽고 상호작용 가능한 요소들을 이용해 유저 경험을 극대화 한다. 

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

 

Single Page Application은 필수적인 요소만을 요청한다. 이러한 점은 페이지가 새로고침 되는 것을 방지한다.

 

이러한 기능을 위해 AJAX, Asynchronous JavaScript, 그리고 XML이 사용된다. 

 

Microservice architecture

 

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

 

Serverless Architecture

 

Serverless Architecture는 개발자가 웹 애플리케이션의 서버와 기타 기반 기능들에 대해 외부의 3자인 클라우드 서비스 제공자에게 의탁하는 방식이다.

 

이 방식은 개발자가 기본적인 서버나 기반 기능들에 걱정할 필요 없이 특정기능의 개발에 집중 할 수 있게 한다. 

 

 

웹 애플리케이션 구현 기술

 

HTTP

 

HTTP(HyperText Transfer Protocol)는 웹 브라우저상에서 클라이언트와 서버간의 통신을 담당하는 프로토콜이다. 

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

 

Cookie 와 Session

 

• 쿠키: 웹 애플리케이션을 사용하는 유저의 정보를 클라이언트에 보관하고, 다음 접속부터는 유저의 정보를 클라이언트가 서버로 보내서 유저를 서버가 식별하게 한다. 쿠키에 담긴 내용으로 웹 애플리케이션에 유저가 설정했던 항목들에 대해 저장을 해서 다음에 이어서 같은 방식으로 작동하게 도와준다.

 

• 세션: 세션의 경우 서버에 Session-Id 라는 고유 아이디를 할당해서 유저를 식별한다. 단순하고 유출이 되면 안되는 정보는 서버에서 관리를 하면서 세션 ID와 매칭해서 저장해 관리한다.

세션정보는 쿠키에서 관리하고, 실제 매칭되는 값들은 서버 측에서 관리하는 것이 일반적이다.

 

 

사용자 인증

 

로그인과 같은 개념이 사용자 인증이다. 가장 일상적으로 접할 수 있는 방식은 OAuth방식의 로그인이다. 

이 방식은 서비스 자격증명 메커니즘을 다른 믿을만한 제3의 서비스에 위임해 인증하는 방식이다.

 

 

 

SSR과 CSR

 

SSR

 

Server Side Rendering의 줄임말로 Javascript 가 웹 페이지를 브라우저에서 렌더링하는 대신에, 서버에서 렌더링하는 방식이다. 

 

서버에서 렌더링을 마무리 하고 보내는 방식이다. 

 

단점 

• 애플리케이션 유지비용이 높다.
• 일부 서드파티 자바스크립트 라이브러리의 경우 서버사이드 렌더링이 불가능할 수 있다.

 

CSR

 

Client Side Rendering을 의미하며 클라이언트에서 Javascript 가 페이지를 렌더링하는 것을 의미한다. 

데이터베이스에 저장된 데이터의 경우에는 API를 활용하여 데이터를 가져와서 랜더링한다. 

 

단점

• 느린 렌더링 속도로 사용자 경험이 안 좋아 질 수 있다.
• 모든 렌더링의 부하가 클라이언트 쪽에 집중되기 때문에 사용자에 따라서 경험이 달라질 수 있다.
• search engine bots 와 상성이 안좋다.

 

사용 시기

 

SSR	CSR
최적화( SEO/ Search Engine Optimization ) 가 우선순위인 경우	최적화( SEO / Search Engine Optimization ) 가 우선순위가 아닌 경우
웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우	사이트에 풍부한 상호 작용이 있는 경우, 빠른 라우팅으로 강력한 사용자 경험을 제공.
웹 페이지가 사용자와 상호작용이 적은 경우	웹 애플리케이션을 제작하는 경우, 빠른 사용자 경험(빠른 동적 렌더링 등)을 제공할 수 있다..