[Dreamhack] W - STAGE 2 Background: Web

1. 웹

• HTTP를 이용해서 정보를 공유하는 서비스를 웹이라고 한다. 정보 제공 주체는 웹 서버, 정보를 받는 이용자를 웹 클라이언트이다.
• 웹 서비스의 구조에서 이용자의 요청을 받는 부분을 프론트엔드, 요청을 처리하는 부분을 백엔드라고 부름
• 프론트엔드는 웹 리소스로 이루어져 HTML, CSS, JS 등으로 이루어진다.

 

2. HTTP/HTTPS

2-1 HTTP

• HTTP란 서버와 클라이언트의 데이터 교환을 요청과 응답 형식으로 정의한 프로토콜이다.
• 웹 서버는 HTTP 서버를 HTTP 서비스 포트에 대기시킨다. 이 포트는 일반적으로 TCP/80 또는 TCP/8080이다.
• 네트워크 포트와 서비스 포트
  • 네트워크 포트 중 특정 서비스가 점유하고 있는 포트를 서비스 포트라고 하며 각 서비스는 전송 계층의 정해진 프로토콜을 따라 통신한다.
  • 1~1023번까지는 잘 알려진(Well-Known port)로 각 포트 번호에 유명한 서비스가 등록되어있습니다. 포트는 65536개의 수를 가진다.

HTTP 메세지 

• 바디: 헤더 뒤 모든 줄로 정보가 담김.
• 헤더: 각 줄은 CRLF로 구분되며 필드/값으로 메세지나 바디의 속성을 나타냄.

HTTP 요청

• 시작 줄은 Method, 요청 URL. HTTP 버전으로 구성됨
• Method: 대표적인 메소드는 GET과 POST가 있는데 GET은 리소스를 가져오라는 메소드로 서버에 요청을 해 리소스를 받아 새로운 페이지를 랜더링합니다. 반대로, POST는 리소스로 데이터를 보내라는 메소드로 전송할 데이터는 보통 HTTP 바디에 포함된다.
• 헤더와 바디

HTTP 응답

• 시작 줄: HTTP 버전, 상태 코드, 처리 사유로 구성됨
• 상태코드

상태 코드 설명 대표 예시

1xx	요청을 제대로 받았고, 처리가 진행 중임
2xx	요청이 제대로 처리됨	• 200: 성공
3xx	요청을 처리하려면, 클라이언트가 추가 동작을 취해야 함.	• 302: 다른 URL로 갈 것
4xx	클라이언트가 잘못된 요청을 보내어 처리에 실패했습니다.	• 400: 요청이 문법에 맞지 않음
• 403: 클라이언트가 리소스에 요청할 권한이 없음
• 404: 리소스가 없음
5xx	클라이언트의 요청은 유효하지만, 서버에 에러가 발생하여 처리에 실패했습니다.	• 500: 요청을 처리하다가 에러가 발생함
• 503: 서버가 과부하로 인해 요청을 처리할 수 없음

• 헤더와 바디

2-2 HTTPS

• HTTP 전송과 응답이 평문으로 전송되는 반면 HTTPS(HTTP over Secure socket layer)는 TLS 프로토콜을 사용해 HTTP 메세지를 암호화한다.

 

3. 웹 브라우저

• 웹 브라우저의 동작 원리

1. 웹 브라우저의 주소창에 입력된 주소(dreamhack.io)를 해석 (URL 분석)
2. dreamhack.io에 해당하는 주소 탐색 (DNS 요청)
3. HTTP를 통해 dreamhack.io에 요청
4. dreamhack.io의 HTTP 응답 수신
5. 리소스 다운로드 및 웹 렌더링 (HTML, CSS, Javascript)

URL요소 설명

• Scheme	웹 서버와 어떤 프로토콜로 통신할지 나타냅니다.
  Host	Authority의 일부로, 접속할 웹 서버의 주소에 대한 정보를 가지고 있습니다.
  Port	Authority의 일부로, 접속할 웹 서버의 포트에 대한 정보를 가지고 있습니다.
  Path	접근할 웹 서버의 리소스 경로로 '/'로 구분됩니다.
  Query	웹 서버에 전달하는 파라미터이며 URL에서 '?' 뒤에 위치합니다.
  Fragment	메인 리소스에 존재하는 서브 리소스를 접근할 때 이를 식별하기 위한 정보를 담고 있습니다. '#' 문자 뒤에 위치합니다.

• URL은 Uniform Resource Locator의 약자로 웹에 있는 리소스의 위치를 표시하는 문자열이다. URL은 Scheme, Authority (Userinfo, Host, Port), Path, Query, Fragment 등으로 구성된다. 더 자세한 설명은 공식 문서를 참고한다.

 

Domain Name

• URL의 구성 요소 중 Host는 웹 브라우저가 접속할 웹 서버의 주소를 나타낸다. Domain Name과 IP Address의 값으로 나타낼 수 있으며 일반적으로는 도메인의 특성을 담은 이름을 정의해 IP 대신 사용한다. 이를 사용할 떄 Domain Name Server(DNS)에서 도메인 이름을 IP 주소와 매칭시켜 찾은 후 실질적으로 IP와 통신을 수행한다.

 

웹 랜더링

• 웹 랜더링은 랜더링 엔진에 의해서 이루어지는데 브라우저별로 엔진이 다르다. 사파리는 웹킷, 크롬은 블링크, 파이어폭스는 개코 엔진을 사용한다.
• 웹 랜더링은 서버부터 받은 리소스를 이용자에게 시각화하는 것이다. 브라우저는 서버의 응답에 HTML을 파싱하고 CSS를 적용해 이용자에게 보인다.

 

개발자 도구

Elements: 페이지를 구성하는 HTML 검사. 코드를 선택하고 단축기 F2를 누르거나 더블클릭하면 이를 수정 가능.

Console(Control+Shift+J): 자바 스크립트를 실행하고 결과를 확인할 수 있음

Sources: HTML, CSS, JS 등 페이지를 구성하는 리소스를 확인하고 디버깅할 수 있음

 

🔴현재 페이지의 리소스 파일 트리, 파일 시스템

🟠선택한 리소스 상세 보기

🟢디버깅 정보

---

• Watch: 원하는 자바스크립트 식을 입력하면, 코드 실행 과정에서 해당 식의 값 변화를 확인할 수 있습니다.
• Call Stack: 함수들의 호출 순서를 스택 형태로 보여줍니다. 예를 들어, A → B → C 순서로 함수가 호출되어 현재 C 내부의 코드를 실행하고 있다면, Call Stack의 가장 위에는 C, 가장 아래에는 A가 위치합니다.
• Scope: 정의된 모든 변수들의 값을 확인할 수 있습니다.
• Breakpoints: 브레이크포인트들을 확인하고, 각각을 활성화 또는 비활성화할 수 있습니다.

Network: 서버와 오가는 데이터를 확인할 수 있음

• Preserve log: 새로운 페이지로 이동해도 로그를 삭제하지 않습니다.
• Disable cache: 이미 캐시된 리소스도 서버에 요청합니다.
• Copy as fetch로 HTTP Request를 복사하고 Console  패널에 붙여서 실행하면, 동일한 요청을 서버에 재전송할 수 있습니다.

 

Application: 쿠키를 포함하여 웹 어플리케이션과 관련된 데이터를 확인할 수 있음

• • 페이지 소스보기(Ctrl+U)
  • 시크릿모드(Ctrl+Shift+N): 방문 기록, 쿠키 및 사이트 데이터, 양식 입력 정보, 웹사이트에 부여된 권한이 저장되지 않음.

•