[Dreamhack] Background - Web

Background: Web

1. 웹

1.1. 웹

인터넷을 기반으로 구현된 서비스 중 HTTP를 이용하여 정보를 공유하는 서비스

• 웹 서버: 정보 제공 주체
• 웹 클라이언트: 정보 받는 이용자
• HTTP: 웹상에서 서로 통신을 하기 위해 정해둔 일종의 규칙

웹의 발전과 웹 보안의 중요성

• 초기 웹 서비스는 저장된 문서의 내용을 출력해 이용자에게 제공하는 간단한 서비스
• 웹과 관련된 기술이 발전하면서 금융, 쇼핑, 협업 등 다양한 분야에서 이용자에게 편의를 주는 복잡한 서비스로 진화
• 단순히 정보를 보여주는 것에서 정보를 검색하고 직접 제품을 구매할 수 있도록 변화
• 웹에서 처리하는 정보 자산들이 많아짐에 따라 이들을 안전하게 보관하고 처리해야 할 필요성도 함께 증가
• 웹을 통한 정보의 교환 과정에서 민감한 정보들이 유출되거나 악용되지 않도록 보호하는 웹 보안의 중요성이 대두

웹 서비스, 프론트엔드와 백엔드

• 이전의 웹 서비스는 이용자가 요청하는 정보를 제공하기만 하는 수동적인 형태였지만, 현재는 이용자의 요청을 해석하고 가공하여 필요한 정보와 기능을 제공하는 능동형 서비스에 가까움
• 프론트엔드: 이용자의 요청을 받는 부분
• 백엔드: 요청을 처리하는 부분

1.2. 웹 리소스

웹에 갖춰진 정보 자산

• 웹 브라우저의 주소창에 http://dreamhack.io/index.html 주소를 입력하면 dreamhack.io에 존재하는 /index.html경로의 리소스를 가져오라는 의미
• 모든 웹 리소스는 고유의 URI (Uniform Resource Indicator)를 가지며, 이를 이용하여 식별됨

프론트엔드를 구성하는 대표적인 웹 리소스

Hyper Text Markup Language (HTML)

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

Cascading Style Sheets (CSS)

• 웹 문서의 생김새를 지정
• 웹 리소스들의 시각화 방법을 기재한 스타일 시트
• 글자의 색깔이나 모양, 배경, 색상, 이미지의 크기나 위치 등을 CSS로 지정
• 브라우저는 이를 참고하여 웹 문서를 시각화

JavaScript (JS)

• 웹 문서의 동작을 정의
• 이용자가 버튼을 클릭했을 때, 어떻게 반응할지, 이용자가 데이터를 입력하면 어디로 전송할지 등을 JS로 구현할 수 있음
• JS는 이용자의 브라우저에서 실행되는데, 클라이언트가 실행하는 코드라고 하여 Client-Side Script라고도 부름

그 외: 문서, 이미지, 동영상, 폰트 등

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

1. (클라이언트) 이용자가 브라우저를 이용하여 웹 서버에 접속
2. (클라이언트) 브라우저는 이용자의 요청을 해석하여 HTTP형식으로 웹 서버에 리소스를 요청
3. (서버) HTTP로 전달된 이용자의 요청을 해석
4. (서버) 해석한 이용자의 요청에 따라 적절한 동작을 함. 리소스를 요청하는 것이라면, 이를 탐색. 계좌 송금, 입금과 같은 복잡한 동작을 요구할 경우 내부적으로 필요한 연산을 처리
5. (서버) 이용자에게 전달할 리소스를 HTTP 형식으로 이용자에게 전달
6. (클라이언트) 브라우저는 서버에게 응답받은 HTML, CSS, JS 등의 웹 리소스를 시각화하여 이용자에게 보여줌

 

Background: HTTP/HTTPS

1. HTTP

1.1. HTTP

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

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

1.2. HTTP 메시지

클라이언트가 전송하는 HTTP 요청, 서버가 반환하는 HTTP 응답이 있음

HTTP 헤드

각 줄은 CRLF로 구분

시작 줄(Start-line): 첫 줄

헤더(Header): 나머지 줄

• 필드
• 값

헤드의 끝은 CRLF 한 줄로 나타냄

HTTP 바디

헤드의 끝을 나타내는 CRLF 뒤, 모든 줄

클라이언트나 서버에게 전송하려는 데이터가 담김

1.3. HTTP 요청

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

서버는 해당 동작이 실현 가능한지, 클라이언트가 그러한 동작을 요청할 권한이 있는지 등을 검토하고, 적절할 때만 이를 처리

시작 줄

메소드 (Method)

• URI가 가리키는 리소스를 대상으로, 서버가 수행하길 바라는 동작
• HTTP 표준에 정의된 메소드는 8개가 있으나 비교적 자주 사용되는 메소드는 GET, POST
• GET
  • 리소스를 가져오라는 메소드
  • 이용자가 브라우저에 웹 서버의 주소를 입력하거나 하이퍼링크를 클릭하면, 새로운 페이지를 렌더링하기 위해 리소스가 필요 → 브라우저는 GET 요청을 서버에 전송하여 리소스를 받아옴
• POST
  • 리소스로 데이터를 보내라는 메소드
  • 전송할 데이터는 보통 HTTP 바디에 포함됨
  • 로그인할 때 입력하는 ID와 비밀번호, 게시판에 작성하는 글 등이 POST로 서버에 보내짐

요청 URI (Request-URI): 메소드의 대상

HTTP 버전: 클라이언트가 사용하는 HTTP 프로토콜의 버전

헤더와 바디

HTTP 메시지에서 설명한 것과 동일

1.4. HTTP 응답

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

요청을 수행했는지, 하지 않았는지, 안 했다면 이유는 무엇인지와 같은 상태 정보(Status), 클라이언트에게 전송할 리소스가 포함

시작 줄

HTTP 버전

• 서버에서 사용하는 HTTP 프로토콜의 버전

상태 코드 (Status Code)

• 요청에 대한 처리 결과를 세자릿수로 나타냄
• HTTP 표준인 RFC 2616은 대략 40여개의 상태 코드를 정의, 각각은 첫 번째 자릿수에 따라 5개의 클래스로 분류

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

처리 사유 (Reason Phrase)

• 상태 코드가 발생한 이유를 짧게 기술한 것

헤더와 바디

시작 줄을 제외한 헤더와 바디는 HTTP 메시지에서 설명한 것과 같음

2. HTTPS

2.1. HTTPS

TLS (Transport Layer Security) 프로토콜을 도입하여 중요 정보가 유출될 수 있는 문제점을 보완

• TLS는 서버와 클라이언트 사이에 오가는 모든 HTTP에 메시지를 암호화함
• 공격자가 중간에 메시지를 탈취하더라도 이를 해석하는 것은 불가능, 결과적으로 HTTP 통신이 도청과 변조로부터 보호됨
• 초기에는 금융이나 정부 서비스와 같이 민감한 데이터를 취급하는 웹 서비스들 위주로 사용됨 → 현재는 규모에 상관 없이 HTTPS를 사용

 

Background: Web Browser

1. 웹 브라우저

1.1. 웹 브라우저

서버와 HTTP 통신을 대신해주고, 수신한 리소스를 시각화하여 문제를 해결

• 뛰어난 이용자 경험 (User eXperience, UX)을 제공하는 소프트웨어
• 이용자는 브라우저를 이용하여 쉽게 정보를 검색하고, 동영상을 보고, 파일을 내려받지만 내부에서 일어나는 연산에 대해서는 전혀 알지 못함

웹 브라우저의 기본 동작

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

1.2. URL

Uniform Resource Locator의 약자로, 웹에 있는 리소스의 위치를 표현하는 문자열

브라우저로 특정 웹 리소스에 접근할 때는, URL을 사용하여 서버에 요청

URL 구성

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

1.3. Domian Name

• URL 구성 요소 중 Host는 웹 브라우저가 접속할 웹 서버의 주소를 나타냄
• Host는 Domain Name, IP Address의 값을 가질 수 있음
• IP Address는 네트워크 상에서 통신이 이루어질 때 장치를 식별하기 위해 사용되는 주소
• IP Address는 사람이 외우기 어려우므로, 일반적으로는 도메인의 특성을 담은 이름을 정의하여 IP 대신 사용
• Domain Name을 Host 값으로 이용할 때, 브라우저는 DNS(Domian Name Server)에 Domain Name을 질의하고, DNS가 응답한 IP Address를 사용
  • 웹 브라우저에서 http://example.com에 접속할 경우, DNS에 질의해 얻은 example.com의 IP와 통신
• Domain Name에 대한 정보는 MacOS/Linux/Windows에서 nslookup 명령어를 사용해 확인할 수 있음

$ nslookup example.com
Server:		8.8.8.8
Address:	8.8.8.8#53

Non-authoritative answer:
Name:	example.com
Address: 93.184.216.34

1.4. 웹 렌더링

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

서버의 응답을 받은 웹 브라우저는 리소스의 타입을 확인하고, 적절한 방식으로 이용자에게 전달

• 웹 렌더링 엔진에 의해서 이루어지는데, 브라우저별로 서로 다른 엔진을 사용
  • 사파리: 웹킷 (Webkit)
  • 크롬: 블링크 (Blink)
  • 파이어폭스: 개코 (Gecko)
• 각각의 엔진에 따라 렌더링 과정과 순서, 속도의 차이는 있지만, HTML을 파싱하고 시각화하여 이용자에게 보여주는 것은 같음
• 이용자의 요청이 들어오면 서버는 웹 리소스들로 응답하고, 웹 브라우저는 이용자가 볼 수 있는 형태로 가공하여 화면에 출력

 

Tools: Browser DevTools

1. 개발자 도구

1.1. 개발자 도구

브라우저를 열고 F12를 눌러 개발자 도구를 실행

개발자 도구 레이아웃

🔴 요소 검사(Inspect) 및 디바이스 툴바(Device Toolbar)

🟠 기능 선택 패널

• Elements: 페이지를 구성하는 HTML 검사
• Console: 자바 스크립트를 실행하고 결과를 확인할 수 있음
• Sources: HTML, CSS, JS 등 페이지를 구성하는 리소스를 확인하고 디버깅 할 수 있음
• Network: 서버와 오가는 데이터를 확인할 수 있음
• Performance
• Memory
• Application: 쿠키를 포함하여 웹 어플리케이션과 관련된 데이터를 확인할 수 있음
• Security
• Lighthouse

🟡 현재 페이지에서 발생한 에러 및 경고 메시지

🟢 개발자 도구 설정

1.2. 요소 검사

특정 요소의 개괄적인 정보를 파악하고, 이와 관련된 코드를 쉽게 찾을 수 있음

• 요소 검사 버튼을 누르고 웹 페이지의 원하는 요소에 마우스를 올리면, 대상의 정보가 출력
• 클릭하면 관련된 HTML 코드가 하이라이팅

1.3. 디바이스 툴바

현재 브라우저의 화면 비율 및 User-Agent를 원하는 값으로 변경할 수 있음

• 현대에는 웹에 접속하는 장치가 데스크톱, 태블릿, 스마트폰, 노트북 등으로 다양해지고 있으며, 웹 페이지가 렌더링되어야 할 화면 비율도 가지각색으로 많아지고 있음
• 개발자는 모든 이용자에게 좋은 웹 경험을 줘야하므로, 자신이 개발한 웹 서비스가 다른 장치에서도 잘 작동하는지 점검해봐야 함
• 디바이스 툴바를 이용하면 점검을 쉽게 진행할 수 있음

1.4. Elements

HTML 읽기

현재 페이지를 구성하는 HTML의 코드를 읽을 수 있음

HTML 수정

코드를 선택한 상태로 단축키 F2를 누르거나 더블 클릭하면, 수정할 수 있음

요소 검사 기능을 같이 활용하면 수정할 코드를 빠르게 선택할 수 있어 편리함

1.5. Console

프론트엔드의 자바스크립트 코드에서 발생한 각종 메시지를 출력하고, 이용자가 입력한 자바스크립트 코드를 실행하는 도구

• 자바스크립트로 웹 개발을 할 때, console 오브젝트에는 개발자 도구의 콘솔에 접근할 수 있는 함수가 정의되어 있음
• 코드를 작성하면서 어떤 변수의 값을 중간에 출력해보고 싶다면, console.log 등을 유용하게 사용할 수 있음

NodeJS의 console 오브젝트

> console
Console {
  log: [Function: bound consoleCall],
  debug: [Function: bound consoleCall],
  info: [Function: bound consoleCall],
  dirxml: [Function: bound consoleCall],
  warn: [Function: bound consoleCall],
  error: [Function: bound consoleCall],
  ...
  context: [Function: context],
  [Symbol(counts)]: Map {},
  [Symbol(kColorMode)]: 'auto' }

• 콘솔을 사용하면 브라우저에서 자바스크립트를 실행하고 결과를 확인할 수 있음

// "hello" 문자열을 출력하는 alert 함수를 실행합니다.
alert("hello");

// prompt는 popup box로 이용자 입력을 받는 함수입니다.
// 이용자가 입력한 데이터는 return value로 설정됩니다.
var value = prompt('input')

// confirm 는 확인/취소(yes/no)를 확인하는 이용자로부터 입력 받는 함수입니다.
// 이용자의 선택에 따라 Boolean(true/false)타입의 return value를 가집니다.
var true_false = confirm('yes or no ?');

// document.body를 변경합니다.
document.body.innerHTML = '<h1>Refresh!</h1>';

// document.body에 새로운 html 코드를 추가합니다.
document.body.innerHTML += '<h1>HI!</h1>';

1.6. Sources

현재 페이지를 구성하는 웹 리소스들을 확인할 수 있음

Sources 레이아웃

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

🟠 선택한 리소스 상세 보기

🟢 디버깅 정보

• Watch: 원하는 자바스크립트 식을 입력하면, 코드 실행 과정에서 해당 식의 값 변화를 확인할 수 있음
• Call Stack: 함수들의 호출 순서를 스택 형태로 보여줌
• Scope: 정의된 모든 변수들의 값을 확인할 수 있음
• Breakpoints: 브레이크포인트들을 확인하고, 각각을 활성화 또는 비활성화할 수 있음

1.7. Sources: Debug

원하는 자바스크립트를 디버깅할 수도 있음

Popup Boxes

이용자가 입력한 name, num에 따라 실행 흐름이 바뀌는 코드

</!DOCTYPE html>
<html>
<head>
    <title>JS Debug</title>
</head>
<body>
    <input type='text' id='input-name' placeholder='name'><br/>
    <input type='text' id='input-num' placeholder='num'><br/>
    <!-- 버튼 클릭 시 button_click함수가 실행됩니다. -->
    <input type='button' onclick='button_click()' value="Click">
<script>
    /*
     name과 num에 대한 변수를 검증하는 함수입니다.
     name이 'dreamhack', num이 31337인 경우 "congratulations !" 문자열을 출력합니다.
    */
    function compare(name, num){
        if(name == 'dreamhack'){
            if(num == 31337){
                console.log("congratulations !");
                return;
            }
        }
        console.log("No !");
    }
    /*
     버튼 클릭 시 실행되는 함수입니다.
     'input-name', 'input-num'의 값을 가져와 compare함수를 실행합니다.
    */
    function button_click() {
        var name = document.getElementById('input-name').value;
        var num = parseInt(document.getElementById('input-num').value);
        compare(name, num);
    }
</script>
</body>
</html>

디버깅 과정

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

1.8. Network

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

🔴 로깅 중지 및 로그 전체 삭제

🟠 로그 필터링 및 검색

🟢 옵션

• Preserve log: 새로운 페이지로 이동해도 로그를 삭제하지 않음
• Disable cache: 이미 캐시된 리소스도 서버에 요청함

🟡 네트워크 로그

🔵 네트워크 로그 요약 정보

1.9. Network: Copy

로그를 우클릭하고, Copy에서 원하는 형태로 복사할 수 있음

Copy as fetch로 HTTP Request를 복사하고 Console패널에 붙여서 실행하면, 동일한 요청을 서버에 재전송할 수 있음

1.10. Application

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

Cookies에서는 브라우저에 저장된 쿠키 정보를 확인하고 수정할 수 있음

1.11. Console Drawer

개발자 도구에 새로운 콘솔창을 열어 가시성과 효율성을 높일 수 있음

네트워크 패널과 콘솔 패널을 동시에 사용할 수도 있음

단축키

Windows, MAC: ESCTools: Browser DevTools

2. 기타 브라우저 기능

2.1. 페이지 소스 보기

페이지와 관련된 소스 코드들을 모두 확인할 수 있음

단축키

• Windows/Linux: Ctrl + U
• macOS: Cmd(⌘) + Opt(⌥) + U

2.2. Secret browsing mode

시크릿 모드에서는 새로운 브라우저 세션이 생성

• 일반적으로 브라우저의 탭들은 쿠키를 공유하는데, 시크릿 모드로 생성한 탭은 쿠키를 공유하지 않음
• 같은 사이트를 여러 섹션으로 사용할 수 있어서 다수의 계정으로 서비스를 점검할 때 유용

브라우저를 종료했을 때 저장되지 않는 항목

• 방문 기록
• 쿠키 및 사이트 데이터
• 양식에 입력한 정보
• 웹사이트에 부여된 권한

단축키

• Windows/Linux: Ctrl + Shift + N
• macOS: Cmd(⌘) + shift(⇧) + N