[Web] 웹 서비스 구조(Web Service Architecture)

정적 웹페이지 vs 동적 웹페이지

웹페이지는 크게 정적 웹페이지와 동적 웹페이지로 나눌 수 있는데,

정적 웹페이지는 클라이언트가 서버에 요청을 할 때, 서버는 별도의 처리과정 없이 반환값을 제공한다. 따라서 모든 사용자가 동일한 화면을 보게 된다.

반면 동적 웹페이지에서는 서버가 클라이언트의 요청값에 대해 일련의 수행과정을 거친 후 반환값을 제공한다. 이 경우 사용자들마다 다른 페이지를 볼 수 있다.

 

동적 웹페이지도 페이지를 제공 - 레거시화 되어가고 있다.

동적 웹 페이지에서 정적 웹 페이지로 바뀌는 이유: 서버 부하 줄이기

 

MPA vs SPA

여기서 MPA(Multiple Page Application)과 SPA(Single Page Application)의 차이와도 연관이 있다.

단순하게 텍스트 그대로를 해석하면, MPA는 여러 페이지로 이루어진 App이고, SPA는 하나의 페이지로 이루어진 App이다.

 

MPA

MPA는 새로운 페이지를 요청할 때마다 정적 템플릿이 렌더링 되어진다. 즉 html, css, js로 이루어진 리소스만이 클라이언트에 전송된다. 이 경우를 CSR(Client Side Rendering) 방식이라고도 한다.

장점

• SEO(Search Engine Optimization, 검색 엔진 최적화) 관점에서 유리하다.
  • 완성된 HTML 파일을 가져오기 때문에 검색 엔진이 이를 크롤링하기에 적합하다.
  • 참고: SEO는 홈페이지 혹은 컨텐츠를 검색 결과 상단에 위치시키는 작업으로, 크롤링과 인덱싱을 통해 정보를 카테고리화 한다.

단점

• 새로운 페이지로 이동 시 화면이 깜빡인다.
  • 페이지를 요청할 때마다 페이지 전체를 다시 렌더링하기 때문이다.
• 프론트엔드와 백엔드가 밀접하게 연관되어 있어 프론트엔드 단과 백엔드 단을 분리하여 작업 시에 어려움이 있을 수 있다. (혼자 풀스택 개발 시에는 좀 더 간단한 구조를 갖기 때문에 장점이 될 수 있다.)

SPA

SPA는 웹 어플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운로드한다. 이후 새로운 페이지 요청이 있을 때마다 페이지를 갱신하는데 필요한 데이터만을 전달받아 렌더링되어진다. 즉, 최초 html, css, js로 이루어진 베이스 템플릿 외의 데이터들이 일정한 형식을 갖추어(주로 JSON) 클라이언트에 전달된다.

이 경우를 SSR(Server Side Rendering) 방식이라고도 한다.

장점

• 좋은 사용자 경험
  • 요청 시마다 페이지를 렌더링하는 것이 아니라 데이터의 이동으로 좁은 구역의 변화를 나타내므로 빠르고, 화면이 깜빡이지 않는다.
• 로컬 데이터를 효과적으로 캐시 할 수 있다
  • 서버에게 한번만 리소스를 요청해서 받은 데이터를 전부 저장해놓는다. 이 데이터는 오프라인에서도 사용 가능하다.
  • 캐시(cache): (자주 사용하는) 데이터나 값을 미리 복사해 놓는 임시 장소

단점

• 초기 구동 속도가 느리다.
  • 초기에 웹 애플리케이션에 필요한 모든 정적 리소스를 한번에 다 받기 때문이다.
• SEO(Search Engine Optimization, 검색 엔진 최적화) 관점에서 불리하다.

---

Web Server와 WAS

Web Server

클라이언트가 요청한 정적인 콘텐츠를 HTTP 프로토콜을 통하여 제공해주는 서버로, 정적인 컨텐츠 제공이 가장 큰 역할이다.

또한 동적인 요청이 클라이언트로부터 들어왔을 때, 해당 요청을 웹 서버에서 처리할 수 없기 때문에 컨테이너로 보내주는 역할 또한 수행한다.

(예시) Apache, NginX, HTTP Server 등

Web Container

동적인 데이터들을 처리하여 정적인 페이지로 생성해주는 소프트웨어 모듈

웹 서버를 대신하여 동적 데이터들을 받아서 처리한 후 웹 서버로 정적 데이터를 제공해준다.

WAS (Wep Application Server)

웹 서버로부터 들어오는 동적 데이터들을 처리하는 서버로, 위에서 언급한 웹 서버와 컨테이너를 합친 개념이라고 볼 수 있다.

(예시) Tomcat, JBoss, Jeus 등

Web Server의 장점

• 정적인 파일들을 Application Server까지 가지 않고 앞단까지 빠르게 보내줄 수 있다.
• Web Server에서는 정적 컨텐츠만 처리하도록 기능을 분배하여 서버의 부담을 줄일 수 있다.

WAS의 장점

• DB에서 가져와서 비즈니스 로직에 맞게 그때 그때 결과를 만들어서 제공함으로써 리소스를 효율적으로 사용 가능하다.
• 정적 리소스를 모두 만들어 둘 필요가 없어 리소스를 아낄 수 있다.

Web Server + WAS 조합

따라서 웹 서버와 웹 어플리케이션 서버를 조합하여 사용한다면 다음의 이점이 있다.

1. 기능을 분리하여 서버 부하를 낮춘다.
2. 물리적으로 보안 강화
3. 여러 대의 WAS를 연결해서 사용하여 버그나 에러에 유연하게 대처 가능하다.