[0922] CS 지식 - 네트워크 (웹)

#WEB웹

- 웹의 구성

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

    (하이퍼텍스트: 문서 안에 타 문서의 위치 정보 등이 포함, 문서 간의 정보가 연결되어 있어 서로 참조할 수 있는 문서)

    (예전 워드, 파워포인트 등에서 파란색으로 표시되는 텍스트도 하이퍼텍스트의 예시)

  ▪ 웹은 하이퍼텍스트 형식인 HTML과 인터넷이 융합되어 있다.

  ▪ HTML이란 운영체제와 애플리케이션에 상관없이 하이퍼텍스트에 담긴 정보가 일정하게 출력될 수 있도록 만든 기준.

 

- 클라이언트 / 서버 아키텍쳐

  ▪ 클라이언트는 웹에서 서비스를 사용한다.

  ▪ 서버는 웹에서 서비스를 제공한다.

  ▪ 클라이언트 - 서버 아키텍처는 위와 같이 웹에서 클라이언트와 서버가 서비스를 주고받는 구조(2 티어 아키텍처)이다.

  ▪ 클라이언트 - 서버 아키텍처에서는 리소스가 존재하는 곳과 리소스를 사용하는 곳이 분리되어 있다.

  ▪ 서버는 클라이언트의 요청에 리소스를 전달하며, 리소스가 저장된 곳을 데이터베이스 라고 한다.(3 티어 아키텍처)

2티어 아키텍쳐(2-Tier Architecture)

 

3티어 아키텍쳐(3-Tier Architecture)

 

- 웹 애플리케이션 아키텍처

  ▪ 웹 사이트는 정적 페이지의 모음이다.

  ▪ 웹 애플리케이션은 동적 페이지가 포함된 사이트를 말한다.

  ▪ 웹 애플리케이션의 특징은 다음과 같다.

1. 데스크톱 애플리케이션처럼 상호작용 가능
2. 특정 기능 구현(정보 검색 등)
3. 정보나 자료 등의 콘텐츠 관리 시스템과 함께 작동.

  ▪ 웹 애플리케이션은 애플리케이션 서버에서 브라우저에서 이뤄지는 요청을 각 요소들이 상호작용 할 수 있게 도와준다.

웹 애플리케이션 아키텍쳐

 ▪ 웹 애플리케이션에서는 많은 상호작용이 일어나기 때문에 다음과 같은 요소가 중요하다.

1. 신뢰성(reliability)
2. 확장성(scalability)
3. 보안성(security)
4. 견고성(robustness)

 

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

  ▪ 유저가 브라우저에 URL을 입력 이후 요청의 흐름은 다음과 같이 정리할 수 있다.

1. 브라우저에 URL을 입력한다.
2. 브라우저는 서버의 주소를 찾기 위해 DNS서버에 요청을 보낸다.
3. IP 주소를 찾아 해당 주소에 HTTPS 요청을 보낸다. if, 이전 방문 기록 존재 시 주소를 캐시 메모리에서 가져온다.
4. 웹 서버에 요청이 도착하면 서버느 데이터베이스에서 페이지 관련 데이터를 가져온다.
5. 가져오는 중에 비즈니스 로직이 처리된 데이터들을 브라우저에 응답한다.
6. 브라우저에 요청이 도착하면 웹 페이지 화면에서 출력된다.

  ▪ 위와 같은 흐름이 처리될 때 애플리케이션은 Client-side와 Sever-side으로 작동된다.

  ▪ Clinent-side는 유저의 입력에 따라 브라우저에서 작동하는 프로그램이다. 

  ▪ Sever-side는 HTTP 요청에 따라 서버에서 요청을 처리한다.

 

- 웹 애플리케이션 요소와 3단계 계층 구조

  ▪ 웹 애플리케이션의 요소

1. 유저 인터페이스 요소
   유저 인터페이스(UI)와 유저 경험(UX)에 관련된 요소들.
   화면 출력, 로그, 알림, 시스템 통계, 환경 설정 등 웹 애플리케이션의 기능적인 부분과 외적인 요소들이다.
2. 구조 요소
   웹 애플리케이션의 전체적인 구조, 기능적인 부분 담당. 유저와의 상호작용, 제어, 데이터베이스 등에 관련됨.
   웹 브라우저, 클라이언트, 웹 애플리케이션 서버, 데이터베이스로 이루어져 있다.

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

-> 웹 애플리케이션의 구조는 크게 3단계로 나뉜다. (Web Application Three Tier Architecture)

 

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

    각 구조가 담당하는 역할은 다음과 같다.

• Presentation Layer
  : 유저와 직접적으로 접촉한다. Web Sever가 이 영역에 포함되며, 유저 인터페이소 요소들이 존재한다.
  
  
• Application Layer
  : 유저의 요청을 브라우저로부터 받아 처리한다. Business Layer, Business Login, Domain 영역으로 불리기도 한다. 
  Application Server가 이 영역에 포함되며, 데이터 접근을 위한 경로를 규격화하는 과정 등이 이 계층에서 작성된다.
  
  
• Data access layer
  :애플리케이션의 데이터 저장소에 접근하여 데이터를 불러오거나 저장을 담당. Persistence layer으로 불리기도 한다. 
  Application Layer의 로직들은 이 영역을 통해 데이터를 가져오는 과정을 더 최적화된다.
  
  
• Cross-cutting
  : 보안, 통신, 운영 관리등을 위한 요소들.
  
  
• Third party integrations
  : 제3의 API 서비스를 이용하는 것을 의미한다. OAuth2.0을 이용한 소셜로그인, PG사를 통한 결재기능 등이 있다.

 

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

 

  ▪ 웹 애플리케이션을 구성하는 방식은 크게 3가지가 있다.

1. Single Page Application
   유저의 입력과 요청에 의한 콘텐츠, 정보의 최신화가 페이지를 새로 불러오지 않고 현재 페이지에서 이루어짐.
   따라서 필수적인 요소만 요청하여 페이지가 새로 고침 되는 것을 방지해 유저 경험을 극대화한다.
   AJAX, Asynchronous JavaScript, XML이 주로 사용된다.
2. Microservice architecture
   한 가지 기능에 집중해 작고 가벼운 웹 애플리케이션을 의미. 
   각 기능을 담당하는 모듈이 서로 독립적으로 설계되기 때문에, 개발 환경에 유연성이 좋다.
3. Serverless Architecture
   개발자가 웹 애플리케이션의 서버와 기타 기반 기능들을 외부 3자인 클라우드 서비스 제공자에게 의탁하는 방식.
   기본적인 서버나 기반 기능들이 아닌 특정기능의 개발에 집중하여 개발함.

 

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

1. HTTP
   웹 브라우저상에서 클라이언트와 서버 간의 통신을 담당하는 프로토콜.
   클라이언트와 서버의 데이터 요청에 대한 응답을 반복하며 웹 애플리케이션을 작동시킨다.
   HTTP 요청은 메서드의 이름과 데이터 처리 대상의 이름이 포함되며,
   응답에는 요청에 대한 처리 결과를 나타내는 상태 코드와 헤더, 처리결과인 메시지가 포함된다.
   거의 모든 데이터 전송이 HTTP를 이용하여 처리된다.
2. Cookie와 Session
   ● 쿠키 
   : 웹 애플리케이션을 사용하는 유저의 정보를 클라이언트에 보관하여 다음 접속부터 유저의 정보를 서버에서 식별할 수 있도록 함. 쿠키에 담긴 내용으로 유저가 설정했던 항목들에 대해 저장하여 이전 작동방식을 로드함.
   ● 세션
   : 서버에 고유 아이디(Session-Id )를 할당해서 유저를 식별한다. 
   유저의 정보를 세션정보와 매칭하여 서버에서 데이터들을 가져온다.
   일반적으로 세션정보를 쿠키에서 관리하고, 실제 매칭되는 값들은 서버 측에서 관리한다.
3. 사용자 인증
   클라이언트의 요청을 받아 서버에서 사용자를 확인하는 과정.
   예를 들어 OAuth 방식의 로그인, 은행 OTP 사용 등이 있다.