The document discusses the process of how a browser loads a webpage from inputting a URL to displaying the content. It involves: 1. The browser parsing the input URL and checking HSTS lists to determine if a secure connection is required. 2. It uses DNS to resolve the domain name to an IP address. 3. A TCP socket connection is established between the server and router gateways. 4. An HTTP(S) request and response is made, which the browser then parses and renders the content.

1. (면접에서 자주 나오는)
HTTP : 브라우저에서 서버까지
iolothebard @ gmail dot com
2022-06-02T16:00:00+09:00

2. $ whoami
● 창업 / 백수 / 창업 / 백수 / 창업 / 백수
● 한컴 씽크프리(2007-2009)
● KTH(2010-2013)
● 다음커뮤니케이션(2014) / 다음카카오
(2015) / 카카오(2016)
● 레진엔터테인먼트(2017)
● 패스트캠퍼스(2018-2020) / 데이원컴퍼니
(2021)

3. 브라우저에 주소를 입력하고 첫 화면이
출력되기까지의 과정을 아는대로
설명해주세요.

4. 가장 용감한(?) 답변

5. That’s none of
my business

6. 가장 준비된(?) 답변

7. 브라우저의 주소창에 URL입력 & 파싱
HSTS 목록 확인
DNS를 통해 도메인네임을 IP주소로
변환
라우터를 통해 해당 서버의
게이트웨이로
서버와 TCP 소켓 연결
HTTP(S)로 요청 & 응답
브라우저에서 응답을 파싱 & 렌더링
ARP를 통해 IP주소를 MAC주소로 변환

8. So, what?

9. URL
● https://developer.mozilla.org/en-US/docs/Web/API/URL/URL
● https://nodejs.org/dist/latest-v16.x/docs/api/url.html
new URL('https://user:pass@example.com:8080/p/a/t/h?query=string#hash');
URL {
href: 'https://user:pass@example.com:8080/p/a/t/h?query=string#hash',
origin: 'https://example.com:8080',
protocol: 'https:',
username: 'user',
password: 'pass',
host: 'example.com:8080',
hostname: 'example.com',
port: '8080',
pathname: '/p/a/t/h',
search: '?query=string',
searchParams: URLSearchParams { 'query' => 'string' },
hash: '#hash'
}

10. HSTS
● https://hstspreload.org/
● https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Strict-Transport-Security
● https://helmetjs.github.io/
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
return 301 https://$host;
}
server {
listen 443 ssl;
server_name www.example.com;
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
}

11. DNS
● https://datatracker.ietf.org/doc/html/rfc1035
● https://nodejs.org/api/dns.html
$ nslookup example.com
$ dig example.com
const dns = require('dns/promises');
await dns.lookup('example.com')
{ address: '93.184.216.34', family: 4 }

12. DNS
● https://developers.cloudflare.com/1.1.1.1/encryption/dns-over-https/
$ curl --http2 -H 'accept: application/dns-json'
https://1.1.1.1/dns-query?name=example.com
{
"Status": 0, "TC": false, "RD": true, "RA": true, "AD": true, "CD": false,
"Question": [
{"name": "example.com","type": 1}
],
"Answer": [
{"name": "example.com","type": 1,"TTL": 75281,"data": "93.184.216.34"}
]
}

13. 라우터 & 게이트웨이 & ARP & …

14. 라우터 & 게이트웨이 & ARP & …
That’s none of
my business

15. TCP
● https://en.wikipedia.org/wiki/Transmission_
Control_Protocol
● https://www.w3.org/TR/tcp-udp-sockets/
● https://nodejs.org/api/net.html
● https://nodejs.org/api/tls.html
● https://github.com/digitalbazaar/forge
$ netstat -t
$ ss -t

16. TCP

17. TCP
That’s none of
my business

18. TCP Client
const net = require('net');
const client = new net.Socket();
client.connect(8080, '127.0.0.1',() => {
client.write('GET / HTTP/1.1rn');
client.write(User-Agent: simple-http-clientrn');
client.write('rn');
client.write('Hello,World!');
});
client.on('data',(data) => {
console.log(data);
});

19. TCP Server
const net = require('net');
const server = net.createServer();
server.on('connection', (socket) => {
socket.write('HTTP/1.1 200 OKrn');
socket.write('Server: simple-http-serverrn');
socket.write('rn');
socket.write('Hello,World!');
socket.on('data',(data) => {
console.log(data);
});
});
server.listen(8080);

20. TLS

21. TLS

22. TLS
That’s none of
my business

23. HTTP(S)
● https://datatracker.ietf.org/doc/html/rfc2616
● https://developer.mozilla.org/docs/Web/HTTP
● https://nodejs.org/api/http.html
● https://nodejs.org/api/https.html
● https://howhttps.works/ko/
● HTTPS = HTTP with SSL/TLS
● TLS 1.0 (IETF) = SSL 3.1 (Netscape)

24. HTTP: 0.9 vs 1.0 vs 1.1 vs 2.0 vs 3.0
● https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP
● https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
0.9
Request Line
only
GET method
only
1.0
Request Line with HTTP
Version
Request Headers
POST, HEAD methods
Status Line
Response Headers
1.1
PUT, PATCH, DELETE,
CONNECT TRACE,
OPTIONS methods
Persistence Connection
…
2.0
Binary Frames
Multiplexing
Prioritization
Server Push
Header Compression
…
3.0
TCP/TLS → QUIC
1991 1996 1997 2015
SSL 1.0/2.0 SSL 3.0 TLS 1.0 = SSL 3.1 TLS 1.1 TLS 1.2 TLS 1.3
1994 1999 2006 2008 2018

25. HTTP Client
● ex. nodejs http module
const http = require('http');
const req = http.get('http://127.0.0.1:8080', (res) => {
res.on('data', (data) => {
console.log(data);
});
});
● ex. nodejs axios module
const axios = require('axios');
const res = await axios.get('http://127.0.0.1:8080');
console.log(res.data);

26. HTTP Server
● ex. nodejs http module
const http = require('http');
const server = http.createServer((req, res) => {
res.end('Hello,World!');
});
server.listen(8080);
● ex. nodejs express module
const express = require('express');
const app = express();
app.get('/', function(req, res) {
res.send('Hello,World!');
});
app.listen(8080);

27. HTTPS Client
const https = require('https');
process.env.NODE_TLS_REJECT_UNAUTHORIZED = 0;
https.get('https://localhost:8080/', (res) => {
console.log('statusCode:', res.statusCode);
console.log('headers:', res.headers);
res.setEncoding('utf8');
res.on('data', (data) => {
console.log(data);
});
});

28. HTTPS Server
const https = require('https');
const fs = require('fs');
const server = https.createServer({
key: fs.readFileSync('key.pem'),
cert: fs.readFileSync('cert.pem'),
}, (req, res) => {
console.log(req.method, req.url, req.httpVersion);
console.log(req.headers);
res.writeHead(200);
res.end('Hello,World!n');
});
server.listen(8080);

29. 브라우저: HTML, CSS, DOM, JS
● https://d2.naver.com/helloworld/59361
● https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

30. 브라우저: SPA & SSR

31. Demo

32. https://github.com/iolo/http-from-scratch

33. 어때요?
차-ㅁ 쉽죠?

34. Epilogue

35. “The good things reinventing the wheel is that
you can get a round one.”
- Douglas Crockford

36. Q&A

37. FIN