웹 애플리케이션 이해

웹 애플리케이션 서버(WAS)

• HTTP 기반으로 동작
• 웹 서버 기능 포함
• 프로그램 코드를 실행해서 애플리케이션 로직 수행
  • 동적 HTML, HTTP API(JSON)
  • 서블릿, jsp, 스프링, MVC
• EX) 톰캣(Tomcat) Jetty, Undertow

웹 서버, 웹 애플리케이션 차이

• 웹 서버는 정적, WAS는 애플리케이션 로직
• 웹 애플리케이션 서버도 웹서버 기능을 제공
• 웹 서버도 프로그램을 실행하는 기능을 포함하기도 함
• 자바는 서블릿 컨테이너 기능을 제공하면 WAS
  • 서블릿 없이 자바 코드를 실행하는 서버 프레임워크도 있음
• WAS는 애플리케이션 코드를 실행하는데 더 특화 됨

웹 시스템 구성

• WAS, DB 만으로 시스템 구성 가능
• WAS는 정적 리소스, 애플리케이션 로직 모두 제공 가능
• WAS가 너무 많은 역활을 담당, 서버 과부화 우려
• 가장 비싼 애플리케이션 로직이 정적 리소스 때문에 수행이 어려울 수 있음
• WAS 장애시 오류 화면도 노출 불가능
• WEB WAS, DB로 구성하여 중요한 애플리케이션 역활은 WAS에서 담당하게 할 수 있음
  • 효율적으로 리소스가관리된다
  • 정적 리소스가 많은 경우 WEB 서버 추가, 동적 리소스가 많은 경우 WAS 서버 추가
  • WAS 문제 발생시 오류 표시 가능

서블릿

• TCP/IP 연결부터 메시지 파싱 응답 등의 처리를 자동으로 해줌
• urlPatterns의 URL이 호출되면 서블릿 코드가 실행
• HttpServeletRequest : 요청 정보를 사용
• HttpServeletResponse : 응답 정보를 사용
• 개발자는 HTTP 스펙을 편리하게 사용

HTTP 요청, 응답 흐름

• WAS는 Request, Response 객체를 새로 만들어 서블릿 객체 호출
• 개발자는 Request 객체에서 HTTP 요청 정보를 편리하게 꺼내서 사용
• 개발자는 Response 객체에서 HTTP 응답 정보를 편리하게 입력
• WAS는 Response 객체에 담겨있는 내용으로 HTTP 응답 정보를 생성

서블릿 컨테이너

• 톰캣처럼 서블릿을 지원하는 WAS를 서블릿 컨테이너라고 함
• 서블릿 객체를 생성, 초기화, 호출, 종료하는 생명주기 관리
• 싱긅톤으로 관리됨
  • 고객 요청마다 새로 생성하는 건 비효율
  • 최초 로딩 시점에 미리 만들어 재활용함
  • 모든 고객 요청은 동일한 서블릿 객체 인스턴스 접근
  • 공유 변수 사용 주의
• JSP도 서블릿으로 변환되어서 사용
• 동시 요청을 위한 멀티 쓰레드 처리 지원

멀티 쓰레드

쓰레드

• 애플리케이션 코드를 하나하나 순차적으로 실행하는 것은 쓰레드
• 자바 메인 메서드를 처음 실행하면 main이라는 이름의 쓰레드가 실행
• 쓰레드가 없으면 자바 애플리케이션 실행이 불가능
• 쓰레드는 한번에 하나의 코드 라인만 수행
• 동시 처리가 필요하면 쓰레드 추가로 생성

쓰레드 작업

• 단일 요청 - 쓰레드 하나 : 요청이 오면 쓰레드를 할당, 서블릿을 실행
• 다중요청 - 쓰레드 하나 : 요청 처리중에 문제가 발생해 지연되는 경우 다른 요청은 대기만 되고 둘다 타입아웃으로 실행 중지됨
• 요청마다 쓰레드 생성 : 요청마다 쓰레드를 만들기 때문에 하나의 작업이 처리지연되도 다른 작업은 새로 만들어진 쓰레드로 작업함

요청마다 쓰레드 생성 장단점

• 장점
  • 동시 요청을 처리할 수 있다.
  • 리소스가 허용될 때까지 처리가능
  • 하나의 쓰레드가 지연되도 나머지는 정상 동작
• 단점
  • 쓰레드 생성 비용은 매우 비쌈, 요청마다 생성하면 응답 속도가 느려짐
  • 쓰레드는 컨테긋트 스위칭 비용이 발생함, 쓰레드 전환시 발생하는 비용
  • 쓰레드 생성에 제한이 없어 요청이 너무 많이 오면 CPU, 메모리 임계점을 넘어서 서버가 죽을 수 있다.

쓰레드 풀

• 필요한 쓰레드를 보관하고 관리함
• 생성가능한 쓰레드의 최대치를 관리함, 톰캣은 최대 200 기본 설정(변경 가능)
• 요청이 오면 쓰레드 풀에 미리 생성된 쓰레드를 사용하고 완료시 반납
• 쓰레드 풀에 쓰레드가 없는 경우 요청이 오면 대기하거나 거절함
  • 대기 갯수를 설정할 수 있음
• 쓰레드가 미리 생성되어 있으므로, 생성하고 종룟하는 비용이 절약되고 응답이 빠름
• 생성 가능한 최대치가 있으므로 많은 요청이 와도 기존 요청은 안전하게 처리 할 수 있음

실무 팁

• WAS의 주요 튜닝 포인트는 최대 쓰레드 수이다.
• 최대 쓰레드를 너무 낮게 설정하면 서버 리소스는 여유롭지만, 클라이언트는 금방 응답 지연됨
• 최대 쓰레드를 너무 높히면 동시 요청이 많을 경우 CPU, 메모리 리소스 임계점 초과로 서버 다운
• 장애가 발생하면 클라우드면 일단 서버를 늘리고 이후 튜닝, 클라우드가 아니면 바로 튜닝함

쓰레드 풀의 적정 숫자

• 애플리케이션 로직의 복잡도, CPU, 메모리, IO 리소스 상황에 따라 모두 다름
• 최대한 실제 서비스와 유사하게 성능 테스트를 시도해서 적정한 숫자를 찾아가야 함
• 성능 테스트 툴 : 아파치 ab, 제이미터, nGrinder

WAS의 멀티 쓰레드 지원

• 멀티 쓰레드에 대한 부분은 WAS가 처리
• 개발자가 멀티 쓰레드 관련 코드를 신경쓰지 않아도 됨
• 개발자는 마치 싱글 쓰레드 프로그래밍을 하듯이 편리하게 소스 코드를 개발
• 멀티 쓰레드 환경이므로 싱글톤 객체(서블릿, 스프링 빈)는 주의해서 사용

HTML, HTTP API, CSR, SSR

정적 리소스

• 고정된 HTML 파일, CSS JS, 이미지, 영상 등을 제공
• 주로 웹 브라우저

HTML 페이지

• 동적으로 필요한 HTML 파일을 생성해서 전달
• 웹 브라우저 : HTML 해석

HTTP API

• HTML이 아니라 데이터를 전달
• 주로 JSON 형식 사용
• 다양한 시스템에서 호출
• 데이터만 주고 받고 화면이 필요하면 클라이언트가 별도 처리
• 앱, 웹 클라이언트(자바스크립트 AJAX, React, Vue.js 등..), 서버 to 서버(주문서버 > 결제서버, 기업간 데이터)

서버 사이드 랜더링(SSR)

• 서버 사이드에서 랜더링 한다, HTML 최종 결과를 서버에서 만들어서 웹 브라우저에 전달
• 주로 정적인 화면에 사용
• 관련기술 : JSP, 타임리프 -> 백엔드 개발자

클라이언트 사이드 랜더링(CSR)

• HTML 결과를 자바스크립트를 사용해 웹 브라우저에서 동적으로 생성해서 사용
• 주로 동적인 화면에 사용, 웹 환경을 마치 앱 처럼 필요한 부분부분 변경할수 있음
• 구글지도, Gmail, 구글 캘린더
• 관련기술 : React, Vue.js -> 웹 프론트엔드 개발자
• 순서
  1. HTML을 서버에 요청함, 서버는 빈 내용의 HTML과 애플리케이션을 구동하는 자바스크립트 링크를 반환
  2. 자바스크립트를 서버에 요청함, 요청하는 자바스크립트에는 클라이언트 로직과 HTML 랜더링 방식등의 정보가 들어있음, 서버가 응답함
  3. HTTP API 데이터 요청, JSON을 통해 데이터를 응답함, 2번에서 있는 로직과 HTML 랜더링 방식과 함께 화면에 표시함

참고

• REact, Vue.js를 CSR+SSR 동시에 지원하는 웹 프레임워크도 있음
• SSR을 사용하더라도, 자바스크립트를 사용해서 일부 화면을 동적으로 구성할 수 있다.

백엔드 개발자 입장에서 UI 기술

• 백엔드 : 서버 사이드 렌더링 기술
  • JSP(거의 사장됨), 타임리프
  • 화면이 정적이고, 복잡하지 않을 때 사용
  • 백엔드 개발자는 학습 필수
• 웹 프론트엔드 : 클라이언트 사이드 렌더링 기술
  • React, Vue.js
  • 복잡하고 동적인 UI 사용
  • 웹 프론트엔드 개발자의 전문 분야