[스프링 MVC 1편] #1. 웹 애플리케이션 이해

[6om1n]

✏️ 웹 서버, 웹 애플리케이션 서버

🔍 현재 모든 것이 HTTP 시대이다.

• HTML. TEXT, IMAGE, 음성, 영상, JSON 등의 거의 모든 형태의 데이터를 전송할 수 있다.
• 서버 간에 데이터를 주고 받을 때도 대부분 HTTP를 사용한다.
• 지금은 즉 HTTP의 시대이다!

🔍 웹 서버 (Web Server)

• 웹 서버는 HTTP를 기반으로 동작하는 서버이며, 정적 리소스와 기타 부가 기능들을 제공한다.
• 정적 리소스란 정적(파일) HTML, CSS, JS, 이미지, 영상 같은 정적 콘텐츠를 말한다.
• 웹 서버의 예시로는 NGINX, APACHE 가 있다.

🔍 웹 애플리케이션 서버 (WAS- Web Application Server)

• 웹 애플리케이션 서버도 HTTP를 기반으로 동작한다.
• 웹 서버의 기능을 거의 다 포함하며, 프로그램 코드를 실행해서 애플리케이션 로직도 수행할 수 있다.
• 따라서 HTTP 요청이 들어오면, 사용자에 따라서 다른 화면들을 보여줄 수 있다.
• 톰캣 Jetty, Undertow 가 WAS이다.

🔍 웹 서버, 웹 애플리케이션 서버의 차이점

• 웹 서버는 정적 리소스, WAS 는 애플리케이션 로직을 수행한다.
• 둘 용어의 경계가 사실은 모호하다.
  • 웹 서버도 프로그램을 실행하는 기능을 포함하기도 하고, WAS도 웹 서버의 기능을 제공하기도 한다.
• 자바는 서블릿 컨테이너 기능을 제공하면 WAS 라고 할 수 있다.
  • 서블릿 없이 자바코드를 실행하는 서버 프레임워크도 있다.
• WAS는 애플리케이션 코드를 실행하는데 더 특화되어있다.

🔍 웹 시스템 구성 - WAS, DB

• WAS, DB 만으로도 시스템을 구성할 수 있다.
• 그러나, WAS가 너무 많은 역할을 담당하면, 서버 과부하 우려가 있을 수 있다.
• 가장 비싼 애플리케이션 로직이 정적 리소스 때문에 수행이 어려울 수 있다.
• 또한 WAS 장애 시, 오류 화면도 노출이 불가능해진다.

• 따라서, 정적 리소스는 웹 서버가 처리하고
• 웹 서버는 애플리케이션 로직 같은 동적인 처리가 필요하면 WAS에 요청을 위임한다.
• WAS 는 중요한 애플리케이션 로직 처리를 전담하게끔 한다.

🔍 위와 같이 웹 서버와 WAS 서버를 나누게 된다면

• 효율적으로 리소스를 관리할 수 있다.
• 정적 리소스가 많이 사용되면 Web 서버를 증설하면 되고,
• 애플리케이션 리소스가 많이 사용되면 WAS를 증설하면 된다.
• 정적 리소스만 제공하는 웹 서버는 잘 죽지 않고, 애플리케이션 로직이 동작하는 WAS 서버는 잘 죽는다.
• WAS, DB 장애 시 WEB 서버가 오류 화면을 제공할 수 있다.

---

✏️ 서블릿

• 폼을 입력하고, 전송을 누르게 되면, 웹 브라우저가 요청 http 메시지를 만들어 서버에 전송한다.
• 원래는 직접 다 잘라서 넣고, 어렵게 파싱해서 읽고 저장하고 이러한 복잡한 과정을 수행해야한다.

• 이런 복잡한 과정들, 초록색 박스의 의미있는 비즈니스 로직을 제외한 부분들을 다 지원해준다.

• urlPatterns(/hello) 의 URL이 호출되면 서블릿 코드가 실행이 된다.
• HTTP 요청 정보를 편리하게 사용할 수 있는 HttpServletRequest
• HTTP 응답 정보를 편리하게 제공할 수 있는 HttpServletResponse
• 개발자는 HTTP 스펙을 매우 편리하게 사용할 수 있다.

• localhost:8080/hello 라고 요청을 하면, 요청 메시지를 기반으로 requestResponse 객체를 새로 만든다.
• 그 다음에, helloServlet 이라는 것을 실행을 하고, requestResponse 객체를 파라미터로 넘기면서 실행을 해준다.
• 끝나고 리턴을 하면, response 객체 안을 찾아서 HTTP 응답 메시지를 만든다.
• 마지막으로, 웹브라우저에 응답 메시지가 전달이 된다.
• WAS 안에는 서블릿 컨테이너가 있는데 서블릿 객체를 서블릿 컨테이너가 자동으로 생성해주고, 호출을 해준다.
• 또한, WAS가 종료될 때 이 서블릿을 같이 종료해준다. 이런 생명주기까지 모두 관리해주는 역할을 한다.

🔍 서블릿 - HTTP 요청, 응답 흐름

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

🔍 서블릿 - 서블릿 컨테이너

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

---

✏️ 동시 요청 - 멀티 쓰레드

➰ 클라이언트에서 서버로 요청을 하면 WAS 웹 애플리케이션 서버는 응답을 한다.

• 요청을 하면 TCP, IP 커넥션이 연결이 되고, 서블릿을 호출해준다.
• 그렇다면, 이 서블릿은 누가 호출하지?

🔍 쓰레드

• 바로, 이 쓰레드가 호출을 한다.
• 애플리케이션 코드를 하나하나 순차적으로 실행하는 것이 쓰레드이다.
• 자바 메인 메서드를 처음 실행하면 main 이라는 이름의 쓰레드가 실행이 된다.
• 쓰레드가 없다면 자바 애플리케이션 실행이 볼가능해진다.
• 쓰레드는 한 번에 하나의 코드 라인만 수행하고, 동시 처리가 필요하면 쓰레드를 추가로 생성한다.

🔍 다중 요청 - 쓰레드 하나 사용

• 쓰레드를 하나만 사용하고 있는데, 요청1의 처리가 지연되고 있는 상황이다.
• 위의 상황에서 요청2가 하나 더 들어온다면, 두 개의 요청이 다 죽을 수 밖에 없다.

🔍 요청 마다 쓰레드 생성

• 장점
  • 동시 요청을 처리할 수 있다.
  • 리소스 (CPU, 메모리)가 허용할 때 까지 처리 가능하다.
  • 하나의 쓰레드가 지연 되어도, 나머지 쓰레드는 정상 동작한다.
• 단점
  • 쓰레드는 생성 비용이 매우 비싸다. (고객의 요청이 올 때마다 쓰레드를 생성하면 응답 속도가 늦어진다. )
  • 쓰레드는 컨텍스트 스위칭 비용이 발생한다.
  • 쓰레드 생성에 제한이 없다. (고객 요청이 너무 많을 경우 메모리 임계점을 넘어 서버가 죽을 수 있다. )

🔍 쓰레드 풀

• 이런 단점을 해결하기 위해서 내부에 Thread Pool을 사용한다.
• 1번과 2번 요청이 오면 Thead Pool 한테 Thread를 달라고 요청을 한다.
• 미리 Thread Pool 안에 Thread를 만들어 놓는다.
• 다 쓴 이후에 반납을 한다.
• 즉, 이런 식으로 Thread를 만들어서 넣어 놓고 빌려 쓰고 다시 가져다 놓는 식으로 진행한다.
• 위의 그림은 200개가 있기에 201, 202 요청이 들어온다면 대기하거나 거절할 수 있다.

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

• 특징
  • 필요한 쓰레드를 쓰레드 풀에 보관하고 관리한다.
  • 쓰레드 풀에 생성 가능한 쓰레드의 최대치를 관리한다. 톰캣은 최대 200개 기본 설정
• 사용
  • 쓰레드가 필요하면, 이미 생성되어 있는 쓰레드를 쓰레드 풀에서 꺼내서 사용한다.
  • 사용을 종료하면 쓰레드 풀에 해당 쓰레드를 반납한다.
  • 최대 쓰레드가 모두 사용중이어서 쓰레드 풀에 쓰레드가 없으면? -> 대기하거나 거절할 수 있다.
• 장점
  • 쓰레드가 미리 생성되어 있으므로, 생성하고 종료하는 비용이 절약되고, 응답 시간이 빠르다.
  • 생성 가능한 쓰레드의 최대치가 있으므로 너무 많은 요청이 들어와도 기존 요청은 안전하게 처리할 수 있다.
• WAS의 주요 튜닝 포인트는 최대 쓰레드 수이다.
• 이 값을 너무 낮게 설정할 경우
  • 동시 요청이 많으면, 서버 리소스는 여유롭지만, 클라이언트는 금방 응답이 지연된다.
• 이 값을 너무 높게 설정할 경우
  • 동시 요청이 많으면, CPU, 메모리 리소스 임계점 초과로 서버가 다운된다.
• 장애가 발생할 경우
  • 클라우드면 일단 서버부터 늘리고, 이후에 튜닝한다.
  • 클라우드가 아니면 열심히 튜닝한다.

🔍 WAS의 멀티 쓰레드 지원

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

---

✏️ HTML, HTTP API, CSR, SSR

🔍 정적 리소스

• 고정된 HTML 파일, CSS, JS, 이미지, 영상 등을 제공한다
• 주로 웹 브라우저에서 요청을 한다.

🔍 HTML 페이지

• 동적으로 필요한 HTML 파일을 생성해서 전달한다.
• 위의 그림에서 주문 내역을 요청을 하면, WAS가 DB를 통해서 주문 정보를 조회하여 동적으로 html을 생성한다.
• 웹 브라우저는 html만 받아서 해석해서 전달한다.

🔍 HTTP API

• HTML이 아니라 데이터를 전달한다.
• 주로 JSON 형식을 사용한다.
• 주로 3가지의 상황에서 사용이 된다. (데이터만 주고 받고, UI 화면이 필요하면 클라이언트가 별도로 처리한다. )
  • 웹 클라이언트 to 서버
  • 앱 클라이언트 to 서버
  • 서버 to 서버

🔍 HTTP API 다양한 시스템 연동

• 주로 JSON 형태로 데이터 통신
• UI 클라이언트 접점
  • 앱 클라이언트 (아이폰, 안드로이드, PC 앱)
  • 웹 브라우저에서 자바스크립트를 통한 HTTP API 호출
  • React, Vue.js 같은 웹 클라이언트
• 서버 to 서버
  • 주문 서버 -> 결제 서버
  • 기업 간 데이터 통신

🔍 서버사이드 렌더링

• 서버에서 최종 HTML 을 생성해서 클라이언트에 전달한다.
• 주로 정적인 화면에 사용이 된다.
• 관련 기술 : JSP, 타임리프 (백엔드 개발자)

🔍 클라이언트 사이드 렌더링

• 웹 브라우저에서 서버측에 요청을 하면, 서버에서 빈 HTML을 내려주고, 자바스크립트를 하나 내려준다.
• 웹 브라우저가 자바스크립트를 서버에 요청을 하면 서버는 응답한다. (그 안에는 로직들이 다 들어있다. )
• 웹 브라우저가 HTTP API를 가지고 서버를 호출한다.
• 그럼 서버에서 해당 데이터를 내려주면 된다.

• HTML 결과를 자바스크립트를 사용해 웹 브라우저에서 동적으로 생성해서 적용한다.
• 주로 동적인 화면에 사용하며, 웹 환경을 마치 앱 처럼 필요한 부분부분 변경할 수 있다.
• 예) 구글 지도, Gmail, 구글 캘린더
• 관련 기술 : React, Vue.js (웹 프론트엔드 개발자)

---

✏️ 자바 백엔드 웹 기술 역사

🔍 자바 웹 기술 역사 -과거 기술

• 서블릿 - 1997
  • HTML 생성이 어려움
• JSP - 1999
  • HTML 생성은 편리하지만, 비즈니스 로직까지 너무 많은 역할을 담당
• 서블릿, JSP 조합 MVC 패턴 사용
  • 모델, 뷰, 컨트롤러로 역할을 나누어 개발
• MVC 프레임워크 춘추 전국 시대 -2000년 초 ~ 2010년 초
  • MVC 패턴 자동화, 복잡한 웹 기술을 편리하게 사용할 수 있는 다양한 기능을 지원
  • 스트럿츠, 웹워크, 스프링 MVC (과거 버전)

🔍 자바 웹 기술 역사 - 현재 사용 기술

• 애노테이션 기반의 스프링 MVC 등장
  • @Controller
  • MVC 프레임워크의 춘추 전국 시대 마무리
• 스프링 부트의 등장
  • 스프링 부트는 서버를 내장
  • 과거에는 서버에 WAS를 직접 설치하고, 소스는 War 파일을 만들어서 설치한 WAS에 배포
  • 스프링 부트는 빌드 결과 (Jar) 에 WAS 서버 포함 -> 빌드 배포 단순화
• Web Servlet - Spring MVC
• Wev Reactive - Spring WebFlux

🔍 자바 뷰 템플릿 역사 - HTML을 편리하게 생성하는 뷰 기능

• JSP
  • 속도 느림, 기능 부족
• 프리마커 (Freemarker), 벨로시티 (Velocity)
  • 속도 문제 해결, 다양한 기능
• 타임리프 (Thymeleaf)
  • 내추럴 템플릿 : HTML의 모양을 유지하면서 뷰 템플릿 적용 가능
  • 스프링 MVC와 강력한 기능 통합
  • 최선의 선택 , 단 성능은 프리마커, 벨로시티가 더 빠름

---

🔗출처

• 김영한 - 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술