Dev Diary.

정적 리소스

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

- 주로 웹 브라우저

HTML 페이지

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

- 웹 브라우저 : HTML 해석

HTTP API

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

- 주로 JSON 형식 사용

- 다양한 시스템에서 호출

- 데이터만 주고 받음 ,UI 화면이 필요하면, 클라이언트가 별도 처리

- 앱, 웹 클라이언트, 서버 to 서버

- UI 클라이언트 접점

 - 앱 클라이언트

 - 웹 브라우저에서 자바스크립트를 통한 HTTP API 호출

 - React, Vue.js 같은 웹 클라이언트

- 서버 to 서버

 - 주문서버 -> 결제 서버

 - 기업간 데이터 통신

서버사이드 렌더링, 클라이언트 사이드 렌더링

SSR - 서버 사이드 렌더링

- HTML 최종 결과를 서버에서 만들어서 웹 브라우저에 전달

- 주로 정적인 화면에 사용

- 관련기술 : JSP, 타임리프 -> 백엔드 개발자

CSR - 클라이언트 사이드 렌더링

- HTML 결과를 자바스크립트를 사용해 웹 브라우저에서 동적으로 생성해서 적용

- 주로 동적인 화면에서 사용, 웹 환경을 마치 앱처럼 필요한 부분부분을 변경할 수 있음

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

-관련 기술 React, Vue.js -> 웹 프론트엔드 개발자

참고

- React, Vue.js를 CSR + SSR 동시에 지원하는 웹 프레임워크도 있음

- SSR을 사용하더라도, 자바스크립트를 사용해서 화면 일부를 동적으로 변경 가능

백엔드 개발자 입장에서 UI 기술

백엔드 - 서버 사이드 렌더링 기술

 - JSP, 타임리프

 - 화면이 정적이고, 복잡하지 않을 때 사용

 - 백엔드 개발자는 서버 사이드 렌더링 기술 학습 필수

웹 프론트엔드 - 클라이언트 사이드 렌더링 기술

 - React, Vue.js

 - 복잡하고 동적인 UI 사용

 - 웹 프론트엔드 개발자의 전문 분야

선택과 집중 

 - 백엔드 개발자의 웹 프론트엔드 기술 학습은 옵션

 - 백엔드 개발자는 서버, DB, 인프라 등등 수 많은 백엔드 기술을 공부해야 한다.

 - 웹 프론트엔드도 깊이있게 잘 하려면 숙련에 오랜 시간이 필요하다.

백엔드 개발자에 가장 중요한 부분이다.

클라이언트 ->(요청)   

                     (응답)<-WAS

요청을 하면 커넥션 연결이되고 servlet을 호출한다.

servlet을 누가 호출을 할까? 이것이 중요하다.

쓰레드 라는 놈이 호출한다.!!

쓰레드

- 애플리케이션 코드를 하나하나 순차적으로 실행하는 것은 쓰레드

- 자바 메인 메서드를 처음 실행하면 main이라는 이름의 쓰레드가 실행

- 쓰레드가 없다면 자바 애플리케이션 실행이 불가능

- 쓰레드는 한번에 하나의 코드 라인만 수행

- 동시 처리가 필요하면 쓰레드를 추가로 생성 

쓰레드가 하나라면?

요청이 오면 쓰레드를 할당하고 

쓰레드를 가지고 servlet코드를 실행하고 응답한다.

쓰레드는 하난데 다중요청이 오면?

요청의 처리가 지연되고있을때 

다른 요청이 들어온다면 쓰레드를 쓸 수 없기때문에 기다려야한다.

이렇게되면 둘다 죽는 문제가 발생한다.

이 문제를 해결하려면 ?

요청 마다 쓰레드 생성

요청이 올때 마다 쓰레드를 새로 만들면 된다.

장점 

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

- 리소스가 허용할 때 까지 처리가능

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

단점

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

  - 고객의 요청이 올 때마다 쓰레드를 생성하면, 응답 속도가 늦어진다.(생성하는데 시간이 필요하기 때문)

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

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

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

이러한 단점들을 보완하기 위해 쓰레드 풀이라는 것을 내부에 쓴다.

요청이 오면 미리 생성되있는 쓰레드들을 쓰레드 플에서 연결한다. 

2개의 연결이 발생하면 198개가 남는다. 사용이 끝나면 죽이지 않고 다시 반납해서 200개가 된다.

200개가 한계라고 설정 시

201, 202의 요청이 온다면 나머지 이 요청들은 쓰레드를 대기하거나 거절할 수 있다.

쓰레드 풀

요청 마다 스레드 생성의 단점 보완

특징 

- 필요한 쓰레드를 쓰레드 풀에 보관하고 관리한다.

- 쓰레드 풀에 생성 가능한 쓰레드의 최대치를 관리한다.

사용

- 쓰레드가 필요하면, 이미 생성되어 있는 쓰레드를 쓰레드 풀에서 깨내어 사용한다.

- 사용을 종료하면 쓰레드 풀에 해당 쓰레드를 반납한다.

- 최대 쓰레드가 모두 사용중이어서 쓰레드 풀에 쓰레드가 없으면?

  - 기다리는 요청을 거절, 특정 숫자만큼만 대기하도록 설정이 가능한다.

장점

- 쓰레드가 미리 생성되어 있기때문에, 쓰레드를 생성하고 종료하는 비용이 절약되고, 응답 시간이 빠르다.

- 생성 가능한 쓰레드의 최대치가 있으므로 너무 많은 요청이 들어와도 기존 요청은 안전하게 처리할 수 있다. 

쓰레드 풀

실무 팁

- WAS의 주요 튜닝 포인트는 최대 쓰레드 수이다.

- 이 값을 너무 낮게 설정하면?

  - 동시 요청이 많으면, 서버 리소스는 여유롭지만, 클라이언트는 금방 응답 지연

- 이 값을 너무 높게 설정하면?

 - 동시 요청이 많으면, CPU, 메모리 리소스 임계점 초과로 서버 다운

- 장애 발생시?

 - 클라우드면 일단 서버부터 늘리고, 이후에 튜닝

 - 클라우드 아니면 열심히 튜닝 

WAS의 멀티 쓰레드 지원

핵심

- 멀티 쓰레드에 대한 부분은 WAS가 처리

- 개발자가 멀티 쓰레드 관련 코드를 신경쓰지 않아도 됨

- 개발자는 마치 싱글 쓰레드 프로그래밍을 하듯이 편리하게 소스 코드를 개발

- 멀티 쓰레드 환경이므로 싱글톤 객체(서블릿, 스프링 빈)는 주의해서 사용(공유변수 문제)

회원 폼이 있다고 가정하자 

이름과, 나이를 전송한다면

웹 브라우저가 HTTP 요청 메시지를 만들어서 전송한다.

만약에 웹 애플리케이션 서버를 직접 다 구현해야한다면?

소켓 부터 시작해서

우선  HTTP메시지를 쭉 풀어헤쳐서 파싱해야한다.

파싱된 텍스트를 보며 구현해야할 기능을 하나하나 다 만들어야한다.

응답 메시지도 하나하나 생성해야한다.

그래서

서블릿이라는 것이 나온다.

서블릿은 비즈니스 로직을 제외한 모든 일을 해준다.(TCP/IP 대기, 소켓연결, HTTP 파싱....)

HTTP 요청시

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

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

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

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

서블릿 컨테이너

- 톰캣처럼 서블릿을 지원하는 WAS를 서블릿 컨테이너 라고 한다.

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

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

  - 고객의 요청이 올 때마다 계속 객체를 생성하는 것은 비효율

  - 최초 로딩 시점에 서블릿 객체를 미리 만들어두고 재활용

  - 모든 고객 요청은 동일한 서블릿 객체 인스턴스에 접근

  - 공유 변수 사용 주의

  - 서블릿 컨테이너 종료시 함께 종료

- JSP도 서블릿으로 변환 되어서 사용

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

웹 이라는 것은 

HTTP기반으로 통신을 한다.

클라이언트에서 URL 을 치면 인터넷을 통해 서버에 접근하면.

서버에서는 인터넷을 통해 HTML을 내려준다.

모든 형태의 데이터는  HTTP기반으로 통신을 한다.

서버 간에 데이터를 주고 받을때도 HTTP를 사용함.

웹 서버

- HTTP 기반으로 동작

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

- 정적 HTML, CSS, JS, 이미지, 영상

  - 예) NGINX, APACHE

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

-  HTTP 기반으로 동작

- 웹 서버 기능 포함

- 프로그램 코드를 실행해서 애플리케이션 로직 수행

 - 동적 HTML, HTTP API(JSON)

 - 서블릿, JSP, 스프링 MVC

- 예) 톰캣 ,Undertow

웹 서버, 웹 애플리케이션 서버 

차이

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

- 사실은 둘의 용어, 경계가 모호함

 - 웹 서버도 프로그램을 실행하는 기능을 포함하기도 함

 - 웹 애플리케이션 서버도 웹 서버의 기능을 제공함

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

 - 서블릿 없이 자바코드를 실행하는 서버 프레임워크도 있음

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

웹 시스템 구성 -WAS, DB

- WAS, DB 만으로 시스템 구성 가능

- WAS는 정적 리소스, 애플리케이션 로직 모두 제공 가능

- WAS가 너무 많은 역할을 담당, 서버 과부하 우려

- 가장 비싼 애플리케이션 로직이 정적 리소스 때문에 수행이 어려울 수 있음

- WAS 장애시 오류 화면도 노출 불가능

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

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

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

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

- 효율적인 리소스 관리

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

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

- 정적 리소스만 제공하는 웹 서버는 잘 죽지 않음

- 애플리케이션 로직이 동작하는 WAS 서버는 잘 죽음

- WAS, DB 장애시 WEB서버가 오류 화면 제공 가능

Cache-Control

확실한 캐시 무효화 응답

- Cache-Control : no-cache, no-store, must-revalidate

- Pragma : no-cache

 - HTTP 1.0 하위 호환

예를 들어 현재 사용자의 통장잔고 같은것들은 계속 갱신되기 때문에 캐시를 하면 안된다.

- Cache-Control : must-revalidate

 - 캐시 만료후 최초 조회시 원 서버에 검증해야함

 - 원 서버 접근 실패시 반드시 오류가 발생해야함 - 504

 - must-revalidate는 캐시 유효 시간이라면 캐시를 사용함

no-cache

원 서버에 접근할 수 없는 경우(프록시 캐시 서버가)

프록시 캐시 서버가 어쩔 수 없지만 옛날 데이터여도 보내주자라고 하는 설정이 되어 있을 수 있음

        vs

must-revalidate

원 서버에 접근할 수 없는 경우(프록시 캐시 서버가)

이 경우 504 에러를 발생시킨다.

웹 브라우저에서 미국까지 가려면 되게 오래걸린다.

그러면 사람들이 전부 500ms를 기다려야한다. 

그래서 프록시 캐시 서버라는 것을 도입하였다.

한국 어딘가에 프록시 캐시 서버를 넣어놓고 

요청이 오면 원 서버가 아닌 프록시 캐시 서버를  접근하게 만든다.

Cache-Control

캐시 지시어

- Cache-Control : public

 - 응답이 public 캐시에 저장되어도 됨

- Cache-Control : private

 - 응답이 해당 사용자만을 위한 것임, private 캐시에만 저장되어야 함

- Cache-Control : s-maxage

 - 프록시 캐시에만 적용되는 max-age

- Age : 60(HTTP 헤더)

 - 오리진 서버에서 응답 후 프록시 캐시내에 머문 시간

캐시 제어 헤더

- Cache-Control 

- Pragma 

- Expires

Cache-Control

캐시 지시어

- Cache-Control : max age

 - 캐시 유효 시간, 초 단위

- Cache-Control : no-cache

 - 데이터는 캐시해도 되지만, 항상 원 서버에 검증하고 사용

- Cache-Control : no-store

 - 데이터에 민감한 정보가 있으므로 저장하면 안됨 (메모리에서 사용하고 최대한 빨리 삭제)

Pragma

캐시 제어(하위 호환)

- Pragma : no-cache

- HTTP 1.0 하위 호환

Expires

캐시 만료일 지정(하위 호환)

- expires : Mon, 01 Jan 1990 00:00:00 GMT

- 캐시 만료일을 정확한 날짜로 지정

- HTTP 1.0 부터 사용

- 지금은 더 유연한 Cache-Control : max age 권장

- Cache-Control : max-age와 함께 사용하면 Expires는 무시

검증 헤더

- 캐시 데이터와 서버 데이터가 같은지 검증하는 데이터

- Last-Modified, ETag

조건부 요청 헤더

- 검증 헤더로 조건에 따른 분기

- If-Modified-Since : Last-Modified 사용

- If-None-Match : ETag 사용

- 조건이 만족하면 200 OK

- 조건이 만족하지 않으면 304 Not Modified

If-Modified-Since : 이후에 데이터가 수정 되었으면?

데이터 미변경 예시

 - 캐시 :2020/11/10 10:00:00 vs 서버 : 2020/11/10 10:00:00

 - 304 Not Modified, 헤더 데이터만 전송

데이터 변경 예시

 - 캐시 : 2020/11/10 10:00:00 vs 서버 : 2020/11/10 11:00:00

 - 200 OK, 모든 데이터 전송

Last-Modified, If-Modified-Since 단점

 - 1초 미만 단위로 캐시 조정이 불가능

 - 날짜 기반의 로직 사용

 - 데이터를 수정해서 날짜가 다르지만, 같은 데이터를 수정해서 데이터 결과가 똑같은 경우

 - 서버에서 별도의 캐시 로직을 관리하고 싶은 경우

    예) 스페이스나 주석처럼 크게 영향이 없는 변경에서 캐시를 유지하고 싶은 경우

ETag, If-None-Match

 - ETag(Entitiy Tag)

 - 캐시용 데이터에 임의의 고유한 버전 이름을 달아둠

    예) ETag: "v1.0", Etag:"a2jsjfskdf3"

 - 데이터가 변경되면 이 이름을 바꾸어서 변경함(Hash를 다시 생성)

 - 진짜 단순하게 ETag 보내서 같으면 유지, 다르면 다시 받기

ETag, If-None-Match 정리

 - 진짜 단순하게 ETag만 서버에 보내서 같으면 유지, 다르면 다시 받기

 - 캐시 제어 로직을 서버에서 완전히 관리

 - 클라이언트는 단순히 이 값을 서버에 제공(클라이언트는 캐시 메커니즘을 모름)

   예) 서버는 베타 오픈 기간인 3일 동안 파일이 변경되어도 ETag를 동일하게 유지

         애플리케이션 배포 주기에 맞추어 ETag 모두 갱신

캐시 시간 초과

- 캐시 유효 시간이 초과해서 서버에 다시 요청하면 두 가지 상황이 발생 할 수 있다.

1. 서버에서 기존 데이터를 변경함

2. 서버에서 기존 데이터를 변경하지 않음

기존이랑 같은 데이터를 받는 것은 비효율적이라는 생각에서 나온 것이 검증헤더, 조건부 요청이다.

캐시 시간 초과

- 캐시 만료후에도 서버에서 데이터를 변경하지 않음

- 생각해보면 데이터를 전송하는 대신에 저장해 두었던 캐시를 재사용 할  수 있다.

- 단 클라이언트의 데이터와 서버의 데이터가 같다는 사실을 확인할 수 있는 방법 필요.

검증 헤더 

처음 요청을 하면 서버에서 

Last-Modified 헤더에서 최종 수정된 시간을 알려준다.

그때 웹 브라우저에서 응답 결과를 캐시에 저장하고 

데이터의 최종 수정일을 기록한다.

캐시 시간이 초과되고 

캐시가 최종 수정일을 가지고 있다면

if-modified-since 헤더를 사용하여 최종 수정일을 포함하여 서버에 요청을 한다.

서버에서 요청을 받아보니

서버의 최종수정일을 보고 서버는 판단할 수 있게된다.

수정이 안되면 응답을 만들때 304 Not Modified를 보낸다.

변경된 점이 없다는 뜻이고 HTTP 바디가 없다.

1.1M -> 0.1M

수정된것이 없기 때문에 헤더만 보내게된다.

검증 헤더와 조건부 요청

검증 헤더 : Last-Modified

조건부 요청 : if-modified-since

- 캐시 유효 시간이 초과해도, 서버의 데이터가 갱신되지 않으면

  304 Not Modified + 헤더 메타 정보만 응답

- 클라이언트는 서버가 보낸 응답 헤더 정보롤 캐시의 메타 정보를 갱신

- 클라이언트는 캐시에 저장되어 있는 데이터 재활용

- 결과적으로 네트워크 다운로드가 발생하지만 용량이 적은 헤더 정보만 다운로드

캐시 기본 동작

star.ipg를 요청한다.

처음에 서버에서 응답을 내려주는데 

응답 HTTP 에서 이미지와 관련된 코드들이 있다.

헤더와 바디를 합쳐서 1.1M을 전송한다.

캐시가 없을땐 두 번째 요청을 해도 같은 과정을 반복한다.

캐시가 없을 때

- 데이터가 변경되지 않아도 계속 네트워크를 통해서 데이터를 다운로드 받아야 한다.

- 인터넷 네트워크는 매우 느리고 비싸다.

- 브라우저 로딩 속도가 느리다.

- 느린 사용자 경험

캐시를 적용을 하면

웹 브라우저에서 star.jpg를 보내면 

cache-control 헤더를 넣을 수 있고 유효시간을 적용할 수 있다.

웹 브라우저에는 내부에 캐시를 저장하는 저장소가 있다.

그래서 응답결과를 캐시에 저장한다.

그렇게 되면 두 번째 요청시에는 캐시를 먼저 확인한다. 네트워크를 탈 필요가 사라진다.

캐시 적용

- 캐시 덕분에 캐시 가능 시간동안 네트워크를 사용하지 않아도 된다.

- 비싼 네트워크 사용량을 줄일 수 있다.

- 브라우저 로딩 속도가 매우 빠르다.

- 빠른 사용자 경험

캐시 시간 초과

- 캐시 유효 시간이 초과하면, 서버를 통해 데이터를 다시 조회하고, 캐시를 갱신한다.

- 이때 다시 네트워크 다운로드가 발생한다.