본문 바로가기
카테고리 없음

웹 애플리케이션 이해 : 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술

by CSEGR 2024. 5. 7.
728x90

인프런 김영한 님의 "스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술" 강의를 듣고 리뷰한 포스팅입니다. 

웹 서버, 웹 애플리케이션 서버 
웹 -  HTTP 기반 통신

1. 웹 클라이언트는 브라우저에서 URL을 검색하면 인터넷을 통해서 서버에 접근을 한다. 

2. 서버는 HTML을 클라이언트에게 보낸다.

3. 서버가 보내준 HTML이 웹브라우저에 보여짐.

➔ 이때, (서버  -> 클라이언트 ), (클라이언트 -> 서버) 사이에 요청 응답을 할 때 HTTP 프로토콜을 기반으로 동작을한다. 

 

✌🏻 모든 것이 HTTP 

- HTML, TEXT

- IMAGE, 음성, 영상, 파일

- JSON, XML(API) 

등등 거의 모든 형태의 데이터 전송이 가능하다. 

심지어, 서버간에 데이터를 주고 받을 때도 대부분 HTTP를 사용한다. 

 

웹 서버(Web Server)

  • HTTP 기반으로 동작
  • 정적 리소스 제공, 기타 부가기능
  • 정적(파일) HTML, CSS, JS, 이미지, 영상
  • ex) NGINX, APACHE
웹 애플리케이션 서버(WAS - Web Application Server)

  • HTTP 기반으로 동작
  • 웹 서버 기능 포함 + 정적 리소스 제공 가능
  • 프로그램 코드를 실행해서 애플리케이션 로직 수행 ((↔️웹 서버 와의 차이점))
    - 동적 HTML, HTTP API(JSON)
    - 서블릿, JSP, 스프링 MVC
  • ex) Tomcat, Undertow

웹 서버 vs 웹 어플리케이션 서버
  • 웹 서버는 정적 리소스(파일), WAS는 애플리케이션 로직
    - 웹 서버도 프로그램을 실행하는 기능을 포함하기도 함. 
    - 웹 어플리케이션 서버도 웹 서버의 기능을 제공함
  • WAS는 어플리케이션 코드를 실행하는데 더 특화되어 있다. 
웹 시스템 구성 - WAS, DB

  • WAS, DB 만으로 시스템 구성 가능
    -> WAS는 정적 리소스, 애플리케이션 로직 모두 제공이 가능하기 때문이다. 

BUT!!! WAS 가 너무 많은 역할을 담당해서, 서버 과부하가 우려된다. 

또한, WAS 장애시 오류 화면도 노출 불가능하다. 

⬇︎  ⬇︎  ⬇︎  ⬇︎

웹 시스템 구성 - WEB, WAS, DB

  • 정적 리소스는 웹 서버가 처리 
  • 동적 처리는 웹 어플리케이션 서버(WAS)가 처리 
  • 즉, 웹 서버는 애플리케이션 로직같은 동적인 처리가 필요하면 WAS에 요청을 위임함

⇒ 효율적인 리소스 관리가 가능하다. 

    ex)   - 정적 리소스가 많이 사용되면 Web 서버 증설

            - 애플리케이션 리소스가 많이 사용되면 WAS 증설

 

⇒ WAS, DB 장애시 Web 서버가 오류 화면을 제공할 수 있다. 

      - 정적 리소스만 제공하는 web서버는 잘 죽지 않지만, 애플리케이션 로직이 동작하는 WAS 서버는 잘 죽는다. 

 

서블릿(Servlet)

 

  • Servlet : 의미 있는 비즈니스 로직을 제외한 로직들을 지원해주는(자동화) 기능 

  • urlPatterns(/hello)의 URL이 호출되면 서블릭 코드가 실행
  • HTTP 요청 정보를 편리하게 이용할 수 있는 HttpServletRequest
  • HTTP 응답 정보를 편리하게 제공할 수 있는 HttpServletResponse

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

 

1. 클라이언트가 localhost:8080/hello 요청을 보냄.

2. WAS 서버는 이 요청 메세지를 기반으로 request, response 객체를 새로 만듬.

3. HelloServlet에 request, response 객체를 파라미터로 보내서 helloServlet 실행

4. Response 객체 정보로 HTTP 응답 생성

5. HTTP 응답을 클라이언트로 보냄.

 

정리하자면, 

HTTP 요청시, 

  • WAS는 Request, Response 객체를 새로 만들어서 서블릿 객체 호출
  • 개발자는 Request 객체에서 HTTP 요청 정보를 편리하게 꺼내서 사용
  • 개발자는 Response 객체에 HTTP 응답 정보를 편리하게 입력
  • WAS는 Response 객체에 담겨있는 내용으로 HTTP 응답 정보를 생성 
서블릿 - 서블릿 컨테이너
  • Tomcat 처럼 서블릿을 지원하는 WAS를 서블릿 컨테이너라고 함.
  • 서블릿 컨테이너는 서블릭 객체를 생성, 초기화, 호출, 종료하는 생명주기를 관리한다.
  • 서블릭 객체는 싱글톤으로 관리함. 
    - 고객의 요청이 올 때 마다 계속 객체를 생성하는 것은 비효율 적이므로, 최초 로딩 시점에 서블릿 객체를
       미리 만들어두고 재활용한다. 즉, 모든 고객 요청은 동일한 서블릿 객체 인스턴스에 접근하며 서블릿 컨테이너
       종료시 함께 종료한다. 
    - 공유 변수 사용 주의
  • 동시 요청을 위한 멀티 쓰레드 처리 지원 

 

동시 요청 - 멀티 쓰레드 

 

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

 

단일 요청 - 쓰레드 하나 사용

 

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

----> 쓰레드를 기다리다가 서버가 죽어버린다... 

요청 마다 쓰레드 생성

요청 마다 쓰레드 생성

장점 )

  • 동시 요청을 처리할 수 있음
  • 리소스(CPU, 메모리)가 허용할 때 까지 처리 가능
  • 하나의 쓰레드가  지연 되어도, 나머지 쓰레드는 정상 동작함.

단점 ) 

  • 쓰레드는 생성 비용이 매우 비싸다
  • 고객의 요청이 올 때 마다 쓰레드를 생성하면, 응답 속도가 늦어진다. 
  • 쓰레드는 context switching 비용이 발생한다. 
  • 쓰레드 생성에 제한이 없어서 고객 요청이 너무 많이 오면 CPU/Memory 임계점을 넘어서 서버가 죽을 수 있음.
쓰레드 풀 

: 요청 마다 쓰레드 생성의 단점을 보완하기 위한 자원

쓰레드풀

특징)

  • 필요한 쓰레드를 쓰레드 풀에 보관하고 관리한다. 
  • 쓰레드 풀에 생성 가능한 쓰레드의 최대치를 설정 및 관리 함. 
  • 쓰레드가 필요하면, 이미 생성되어 있는 쓰레드를 쓰레드 풀에서 꺼내서 사용한다. 
  • 사용을 종료하면 쓰레드 풀에 해당 쓰레드를 반납한다. 
  • 최대 쓰레드가 모두 사용중이어서 쓰레드 풀에 쓰레드가 없으면? 
    Ans ) 기다리는 요청을 거절하거나 특정 숫자만큼만 대기하도록 설정할 수 있음. 

장점) 

  • 쓰레드가 미리 생성되어 있으므로, 쓰레드를 생성하고 종료하는 비용(CPU)이 절약되고, 응답 시간이 빠르다.
  • 생성 가능한 쓰레드의 최대치가 있으므로 너무 많은 요청이 들어와도 기존 요청은 안전하게 처리할 수 있다. 
WAS 의 멀티 쓰레드 지원
  • 멀티 쓰레드에 대한 부분은 WAS 가 처리
  • 개발자가 멀티 쓰레드 관련 코드를 신경쓰지 않아도 됨.
  • 개발자는 마치 싱글 쓰레드 프로그래밍을 하듯이 편리하게 소스 코드를 개발
  • 멀티 쓰레드 환경이므로 싱글톤 객체(서블릿, 스프링 빈)은 주의해서 사용
HTML, HTTP API, CSR, SSR

 

정적 리소스 

: 고정된 HTML 파일, CSS, JS, 이미지, 영상 등을 제공

HTML 파일

: 동적으로 필요한 HTML 파일을 생성해서 전달

- 웹 브라우저는 HTML 을 해석하는 역할을 한다. 

HTTP API

: HTML이 아니라 데이터를 전달

  • 주로 JSON 형식의 데이터 
  • 다양한 시스템에서 호출

 

  • 다양한 시스템에서 호출
  • 데이터만 주고 받음, UI 화면이 필요하면, 클라이언트가 별도 처리
  • 앱, 웹 클라이언트, 서버 to 서버
Server Side Randering (SSR) 

= 서버 사이드 렌더링

  • HTML 최종 결과를 서버에서 만들어서 웹 브라우저에 전달 
  • 주로 정적인 화면에 사용

관련 기술  ex) JSP, 타임 리프

 

Client Side Randering (CSR)

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

  • HTML 결과를 자바스크립트를 사용해 웹 브라우저에서 동적으로 생성해서 적용
  • 주로 동적인 화면에 사용, 웹 환경을 마치 앱 처럼 필요한 부분부분 변경할 수 있음

ex) 구글 지도, Gmail, 구글 캘린더 

관련 기술 : React, Vue.js

클라이언트 사이드 렌더링

1. 웹 브라우저가 서버로 HTML 요청을 보낸다. & 텅 빈 HTML 과 자바스크립트 코드를 줌 

2. 웹 브라우저 -----자바 스크립트 요청----> 서버   &

     웹 브라우저 <------- 자바 스크립트 ( 클라이언트 로직, HTML 렌더링 코드 ----- 서버

3. 웹 브라우저 ----- HTTP API ------> 서버 : 데이터 요청 

    웹 브라우저 <---- 요청받은 데이터 ---- 서버 : 데이터 응답

4. 자바 스크립트로 웹 브라우저에서 HTML 결과 렌더링

 

 

728x90