웹 애플리케이션의 이해

본 포스팅은 인프런 - 스프링 MVC 1편을 강의를 바탕으로 공부하고 정리한 글입니다.

 

HTTP

---

클라이언트가 서버로 데이터를 전달할때, 서버가 클라이언트에 응답을 보낼때 모두 HTTP 프로토콜을 기반으로 동작한다.

웹은 모든 것이 HTTP 프로토콜을 기반으로 거의 모든 형태의 데이터 전송이 가능하다.

• HTML, TEXT
• 이미지, 음성, 영상, 파일
• JSON, XML (API)

 

 

서버

---

웹 서버

• HTTP 기반으로 동작하는 서버
• 정적 리소스를 제공, 기타 부가 기능
  • 정적 리소스 : 정적(파일) HTML, CSS, JS, 이미지, 영상
• 정적인 파일을 주고 받는다.
• 예 : NGINX, APACHE

 

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

• Web Application Server
• HTTP 기반으로 동작하는 서버
• 웹 서버의 기능 포함 + (정적 리소스 제공 가능)
• 프로그램 코드를 실행해서 애플리케이션 로직을 수행할 수 있다.
  • 동적 HTML, HTTP API(JSON)
  • 서블릿, JSP, 스프링 MVC → WAS에서 동작함
• 예) 톰캣, Jetty, Undertow

 

💡 웹 서버 vs WAS 차이점 

• 웹 서버는 정적 리소스(파일)를 제공하는 서버, WAS는 애플리케이션 로직까지 실행하는 서버이다.
• 사실 둘의 용어 경계가 모호하다.
  • 웹 서버도 프로그램을 실행하는 기능을 포함하기도 한다.
  • 웹 애플리케이션 서버도 웹 서버의 기능을 제공한다.
  • 자바의 경우 보통 서블릿 컨테이너 기능을 제공하면 WAS라 하지만, 서블릿 없이 자바코드를 실행하는 서버 프레임워크도 있어 애매하다.

• 그냥 WAS가 애플리케이션 코드를 실행하는데 더 특화되어 있다고 생각하자!

 

 

웹 시스템 구성

---

WAS, DB

• WAS, DB 만으로 최소한의 시스템 구성이 가능하다.
• WAS가 정적 리소스, 애플리케이션 로직 모두 제공이 가능하기 때문이다.
• 문제점
  • WAS가 너무 많은 역할을 담당하게 된다.
    • 서버 과부하 우려
    • 가장 비싼 애플리케이션 로직이 정적 리소스 때문에 수행이 어려울 수 있다.
  • WAS에 장애가 발생하면 오류 화면 노출이 불가능하다.

따라서 웹 서버와 함께 시스템을 구성하는 것이 좋다.

 

WEB, WAS, DB

• 정적 리소스는 웹 서버가 처리
• 웹 서버는 애플리케이션 로직같은 동적인 처리가 필요하면 WAS에 요청을 위임한다.
• 장점
  • 업무 분담 가능
    • WEB : 단순 정적 파일 제공, 필요 시 WAS 호출 전담
    • WAS : 중요한 어플리케이션 로직 처리를 전담
  • 효율적인 리소스 관리 가능
    • 정적 리소스가 많이 사용되면 웹 서버 증설
    • 애플리케이션 리소스가 많이 사용되면 WAS 증설
  • WAS, DB에 장애가 발생해도 웹 서버는 살아 있기 때문에 오류 화면 제공 가능
    • 정적 리소스만 제공하는 웹 서버는 잘 죽지 않음
    • 애플리케이션 로직이 동작하는 WAS는 잘 죽음 

 

 

서블릿

---

예를 들어 웹 브라우저에서 HTML Form 데이터를 전달하며 POST 요청을 보낸다고 했을 때, 웹 브라우저는 요청 HTTP 메세지를 생성해 서버에 전달할 것이다.

 

만약 웹 애플리케이션 서버(WAS)를 직접 구현할 경우, 요청을 받은 서버는 다음과 같은 업무를 처리해야 한다.

• 서버 TCP/IP 연결 대기, 소켓 연결 
• HTTP 요청 메세지를 파싱해서 읽기
• POST 방식, /save URL 인지
• Content-Type 확인
• HTTP 메세지 바디 내용 파싱
  • username, age 데이터를 사용할 수 있도록 파싱
• 저장 프로세스 실행
• 비즈니스 로직 실행
  • 데이터베이스에 저장 요청
• HTTP 응답 메세지 생성 시작
  • HTTP 시작 라인 생성
  • 헤더 생성
  • 메세지 바디에 HTML 생성, 입력
• TCP/IP에 응답 전달, 소켓 종료

 

단순히 이름과, 나이를 가지고 데이터를 저장하는 것임에도 불구하고 과정이 너무 복잡한 것을 알 수 있다.

조금 더 효율적인 처리를 위해 서블릿 등장하게 되었다.

 

위와 똑같은 상황일 때 서블릿을 지원하는 WAS를 사용하면, 비즈니스 로직 실행을 제외한 모든 업무를 서블릿이 자동으로 처리해준다.

• 서버 TCP/IP 연결 대기, 소켓 연결 
• HTTP 요청 메세지를 파싱해서 읽기
• POST 방식, /save URL 인지
• Content-Type 확인
• HTTP 메세지 바디 내용 파싱
  • username, age 데이터를 사용할 수 있도록 파싱
• 저장 프로세스 실행
• 비즈니스 로직 실행
  • 데이터베이서에 저장 요청
• HTTP 응답 메세지 생성 시작
  • HTTP 시작 라인 생성
  • 헤더 생성
  • 메세지 바디에 HTML 생성, 입력
• TCP/IP에 응답 전달, 소켓 종료

 

특징

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

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

 

동작(요청, 응답) 흐름

• HTTP 요청시
  • WAS는 request, response 객체를 새로 만들어 서블릿 객체를 호출한다.
    • 개발자는 request 객체에서 HTTP 요청 정보를 편리하게 꺼내서 사용할 수 있다.
    • 개발자는 response 객체에서 HTTP 응답 정보를 편리하게 입력할 수 있다.
  • WAS는 response 객체에 담겨있는 내용으로 HTTP 응답 정보를 생성해 웹 브라우저로 전달한다.

 

서블릿 컨테이너

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

 

 

쓰레드

---

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

 

단일 쓰레드

• 요청1이 와서 쓰레드를 할당하고 코드를 실행하는데 어떠한 이유로 처리가 지연되고 있다고 했을 때
• 지연되고 있는 동시에 요청2가 오면 쓰레드가 이미 사용 중이기 때문에 요청 2는 쓰레드를 대기해야 한다.
• 요청1, 요청2 모두 처리가 지연된다.

 

멀티 쓰레드

• 요청1이 쓰레드를 사용중인 상황에서 요청2가 오면 쓰레드를 새로 하나 생성한다.
• 요청 1의 처리가 지연되고 있어도 요청2는 새로운 쓰레드를 통해 코드를 실행하기 때문에 같은 서블릿 객체를 호출해도 상관이 없다.
• 위와 같이 멀티쓰레드 사용시 요청이 올때마다 쓰레드를 생성한다.

 

💡 멀티 쓰레드의 장단점 

• 장점
  • 동시 요청을 처리할 수 있다.
  • 리소스(CPU, 메모리)가 허용할 때 까지 처리 가능
  • 하나의 쓰레드가 지연되도, 나머지 쓰레드는 정상 동작한다.
• 단점
  • 쓰레드 생성 비용이 매우 비싸다.
  • 고객의 요청이 올 때마다 쓰레드를 생성하면, 쓰레드 생성 시간만큼  응답 속도가 늦어진다.
  • 쓰레드는 컨텍스트 스위칭 비용이 발생한다.
    • 컨텍스트 스위칭 비용 : CPU 코어 수 만큼 쓰레드가 돌아가게 되는데, 이때 코어 하나 당 하나를 실행한다. 하나 실행 이후 다른 것을 실행하기 위해 전환할때 비용이 발생한다.
  • 쓰레드 생성에 제한이 없다.
    • 고객 요청이 너무 많이 오면 CPU, 메모리 임계점을 넘어 서버가 죽을 수 있다.

 

쓰레드 풀

• 멀티 쓰레드의 무한한 생성을 막기 위해 쓰레드 풀을 사용한다.
• 특징
  • 필요한 쓰레드를 쓰레드 풀에 미리 생성해 보관하고 관리한다.
  • 쓰레드 풀에 생성 가능한 최대치의 쓰레드를 관리 (톰캣은 최대 200개가 기본 설정, 변경 가능)
• 사용
  • 쓰레드가 필요하면 이미 생성되어 있는 쓰레드를 쓰레드 풀에서 꺼내서 사용한다.
  • 쓰레드 사용이 끝나면 쓰레드 풀에 해당 쓰레드를 다시 반납한다.
  • 최대 쓰레드가 모두 사용중이라 쓰레드 풀에 쓰레드가 없다면?
    • 나머지 요청들은 대기하거나 거절된다.
    • 특정 숫자만큼만 대기하도록 설정
•  장점 
  • 쓰레드가 미리 생성되어 있어, 쓰레드를 생성하고 종료하는 비용(CPU)이 절약되고, 응답 시간이 빠르다.
  • 생성 가능한 쓰레드의 최대치가 있으므로 너무 많은 요청이 들어와도 기존 요청은 안전하게 처리할 수 있다.

 

⭐️ 실무 팁

• WAS의 주요 튜닝 포인트는 최대 쓰레드 수이다.
• 너무 낮게 설정하면?
  
  • 동시 요청이 많을 경우, 서버 리소스(CPU)는 여유롭지만, 클라이언트는 금방 응답이 지연되는 현상 발생
• 너무 높게 설정하면? 
  • 동시 요청이 많을 경우, CPU와 메모리 리소스 임계점 초과로 서버가 다운되는 현상 발생
• 장애 발생시?
  • 클라우드면 일단 서버부터 늘리고, 이후에 튜닝한다.
  • 클라우드가 아니면 열심히 튜닝한다.
• 쓰레드 풀의 적정 숫자는 어떻게 찾나요?
  • 어플리케이션 로직의 복잡도, CPU, 메모리, IO 리소스 상황에 따라 적정 숫자는 모두 다르다.
  • 성능테스트를 해야함 !
    • 최대한 실제 서비스와 유사한 환경으로 성능 테스트를 시도
    • 툴 : 아파치 ab, 제이미터, nGrinder
      

 

WAS의 멀티 쓰레드 지원

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

 

 

데이터 통신

---

정적 리소스

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

 

HTTP API

• HTML이 아니라 데이터를 전달
• 주로 JSON 형식으로 데이터 통신
• 다양한 시스템에서 호출한다.
• 데이터만 주고 받으며, UI 화면이 필요하면 클라이언트가 별도로 처리한다.
• 앱, 웹 클라이언트, 서버 to 서버 통신에서 사용한다.

 

SSR, CSR

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

 

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

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

 

❓ UI기술 어디까지 알아야 할까

• 백엔드 개발자 - 서버 사이드 렌더링(SSR)
  • JSP, 타임리프
  • 화면이 정적이고, 복잡하지 않을 때 사용
  • 백엔드 개발자는 서버 사이드 렌더링 기술 학습이 필수이다.
• 웹 프론트엔드 - 클라이언트 사이드 렌더링(CSR)
  • React, Vue.js
  • 복잡하고 동적인 UI 사용
  • 웹 프론트엔드 개발자의 전문 분야
• 선택과 집중이 필요!
  • 백엔드 개발자의 웹 프론트엔드 기술 학습은 옵션이다.