๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

Frontend Dev/๐Ÿฅ ์ฝ”๋“œ์Šคํ…Œ์ด์ธ  FE ๋ถ€ํŠธ์บ ํ”„

Section3 Unit6 [๋„คํŠธ์›Œํฌ] ์‹ฌํ™”

๋ฐ˜์‘ํ˜•


Section3 Unit6 [๋„คํŠธ์›Œํฌ] ์‹ฌํ™”

 

๐Ÿ“Œ Chapter1. TCP/IP

• TCP (Transmission Control Protocol)

 ์‹ ๋ขฐ์„ฑ ์žˆ๋Š” ๋ฐ์ดํ„ฐ ์ „์†ก์„ ์ง€์›ํ•˜๋Š” ์—ฐ๊ฒฐ ์ง€ํ–ฅํ˜• ํ”„๋กœํ† ์ฝœ.

 TCP๋Š” ํ†ต์‹ ์„ ํ•˜๊ธฐ ์ „์— ๋จผ์ € ์„œ๋กœ์˜ ์ปดํ“จํ„ฐ์— ์—ฐ๊ฒฐ์„ ์„ค์ •ํ•˜์—ฌ ์ „์†ก ๊ณผ์ •์—์„œ ํŒจํ‚ท์˜ ์†์‹ค์„ ๊ฒ€์‚ฌํ•˜๊ณ  ์ˆœ์„œ๊ฐ€ ๋ฐ”๋€Œ์ง€ ์•Š๋„๋ก ๋ณด์žฅํ•œ๋‹ค.

 → ์•ˆ์ „์„ฑ์ด ๋†’์€ ํ†ต์‹ ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ค€๋‹ค. ์ฃผ๋กœ ํŒŒ์ผ์ด๋‚˜ ์ด๋ฉ”์ผ์„ ์ „์†กํ•˜๋Š” ๋“ฑ ์‹ ๋ขฐ์„ฑ์ด ์ค‘์š”ํ•œ ํ†ต์‹ ์—์„œ ์ž์ฃผ ์‚ฌ์šฉ๋œ๋‹ค.

 

UDP (User Datagram Protocol)

 ์‹ ํ˜ธ ์ ˆ์ฐจ ์—†์ด ์ผ๋ฐฉ์ ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๋น„์—ฐ๊ฒฐํ˜• ํ”„๋กœํ† ์ฝœ.

 ๋ฐ์ดํ„ฐ์˜ ์‹ ๋ขฐ์„ฑ์€ ๋‚ฎ์ง€๋งŒ ์†๋„๊ฐ€ ๋น ๋ฆ„. (์‹ค์‹œ๊ฐ„ ์ŠคํŠธ๋ฆฌ๋ฐ ๋“ฑ์—์„œ ๋งŽ์ด ์‚ฌ์šฉ๋˜๊ณ , ์ตœ๊ทผ http3 ๋ฒ„์ „์ด ๋‚˜์˜ค๋ฉด์„œ ๊ธฐ์กด์— TCP ๋ฐฉ์‹์œผ๋กœ ์—ฐ๊ฒฐํ•˜๋˜ ๊ฒƒ์ด UDP ๋ฐฉ์‹์œผ๋กœ ์—ฐ๊ฒฐํ•˜๋Š” ๊ฒƒ์œผ๋กœ ๋ฐ”๋€Œ์—ˆ๋‹ค. )

 

๐Ÿ“Œ Chapter2. ๋„คํŠธ์›Œํฌ ๊ณ„์ธต ๋ชจ๋ธ

 

๐Ÿ“Œ Chapter3. HTTP

HTTP๋Š” ๋ฌด์ƒํƒœ(Stateless), ๋น„์—ฐ๊ฒฐ์„ฑ(Connectionless) ์˜ ํŠน์ง•์„ ๊ฐ€์ง„๋‹ค.

 

๋ฌด์ƒํƒœ(Stateless)

 • ์„œ๋ฒ„๊ฐ€ ํด๋ผ์ด์–ธํŠธ์˜ ์ƒํƒœ๋ฅผ ๋ณด์กดํ•˜์ง€ ์•Š์Œ

 • ํด๋ผ์ด์–ธํŠธ ์š”์ฒญ์€ ๋…๋ฆฝ์ ์œผ๋กœ ์ฒ˜๋ฆฌ๋˜๋ฉฐ, ์„œ๋ฒ„๋Š” ์š”์ฒญ์— ๋Œ€ํ•œ ์‘๋‹ต๋งŒ ์ „์†กํ•จ

 • ์„œ๋ฒ„์˜ ๋ถ€๋‹ด์„ ์ค„์—ฌ์„œ ํ™•์žฅ์„ฑ์„ ๋†’์ผ ์ˆ˜ ์žˆ์Œ

 

๋น„์—ฐ๊ฒฐ์„ฑ(Connectionless)

 • ํด๋ผ์ด์–ธํŠธ์˜ ์š”์ฒญ๊ณผ ์„œ๋ฒ„์˜ ์‘๋‹ต ์‚ฌ์ด์— ์—ฐ๊ฒฐ์„ ์œ ์ง€ํ•˜์ง€ ์•Š์Œ
    → ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์š”์ฒญ์„ ๋ณด๋‚ผ ๋•Œ๋งˆ๋‹ค ์ƒˆ๋กœ์šด ์—ฐ๊ฒฐ์„ ํ•ด์•ผํ•œ๋‹ค. 
    → ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์š”์ฒญ์„ ๋ณด๋‚ด๋ฉด ์„œ๋ฒ„๋Š” ์‘๋‹ต์„ ๋ณด๋‚ด์ค€ ํ›„ ๋ฐ”๋กœ ์—ฐ๊ฒฐ์„ ๋Š๋Š”๋‹ค.

 • ์„œ๋ฒ„๋Š” ๋ถˆํ•„์š”ํ•œ ์—ฐ๊ฒฐ์„ ์ค„์ด๊ณ , ๋งŽ์€ ํด๋ผ์ด์–ธํŠธ์˜ ์š”์ฒญ์„ ๋™์‹œ์— ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ์Œ

 

๐Ÿ“Œ Chapter4. HTTPS

• ๊ธฐ์กด HTTP ํ”„๋กœํ† ์ฝœ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์•”ํ˜ธํ™”ํ•˜๊ณ  ์ธ์ฆํ•˜๋Š” ๊ณผ์ •์„ ์ถ”๊ฐ€ํ•˜์—ฌ ๋ณด์•ˆ์„ ๊ฐ•ํ™”ํ•œ ํ”„๋กœํ† ์ฝœ.

HTTP ํ”„๋กœํ† ์ฝœ์€ ํฌํŠธ ๋ฒˆํ˜ธ 80์„ ์‚ฌ์šฉํ•˜์ง€๋งŒ, HTTPS๋Š” 433๋ฒˆ์„ ์‚ฌ์šฉํ•œ๋‹ค.

 

 

๐Ÿ’ฌ ๋„คํŠธ์›Œํฌ ๋ถ€๋ถ„์€ ๋‚˜์ค‘์— ๋”ฐ๋กœ ๋” ๊ณต๋ถ€๋ฅผ ํ•ด์•ผํ•  ๊ฒƒ ๊ฐ™์•„์„œ ์œ ์–ดํด๋ž˜์Šค ํ•™์Šต์ž๋ฃŒ๋กœ ๊ณต๋ถ€ํ•œ ๋‚ด์šฉ ์ค‘ ์ค‘์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐ๋˜๋Š” ๋ถ€๋ถ„๋“ค์„ ์œ„์ฃผ๋กœ ๊ฐ„๋žตํ•˜๊ฒŒ๋งŒ ์ •๋ฆฌํ–ˆ๋‹ค. ๋‚ด์šฉ์ด ๊ต‰์žฅํžˆ ๋งŽ์•„์„œ ์ค‘์š”ํ•œ ๋ถ€๋ถ„๋“ค์ด ๋” ์žˆ๊ฒ ์ง€๋งŒ, ๋‚˜๋จธ์ง€ ๋ถ€๋ถ„๋“ค์€ ์ฐจ๊ทผ์ฐจ๊ทผ ๋‹ค์‹œ ๊ณต๋ถ€ํ•ด๋ด์•ผ๊ฒ ๋‹ค.

 

 

โœ๏ธ ์‹ค์Šต. HTTPS ์‚ฌ์„ค ์ธ์ฆ์„œ ๋ฐœ๊ธ‰ ๋ฐ ์„œ๋ฒ„ ๊ตฌํ˜„

↓ ์ด๋ฒˆ ์‹ค์Šต์„ ํ•˜๋ฉด์„œ ํ—ค๋งธ๋˜ ๋ถ€๋ถ„์ด ์žˆ๊ธฐ๋„ ํ•˜๊ณ , ๋‹ค์Œ๋ฒˆ์— ๋˜ mkcert๋ฅผ ์‚ฌ์šฉํ•  ์ผ์ด ์žˆ์„ ๊ฒƒ ๊ฐ™๊ธฐ๋„ ํ•ด์„œ ๋”ฐ๋กœ ์ •๋ฆฌํ•ด๋ณด์•˜๋‹ค. ↓

 

mkcert ์‚ฌ์šฉ๋ฒ• - ๋กœ์ปฌ ๊ฐœ๋ฐœ์„ ์œ„ํ•œ HTTPS ํ™˜๊ฒฝ ๋งŒ๋“ค๊ธฐ

โœ๏ธ ๋กœ์ปฌ ๊ฐœ๋ฐœ์„ ์œ„ํ•œ HTTPS ํ™˜๊ฒฝ ๋งŒ๋“ค๊ธฐ (mkcert ์‚ฌ์šฉ๋ฒ•) 1. mkcert๋ฅผ ์ด์šฉํ•˜์—ฌ ๋กœ์ปฌ์—์„œ ์‹ ๋ขฐํ•  ์ˆ˜ ์žˆ๋Š” ์ธ์ฆ์„œ ๋งŒ๋“ค๊ธฐ 2. mkcert๋กœ ๋ฐœ๊ธ‰๋ฐ›์€ ์ธ์ฆ์„œ๋ฅผ ์ด์šฉํ•ด HTTPS ์„œ๋ฒ„ ๊ตฌ์ถ•ํ•˜๊ธฐ ๐Ÿ“Œ mkcert: https://github.

fay-story.com

 

โœ๏ธ  Advanced. ngrok๋กœ ํ„ฐ๋„๋ง ์‹œํ‚ค๊ธฐ

 ์‹ค์Šต Advanced๋กœ ๊ธฐ์กด์— ์ž‘์„ฑํ•œ ์„œ๋ฒ„๋ฅผ ngrok์„ ์ด์šฉํ•ด์„œ HTTPS๋กœ ํ„ฐ๋„๋ง์„ ์‹œ์ผœ๋ณด๋ผ๋Š” ๊ณผ์ œ๋„ ์žˆ์—ˆ๋‹ค.

 ๊ฐ„๋‹จํ•ด์„œ ์–ด๋ ต์ง€ ์•Š๊ฒŒ ์ง„ํ–‰ํ•  ์ˆ˜ ์žˆ์–ด์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ ์‚ฌ์šฉ๋ฒ•๋งŒ ๊ธฐ๋กํ•ด๋ณผ๊นŒ ํ•œ๋‹ค.

 

 ngrok๋Š” HTTP๋กœ ๋งŒ๋“ค์–ด์ง„ ์„œ๋ฒ„๋ฅผ HTTPS ํ”„๋กœํ† ์ฝœ๋กœ ํ„ฐ๋„๋ง ํ•ด์ฃผ๋Š” ํ”„๋กœ๊ทธ๋žจ์ด๋‹ค.

 ๐Ÿ‘€ ํ„ฐ๋„๋ง์ด๋ž€? ๋„คํŠธ์›Œํ‚น์—์„œ ํ„ฐ๋„์€ ํ•ด๋‹น ๋„คํŠธ์›Œํฌ์—์„œ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ํ”„๋กœํ† ์ฝœ์„ ์‚ฌ์šฉํ•˜์—ฌ ๋„คํŠธ์›Œํฌ๋ฅผ ํ†ตํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†กํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค.

 → ์‰ฝ๊ฒŒ ๋งํ•ด์„œ, ngrok๋ฅผ ํ†ตํ•ด ํ„ฐ๋„๋ง์„ ํ•˜๋ฉด ์™ธ๋ถ€์—์„œ ๋กœ์ปฌ์— ์ ‘์†ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ค€๋‹ค.

 

ngrok ํ™ˆํŽ˜์ด์ง€์˜ Download ๋ฉ”๋‰ด๋กœ ๊ฐ€์„œ ๊ฐ€์ด๋“œ๋Œ€๋กœ ๋”ฐ๋ผํ•˜๋ฉด ๋œ๋‹ค. (์ธ์ฆ ํ† ํฐ์„ ๋ฐ›์•„์•ผ ํ•ด์„œ ๋กœ๊ทธ์ธ ํ•„์š”)

MacOS ๊ธฐ์ค€

# 1. Install ngrok via Homebrew
brew install ngrok/ngrok/ngrok

# 2. Add authtoken
ngrok config add-authtoken <token>

# 3. Start a tunnel
ngrok http <url>

โฌ‡๏ธŽ

terminal

์ด๋ ‡๊ฒŒ๋งŒ ํ•˜๋ฉด ๋ฐ”๋กœ ํ„ฐ๋„๋ง์ด ๋˜๊ณ , Forwarding url ์ž…๋ ฅํ•˜๋ฉด ์ ‘์†ํ•  ์ˆ˜ ์žˆ๋‹ค.

์‹คํ–‰ ํ›„ control C๋กœ ์ข…๋ฃŒํ•  ์ˆ˜ ์žˆ๊ณ , ์ข…๋ฃŒ๋œ ํ›„์—๋Š” ๋‹น์—ฐํžˆ ํ„ฐ๋„๋ง ๋œ ์ฃผ์†Œ๋กœ๋Š” ์ ‘์†ํ•  ์ˆ˜ ์—†๋‹ค.

 

ํ„ฐ๋„๋ง๋œ ์‚ฌ์ดํŠธ ์ ‘์†


๐ŸŒ™  ์˜ค๋Š˜์˜ ํšŒ๊ณ 

 ๋น„๋Š” ๋„ˆ๋ฌด ๋งŽ์ด ์˜ค๊ณ , ์ง‘ ์•ˆ์€ ์Šตํ•˜๊ณ  ๊ฐ‘๊ฐ‘ํ•œ ๋‚ ์ด์—ˆ๋‹ค. ์ง‘์ค‘์ด ์•ˆ๋˜์„œ ๋ฐ–์— ๋‚˜๊ฐ€์„œ ๊ณต๋ถ€๋ฅผ ํ–ˆ๋‹ค. ์ด๋ฒˆ ์œ ๋‹›์ธ ๋„คํŠธ์›Œํฌ ์‹ฌํ™” ๊ณผ์ •์ด ์ดํ‹€ ์ •๋„๋Š” ์žˆ๋Š” ์ค„ ์•Œ์•˜๋Š”๋ฐ, ์˜ค๋Š˜ ํ•˜๋ฃจ๊ฐ€ ๋์ธ๊ฑธ ์•Œ๊ณ  ์ง„๋„ ๋‚˜๊ฐ€๊ธฐ์— ๋ฐ”๋นด๋˜ ๊ฒƒ ๊ฐ™๋‹ค. ํŽ˜์–ด ์‹œ๊ฐ„๋„ ์—†์—ˆ๊ณ , ์ด๋ก  ์ˆ˜์—…๋ฟ์ด์—ˆ๋‹ค. ์•ˆ๊ทธ๋ž˜๋„ ์–ด๋ ค์šด ๋„คํŠธ์›Œํฌ์™€ HTTP๋ผ ์ดํ•ด๋„ ์ž˜ ์•ˆ๋˜๊ณ , ์–ด๋–ค ๋ถ€๋ถ„์ด ์ค‘์š”ํ•œ๊ฑด์ง€๋„ ํŒŒ์•…์ด ์ž˜ ๋˜์ง€ ์•Š์•˜๋‹ค.

 ์‹ฌ์ง€์–ด ๋กœ์ปฌ์—์„œ HTTPS๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” mkcert ์‹ค์Šต์€ ์ œ๋Œ€๋กœ ๋˜์ง€๋„ ์•Š์•˜๋‹ค. ์„ค์น˜๋„ ์ œ๋Œ€๋กœ ํ–ˆ๊ณ , ํŒŒ์ผ ์œ„์น˜๋„ ํ™•์ธํ•˜๊ณ , ์„œ๋ฒ„ ์ฝ”๋“œ๋„ ๋ฌธ์ œ์—†๋Š” ๊ฒƒ ๊ฐ™์€๋ฐ ๋ฌด์—‡์ด ๋ฌธ์ œ์ธ๊ฑฐ์ง€..?

 ์˜คํ›„ Q&A ์„ธ์…˜์˜ ์งˆ๋ฌธ ์ค‘์— ์ด ์‹ค์Šต ๋ถ€๋ถ„์„ ๊ฐ™์ด ํ•ด๋‹ฌ๋ผ๋Š” ์š”์ฒญ์ด ์žˆ์—ˆ๋Š”๋ฐ, ๊ฐ•์‚ฌ๋‹˜์€ ๋”ฑํžˆ.. ํ•ด๋ณด์‹ค ์ƒ๊ฐ์€ ์—†๋Š”๊ฒƒ ๊ฐ™์•˜๋‹ค..ใ…Žใ…Ž ๊ทธ๋ƒฅ ๋„˜๊ฒจ๋ฒ„๋ฆฌ์…”์„œ.. ๋‚ด์ผ ์˜ค์ „ ์ˆ˜์—…์‹œ๊ฐ„์— ํ•œ๋ฒˆ ํ•ด๋ณธ๋‹ค๊ณ  ํ•˜๋‹ˆ ๋ฌด์—‡์ด ๋ฌธ์ œ์ธ์ง€ ๊ทธ๋•Œ ํŒŒ์•…ํ•˜๋ฉด ๋ ๊ฒƒ ๊ฐ™๊ธฐ๋Š” ํ•œ๋ฐ, ์ง€๊ธˆ ๋‹น์žฅ ๋ฌธ์ œ๋ฅผ ์•Œ๊ณ  ์‹ถ๋‹ค…

 

 …์ด ๊ธ€์„ ์“ฐ๊ณ  30๋ถ„์ฏค ํ›„์— ์•Œ๊ฒŒ๋˜์—ˆ๋‹ค…

 ๋ฌธ์ œ๊ฐ€ ๋ญ”์ง€ ๋„ˆ๋ฌด ๊ถ๊ธˆํ•ด์„œ ๊ณ„์† ์ฐพ์•„ํ—ค๋งค๊ณ  ์žˆ์—ˆ๋Š”๋ฐ Chrome ๋ธŒ๋ผ์šฐ์ € ๊ณ ๊ฐ์„ผํ„ฐ์— ์—ฐ๊ฒฐ ์˜ค๋ฅ˜์‹œ ํ•ด๊ฒฐ๋ฐฉ๋ฒ• ์ค‘ ์šด์˜์ฒด์ œ ์—…๋ฐ์ดํŠธ ํ•˜๊ธฐ๊ฐ€ ์žˆ์—ˆ๋‹ค. ํ˜น์‹œ๋‚˜ ํ•˜๊ณ  ๋‚ด ๋งฅ๋ถ ์—…๋ฐ์ดํŠธ๋ฅผ ์ฒดํฌํ•ด๋ณด๋‹ˆ ์—…๋ฐ์ดํŠธ ํ• ๊ฒŒ ์žˆ๊ธธ๋ž˜ ์—…๋ฐ์ดํŠธ๋ฅผ ํ•˜๊ณ  ๋‚˜์„œ ๋‹ค์‹œ ์‹คํ–‰ํ•ด๋ณด๋‹ˆ๊นŒ ๋ฐ”๋กœ ๋˜์—ˆ๋‹ค๋Š” ์‚ฌ์‹ค…… ํœด.. ๐Ÿ˜‘

๋ฐ˜์‘ํ˜•