[Dreamhack] Stage 2 Background - Web

Encoding

- 컴퓨터의 모든 데이터는 0과 1로 구성 된다. 우리가 사과를 사과라고 칭하듯이 이러한 약속들을 인코딩 표준이라고 부른다.

   대표적으로 아스키와 유니코드가 있다.

​

통신 프로토콜

- 프로토콜은 규격화된 상호작용에 적용되는 약속

- 네트워크 통신 : TCP/IP

- 웹 애플리케이션 : HTTP

- 파일 통신 : FTP

​

HTTP

- hyper text transfer protocol

- 서버와 클라이언트의 데이터 교환을 요청과 응답 형식으로 정의한 프로토콜

- 기본 메커니즘 : 클라이언트가 서버에 요청, 서버가 응답

- 네트워크 포트 : 네트워크에서 서버와 클라이언트가 정보를 교환하는 추상화됀 장소

- 서비스 포트 : 네트워크 포트 중 특정 서비스가 점유하고 있는 포트

- 포트로 데이터를 교환하는 방식은 전송 계층의 프로토콜을 따름

​

http 메시지

헤드 - 각 줄은 CRLF로 구분되며 첫 줄은 시작 줄 나머지는 헤더라고 부름

바디 - 헤드의 끝을 나타내는 crlf 뒤 모든 줄. 클라이언트나 서버에게 전송하려는 데이터가 바디에 담김

​

http 요청

시작 줄 - 시작은 메소드, 요청 url, http 버전으로 구성되며 각각은 띄어쓰기로 구분

1. 메소드는 uri가 가리키는 리소스를 대상으로 서버가 수행하길 바라는 동작을 나타냄

http 표준 메소드는 8개이나 주로 get 과 post 메소드 사용

get - 리소스를 가져오라는 메소드

post - 리소스로 데이터를 보내라는 메소드. 전송할 데이터는 보통 http 바디에 포함

2. uri는 메소드의 대상을 나타냄

3. http 버전은 클라이언트가 사용하는 http 프로토콜의 버전을 나타냄ㅁ

​

http 응답

시작 줄 - http 버전, 상태코드, 처리 사유로 구성되며 각각은 띄어쓰기로 구분

1. http 버전은 서버에서 사용하는 http 프로토콜의 버전을 나타냄

2. 상태코드는 요청에 대한 처리 결과를 세 자릿수로 나타냄.

​

https

- 응답과 요청이 평문으로 전달됨

- https는 tls 프로토콜을 도입하여 이런 문제점을 보완함

- tls는 서버와 클라이언트 사이에 오가는 모든 http 메시지를 암호화함(도청과 변조로부터 보호)

​

웹 서버의 url이 http로 시작하면 http, https로 시작하면 https 프로토콜을 사용함

​

정리

​

웹

- http를 이용하여 정보를 공유하는 서비스

프론트 엔드 : 이용자의 요청을 받는 부분. 웹 리소스로 구성

백엔드 : 요청을 처리하는 부분

​

웹 리소스

- 웹에 갖춰진 정보 자산

- 모든 웹 리소스는 고유의 uri를 가지며 이를 이용해 식별된다

​

html - 웹 문서의 뼈와 살 담당. 태그와 속성을 통한 구조화된 문서 작성 지원

css - 웹 문서의 생김새 지정

Js - 웹 문서의 동작을 정의

​

웹 클라이언트와 서버의 통신

1. 클) 이용자가 브라우저를 이용하여 웹 서버에 접속

2. 클) 브라우저는 이용자의 요청을 해석하여 http 형식으로 웹 서버에 리소스 요청

3. 서) http로 전달된 이용자의 요청 해석

4. 서) 해석한 이용자의 요청에 따라 동작

5. 서) 이용자에게 전달할 리소스를 http 형식으로 이용자에게 전달

6. 클) 브라우저는 서버에게 응답받은 html, css,js 등의 웹 리소스를 시각화하여 이용자에게 보여줌

quiz

http 형식으로 전달

웹 브라우저

연산 순서

1. 웹 브라우저의 주소창에 입력된 주소 해석 url 분석

2. dreamhack.io에 항하는 주소 탐색 dns요청

3. http를 통해 dreamhack.Io에 요청

4. dreamhack.io의 http 응답 수신

5. 리소스 다운로드 및 웹 렌더링

​

url

- uniform resource locator 웹에 있는 리소스의 위치를 표현하는 문자열

Domain Name

- url 구성요소 중 host는 domain name과 ip address 값을 가질 수 있음

- ip address는 사람이 외우기 어려우므로 일반적으로 도메인의 특성을 담은 이름을 정의하여 ip 대신 사용함

- nslookup명령어로 확인 가능

 

웹 렌더링

- 서버로부터 받은 리소스를 이용자에게 시각화하는 행위

- 사파리는 웹킷, 크롬은 블링크, 파이어폭스는 개코 엔진을 사용

 

개발자 도구

요소 검사 - 특정 요소의 개괄적 정보 파악, 관련 코드 파악

디바이스 툴바 - 브라우저 화면 비율 및 user-agent 값 변경 가능

Elements - html읽기, 수정

console - 프론트엔드의 자바스크립ㄹ트 코드에서 발생한 각종 메세지 출력, 이용자가 입력한 자바스크립트 코드 실행

sources - 페이지를 구성하는 웹리소스들 확인

 

 

sources: debug - 원하는 자바스크립트 디버깅

network - 서버와 오가는 데이터 확인

network: copy - 로그 우클릭, copy에서 원하는 형태로 복사 가능

application - 쿠키, 캐시, 이미지, 폰트, 스타일시트 등 웹 애플리케이션과 관련된 리소스를 조회할 수 있음

console drawer - esc로 사용

 

페이지 소스 보기 - 윈도우 ctrl + U / mac cmd+opt+U

시크릿 브라우징 모드 - 윈도우 crtrl + shift + N / mac cmd + shift + N

 

quiz

ip address 가능

 

수정 가능