웹 클라이언트

먼저 묻는 쪽이 클라이언트입니다

클라이언트와 서버는 기계가 아니라 역할입니다. 말을 먼저 걸어 무언가를 달라고 하는 쪽이 클라이언트이고, 기다렸다가 답하는 쪽이 서버입니다. 브라우저도 클라이언트, curl 도 클라이언트, 휴대폰 앱도, API 를 부르는 다른 서버도 클라이언트입니다.

그래서 웹 클라이언트를 한 줄로 쓸 수 있습니다. 창도, 렌더링 엔진도, 마우스도 필요 없습니다 — 연결하고, 요청을 보내고, 돌아온 것을 읽으면 됩니다.

터미널로 웹 클라이언트 만들기

HTTP 가 글자일 뿐이라는 것을 가장 빨리 믿는 방법은 요청을 직접 쳐 보는 것입니다. 앞 주제의 쉘 웹서버를 띄워 놓고, 터미널을 하나 더 열어 손으로 말을 걸어 보세요.

nc 로 요청을 손으로 쓰기

netcat 은 포트에 연결해 여러분이 친 글자를 그대로 선에 흘려보냅니다. 두 줄을 치고 엔터를 두 번 누르면 서버가 답합니다 — 방금 브라우저의 일을 손으로 한 것입니다.

# connect, then type the two lines below and press Enter once more
nc localhost 8084

GET / HTTP/1.1
Host: localhost

# or send it all at once (printf's \r\n is HTTP's line break)
printf 'GET / HTTP/1.1\r\nHost: localhost\r\n\r\n' | nc localhost 8084

• 끝의 빈 줄이 중요합니다. 요청이 끝났다고 서버에게 알리는 표시이고, 그래서 엔터를 한 번 더 누릅니다.
• HTTP 는 줄 끝마다 캐리지리턴과 줄바꿈을 요구합니다. 손으로 쳐도 되는 것은 대개의 서버가 너그럽기 때문이고, printf 판은 규격이 요구하는 그대로를 보냅니다.
• Host 줄은 HTTP/1.1 이 반드시 요구합니다. 진짜 사이트에 이것 없이 보내면 페이지 대신 오류가 돌아오는 것이 보통입니다.

스크립트로 감싸기

요청이 printf 한 줄이 되고 나면, 다시 쓸 수 있는 클라이언트는 몇 줄이면 됩니다. 아래 스크립트는 호스트 · 포트 · 경로를 받아 요청을 보내고, 헤더와 본문을 갈라 보여 줍니다.

#!/bin/bash
# usage: bash client.sh localhost 8084 /

HOST=${1:-localhost}
PORT=${2:-8084}
PATH_=${3:-/}

printf 'GET %s HTTP/1.1\r\nHost: %s\r\nConnection: close\r\n\r\n' "$PATH_" "$HOST" \
  | nc "$HOST" "$PORT" \
  | tr -d '\r' \
  | awk 'BODY { print; next } /^$/ { BODY = 1; next } { print "[header] " $0 }'

tr 은 HTTP 가 줄 끝마다 남기는 캐리지리턴을 걷어 내고, awk 는 빈 줄을 만날 때까지를 헤더로 표시합니다 — 그 뒤는 전부 본문입니다. 브라우저가 화면을 그리기 전에 하는 것과 똑같은 나눔입니다.

curl — 매일 쓰게 될 클라이언트

우리 스크립트가 대충 하던 것을 curl 은 제대로 합니다. 리다이렉트, HTTPS, 헤더, 업로드, 시간 제한, 쿠키까지. 거의 모든 기계에 들어 있고, 브라우저를 끼우지 않고 서버를 확인하는 표준 방법입니다.

# body only
curl http://localhost:8084

# body plus the response headers
curl -i http://localhost:8084

# the whole exchange, request headers included
curl -v http://localhost:8084

중요한 옵션들

API 호출하기

요즘 앱이 말을 거는 상대는 페이지가 아니라 JSON 을 돌려주는 API 인 경우가 많습니다. curl 이 그것을 받아 오고 jq 가 읽기 좋게 다듬습니다. 응용 코드를 한 줄도 쓰기 전에 엔드포인트를 확인하는 방법입니다.

# fetch JSON and pick one field out of it with jq
curl -s https://api.github.com/repos/sveltejs/svelte | jq '.stargazers_count'

# send JSON with POST
curl -X POST https://httpbin.org/post \
  -H 'Content-Type: application/json' \
  -d '{"name":"PES","level":1}'

# download to a file
curl -L -o page.html https://getpes.com

무엇이든 curl 로 먼저 시험하는 버릇을 들이세요. curl 이 제대로 된 답을 받으면 서버는 멀쩡하고 잘못은 내 프로그램에 있는 것이고, curl 도 이상한 답을 받으면 엉뚱한 데를 뒤지며 반나절을 버릴 뻔한 것을 아낀 셈입니다.

Chrome 도 같은 클라이언트입니다, 크기만 다를 뿐

Chrome 은 여러분이 nc 로 보낸 그 요청을 보냅니다. 그러고 나서 돌아온 답을 사람이 볼 수 있는 화면으로 바꾸는 어마어마한 일을 더 합니다 — 진짜 차이는 그 "더" 뿐입니다.

그 단계들을 알아 둘 값어치가 있습니다. 하나하나가 페이지가 어긋날 수 있는 자리이기 때문입니다. 무언가 안 보일 때 물어야 할 것은 언제나 "어느 단계에서 실패했는가" 입니다.

주소창에서 그림까지

1. 이름 풀기DNS 가 도메인 이름을 IP 주소로 바꿉니다. 여기서 실패하면 서버에 닿아 보지도 못하고, 오류 메시지도 페이지가 아니라 이름을 가리킵니다.
2. 연결하고 안전하게 만들기연결을 열고, https 라면 무엇을 보내기도 전에 인증서를 확인합니다. 여기서 나오는 경고는 페이지가 없다는 뜻이 아니라 암호화를 믿을 수 없다는 뜻입니다.
3. 요청 보내기여러분이 손으로 친 것과 같은 몇 줄에 헤더가 훨씬 많이 붙습니다. 쿠키, 읽을 수 있는 형식, 좋아하는 언어 같은 것들입니다.
4. 해석하고 나머지 받아 오기HTML 을 읽어 태그로 요소의 나무를 세우고, 페이지가 가리키는 것을 전부 요청합니다 — 스타일 파일, 그림, 글꼴, 스크립트를 보통 여러 개 동시에.
5. 꾸미고, 배치하고, 그리기CSS 를 입히고, 상자마다 자리를 계산하고, 결과를 그린 다음, 그 모든 것을 다시 바꿀 수 있는 JavaScript 를 돌립니다.

터미널 클라이언트냐 브라우저냐

개발자 도구 — 오가는 글을 눈으로 보기

Chrome 에는 세상에서 가장 좋은 웹 디버깅 도구가 들어 있고, 이미 설치되어 있습니다. nc 로 손수 보내던 것이 여기에 요청 하나하나로, 그 옆에 응답까지 함께 늘어섭니다.

패널들

지금 바로 해 볼 세 가지

1. 내 요청 찾아보기Network 패널을 열고 이 페이지를 새로고침한 뒤 맨 첫 항목을 눌러 보세요. 거기 있는 요청·응답 헤더가 여러분이 nc 에 쳐 넣던 바로 그 줄들입니다.
2. curl 로 복사하기요청을 오른쪽 눌러 [Copy as cURL] 을 고르고 터미널에 붙여 넣으세요. 헤더도 쿠키도 그대로, 브라우저가 한 일을 똑같이 재현한 것입니다.
3. 일부러 망가뜨려 보기Elements 패널에서 제목을 지워 사라지는 것을 보고, Network 에서 속도를 느리게 조절한 뒤 새로고침해 보세요. 둘 다 안전하고, 둘 다 글로 읽는 것보다 훨씬 많이 가르쳐 줍니다.