#인코딩
0과 1로 우리의 문자를 표현하는 것
이런 약속들을 특별히 인코딩(Encoding) 표준이라고 부르는데, 대표적으로 아스키(Ascii)와 유니코드(Unicode)가 있음
인코딩을 이용하면 우리의 문장을 컴퓨터에 저장하고, 표현 가능
그리고 네트워크를 이용하면 인코딩한 정보를 다른 사람들과 쉽게 교환 가능
대부분의 컨텐츠도 유니코드로 인코딩된 데이터가 웹 서버를 통해 우리에게 전달됨
#통신프로토콜
현재까지 제정된 표준 통신 프로토콜에는 네트워크 통신의 기초가 되는 TCP/IP, 웹 애플리케이션이 사용하는 HTTP, 파일을 주고받을 때 사용하는 FTP 등 매우 많은 종류가 있음
- HTTP(Hyper Text Transfer Protocol)란?
서버와 클라이언트의 데이터 교환을 요청(Request)과 응답(Response) 형식으로 정의한 프로토콜
팀 버너스 리(Team Berners-Lee)와 그의 팀이 제정한 이후, 현대 웹 서비스의 바탕이 되는 프로토콜
HTTP의 기본 메커니즘은 클라이언트가 서버에게 요청하면, 서버가 응답하는 것
웹 서버는 HTTP 서버를 HTTP 서비스 포트에 대기시킨다. 이 포트는 일반적으로 TCP/80 또는 TCP/8080
클라이언트가 서비스 포트에 HTTP 요청을 전송하면, 이를 해석하여 적절한 응답을 반환
네트워크 포트(Network Port)란?
네트워크에서 서버와 클라이언트가 정보를 교환하는 추상화된 장소를 의미
포트에는 항구라는 의미가 있는데, 클라이언트가 서버의 포트에 접근하여 데이터를 내려놓고, 서버가 클라이언트에 보낼 데이터를 실어서 돌려보내는 장면을 연상하면 포트의 기능을 이해할 수 있음
편의상, 네트워크를 설명하는 맥락에서는 네트워크를 생략하여 “포트”라고 부르기도 함
서비스 포트(Service Port)런?
네트워크 포트 중에서 특정 서비스가 점유하고 있는 포트
예를 들어, HTTP가 80번 포트를 점유하고 있다면 HTTP의 서비스 포트는 80번 포트가 됨
포트로 데이터를 교환하는 방식은 전송 계층(Transport Layer)의 프로토콜을 따름
대표적으로는 TCP와 UDP가 있음 TCP로 데이터를 전송하려는 서비스에 UDP 클라이언트가 접근하면, 데이터가 교환되지 않음
반대의 경우도 마찬가지로 그래서 서비스 포트를 표기할 때는 서비스가 사용하는 전송 계층 프로토콜을 같이 표기하기도 함. 예를 들어, HTTP의 서비스 포트가 TCP/80 이라고 하면, HTTP 서비스를 80번 포트에서 TCP로 제공하고 있다는 뜻임
HTTP 메시지
구성 - 클라이언트가 전송하는 HTTP 요청, 서버가 반환하는 HTTP 응답
HTTP 헤더
각 줄은 CRLF로 구분되며, 첫줄은 시작줄, 나머지줄은 헤더라고 부름
시작줄의 역할은 요청과 응답에 큰 차이가 있음
시작 줄
먼저 GET은 리소스를 가져와달라 요청하는 메소드
이용자가 브라우저에 웹 서버의 주소를 입력하거나 하이퍼링크를 클릭하면, 새로운 페이지를 렌더링하기 위해 리소스가 필요함 이때 브라우저는 GET 요청을 서버에 전송하여 리소스를 받아오게 됨
반대로, POST는 요청 대상에게 데이터를 보내는 메소드
전송할 데이터는 보통 HTTP 바디에 포함되며 로그인할 때 입력하는 ID와 비밀번호, 게시판에 작성하는 글 등이 POST로 서버에 보내지게 됨
필드와 값으로 구성되며 HTTP 메시지 또는 바디의 속성을 나타냄
하나의 HTTP 메시지에는 0개 이상의 헤더가 있을 수 있음
HTTP 바디
헤드의 끝을 나타내는 CRLF 뒤 모든줄을 말함
클라이언트나 서버에게 전송하려는 데이터가 바디에 담김
CRLF - CRLF는 Carriage Return (CR)와 Line Feed (LF)의 조합을 나타냅니다. Carriage Return은 커서를 현재 줄의 맨 앞으로 이동시키는 문자이고, Line Feed는 커서를 다음 줄로 이동시키는 문자입니다. 이것들은 주로 텍스트 파일에서 줄 바꿈을 나타내는 데 사용되는 제어 문자열입니다. 윈도우 운영체제에서는 줄을 종결하기 위해 CRLF를 사용하고, 리눅스같은 유닉스 기반 운영체제에서는 LF만을 사용합니다.
-HTTPS란?
HTTP의 보안 문제를 보완하기 위한 TLS(Transport Layer Security) 프로토콜로 암호화
TLS는 서버와 클라이언트 사이에 오가는 모든 HTTP 메시지를 암호화함
공격자가 중간에 메시지를 탈취하더라도 이를 해석하는 것은 불가능하며, 결과적으로 HTTP 통신이 도청과 변조로부터 보호됨
http 와 https의 메시지
http의 경우 평문으로 확인 가능 https의 경우 암호화되어 해석 어려움
#웹
인터넷을 기반으로 구현된 서비스 중 HTTP를 이용하여 정보를 공유하는 서비스
정보를 제공하는 주체를 웹 서버 (Web Server), 정보를 받는 이용자를 웹 클라이언트 (Web Client)
이용자의 요청을 받는 부분을 프론트엔드 (Front-end)
프론트엔드는 이용자에게 직접 보여지는 부분으로, 웹 리소스 (Web Resource)라는 것으로 구성됨 페이지가 보여주고 있는 정보들은 모두 웹 리소스에 명시되어 있음
요청을 처리하는 부분을 백엔드 (Back-end)
#웹리소스
Hyper Text Markup Language (HTML)
웹 문서의 뼈와 살을 담당
태그와 속성을 통한 구조화된 문서 작성을 지원
Cascading Style Sheets (CSS)
웹 문서의 생김새를 지정
웹 리소스들의 시각화 방법을 기재한 스타일 시트
글자의 색깔이나 모양, 배경 색상, 이미지의 크기나 위치 등을 CSS로 지정할 수 있음
브라우저는 이를 참고하여 웹 문서를 시각화
JavaScript (JS)
웹 문서의 동작을 정의
이용자가 버튼을 클릭했을 때, 어떻게 반응할지, 이용자가 데이터를 입력하면 어디로 전송할지 등을 JS로 구현 가능 JS는 이용자의 브라우저에서 실행되는데, 클라이언트가 실행하는 코드라고 하여 Client-Side Script라고도 부름
#웹 클라이언트와 서버의 통신
1. (클라이언트) 이용자가 브라우저를 이용하여 웹 서버에 접속합니다.
2. (클라이언트) 브라우저는 이용자의 요청을 해석하여 HTTP 형식으로 웹 서버에 리소스를 요청합니다.
3. (서버) HTTP로 전달된 이용자의 요청을 해석합니다.
4. (서버) 해석한 이용자의 요청에 따라 적절한 동작을 합니다. 리소스를 요청하는 것이라면, 이를 탐합니다. 계좌 송금, 입금과 같은 복잡한 동작을 요구할 경우 내부적으로 필요한 연산을 처리합니다.
5. (서버) 이용자에게 전달할 리소스를 HTTP 형식으로 이용자에게 전달합니다.
6. (클라이언트) 브라우저는 서버에게 응답받은 HTML, CSS, JS 등의 웹 리소스를 시각화하여 이용자에게 보여줍니다.
#DevTools
F12키를 통해서 관리자도구 활용 가능
#페이지 소스보기 Cmd(⌘) + Opt(⌥) + U
단축키를 활용해서 페이지 소스 보기 가능
#시크릿모드 Cmd(⌘) + shift(⇧) + N
시크릿모드를 통해서 세션 종료 후 아래와 같은 항목들 저장되지 않음
-방문기록
-쿠키 및 사이트 데이터
-양식에 입력한 정보
-웹사이트에 부여된 권한
