다양한 웹 브라우저 (Web Browser)

• 흔히 웹 사이트에 접속할 때는 웹 브라우저 프로그램 사용

서버에 요청하여 서버의 응답을 웹 문서 형태로 받는다.
받은 웹 문서를 렌더링하여 표시한다.

서버와 클라이언트

클라이언트

• 클라이언트가 요청하면 서버가 응답한다.
• 클라이언트는 사용자라고 할 수 있다. -> 즉 서비스를 받는 사람
• 서버로 요청을 보낸 뒤에, 응답에 도착할 때까지 기다린다.
• 서버로부터 응답을 받으면, 서버의 응답을 처리하여 화면에 출력한다.

서버

• 서버는 클라이언트로부터 받은 요청을 처리해 응답을 전송한다.

HTTP(Hypertext Transfer Protocol)

• 하이퍼텍스트를 전송하기 위해 개발된 프로토콜로 간편히 데이터를 전송하게 해준다.
• 웹 브라우저의 주소 표시줄에 URL을 입력한 뒤에 접속을 시도한다.
• URL은 인터넷에 존재하는 특정한 정보 자원의 종류와 위치를 나타내는 문자열이다.

HTTP 프로토콜을 이용해 수없이 많은 페이지로 링크를 타고 이동할 수 있다.

웹 브라우저의 구조

Rendering Engine

• Networking
• JS Engine
• UI Backend

웹 브라우저의 동작 방식

• 웹 클라이언트는 웹 브라우저를 이용한다.
• 웹 브라우저에 주소를 입력하면 GET방식으로 서버에 웹 문서를 요청한다
• 웹 서버는 적절한 웹 문서를 찾아서 응답한다.
• 이후에 웹 브라우저는 문서를 화면에 표시한다.

쿠키와 세션

쿠키

• 사용자가 특정한 웹 사이트에 방문할 때 , 사용자가 컴퓨터에 저장하는 기록 파일이다.
• 서버의 자원을 전혀 사용하지 않는다
• 예시 : "아이디와 비밀번호를 저장하시겠습니까?"

세션

• 한 명의 사용자가의 상태를 유지하는 기술이다.
• 서버가 클라이언트에게 고유한 아이디를 부여하면, 클라이언트는 접속할 때마다 아이디와 함께 요청한다.
  예시 : 웹 사이트에 한 번 로그인 하면, 다른 페이지로 이동해도 계속 접속 상태가 유지된다.
• 만약 아이디를 다른 클라이언트에게 탈취당하면, 다른 사람이 자신의 행세를 할 수 있다.

특정 사용자의 로그인 정보를 유지하기 위해 사용할 수 있다.
웹 사이트에 로그인한 뒤에, 서버에서는 세션 아이디에 따른 회원 아이디 정보를 기록, 클라이언트는 세션을 유지한다. ex) 메일함, 장바구니 등 로그인이 필요한 서비스에 접속할 대도 세션 아이디를 서버에 전송한다.

• 세션은 자신이 누구인지를 서버에 알려줌.

세션의 장단점

[장점]

• 클라이언트에게는 세션 아이디를 제공하고, 회원에 대한 중요한 정보를 서버가 가지고 있다.
• 민감한 데이터를 직접적으로 보내지는 않음
• 클라이언트 브라우저가 가지고 있는 세션 ID자체에는 개인정보를 포함하고 있지 않다.

[단점]

• 악의적인 공격자가 세션 아이디를 탈취하여 위장 가능
• 웹 서버에 세션 정보를 기록하고 있어야 하므로, 접속자가 많을 때 서버에 메모리 부하가 존재할 수 있다.

HTTP

주요 메서드에 대해 알아보겠다.

웹상에서 데이터를 주고받기 위한 프로토콜이다.
웹 문서를 주고받기 위하여 사용한다
웹뿐만 아니라 모바일 앱, 게임 개발에서도 사용 가능

메서드

• GET - 데이터 조회를 요청한다. (페이지 접속, 정보 검색)
• POST - 데이터 생성을 요청한다. (회원가입, 글쓰기)
• PUT - 데이터 수정을 요청한다. (회원 정보 수정)
• DELETE - 데이터 삭제를 요청한다. (회원 정보 삭제)

웹 사이트는 대개 HTML, JavaScript, CSS 코드를 반환하며 웹 브라우저는 이를 화면에 출력한다.

HTTP 상태 관리

• 기본적으로 상태를 저장하지 않는다. 그 유명한 stateless, 무상태성 이라고 한다.
• 클라이언트는 HTTP로 서버에 연결한 뒤에, 응답을 받으면 연결을 끊어버린다.
• 예시로, 상품 확인 -> 장바구니 -> 결제의 과정이 시스템적으로 상태 정보로 기록되지 않는다.
• 하지만, 세션을 이용해 원하는 기능이 수행되도록 한다.

무상태성을 보완하고 개선하기 위해 개발된 기능 "Keep Alive"
하나의 웹 사이트에 방문하면 대개 수십 개의 파일 (CSS, 이미지, HTML, JS)를 제공한다.
TCP 통신 과정에서 연결 수행/연결 해제 과정에서 리소스가 많이 소요됨
Keep Alive는 이런 파일을 하나씩 받기 위하여 매번 연결을 맺고 끊는 것을 방지한다.

Keep-Alive

MDN문서를 찾아보니 Keep-Alive를 포함한 요청은 연결에 대한 유효시간과 요청 최대 개수를 가질 수 있다.

REST API

• HTTP는 다양한 메서드를 지원한다. (get, put, post, delete)
• 실제로는 서버가 HTTP 메서드를 기존 설명에 맞게 사용하지 않더라도, 프로그램 개발은 가능하다.
• 하지만 각 서비스가 서로 다른 방식으로 개발하면, 개발자 사이의 소통에 문제가 발생할 수 있다.
• 따라서 기준이 되는 아키텍처로 REST를 채택할 수 있다.

REST 이해하기

• REST는 Respresentational State Transfer의 약자
• 말 그대로 특정한 자원에 대하여, 자원의 상태에 대한 정보를 주고받는 개발 방식이다.
• REST의 구성 요소 -> (자원, 행위, 표현)

REST API

• 서로 다른 프로그램이 상호작용하기 위한 인터페이스
• 서버가 미리 명시해놓은 API 명세에 맞게 주고 받는 것

Mocking

• 목킹(mocking) : 어떠한 기능이 있는 것처럼 흉내내어 구현한 것을 의미한다. (Mock Data)
• 클라이언트 개발을 위해 간단히 서버 기능을 테스트할 때 사용한다.