웹이란?
인터넷 상의 서비스 중 HTTP를 이용하여 정보를 공유하는 통신 서비스를 일컫는다.
웹 서비스를 제공하는 대상을 서버, 서비스를 받는 사용자를 클라이언트라고 부른다.
- Web Browser : 웹에 접속하기 위해 사용하는 소프트웨어
- Web Resource : 웹 상에 존재하는 모든 컨텐츠 (HTML, CSS, JS, PDF, PNG 등)
- URI(Uniform Resource Identifier) : 리소스를 식별하기 위한 식별자
- HTTP(HyperText Transfer Protocol) : 웹을 이용하기 위한 통신 규약 (기본포트는 80)
- HTTPS : 기존 HTTP 데이터를 암호화하여 통신하는 프로토콜 (기본 포트는 443)
- Cookie : 웹 브라우저에 저장하는 데이터, 클라이언트의 리소스를 사용
- Session : 서버에 저장하는 데이터, 서버의 리소스를 사용한다.
- Server : 인터넷상에서 사용자에게 서비스를 제공하넌 컴퓨터
- Application : 서버에서 설정한 특정 기능을 수행하는 소프트웨어
- DataBase : 데이터를 저장하기 위해 사용하는 데이터 저장소
Web Resource
1. HTML (Hyper Text Markup Language)
- 웹문서의 뼈대를 구축하기 위한 마크업 언어
- 정해진 태그와 속성을 지정하여 문서를 구성
2. CSS (Cascading Style Sheets)
- HTML이 표시되는 방법을 정의하는 스타일 시트 언어
- 이미지, 태그, 글자 등 다양한 웹 리소스들의 출력 시 스타일을 설정한다.
3. JS (JavaScript)
- HTML 과 CSS는 화면에 출력되는 뼈대를 그리는 것이며, JS와 같은 Client Side Script 를 이용하여 페이지 내에서의 동적인 행위를 설정할 수 있다.
CSR(Client Side Rendering) vs SSR(Server Side Rendering)
Client Side Script
클라이언트 쪽에서 렌더링이 일어남. 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내고,
클라이언트는 그것을 받아서 렌더링을 시작하는 방식
1. User가 WebSite에 요청을 보냄
2. CDN이 HTML 파일로 JS로 접근할 수 있는 링크를 클라이언트로 보냄
3. 클라이언트는 HTML과 JS를 다운로드 받음 (이때까지 유저는 아무것도 볼 수 없음)
4. 다운 완료 된 JK가 실행된다. 데이터를 위한 API가 호출 된다.
5. 서버가 API로부터의 요청에 응답한다.
6. API로부터 바다온 data를 자리에 넣어줌. 페이지가 상호작용 가능해짐
- JavaScript, JScript, VBScript 등
- 클라이언트에서 수행되는 스크립트
- 클라이언트 스크립트는, Script를 해석해줄 engine만 있다면 어디서든 실행이 가능 (보통의 경우 client의 web browser 내에서 작동)
사용의 주된 목적은 web browser 상의 HTML을 동적으로 변화, 효과를 주기 위함이다.
Server Side Script
서버쪽에서 준비를 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식
1. User가 WebSite에 요청을 보냄
2. server는 'Ready to Render'. 즉시 렌더링 가능한 HTML 파일을 만든다. (리소스 체크, 컴파일 후 완성된 HTML 컨텐츠를 만듬)
3. 클라이언트에 전달 된 순간, 이미 렌더링 준비가 되어있었던 HTML은 즉시 렌더링 됨. (Javascript가 읽히기 전이므로 사이트 자체의 조작은 불가능)
4. 클라이언트가 자바스크립트를 다운받는다.
5. 다운받아지는 사이 유저는 컨텐츠는 볼 수 있지만 사이트를 조작할 수는 없다. 다만 사용자의 조작은 기억하고 있다.
(서버에서 이미 렌더링 가능한 상태로 클라이언트에 전달되므로, JS가 다운로드 되는 동안 사용자는 무언가를 보고 있을 수 있음!!!)
6. 브라우저가 Javascript 프레임워크를 실행한다.
7. JS까지 성공작으로 컴파일 되면, 기억하고 있던 사용자 조작이 실행되고 웹페이지는 상호작용이 가능해진다.
- JavaScript(on server), JSP, ASP(JSCript, VBScript on serveR) 등
- 서버에서 수행되는 스크립트
- 서버 스크립트 또한 Script를 해석해줄 engine이 필요한데 이는 사용하는 언어별로 다르다.
(JSP - Jsp Container(tomcat, resin...) / ASP (iis) / PHP (php module) ) > 각 프로그램은 서버에 설치된다.
사용되는 주된 목적은 동적인 HTML을 생성하는 것으로, 어떤 서버 스크립트이던 실행의 최종 결과물은 HTML
차이점
웹 페이지를 로딩하는 시간
👉첫 페이지 로딩 시간
CSR의 경우 HTML, CSS와 모든 스크립트들을 한 번에 불러온다.
SSR의 경우 필요한 부분의 HTML과 스크립트만 불러오게 된다.
평균적으로 SSR이 더 빠르다.
👉나머지 로딩 시간(첫 페이지를 로딩한 후, 사이트의 다른 곳으로 이동하는 경우)
CSR은 첫 페이지를 로딩할 때 나머지 부분을 구성하는 코드를 받아왔기 때문에 빠르다.
SSR은 첫 페이지를 로딩하는 과정을 정확하게 다시 실행하기 때문에 더 느리다
이럴 때 사용하자!
👉 SSR
- 네트워크가 느릴 때 ( CSR은 한번에 모든 것을 불러오지만, SSR은 각 페이지마다 나눠 불러오기때문에)
- SEO(search engine optimization)이 필요할 때
- 최초 로딩이 빨라야하는 사이트를 개발 할 때
- 메인 스크립트가 크고, 로딩이 매우 느릴때
(CSR은 메인스크립트 로딩이 끝나면 API로 데이터 요청을 보냄, 하지만 SSR은 한번의 요청에 아예 렌더가 가능한 페이지가 돌아옴)- 웹 사이트가 상호작용이 별로 없는 경우
👉CSR
- 네트워크가 빠를 때
- 서버의 성능이 좋지 않을 때
- 사용자에게 보여줘야하는 데이터의 양이 많을 때
- 메인 스크립트가 가벼울 때
- 웹 어플리케이션에 사용자와 상호작용할 것이 많을 때(아예 렌더링이 되지 않으므로, 사용자의 행동을 막는 것이 유리)
HTTP(HyperText Transfer Protocol)
HTTP는 서버가 브라우저에게 HTML이나 이미지 파일 또는 JavaScript 코드와 같은 데이터를 전송 할 때의 템플릿 규칙 또는 작성 규칙이라고 생각하면 편함.
HTTP에는 클라이언트가 서버에 요청할때의 규칙을 정의한 HTTP Request와 서버가 클라이언트에게 응답을 하는 규칙을 정의한 HTTP Response가 존재한다.
클라이언트는 항상 웹 서버에서 호스팅되는 웹 페이지에 대한 액세스를 요청(request)하여 통신을 시작한다.
모든 요청에 대해 웹 서버는 요청된 웹페이지의 사본으로 응답(response)하고 이미지, 음악, 비디오, Word 문서, PDF 등과 같은 리소스가 서버에서 웹 브라우저 상에서 출력 된 클라이언트 컴퓨터로 다운로드 된다.
HTTP에 대해서 알아야 할 중요하면서도 기본적인 것은 HTTP는 상태 비 저장 프로토콜이라는 것이다. 다시 말해, 서버와 브라우저는 현재 요청 및 응답주기(request and response cycle)동안에만 서로를 알고 있다. 그 후 서버와 클라이언트는 서로를 잊게 되기 때문에, 브라우저나 서버는 통신주기의 서로 다른 요청 간에 정보를 유지할 수 없다! (HTTP에서는 양방향 통신이 불가능! 추후 쿠키와 세션, 웹소켓의 개념이 필요한 이유)
HTTP Request
- 서버에 대한 요청을 의미한다.
Request의 첫 줄에는 사용자가 서버에 요청시 수행하고자 하는 동작인 method, 요청하는 웹 리소스의 경로인 path, 사용하는 HTTP의 버전을 나타내는 version의 정보가 들어간다.
두번째 줄 부터는 Header 부분으로, (이름:값)의 딕셔너리 형태로 이루어진다.📚Header
Host : 데이터를 보내는 서버의 주소
Cookie : 사용자를 식별하기 위해 사용하는 정보
User-Agent : 사용자가 사용하는 프로그램의 정보
Referer : 페이지 이동시 이전의 URI의 정보
Content-Type : 사용자가 전달하는 데이터의 처리 방식과 형식
HTTP Response
- 사용자의 요청에 대한 서버의 응답
Response의 첫 줄은 Version과 사용자의 요청에 대한 서버의 Status Code로 구성된다.
두번째 줄 부터는 Header로 , Request와 마찬가지로 (이름:값)의 형태로 이루어져있따.📚StatusCode
20x : 사용자의 요청에 대한 서버의 처리가 정상적으로 처리 되었음을 의미
30x : 사용자가 요청한 리소스가 다른 경로로 변경된 경우를 의미
40x : 사용자가 서버에 요청하는 구조 또는 데이터가 잘못되었음을 의미
50x : 서비스를 제공하는 서버 내 에러를 의미
Cookie
HTTP는 위에서 서술했듯, 비 저장 프로토콜로 HTTP의 요청마다 새로운 커넥션을 열기 때문에 사용자 인증을 계속해야한다는 단점이 있는데, 이를 보완하기 위해 나온 개념이 Cookie다.
웹 브라우저는 HTTP Response의 Set-Cookie Header 또는 Javascript의 document.cookie를 통해 데이터를 쿠키에 저장한다.
🍪쿠키?
- 쿠키란 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일이다.
- 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지된다.
- 쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조한다.
- 쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request시에 Request Header를 넣어서 자동으로 서버에 전송한다.
🍪쿠키의 동작방식
1. 클라이언트가 페이지를 요청
2. 서버에서 쿠키를 생성
3. HTTP 헤더에 쿠키를 포함시켜 응답
4. 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 잇음
5. 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
6. 서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답🍪쿠키 사용 예시
- 방문 사이트에서 로그인 시, 아이디와 비밀번호 저장
- 쇼핑몰의 장바구니 기능
- 자동로그인, 팝업에서 "오늘 더 이상 이 창을보지 않음"체크
Session
쿠키의 인증 상태를 포함한 데이터를 저장하면 사용자가 임의로 사용자로 인증된 것 처럼 요청을 조작할 수도 있음!
따라서 서버에 데이터를 저장하기 위한 Session이란 개념 등장
세션을 활용하면 데이터를 서버에 저장하고, 해당 데이터를 접근할 수 있는 유추할 수 없는 랜덤한 문자열 키를 만들어 응답하는데 이를 보통 Session ID라고 부른다. 브라우저는 해당 키를 쿠키에 저장하고 이후에 HTTP요청을 보내면 서버에서 해당 키에 해당하는 DATA를 가져와 인증 상태를 확인한다.
🐾세션?
- 세션은 쿠키를 기반으로 하지만, 사용자의 정보 파일을 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리한다.
- 서버에서는 클라이언트를 구분하기 위해 세션 ID를 부여하며, 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증상태를 유지한다.
- 사용자에 대한 정보를 서버에 두기 때문에 쿠키보다 보안에 좋지만, 사용자가 많아질 수록 서버 메모리를 많이 차지해 서버에 과부하를 주게 되므로, 성능 저하의 요인이 된다.
- 클라이언트가 Request를 보내면 해당 서버의 엔진이 클라이언트에게 유일한 ID를 부여하는데 이것이 세션 ID
🐾세션의 동장방식
1. 클라이언트가 서버에 접속 시 세션 ID를 발급
2. 클라이언트는 세션 ID에 대해 쿠키를 사용해서 저장하고 가지고 있음
3. 클라이언트는 서버에 요청할 때, 이 쿠키의 세션 ID를 같이 서버에 전달해서 요청
4. 서버는 세션 ID를 전달 받아서 별다른 작업없이 세션 ID로 세션에 있는 클라이언트 정보를 가져와서 사용
5. 클라이언트 정보를 가지고 서버 요청을 처리하여 클라이언트에게 응답🐾세션의 특징
- 각 클라이언트에게 고유 ID를 부여
- 세션 ID로 클라이언트를 구분해서 클라이언트의 요구에 맞는 서비스 제공
