강의목표
- Spring Framework를 사용하여 Web Application 만들기
- 1주차 목표: 네트워크 기초 강의
- Web Application의 구조와 네트워크 통신
- Web 전반의 이해를 돕기 위한 네트워크 기초지식
Web Application
Web Server
웹 서버는 HTTP 기반으로 동작하며 정적 리소스(HTML, CSS, JS, 이미지 등)를 제공한다.
💡 정적 리소스란 리소스가 이미 완성된 채로 서버에 존재하여 원본 그대로 응답하는 데이터
Web Server 구조

대표적인 Web Server
- NGINX
- Apache
WAS(Web Application Server)
HTTP 기반으로 동작하며 웹 서버의 기능을 포함한다. 추가적으로 코드를 실행해서 Application 로직을 수행하고 DB와 상호작용 하여 동적 컨텐츠를 생성한다.
WAS 구조

WAS 서버 내부 로직 수행 → DB와 상호작용
대표적인 Web Application Server
- Tomcat - Spring Boot에 내장되어 있다.
- Jetty
- Undertow
Web Server와 WAS(Web Application Server)의 차이점
- 실제로는 Web Server도 Application 로직을 포함할 수 있다.
- WAS는 Application 코드를 실행하는 것에 더욱 특화되어 있다.
- Java에서는 Servlet Container 기능을 제공하면 WAS 이다.
Web System 구성

☝️ WAS만 사용하는 경우
- WAS 가 너무 많은 역할을 담당한다.
- 실행에 가장 중요한 Application 로직이 정적 리소스로 인해 수행되지 않을 수 있다.
- WAS에 장애가 생기면 아무런 화면도 보여주지 못한다.
- 오류 페이지를 클라이언트에게 응답할 수 없다.

☝️ 실제 웹 시스템 구성
- 정적 리소스는 Web Server 에서 처리한다.
- Web Server는 Application 로직이 필요한 요청만을 WAS에 전달한다.
- 장점
- 효율적으로 리소스를 관리할 수 있다.
- 정적 자원이 많이 사용된다면 Web Server를 ScaleOut 한다.
- Application 관련 자원이 많이 사용된다면 WAS를 ScaleOut 한다.
- 오류 화면을 제공할 수 있다.
Servlet
HTTP 프로토콜 기반 요청(Request) 및 응답(Response)을 처리하는데 사용된다. Java에서 Servlet은 HTTPServlet 클래스를 상속받아 구현되며, 웹 어플리케이션 개발의 핵심 기술 중 하나이다.
Servlet의 역할
HTTP POST 요청으로 HTML Form 데이터를 전송하는 상황 예시
POST /api/users HTTP/1.1
Host: localhost:8080
Content-Type: application/x-www-form-urlencoded
userId=아이디&pssword=비밀번호
HTTP/1.1 200 OK
Content-Type: text/html;charset=UTF-8
Content-Length: 3423
<html>
<body>
...
</body>
</html>
- 서버에서 처리해야 하는 작업

- 서버와 TCP/IP 연결
- HTTP Request Message 필요한 형태로 변환하여 읽기
- HTTP Method 및 URL 분석
- HTTP Header 분석
- HTTP Message Body 읽기 및 변환
- 분석한 결과를 통해 프로세스 실행
- 비지니스 로직 실행
- HTTP Response Message 생성
- HTTP Start Line 생성
- Header 생성
- HTTP Message Body에 응답 데이터를 요청한 형식에 맞춰 응답
- 처리가 불가하다면 예외처리
- 응답 전달
- 연결 종료
- Servlet 을 지원하는 WAS를 사용한다면?
Servlet 동작순서
⭐️ localhost:8080/example HTTP API를 호출하면 일어나는 일
Servlet 예시 코드 (지금은 이와같이 사용하지 않음)
@WebServlet(name="ExampleServlet", urlPatterns = "/exmaple")
public class ExampleServlet extends HttpServlet {
@Override
protected void service(
HttpServletRequest request,
HttpServletResponse response
) {
}
}
- Servlet 동작 순서

- WAS는 HTTP 요청 메세지를 기반으로 새로운 Request, Response 객체 생성
- WAS는 만들어진 Request, Response 객체를 서블릿 컨테이너에 넘겨주며 ExampleServlet 객체 호출
- ExampleServlet에서 비지니스 로직 처리
- 응답에 필요한 정보를 개발자가 입력
- WAS는 Response 객체 정보(개발자가 입력한 정보)로 HTTP 응답 메세지 생성
개발자가 하는 일
- Request 객체에 담겨져있는 HTTP 요청 정보를 꺼내서 사용
- 생성된 Response 객체에 HTTP 응답 정보를 입력
Servlet Container
Servlet을 지원하는 WAS 내부에는 서블릿 컨테이너가 있다. 서블릿 컨테이너는 서블릿을 초기화, 생성, 관리, 호출, 종료하는 역할을 수행
Servlet의 생명주기
- Servlet은 서블릿 컨테이너가 생성 및 관리한다.
- WAS(서블릿 컨테이너 포함)가 종료될 때 Servlet도 함께 종료된다.
Servlet 객체 생성시점
- 개발자가 직접 인스턴스화 하여 사용하는 것이 아닌, 코드만 작성하면 서블릿 컨테이너가 생성한다.
Servlet Container 가 하는 일
- Servlet 객체를
싱글톤으로 관리
- 동시 요청에 대한 처리를 위해 Multi Thread를 지원
✏️ 싱글톤이란?
객체를 하나만 생성하여 생성된 인스턴스를 공유하여 사용하는 것을 의미한다. 특정 클래스의 인스턴스가 여러개 생성되지 않도록 하여 자원의 낭비를 방지하고, 인스턴스를 공유함으로써 상태를 일관되게 유지하기 위함이다. 하지만, 공유 변수 사용을 주의해야 한다.
Thread
애플리케이션 코드를 하나하나 순차적으로 실행하는 것, 하나의 Thread는 한번에 하나의 코드 라인만 수행한다. 만약 동시 처리가 필요하다면 Thread를 추가적으로 생성해야 한다. ⇒ 일꾼
단일 요청 - Single Thread

동시 요청 - Single Thread

- Thread를 사용하기 위해 작업이 끝날때 까지 대기한다.
- 요청이 모두 사라질 때 까지 (대기 → 작업 수행 → 스레드 반환)작업을 반복한다.
- 만약, 첫번째 요청의 작업이 지연되거나 Error가 발생한다면? 👉 모든 요청이 Time out 오류가 발생한다.

Multi Thread
여러개의 Thread를 생성해서 사용하면 된다. WAS는 동시 요청에 대한 처리를 위해 Multi Thread를 지원한다.
동시 요청 - Multi Thread
1. 요청마다 새로운 Thread 생성

- 요청이 들어올 때 마다 Thread를 생성한다.
- 장점
- 동시 요청을 처리할 수 있다.
- 하나의 Thread에 지연등의 문제가 발생하여도 나머지 Thread는 정상적으로 동작한다.
- 단점
- Thread 생성에 제한이 없고 생성 비용이 높다.
- 수많은 동시 요청이 발생하면 리소스(Memory, CPU 등) 부족으로 서버가 다운된다.
- Thread를 사용하면
Context Switching 비용이 발생한다.
▶︎ Context Switching
백그라운드 프로세스에서 실행 중인 작업들은 모두 동시에 수행하는 것처럼 보이지만 사실 엄청나게 짧은 시간 안에 수십, 수천 번 실행할 프로세스를 교체하고 있는 것이다.

Task1에서 Task2로 Task2에서 Task1로 교체되는 시점마다 Task1이 Ready 상태로 돌아간다는 정보, 진행정보, Task2는 어디부터 작업을 시작하면 되는지에 대한 정보들을 로딩할 시간이 필요 → 이 순간의 시점이 Context Switching
2. Thread Pool

- 요청이 들어오면 Thread Pool에서 Thread를 받아 사용한다.
- 사용 완료된 Thread는 Thread Pool에 반납한다.
- Thread Pool에 존재하는 Thread가 모두 사용 중이라면 Thread가 생길 때까지 대기하거나 거절할 수 있다.(예: 대기 순번)
SSR(Server Side Rendering)
서버에서 동적으로 HTML을 만들어 클라이언트에게 제공하는 기술로 백엔드 개발자 영역에 속한다. Java에서는 JSP, Thymeleaf가 대표적으로 사용된다.
SSR 동작 흐름

1. 서버(WAS)에 HTML을 요청
2. 서버(WAS)에서 로직을 거친 후 DB를 조회
SSR의 장단점
- 장점
- 초기 페이지 로드 시 서버에서 완전히 렌더링된 HTML을 반환하여 첫 페이지 로딩이 빠르다.
- 검색 엔진 크롤러가 완전한 HTML을 즉시 수집할 수 있어
SEO에 유리하다.
ex) 전자상거래 사이트, 뉴스 사이트
- 단점
- 모든 요청에 대해 서버가 페이지를 렌더링해야 하므로, 높은 트래픽 상황에서 서버의 부하가 크게 증가할 수 있다.
- 초기 페이지 이외의 페이지들도 렌더링 후 반환되기 때문에 속도가 느리다.
SEO(Search Engine Optimization): 검색 엔진에서 상위에 노출될 수 있도록 최적화하는 과정
CSR(Client Side Rendering)
웹 브라우저에서 자바스크립트를 사용해 동적으로 HTML을 생성해서 적용하는 기술로 웹을 모바일앱처럼 부분부분 변경할 수 있게 해준다. 프론트엔드 개발자 영역에 속하는 React, Vue가 대표적으로 사용된다.
CSR 동작 흐름

1. HTML을 요청한다. 비어있는 HTML을 응답받는다. JS가 존재하는 주소 링크를 응답한다.
2. 자바스크립트(클라이언트 로직, 렌더링 포함)를 요청한다.
3. HTTP API 요청을 하고 화면에 필요한 데이터를 JSON 형태(JSON이 아니어도됨)로 응답받는다.
4. 응답받은 JSON 데이터로 HTML을 동적으로 그린다.
CSR의 장단점
- 장점
- 클라이언트 측에서 렌더링하므로 사용자 인터랙션(상호작용)에 빠르게 반응할 수 있습니다.
- 초기 로딩 후에는 서버와의 통신 없이 빠르게 페이지 간 전환이 가능합니다.
ex) Google Map, SNS Application
- 단점
- 초기 로딩 시 필요한 모든 자바스크립트 파일을 다운로드하고 실행해야 하므로, 초기 로딩 시간이 길다.
- 검색 엔진 크롤러가 자바스크립트를 제대로 실행하지 못하면 SEO에 불리할 수 있다.
마무리
- 네트워크 통신은 HTTP로 이루어진다.
- HTTP는 무상태 프로토콜이며 비연결성 특징을 가지고 있다.
- HTTP Message 구조
- HTTP Method
- 상태코드
- HTTP Header
- HTTP API는 Restful 하게 설계해야 한다. 최소 성숙도 레벨 2를 지켜야 한다.
- Servlet은 Java에서 Request, Response를 쉽게 다루게 해주는 객체이다.
- Servlet Container는 Servlet 객체를 싱글톤으로 관리한다.
- WAS는 다중 요청 처리를 위해 Multi Thread를 지원한다.
- SSR 방식은 서버에서 동적인 페이지를 완성하여 응답한것을 브라우저에서 화면을 출력한다.
- CSR은 HTTP API 통신으로 얻은 결과를 통해 브라우저에서 동적으로 화면을 출력한다.