29.02_[네트워크] 웹 애플리케이션 작동 원리_웹의 흐름_22.09.30

Web

>웹

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

//하이퍼텍스트

: 문서안에 다른 문서의 위치정보 등을 포함하여 문서 간의 정보를 서로 연관 지어 참조 할 수 있는 문서.

>3티어 아키텍처

: '클라이언트-서버-데이터베이스'를 의미함

• 클라이언트

: 리소스를 사용하는 애플리케이션

• 서버

: 리소스를 제공하는 곳

• 데이터베이스

: 리소스를 저장하는 곳

: 데이터베이스가 없는 것을 2티어 아키텍처라고 함.

//앱에 연결된 서버가 없다면??

: 앱에 저장된 정보를 업데이트를 하려면 앱 자체를 업데이트 해야함(실시간 정보 업데이트 불가)

: 앱에서 실행될 기능을 구현할 수 없음(기능이 구현되어 있는 서버가 없으므로)

//서버는 있는데 클라이언트(앱)이 없다면?

: ?? 유저가 접근조차 못함. 사용을 못하지

>Front-End 와 Back-End 영역

• Front-End

: 유저의 눈에 직접 보이는 것들과 클릭, 터치 등의 상호작용을 할 수 있는 앱을 개발하는 영역

: 유저 입력에 따라 브라우저에서 작동하는 프로그램을 다룸

: 브라우저 기능 개발(client-side)

• Back-End

: 앱에 필요한 정보(예. 상품 정보)를 API에 노출, 혹은 로그인/로그아웃 기능, 앱에 필요한 정보(예. 상품 정보)를 저장(데이

터베이스)등을 개발하는 영역

: HTTP 요청에 따라 서버에서 요청하는 프로그램을 다룸

: 서버 기능 개발(server-side)

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

//예시) 웹 사이트 검색

1) 브라우저에 도메인 입력

2) 브라우저가 DNS 서버에 서버의 IP 주소를 요청

3) 해당 IP 주소에 HTTPS 요청을 보냄(이미 방문 기록이 있다면, 해당 기기 cache memory에서 주소를 가져옴)

4) 웹 서버에 요청 도착

5) 요청에 따라 페이지 관련 데이터를 가져옴

: 요청 -> 비즈니스 로직 -> 데이터베이스(데이터 접근)

//비즈니스 로직: 데이터를 처리하는 과정 다양한 과정

6) 가져온 데이터로 브라우저 요청에 응답(제공)함.

: 데이터베이스(데이터) -> 비즈니스 로직 -> 브라우저

7) 웹 페이지 화면에 출력

>Web App Three Tier Achitecture

• Presentation Layer

: 클라이언트의 요청을 어떻게 받고, 어떻게 응답할지 결정하는 계층

: 요청을 어떻게 처리할 지는 Business Layer로 넘김

: Web Server가 포함되는 영역

• Application Layer(Business Layer)

: Presentation Layer에서 받아온 요청에 대한 처리가 실제로 이뤄지는 계층

: Application Server가 포함되는 영역

• Data access layer(Persistence layer)

: Business Layer의 요청 처리에 따라 데이터베이스에서 데이터를 저장, 조회, 삭제 등의 로직을 수행

>SSR과 CSR

• SSR, Server Side Rendering

: 서버에서 렌더링 하는 방식

//예시) 컴퓨터를 주문할 때, 매장에서 다 조립된 상태의 완제품을 받는 것

: 사용자가 요청할 때마다 완전히 렌더링 된 페이지를 받기 때문에 페이지가 새로고침된다.

: 웹 페이지가 사용자와 상호작용이 적은 경우 활용

: 서버에 자원이용이 집중되어 유지비용이 높고, 일부 경우 렌더링이 불가능할 수 있음.

//사용 예시) 블로그, 뉴스 페이지 등

• CSR

: 클라이언트에서 렌더링 하는 방식

//예시) 컴퓨터를 주문할 때, 각각의 하드웨어를 따로 받아 집에서 조립하는 것

: 사용자가 요청할 때마다 새로고침되지 않는다.

: 웹 페이지가 사용자와 상호작용이 많은 경우 활용

: 렌더링 속도가 느림.

//사용 예시) 각종 예약 사이트 등