WebApplication 이해

웹 어플리케이션 : 인터넷이나 인트라넷을 통해 웹 브라우저에서 이용할 수 있는 응용 프로그램.

 

웹 서버, 웹 어플리케이션 서버

모든 것이 HTTP

 

- 과거 초기의 웹 어플리케이션은 Client - Server 컴퓨팅 환경에서의 각 응용 소프트웨어마다 UI를 가지고 있었으며, 사용자 PC마다 따로 설치했어야 했다.

- 현재는 HTTP 라는 통일된 프로토콜을 사용하지만, 과거에는 회사마다 독자적인 통신 프로토콜을 사용했었기 때문이다.

- 대개 독자적인 규격을 가지는 것은 회사입장에서 매우 큰 이득이지만, Web 에서 만큼은 매우 큰 비용을 초래하여 생산성이 떨어진다는 문제가 발생함.

- HTTP 프로토콜의 정립으로 인해 웹 어플리케이션을 제공하는 기업의 유지 비용이 줄었다.

 

* 웹 서버 (Web Server)

- HTTP 기반 동작

- 정적 리소스 (정적 HTML, CSS, JS, 이미지, 영상) 제공

 

* 웹 어플리케이션 서버 (Web Application Server) = WAS

 

- HTTP 기반 동작

- 웹 서버 기능 포함 (정적 리소스 제공)

- 프로그램 코드를 실행하여 어플리케이션 로직 실행

 -> 동적 HTML, HTTP API, 서블릿, JSP, 스프링 MVC

 -> WAS 가 어플리케이션 코드를 실행하는 데 있어서 더 특화되어 있다.

 

Q. WAS 란?

A. Web Application Server 라고 읽고 웹 어플리케이션을  실행하기 위한 서버 소프트웨어를 의미합니다. 주로 동적인 웹 콘텐츠 EX) JSP, Servlet, 스프링 기반 어플리케이션. 이와 관련된 로직 실행, 트랜잭션 관리, 세션 관리, 보안 등의 기능을 제공합니다.

 

* 웹 시스템 구성

- WAS가 웹 서버의 기능도 다 할 수 있지만, 너무 많은 역할을 담당할 시 서버 과부하.

- WAS 장애 시 오류화면도 노출 불가능

 

 

- 웹 서버는 정적 리소스 처리,

- WAS는 어플리케이션 로직같은 동적인 처리 -> 효율적인 리소스 관리

- WAS, DB 장애 시 웹 서버가 오류 화면 제공 가능

 

* 서블릿

- 서버에서 처리해야하는 업무

 

- HTTP 요청이 왔을 때, 의미있는 비즈니스 로직을 제외하고 나머지 업무들을 서블릿을 지원하는 WAS가 처리해준다.

@WebServlet(name = "helloServlet", urlPatterns = "/hello")
public class HelloServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) {
        // 애플리케이션 로직
    }
}

 

* urlPatters의 URL이 호출되면 서블릿 코드가 실행

* HttpServletRequest : Http 요청 정보 편리하게 사용

* HttpServletResponse : Http 응답 정보 편리하게 제공

-> 개발자는 HTTP 스펙을 매우 편리하게 사용할 수 있다.

 

* 서블릿 컨테이너

 - 서블릿을 지원하는 WAS

 - 서블릿 객체를 생성, 초기화, 호출, 생명주기 관리

 - 싱글톤으로 관리, 멀티 쓰레드 처리 지원

 

동시 요청 - 멀티 쓰레드

* 쓰레드 (Thread)

 - 어플리케이션 코드를 하나하나 순차적으로 실행 (하나의 코드 라인만 수행)

 - 자바 메인 메서드를 처음 실행하면 main 이라는 이름의 쓰레드가 실행

 - 쓰레드가 없으면 자바 어플리케이션 실행 불가능

 - 동시 처리가 필요하면 쓰레드 추가 생성

 

쓰레드 생성 비용이 매우 비싸며, 요청마다 쓰레드를 생성하면 응답 속도가 느려지고, 너무 많은 요청이 오면 CPU, 메모리 임계점이 넘어 서버가 죽을수 있다. 이를 해결하기 위해 쓰레드 풀을 사용한다.

 

* 쓰레드 풀

 - 요청마다 쓰레드 생성의 단점 보완

- 필요한 쓰레드를 쓰레드 풀에 보관하고 관리한다.

- 쓰레드가 필요하다면, 이미 생성되어 있는 쓰레드를 쓰레드 풀에서 꺼내어 사용한다.

- 쓰레드를 다 쓰면 쓰레드 풀에 다시 반납을 하고, 쓰레드 풀에 쓰레드가 없으면 쓰레드를 요청에 대기, 거절 시킴.

- 쓰레드가 미리 생성되어 있으므로 쓰레드를 생성하고 종료하는 비용 ( CPU ) 과 시간이 절약된다.

생성 가능한 쓰레드의 최대치가 있으므로 너무 많은 요청이 들어와도 안전하게 처리할 수 있다.

 

* 쓰레드 풀의 적정 숫자

 - WAS의 주요 튜닝 포인트는  최대 쓰레드 수

  - 값이 너무 낮다 : 동시 요청이 많을 떄, 서버 리소스는 여유롭지만 클라이언트는 금방 응답 지연

  - 값이 너무 높다 : 동시 요청이 많을 때, CPU, 메모리 리소스 임계점 초과로 서버 다운

 

 

HTML, HTTP API, CSR, SSR

1. 정적 리소스

- 웹 서버에 요청하여 고정된 HTML 파일, CSS, JS, 이미지 영상 등을 제공

 

2. HTML 페이지

- WAS에 요청하여 DB에 정보를 조회한 정보를 동적으로 HTML 파일을 생성해 JSP, 타임리프를 통해 제공

 

3. HTTP API

- WAS에 요청하여 DB에 정보를 조회한 정보 HTML이 아니라 주로 JSON 형식의 데이터를 전달

- 데이터만 주고 받아, UI 화면이 필요하면 클라이언트가 별도 처리

 

4. 서버사이드 렌더링, 클라이언트 사이드 렌더링

 

SSR - 서버 사이드 렌더링

* 작동 흐름

 1. 사용자가 특정 URL에 접속하면 해당 요청이 서버로 전송됩니다. 

 2. 서버는 요청에 맞추어 비즈니스 로직을 처리하고, 템플릿 엔진 ( JSP, Thymleaf, EJS ) HTML을 생성합니다.

 3. 완성된 HTML이 브라우저로 보내지고, 브라우저는 이를 그대로 렌더링 합니다.

 

* 특징

- 서버에서 최종 HTML을 생성해서 클라이언트에 전달 즉 완선된 HTML을 Client에 반환함.

- 주로 정적인 화면에 사용

- 관련 기술 : JSP, 타임 리프 (백엔드 개발자)

 

* 장점

 - 빠른 초기 로딩 : 사용자는 요청 시점에 이미 HTML 콘텐츠가 모두 준비된 상태를 받음.

 - SEO (Search Engine Optimization) 우수 : 초기 로딩시 이미 완성된 HTML을 제공하므로 검색 엔진이 페이지 내용을 쉽게 인덱싱 할 수 있다.

 

* 단점

 - 매 요청마다 서버에서 렌더링을 수행하므로 서버 부하가 상대적으로 높을 수 있다.

 - 페이지 이동 시 마다 전체 페이지를 새로 로딩하는 방식이 일관적이다. 따라서 매우 동적인 UI를 구현하는데 상대적으로 불리할 수 있다.

 

CSR - 클라이언트 사이드 렌더링

* 작동 흐름

 1. 첫 페이지 접근 시 서버는 빈 HTML 뼈대와 JS 스크립트 번들을 전송함..

 2. 브라우저는 전달받은 자바스크립트 코드를 실행하여 API 호출로 필요한 데이터를 받아온 뒤, 

DOM을 기반으로 동적으로 변경합니다.

 3. 이후 페이지 전환 시 페이지 전체 새로고침 없이 자바 스크립트 로직을 통해 클라이언트에서 화면이 갱신됨.

 

Q. DOM 이란?

A.

 - Document(HTML 문서) Object(객체), Model(모델)의 약자로, JavaScript를 사용해서, DOM으로 HTML을 조작할 수 있다.

 - DOM과 같이 잘 만들어진 규칙이 없으면 , javascript 언어로 접근하기가 쉽지 않다.

 - HTML에 JavaScript 적용하기.

 1) 웹 브라우저가 작성된 코드를 해석하는 과정에서 <script> 요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈춘다.

 2) HTML 해석을 잠시 멈춘 웹 브랄우저는 <script> 요소를 먼저 실행합니다.

 

 

 

 

* 특징

- 초기 로딩 시 서버는 최소한의 HTML과 자바스크립트 번들만 전달하고, 브라우저가 자바스크립트로 동적으로 DOM 구성.

- HTML 결과를 자바스크립트를 사용해 웹 브라우저에서 동적으로 생성해서 적용

- 주로 동적인 화면에 사용

- 관련 기술 : React, Vue.js ( 웹 프론트엔드 개발자 )