01. 웹 플리케이션 이해

웹은 HTTP 기반이다.

HTTP로 거의 모든 형태의 데이터 전송 가능.

 

웹 서버(Web Server)

•  HTTP 기반으로 동작

• 정적 리소스 제공, 기타 부가기능

• 정적(파일) HTML, CSS, JS, 이미지, 영상

• 예) NGINX, APACHE

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

• HTTP 기반으로 동작

• 웹 서버 기능 O (정적 리소스 제공 가능)

• 프로그램 코드를 실행하여 애플리케이션 로직 수행

   • 동적 HTML, HTTP API(JSON)

   • 서블릿, JSP, 스프링 MVC

• 예) 톰캣(Tomcat) Jetty, Undertow

 

구분은?

자바는 서블릿 컨테이너 기능을 제공하면 WAS

WAS는 애플리케이션 코드를 실행하는데 특화.

웹 서버는 정적리소스 제공, WAS는 애플리케이션 로직 제공

 

 

웹 시스템 구성 - WAS, DB

• 이 둘만으로 웹 시스템 구성 가능.
• WAS는 정적 리소스, 애플리케이션 로직 모두 제공 가능
• WAS가 너무 많은 역할을 담당하면 서버가 과부하에 걸릴 수 있다
• 가장 비싼 애플리케이션 로직이 정적 리소스 때문에 수행이 어려울 수 있다

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

• 정적 리소스는 웹 서버가 처리

• 웹 서버는 애플리케이션 로직같은 동적인 처리가 필요하면 WAS에 요청을 위임

• WAS는 중요한 애플리케이션 로직 처리 전담

 

• 효율적인 리소스 관리가 가능.

• 정적 리소스가 많이 사용 -> Web 서버 증설

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

 

서블릿

서블릿은 초록색 부분 말고 모두 자동화해줌

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

/hello의 URL이 호출되면 서블릿 코드 실행.

HttpServletRequest : HTTP 요청 정보를 편리하게 사용

HttpServletResponse : HTTP 응답 정보를 편리하게 제공

 

 HTTP 요청시

• WAS는 Request, Response 객체를 새로 만들어서 서블릿 객체 호출

• 개발자는 Request 객체에서 HTTP 요청 정보를 편리하게 꺼내서 사용

• 개발자는 Response 객체에 HTTP 응답 정보를 편리하게 입력

• WAS는 Response 객체에 담겨있는 내용으로 HTTP 응답 정보를 생성

 

 

서블릿 컨테이너

서블릿 컨테이너는 서블릿 객체를 생성, 초기화, 호출, 종료하는 생명주기 관리

동시 요청을 위한 멀티 쓰레드 처리 지원

서블릿 객체는 싱글톤으로 관리.

 

 

동시 요청 - 멀티 쓰레드

 

쓰레드

애플리케이션 코드를 하나하나 순차적으로 실행

한번의 하나의 코드라인 씩 수행

동시 처리 필요시 쓰레드 추가 생성.

 

장점

• 동시 요청을 처리할 수 있다.

• 리소스(CPU, 메모리)가 허용할 때 까지 처리가능

• 하나의 쓰레드가 지연 되어도, 나머지 쓰레드는 정상 동작한다. 

단점

• 쓰레드는 생성 비용은 매우 비싸다.

• 고객의 요청이 올 때 마다 쓰레드를 생성하면, 응답 속도가 늦어진다.

• 쓰레드는 컨텍스트 스위칭 비용이 발생한다.  

• 쓰레드 생성에 제한이 없다.

->고객 요청이 너무 많이 오면, CPU, 메모리 임계점을 넘어서 서버가 죽을 수 있다.

 

쓰레드 풀

• 쓰레드가 필요할 때 쓰레드 풀에 요청 후  생성된 쓰레드를 사용
• 사용을 종료하면 사용한 쓰레드를 반납

특징

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

• 장점
  • 쓰레드가 미리 생성되어 있으므로, 쓰레드를 생성하고 종료하는 비용(CPU)이 절약되고, 응답 시간이 빠르다
  • 생성 가능한 쓰레드의 최대치가 있으므로 너무 많은 요청이 들어와도 기존 요청은 안전하게 처리할 수 있다

 

WAS의 멀티 쓰레드 지원

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

정적 리소스

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

HTML 페이지

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

WAS가 주문정보 조회 후 동적으로 HTML 생성-> 이 HTML을 웹 브라우저가 받아 해석해 보여줌.

 

HTTP API

• HTML이 아니라 데이터를 전달
• 주로 JSON 형식 사용
• 다양한 시스템에서 호출

 

주문 정보 조회 후 JSON 데이터를 생성해 보여줌, 웹 브라우저가 아니라 다양한 시스템에서 사용.

 

• 주로 JSON 형태로 데이터 통신
• 앱 클라이언트 : 데이터를 받아 앱의 UI 컴포넌트를 사용해 뷰 제공
• 웹 클라이언트 : 데이터를 받아 웹 클라이언트 (React, Vue.js )를 사용해 뷰 제공

 

백엔드는 정적 리소스, HTML 페이지, HTTP API의 제공 방에 대해 고민.

 

 

서버사이드 렌더링

• SSR - 서버 사이드 렌더링
  • HTML 최종 결과를 서버에서 전부 만들어서 웹 브라우저에 전달
  • 주로 정적인 화면에 사용

클라이언트 사이드 렌더링

• CSR - 클라이언트 사이드 렌더링
  • HTML 결과를 자바스크립트를 사용해 웹 브라우저에서 동적으로 생성해서 적용
  • 주로 동적인 화면에 사용, 웹 환경을 마치 앱처럼 필요한 부분부분 변경할 수 있음
  • 네이버 지도, 구글 지도 등에서 사용
  • 웹 프론트엔드에서 주로 사

백엔드 개발자 입장에서 UI 기술(어디까지 알아야 되지..?)

• 백엔드 - 서버 사이드 렌더링 기술
  • JSP, 타임리프 사용
  • 화면이 정적이고, 복잡하지 않을 때 사용
  • 백엔드 개발자는 서버 사이드 렌더링 기술 학습 필수
• 웹 프론트엔드 - 클라이언트 사이드 렌더링 기술
  • React, Vue.js
  • 복잡하고 동적인 UI 사용
  • 웹 프론트엔드 개발자의 전문 분야
• 선택과 집중
  • 백엔드 개발자의 웹 프론트엔드 기술 학습은 옵션
  • 백엔드 개발자는 서버, DB, 인프라 등등 수 많은 백엔드 기술을 공부해야 한다(끝이 없다..)
  • 웹 프론트엔드도 깊이있게 잘 하려면 숙련에 오랜 시간이 필요하다

-> 잘 맞는 기술을 찾아 집중적으로 학습하고 남는 시간에 다른 기술을 학습하자.