Spring 1일차(1)

Spring을 하기 전에 웹 주요 구성 요소를 살펴보자

 

웹의 주요 구성 요소

클라이언트

웹 브라우저처럼 서버에 요청을 보내는 프로그램

 

서버

클라이언트 요청에 따라 데이터를 응답해 주는 컴퓨터

 

HTTP 프로토콜

클라이언트 - 서버 간에 데이터를 주고받는 기본 통신 규약

어떻게 통신하는 지, 어떤 방식으로 요청/응답이 이루어지는지를 정의한다.

HTTP에 보안 기능을 추가한 HTTPS 버전도 존재한다.

 

기본 동작 흐름

사용자가 브라우저에 주소를 입력하면 브라우저는 HTTP 요청을 보낸다.

서버가 요청을 받아 처리한 뒤 응답을 보낸다.

브라우저는 서버가 보낸 요청을 응답받아 응답 데이터 바탕으로 화면을 출력한다.

 

HTTP 요청의 구성

요소	설명	예시
요청 메서드	어떤 동작을 할 것인가	GET, POST, PUT, DELETE 등
요청 URL	어떤 리소스를 요청하는가	/users/123
헤더	요청 정보 포함	인증 토큰. 브라우저 정보
본문	전송할 데이터	JSON, Form 데이터 등

 

HTTP 응답의 구성

요소	설명	예시
상태 코드	처리 결과	200, 404, 500 등
헤더	응답 정보 포함	콘텐츠 타입, 쿠키 등
본문	클라이언트에게 보낼 데이터	HTML, JSON 등

 

웹 페이지

웹 페이지 HTML, CSS, JS 등으로 구성된 문서로 사용자가 보는 화면

 

클라이언트와 서버의 통신 흐름

웹 애플리케이션은 클라이언트와 서버의 요청-응답 모델로 동작한다.

클라이언트는 사용자 인터페이스를 담당하고, 서버는 데이터 처리와 응답을 담당하낟.

사용자가 어떤 행동을 하면 요청이 발생되고 서버가 그에 맞는 응답을 보내는 구조이다.

 

사용자가 브라우저에서 URL 입력하면, 브라우저가 HTTP 요청을 생성한 후 DNS를 통해 서버 IP 조회한다.

서버에서 보낸 수신 하면 HTTP 응답을 반환하고 브라우저 화면에 렌더링 한다.

 

웹 서버(WEB Server)

클라이언트의 HTTP 요청에 따라 정적 콘텐츠(HTML, 이미지, CSS 파일 등)를 제공하는 역할을 한다. 요청된 파일을 찾아 전송하는 데 최적화되어 있다. ex) Apache, Nginx, Microsoft IIS등

 

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

동적 웹 애플리케이션을 실행하고 처리하며, 정적 리소스도 제공할 수 있는 서버이다.

HTTP 기반으로 동작하며, 서블릿, JSP, 스프링 MVC 등의 기술을 사용해 애플리케이션 로직을 수행하고 동적 HTML 및 HTTP  API(JSON)를 생성한다.(톰캣)

 

웹서버와 엡 애플리케이션 서버 차이

웹 서버는 주로 정적 리소스를 제공하고, 웹 애플리케이션 서버(WAS)는 애플리케이션 로직을 처리한다. 정확하게 나눌 수 없는 게 웹 서버도 프로그램 실행 기능을 포함할 수 있으며, WAS도 웹 서버 기능을 제공한다. WAS는 애플리케이션 코드를 실행하는 데 더 특화되어 있으며, 자바의 경우 서블릿 컨테이너 기능을 제공하는 경우 WAS로 분류된다.

 

정적 리소스는 대표적으로 HTML, 이미지 등이 있고 동적 리소스는 게시판 글, 로그인 처리 등이며 쉽게 말하면 자바처럼 실행 결과를 생성해서 반환하는 특징을 가지고 있다.

 

클라이언트 사이드 렌더링(CSR)

CSR은 웹 애플리케이션에서 HTML 콘텐츠를 브라우저에서 동적으로 생성하는 방식

초기 요청 시 서버는 최소한의 HTML과 JS만 전송하며, 자바 스크립트가 실행되면서 API를 통해 필요한 데이터를 불러와 브라우저에서 DOM을 구성한다. (React, Vue, Svelte 등)

 

장점

사용자 경험 우수 : 페이지 전환이 빠르고 부드럽다.(SPA)

동적 콘텐츠 대응 용이 : 사용자 입력에 따라 UI를 즉시 반영 가능

 

단점

초기 로딩 속도 느릴 수 있음 : 자바 스크립트 실행 전까지 화면이 비어 있음

SEO 취약 : 일부 검색 엔진은 자바 스크립트 실행을 제대로 하지 못함

 

서버 사이드 렌더링(SSR)

SSR은 서버가 HTML을 완성한 후 클라이언트로 전달하는 방식

브라우저가 요청하면, 서버에서 데이터를 조회하고 HTML을 생성해 바로 응답한다.

브라우저는 받은 HTML을 렌더링 하여 화면에 표시한다. (JSP, Thymeleaf, Mustache, Next.js, Nuxt.js 등)

 

장점

초기 로딩 속도 : 페이지가 미리 렌더링 되어 전송되므로 초기 로드 시간이 빠름

SEO 최적화 :서버에서 완전한 HTML을 제공하므로 검색 엔진이 페이지를 쉽게 크롤링할 수 있음

 

단점

서버 부하 : 모든 요청에 대해 서버에서 HTML을 생성해야 하므로 부하가 증가할 수 있음.

사용자 경험 : 페이지 전환 시 전체 페이지를 새로 로드해야 하므로 CSR에 비래 전환 속도가 느릴 수 있고 이로 인해 플리커 현상이 나타난다. (플리커 현상 : 조명이나 화면의 밝기가 짧은 시간 간격으로 깜빡이는 현상을 뜻하지만, 웹 또는 앱 UI에서는 화면이 깜빡이거나 순간적으로 사라졌다가 다시 나타나는 현상이다.)