Web(1)

브라우저 동작 방법

브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 서버의 응답(Response)을 받아 브라우저에 표시하는 것이다.
브라우저는 서버로부터 HTML, CSS, Javascript, 이미지 파일 등을 응답받는다.
HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(Parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 표시한다.

웹 브라우저

• 웹 브라우저(web browser)는 인터넷망에서 정보를 검색하는 데 사용하는 응용 프로그램을 말한다. '브라우저' or '인터넷 브라우저'라고도 하며, 일반적인 기능으로는 웹 페이지 열기, 최근 방문한 URL 및 즐겨찾기 제공, 웹페이지 저장 기능 등이 있다.

• 인터넷익스플로러, 파이어폭스, 크롬, 사파리, 엣지, 비발디 등이 있다.

자바스크립트와 웹 브라우저 환경

• 구글의 Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경(Runtime Environment)인 Node.js의 등장으로 자바스크립트는 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용되는 범용 개발 언어가 되었다.
  하지만 자바스크립트가 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹 페이지/애플리케이션이다.

브라우저의 동기적인 처리와 script 태그 위치

• 자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다.
• HTML 파서는 script태그를 만나면 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘긴다. 자바스크립트 엔진은 script 태그 내의 자바스크립트 코드나 src에 정의된 자바스크립트 파일을 로드, 파싱하여 실행한다. 실행 완료 후 다시 HTML 파서로 제어권한을 넘겨서 중지했던 시점 부터 다시 DOM 생성을 재개한다.

→ 이처럼 동기(Synchronous)적으로 HTML, CSS, JS를 처리하므로 script 태그의 위치에 따라 블로킹이 발생, 때문에 script태그의 위치는 중요한 의미를 갖게된다.

📌 웹 브라우저 & script 태그 위치 정리
📌 참고자료 : 브라우저는 어떻게 동작하는가?

쿠키(Cookie) & 세션(Session)

기본적으로 HTTP 프로토콜 환경은 "connectionless, stateless"한 특성을 가지기 때문에 서버는 클라이언트가 누구인지 매번 확인해야 한다. 이를 통해 발생될 수 있는 번거로움을 해결 하기 위한 방법으로 쿠키와 세션을 사용한다. 즉, 정보(데이터)를 유지하기 위해 사용한다.

connectionless & stateless ?

1) Connectionless 프로토콜 (비연결지향)

• 클라이언트가 서버에 요청(Request)을 했을 때, 그 요청에 맞는 응답(Response)을 보낸 후 연결을 끊는 처리방식이다.

2) Stateless 프로토콜 (상태정보 유지 안함)

• 통신이 끝나면 상태를 유지하지 않는 특징이다.
• 클라이언트의 상태 정보를 가지지 않는 서버 처리 방식이다. 클라이언트와 첫 번째 통신에서 데이터를 주고 받았다 해도, 두 번째 통신에서 이전 데이터를 유지하지 않는다.

→ 매번 페이지 이동 시 로그인을 다시 해야하거나 상품 선택 후 구매 페이지로 이동 시 상품의 정보가 없거나 하는 등의 일이 발생할 수 있으므로 Stateless 경우를 대처하기 위해 쿠키와 세션을 사용한다.

공통점

• 웹 통신간 유지하려는 정보(로그인 정보 등)를 저장하기 위해 사용한다.

차이점

• 저장위치, 저장형식, 용량제한, 만료시점 등에 차이가 있다.
  쿠키 : 클라이언트(=로컬 PC)에 저장된다.
  세션 : 서버에 저장된다.

쿠키(Cookie)

• 사용자 정보 파일을 브라우저에 저장한다.

• 쿠키는 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일이다.

• 사용자 인증이 유효한 시간을 명시할 수 있다. 유효시간이 정해지면 브라우저가 종료되더라도 인증이 유지된다.

• 쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조한다.

• 클라이언트에 300개까지 저장이 가능하고, 하나의 도메인 당 20개의 값만 가질 수 있으며 하나의 쿠키값은 4KB까지 저장한다.

• Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있다.

• 사용자가 따로 요청하지 않아도 브라우저가 Request시에 Request Header를 넣어서 자동으로 서버에 전송한다.

사용 예시

• 방문 사이트에서 로그인 시, '아이디와 비밀번호를 저장하시겠습니까?'
• 쇼핑몰 장바구니 기능
• 자동 로그인
• '오늘 더이상 이 창을 보지 않음' 팝업

세션(Session)

• 세션은 쿠키를 기반하고 있지만, 쿠키와 달리 세션은 서버 측에서 관리한다.

• 서버에서는 클라이언트를 구분하기 위해 세션 ID를 부여하며, 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증상태를 유지한다.
  접속 시간에 제한을 두어 일정 시간 응답이 없다면 정보가 유지되지 않도록 설정하는 것도 가능하다.

• 사용자에 대한 정보를 서버에 두므로 쿠키보다 보안에 좋지만, 사용자가 많아질수록 서버 메모리를 많이 차지한다.
  ❗️ 즉, 세션은 서버의 자원을 사용하기 때문에 무분별하게 만들다보면 서버 과부하, 속도가 느려질 수 있기 때문에 쿠키가 유리한 경우가 있다.

• 동시 접속자 수가 많은 사이트의 경우 서버 과부하를 주게 되므로 성능 저하의 요인이 될 수 있다.

• 클라이언트가 Request를 보내면, 해당 서버의 엔진이 클라이언트에게 유일한 ID를 부여하는 데 이것이 세션 ID이다.

사용 예시

• 로그인 같이 보안상 중요한 작업을 수행할 때 사용

✍️ 세션은 사용자의 수 만큼 서버 메모리를 차지하므로 이런 문제를 보완하기 위해 토큰 기반의 인증방식을 사용하는 추세라고 한다.

HTTP Status Code

HTTP 응답코드를 정리하는 문서.
HTTP 상태 코드는 클라이언트가 보낸 HTTP 요청에 대한 서버의 응답 코드로, 상태 코드에 따라 요청의 성공/실패 여부를 판단한다.
모든 HTTP 응답 코드는 5개의 클래스(분류)로 구분된다. 상태 코드의 첫 번째 숫자는 응답의 클래스를 정의한다.

첫자리에 대한 5가지 값들은 다음과 같다.

1xx (정보전달)

: 요청을 받았으며 프로세스를 계속한다.

2xx (성공)

: 요청을 성공적으로 받았고, 이해했고 받아들여졌다는 의미이다.

• 200, 204, 206을 제외하고는 볼 일이 거의 없다.
• 200 OK: 성공적으로 처리했을 때 쓰인다. 가장 일반적으로 볼 수 있는 HTTP 상태.
• 201 Created: 요청이 성공적으로 처리되어서 리소스가 만들어졌음을 의미한다.
• 204 No Content: 성공적으로 처리했지만 컨텐츠를 제공하지는 않는다. 일반 사용자가 볼 일은 거의 드물며 처리 결과만 중요한 API 요청 등에서 주로 사용한다.
• 206 Partial Content: 컨텐츠의 일부 부분만 제공한다. 보통 클라이언트에서 시작 범위나 다운로드할 범위를 지정한 경우 자동으로 해당 부분만 제공할 때 사용하는 코드이다.

3xx (리다이렉션)

: 요청 완료를 위해 추가 작업 조치가 필요하다.

• 이 요청을 완료하기 위해서는 리다이렉션이 이루어져야 한다는 의미이다.
• 단축URL 서비스의 경우 접속 시 301이나 302 코드를 보내고, 헤더의 location에 리다이렉션할 실제 URL을 적어 보낸다.

4xx (클라이언트 오류)

: 요청의 문법이 잘못되었거나 요청을 처리할 수 없다.

• 이 요청은 올바르지 않다는 의미이다. 브라우저에 직접 표출된다.
• 403 Forbidden(거부됨): 서버가 요청을 거부할 때 발생한다. 관리자가 해당 사용자를 차단했거나 서버에 index.html 이 없는 경우에도 발생할 수 있다. 혹은 권한이 없을 때(로그인 여부와는 무관하다)에도 발생한다.
• 404 Not Found(찾을 수 없음): 찾는 리소스가 없다는 뜻으로, 가장 흔하게 볼 수 있는 오류 코드이다.
• 410 Gone(사라짐) : 404와는 달리 찾는 리소스가 영원히 사라진 경우 사용하는 코드이다.

5xx (서버 오류)

: 서버가 명백히 유효한 요청에 대해 충족을 실패했다.

• 서버가 응답할 수 없다는 의미이며, 요청이 올바른지의 여부는 알 수 없다.
• 500 Internal Server Error(내부 서버 오류): 서버에 오류가 발생해 작업을 수행할 수 없을 때 사용된다. 보통 설정이나 퍼미션 문제이다.
  아니면 HTTP 요청을 통해 호출한 문서가 실제 HTML 문서가 아니라 JSP, PHP, 서블릿 등의 프로그램일 경우 그 프로그램이 동작하다 세미콜론을 빼먹는 등의 각종 에러로 비정상 종료를 하는 경우 이 응답코드를 보낸다.
• 502 Bad Gateway(게이트웨이 불량): 게이트웨이가 연결된 서버로부터 잘못된 응답을 받았을 때 사용된다.

✍️ 게이트웨이 (통신네트워크 연결기기)
: OSI 7 Layer중 전송(Transport) 계층에 해당하는 기기로 서로 다른 프로토콜끼리도 네트워크 통신이 가능하도록 연결해주는 기기이다.
대표적인 예로서 이동통신 장비와 인터넷 간의 게이트웨이가 있다. 게이트웨이가 있어서 우리가 스마트폰으로 PC와 같이 인터넷을 할 수 있는 것이다.

reference)
poiemaweb-browser
브라우저는 어떻게 동작하는가?
쿠키와 세션 개념
쿠키와 세션 특징
wiki-http status code
HTTP/응답코드
Gateway