0. Web 서비스의 구조

0. 개요

- Spring MVC에 대한 개념을 배우기 전에, MVC라는 구조가 왜 생겼는지를 알아야 한다.

- 이를 위해서는 기본적인 Web 서비스의 구조를 이해해야 한다.

---

1. 모든 것은 HTTP로 소통한다. 

- 일반적인 Web 서비스는 Client가 internet을 통해 Server와 소통하며 데이터를 주고받는 형태를 가진다.

- 소통을 하려면 서로 동일한 언어를 사용해야 하는데, 이를 HTTP라고 부른다.    

- 위 그림처럼 Client는 HTTP를 사용하여 Server와 소통한다.

- Server 또한 HTTP를 사용하여 Client와 소통한다. 

 

- 즉, 인터넷 상의 모든 데이터는 HTTP를 통해 전달된다. 

---

2. Web Server의 종류

a) Web Server

- Web 서버는 HTTP를 기반으로 동작하는 서버다.

- Web 서버는 정적 자원(HTML, CSS, JS, 이미지, 텍스트 등)을 제공한다.

- 대표적인 Web 서버는 Apache, NGINX 등이 있다. 

b) WAS(Web Application Server)

- Web 서버에서 확장된 개념으로, 동일하게 HTTP를 기반으로 동작하는 서버다.

- WAS는 동적 자원(동적 HTML, HTTP API, 등)을 제공한다.

- 그러므로 WAS는 코드 실행을 통해 Application 로직을 수행하는 것에 특화되어 있다.

- 대표적인 WAS는 Tomcat, Jetty, Undertow 등이 있다.    

c) Web Server와 WAS의 차이

- 일반적으로 web 서버는 정적 자원을 제공하고 WAS는 동적 리소스(App 로직 수행)를 제공한다고 표현한다.

- 그러나 이러한 구분은 모호하다. 왜냐면 Web 서버도 로직을 실행할 수 있으며, WAS의 기반이 곧 Web 서버이기 때문이다.

- 그러므로 두 서버를 역할로 구분할 것이 아니라, 특화된 기능으로 구분하는 것이 올바르다.

  → Web서버는 정적 자원을 처리하는데 특화되어 있다. 

  → WAS는 Application 로직을 처리하는데 특화되어 있다. 

---

3. Web Server의 반환 데이터

- 기본적으로 Web Server는 client의 요청에 따라 데이터를 반환하는 역할을 담당한다. 

- client가 누구냐에 따라, 어떤 기능을 가졌냐에 따라 client가 사용할 수 있는 데이터의 형식이 달라진다.

- 웹 서비스에서 server가 반환하는 데이터는 크게 2가지로 나뉜다. 

a) HTML 반환

- server가 반환한 HTML을 client(= 브라우저)가 출력하는 구조다.

b) API 반환(1)

- server가 반환한 JSON 형식의 데이터를 이용하여 client가 알아서 화면을 구축하는 구조다.

- client의 자체적인 화면 랜더링은 web client 또는 app client인 경우에만 가능하다. 

   → web client: 자체적으로 페이지 랜더링이 가능한 client

       ex) 웹 브라우저 

   → app client: 자체적으로 페이지 랜더링이 가능한 application

       ex) 스마트폰 app, PC app

c) API 반환(2)

- server와 server 간 소통에서 사용된다.

- 서버가 다른 서버에게 데이터를 요청하는 경우, JSON 형식의 데이터를 반환한다. 

---

4. 랜더링 방식 

a) SSR(Server Side Rendering)

- 주로 정적 자원을 처리하는 방식이다.

- server가 HTML을 다 만들어서 client에게 전달하면, client는 이를 그대로 브라우저에 출력한다. 

- 이는 백엔드 개발자의 영역으로 JSP, Thymeleaf와 같은 기술을 사용한다. 

b) CSR(Client Side Rendering)

- 주로 동적 자원을 처리하는 방식이다.

- client는 server로부터 반환받은 데이터(= JSON)를 사용하여 JavaScript로 페이지를 동적 생성한다.

- 즉, 해당 웹 페이지에서 필요한 부분만을 수정 및 변경한다. ex) 지도, 이메일, 주식거래 등 

- 이는 프론트 개발자의 영역으로 React, Vue.js와 같은 web framework를 사용한다. 

---

5. 기본적인 Web System의 구조 

- WAS와 DB만 있다면 하나의 웹 서비스를 구성하기에 충분하다.

- 그러나 WAS만을 사용하는 경우, WAS가 담당하는 일이 너무 많아진다.

- 그러므로 정적 리소스와 동적 리소스를 처리하는 역할을 분리하여 두 가지 서버를 사용한다. 

- 위 그림처럼 웹 서버와 WAS를 모두 운용하는 경우, 각 서버는 하나의 역할만을 책임지게 된다.

- 더불어, WAS에 문제가 발생하더라도 정적 자원은 웹 서버에서 처리할 수 있는 구조를 가진다.

- 쉽게 말하자면, WAS에 문제가 발생했을 때 웹 서버를 통해 오류 화면을 client에게 출력할 수 있다는 것이다.

  → 대부분의 오류는 WAS에서 발생하기 때문이다. 

a) WAS가 비즈니스 로직을 수행하기까지

- 우선 WAS가 처리하는 application 로직을 비즈니스 로직이라고 부르기도 하니, 이를 알아두자.

 

1. client의 요청이 HTTP 형태로 웹 서버에게 전달된다.

2. client의 요청이 동적인 처리를 필요로 하는 경우, 웹 서버는 해당 요청을 WAS에게 넘긴다.

3. WAS는 전달받은 HTTP request를 parsing 하여 데이터로 변환한다.

4. 변환된 데이터를 기반으로 WAS는 비즈니스 로직을 수행한다.

5. 로직 수행을 완료한 WAS는 결과물을 다시 HTTP reponse로 parsing 한다. 

6. HTTP response를 웹 서버에게 전달한다.

7. 웹 서버는 전달받은 HTTP response를 client에게 전달한다. 

 

- 위의 과정처럼, WAS는 꽤 복잡한 일들을 처리한다.

- WAS의 본질은 비즈니스 로직을 처리하는 것인데, 이를 위해 사전 / 사후 처리 작업이 동반된다.

- 이처럼 WAS가 담당하는 역할이 많아질수록 서버의 효율성은 떨어지게 된다. 

 

- 어떻게 하면 이 문제를 해결할 수 있을까? 

- 다음 포스팅에서 알아보자.