웹 기초 상식 (HTTP, 웹 브라우저, 개발자 도구)

웹 리소스

http://dreamhack.io/index.html 주소를 입력하면 dreamhack.io에 존재하는 /index.html 경로의 리소스를 가져오라는 의미다.

HTML, CSS, Java Script 가 있다.

HTTP

웹 서버와 클라이언트가 리소스를 교환하기 위해 사용하는 프로토콜.

클라이언트가 서버에게 요청하면, 서버가 응답하는 형식

 

웹 서버는 HTTP 서버를 HTTP 서비스 포트(항구)에 대기시킴, 일반적으로 포트는 TCP/80 또는 TCP/8080

전송 계층(Transport Layer)의 프로토콜(TCP와 UDP)을 따른다.

HTTP의 서비스 포트가 TCP/80 이라고 하면, HTTP 서비스를 80번 포트에서 TCP로 제공하고 있다는 뜻

HTTP 메시지

헤드와 바디로 구성됨, 각 줄은 CRLF로 구분됨

HTTP 헤드

메시지에 대한 정보. 헤드의 끝에는 CRLF가 한 줄 있음.

시작 줄(첫 번째 줄)과 헤더(나머지 줄)로 구성

헤더: 필드와 값으로 구성되며, 속성을 나타낸다.

HTTP 바디

클라이언트가 서버에게, 또는 서버가 클라이언트에게 전달할 데이터가 담긴다.

HTTP 요청

서버에게 특정 동작(메소드)을 요구하는 메시지

시작줄

메소드, 요청 URI, HTTP 버전으로 구성

• 메소드: URI가 가리키는 리소스를 대상으로, 서버가 하길 바라는 동작. ex) GET, POST
  
  • GET: 새로운 페이지를 렌더링하기 위해 리소스를 가져와라.
  • POST: 리소스로 데이터를 보내라. ex) ID, 비밀번호, 게시판 작성 글 등이 서버로 보내진다.
• 요청 URI: 메소드의 대상
• HTTP 버전: 클라이언트가 사용하는 HTTP 프로토콜의 버전

HTTP 응답

HTTP 요청에 대한 결과를 반환하는 메시지

상태 정보와 클라이언트에게 전송할 리소스가 포함됨

시작줄

HTTP 버전, 상태 코드, 처리 사유로 구성

• 상태 코드: 처리 결과를 나타내는 세 자릿수 
  • 200: 성공
  • 404: 리소스가 없음

• 처리 사유: 상태 코드가 발생한 이유

HTTP 메시지

HTTP의 응답/요청은 평문으로 전달됨, 만약 이를 가로챈다면 정보 유출 발생

HTTPS (HTTP over Secure socket layer)

TLS를 이용하여 HTTP의 약점을 보완한 프로토콜

서버 - 클라이언트 사이에 오가는 모든 HTTP 메시지를 암호화

웹 서버 URL이 https://로 시작되면 HTTPS 프로토콜 사용하는 것이다.

---

웹 브라우저

• HTTP/S로 이용자와 웹 서버의 통신을 중개해줌
  • 이용자가 프로토콜을 이해하지 않고도 웹을 사용할 수 있음
• 수신한 리소스를 시각화함(렌더링)
  • UX(이용자 경험)을 제공하는 소프트웨어라고 할 수 있음

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

URL(Uniform Resource Locator)

브라우저는 URL을 사용하여 서버에 특정 리소스를 요청

• scheme : 어떤 프로토콜로 통신할 건가
• authority: 웹 서버 주소와, 포트 정보
• path: 웹 서버의 리소스 경로, '/'로 구분됨
• query: '?' 뒤에 위치, 웹 서버에 전달하는 파라미터
• fragment: '#' 뒤에 위치, 메인 리소스에 존재하는 서브 리소스에 접근할 때 식별하기 위한 정보를 담음

Domain Name

IP Address는 사람이 외우기 어려우므로, 일반적으로는 도메인의 특성을 담은 이름을 정의한 것

DNS(Domain Name Server)

Host의 도메인 이름을 IP로 변환하거나 IP를 도메인 이름으로 변환해줌

nslookup 명령어로 확인할 수 있다.

---

개발자 도구(Devtools)

- 브라우저 열고, F12

사용 목적

• html, css 코드를 브라우저에서 수정하고, 결과를 바로 확인할 수 있고 자바스크립트 코드는 디버거도 제공함
• 서버와 오가는 HTTP 패킷도 보여준다 -> 프로토콜 상에서 발생하는 문제 발견 가능

몇 가지 사용법

1. Elements (HTML을 읽고, 수정 가능)

• HTML 수정: 수정하고 싶은 코드를 선택 + F2

2. Console (자바스크립트 코드를 실행하고, 결과 확인)

• console.log: 특정 변수의 값을 콘솔 화면에 출력할 때 사용하는 함수

3. Sources

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

4. Network: 서버와 오가는 데이터 확인(네트워크 로그)

5. Application: 쿠키, 캐시, 이미지, 폰트, 스타일 시트 등 웹 어플리케이션과 관련된 리소스 조회

6. 디바이스 툴바: 브라우저의 화면 비율 및 User-Agent 를 원하는 값으로 변경(UX)

디바이스 툴바로 아이패드 프로의 화면 비율로 웹을 볼 수 있다.

(실습) Sources - 자바 스크립트 Debug

1. 원하는 코드 라인을 클릭하여 해당 라인에 브레이크포인트를 설정합니다.
2. 임의의 데이터를 입력하면 해당 브레이크포인트에서 실행이 멈춥니다.
3. Scope 에서 현재 할당된 변수들을 확인하고 값을 변경할 수 있습니다.

name 에 dreamhack, num 에 31337 을 치고 Click 버튼을 누르면, 콘솔 창에 c ongratulations ! 가 출력되는 페이지.

Scope 에서 name 값을 "dreamhack" 으로 수정하고 나서, 중단점을 실행시키면 congratualtions ! 가 출력됨

 

기타 웹 브라우저 기능

• 페이지 소스 보기: Windows(Ctrl + U)
• 시크릿 모드: Windows(Ctrl + Shift + N)

---

관련 Wargame 문제

https://dreamhack.io/wargame/challenges/267/

devtools-sources

풀이: https://ahnustudy.tistory.com/7