Browser

1. ๋ธŒ๋ผ์šฐ์ €์˜ ์ž‘๋™ ์›๋ฆฌ(๋ณด์ด์ง€ ์•Š๋Š” ๊ณณ)

(1) URL๊ณผ URI

URL(Uniform Resource Locator)

  • ๋„คํŠธ์›Œํฌ์ƒ์—์„œ์˜ ์›นํŽ˜์ด์ง€, ์ด๋ฏธ์ง€, ๋™์˜์ƒ ๋“ฑ์˜ ํŒŒ์ผ์ด ์œ„์น˜ํ•œ ์ •๋ณด๋ฅผ ๋‚˜ํƒ€๋ƒ„

  • scheme: ํ†ต์‹ ๋ฐฉ์‹(ํ”„๋กœํ† ์ฝœ)์„ ๊ฒฐ์ •ํ•˜๋ฉฐ, ๋ณดํ†ต http(s)์‚ฌ์šฉ

  • hosts: ์›น ์„œ๋ฒ„์˜ ์ด๋ฆ„์ด๋‚˜ ๋„๋ฉ”์ธ, IP๋ฅผ ์‚ฌ์šฉํ•ด ์ฃผ์†Œ๋ฅผ ๋‚˜ํƒ€๋ƒ„

  • url-path: ์›น ์„œ๋ฒ„์—์„œ ์ง€์ •ํ•œ ๋ฃจํŠธ ๋””๋ ‰ํ† ๋ฆฌ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด ์›นํŽ˜์ด์ง€, ํŒŒ์ผ์ด ์œ„์น˜ํ•œ ๊ฒฝ๋กœ์™€ ํŒŒ์ผ๋ช… ๋‚˜ํƒ€๋ƒ„

URI(Uniform Resource Indentifier)

  • ์ผ๋ฐ˜์ ์œผ๋กœ URL์˜ ๊ธฐ๋ณธ ์š”์†Œ์ธ scheme, hosts, url-path์— ๋”ํ•ด query, fragment๋ฅผ ํฌํ•จ

  • query: ์›น ์„œ๋ฒ„์— ๋ณด๋‚ด๋Š” ์ถ”๊ฐ€์ ์ธ ์งˆ๋ฌธ

  • fragment: ์ผ์ข…์˜ ๋ถ๋งˆํฌ ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰, URL์— fragment(#)์™€ ํŠน์ • HTML ์š”์†Œ์˜ id๋ฅผ ์ „๋‹ฌํ•˜๋ฉด ํ•ด๋‹น ์š”์†Œ๊ฐ€ ์žˆ๋Š” ๊ณณ์œผ๋กœ ์Šคํฌ๋กค์„ ์ด๋™ ๊ฐ€๋Šฅ

์ •๋ฆฌํ•˜์ž๋ฉด

url_uri.png
  • ๋ธŒ๋ผ์šฐ์ €์˜ ๊ฒ€์ƒ‰์ฐฝ์„ ํด๋ฆญํ•˜๋ฉด ๋‚˜ํƒ€๋‚˜๋Š” ์ฃผ์†Œ๊ฐ€ URI

  • URI๋Š” URL์„ ํฌํ•จํ•˜๋Š” ์ƒ์œ„๊ฐœ๋…

  • 'URL์€ URI๋‹ค.' == true

  • 'URI๋Š” URL์ด๋‹ค.' == false

(2) IP์™€ PORT

IP(Internet Protocal) adress

  • ๋„คํŠธ์›Œํฌ์— ์—ฐ๊ฒฐ๋œ ํŠน์ • PC์˜ ์ฃผ์†Œ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์ฒด๊ณ„

  • localhost, 127.0.0.1 : ํ˜„์žฌ ์‚ฌ์šฉ ์ค‘์ธ ๋กœ์ปฌ PC๋ฅผ ์ง€์นญ

  • 0.0.0.0, 255.255.255.255 : broadcast address, ๋กœ์ปฌ ๋„คํŠธ์›Œํฌ์— ์ ‘์†๋œ ๋ชจ๋“  ์žฅ์น˜์™€ ์†Œํ†ตํ•˜๋Š” ์ฃผ์†Œ

  • ์„œ๋ฒ„์—์„œ ์ ‘๊ทผ ๊ฐ€๋Šฅ IP ์ฃผ์†Œ๋ฅผ broadcast address ๋กœ ์ง€์ •ํ•˜๋ฉด, ๋ชจ๋“  ๊ธฐ๊ธฐ์—์„œ ์„œ๋ฒ„์— ์ ‘๊ทผ ๊ฐ€๋Šฅ

PORT

  • IP์ฃผ์†Œ๊ฐ€ ๊ฐ€๋ฆฌํ‚ค๋Š” PC์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ํ†ต๋กœ(์ฑ„๋„)

  • e.g. ๋ฆฌ์•กํŠธ ์‹คํ–‰ ์‹œ ๋กœ์ปฌ PC์˜ IP์ฃผ์†Œ๋กœ ์ ‘๊ทผํ•ด 3000๋ฒˆ์˜ ํ†ต๋กœ๋ฅผ ํ†ตํ•ด ์‹คํ–‰์ค‘์ธ ๋ฆฌ์•กํŠธ ํ™•์ธ ๊ฐ€๋Šฅ

  • 22 : SSH, 80 : HTTP, 443: HTTPS

(3) ๋„๋ฉ”์ธ๊ณผ DNS

๋„๋ฉ”์ธ

  • IP์ฃผ์†Œ๋ฅผ ๋Œ€์‹ ํ•ด ์‚ฌ์šฉํ•˜๋Š” ์ฃผ์†Œ: ๋น„์œ ํ•˜์ž๋ฉด IP์ฃผ์†Œ๊ฐ€ ๋„๋กœ๋ช…์ฃผ์†Œ, ๋„๋ฉ”์ธ์€ ์ƒํ˜ธ๋ช…

  • ex) IP ์ฃผ์†Œ๋Š” 3.34.153.168, ๋„๋ฉ”์ธ ์ด๋ฆ„์€ naver.com

  • ํ„ฐ๋ฏธ๋„์—์„œ ๋„๋ฉ”์ธ ์ด๋ฆ„์„ ํ†ตํ•ด IP์ฃผ์†Œ๋ฅผ ํ™•์ธํ•˜๋Š” ๋ช…๋ น์–ด 'nslookup'๋กœ IP์ฃผ์†Œ ํ™•์ธ ๊ฐ€๋Šฅ

DNS

  • ๋„๋ฉ”์ธ ์ด๋ฆ„๊ณผ ๋งค์นญ๋œ IP์ฃผ์†Œ๋ฅผ ํ™•์ธํ•˜๋Š” ์ž‘์—…์„ ์œ„ํ•ด ์กด์žฌํ•˜๋Š” ์„œ๋ฒ„

  • ํ˜ธ์ŠคํŠธ์˜ ๋„๋ฉ”์ธ ์ด๋ฆ„์„ โ†’ IP์ฃผ์†Œ๋กœ ๋ณ€ํ™˜ or IP์ฃผ์†Œ๋ฅผ โ†’ ๋„๋ฉ”์ธ ์ด๋ฆ„์œผ๋กœ ๋ณ€ํ™˜ํ•˜๊ธฐ ์œ„ํ•ด ๊ฐœ๋ฐœ๋œ DB ์‹œ์Šคํ…œ

  • DNS๊ฐ€ ํ•ด๋‹น IP ์ฃผ์†Œ/๋„๋ฉ”์ธ์— ํ•ด๋‹นํ•˜๋ฉด ์›น ์„œ๋ฒ„๋กœ ์š”์ฒญ์„ ์ „๋‹ฌํ•ด ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„๊ฐ€ ํ†ต์‹ ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•จ

(4) ํฌ๋กฌ ๋ธŒ๋ผ์šฐ์ €์™€ ์—๋Ÿฌ ์ฝ๊ธฐ

chrome_error.png

2. ๋ธŒ๋ผ์šฐ์ €์˜ ์ž‘๋™ ์›๋ฆฌ (๋ณด์ด๋Š” ๊ณณ)

(1) SPA๋ฅผ ๋งŒ๋“œ๋Š” ๊ธฐ์ˆ : AJAX

์ •์˜์™€ ํŠน์ง•

  • Asynchronous JavaScript And XMLHttpRequest์˜ ์•ฝ์ž

  • JavaScript, DOM, Fetch, XMLHttpRequest, HTML ๋“ฑ์˜ ๋‹ค์–‘ํ•œ ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•˜๋Š” ์›น ๊ฐœ๋ฐœ ๊ธฐ๋ฒ•

  • ์›น ํŽ˜์ด์ง€์— ํ•„์š”ํ•œ ๋ถ€๋ถ„์— ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋งŒ ๋น„๋™๊ธฐ์ ์œผ๋กœ ๋ฐ›์•„์™€ ํ™”๋ฉด์— ๊ทธ๋ ค๋‚ผ ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ด ๊ฐ€์žฅ ํฐ ํŠน์ง•

ํ•ต์‹ฌ ๊ธฐ์ˆ 

  • JavaScript, DOM

  • Fetch: ํŽ˜์ด์ง€๋ฅผ ์ด๋™ํ•˜์ง€ ์•Š์•„๋„ ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ฌ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์‚ฌ์šฉ์ž๊ฐ€ ํ˜„์žฌ ํŽ˜์ด์ง€์—์„œ ์ž‘์—…ํ•˜๋Š”๋™์•ˆ ์„œ๋ฒ„์™€ ํ†ต์‹ ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•จ. ์ฆ‰, ๋ธŒ๋ผ์šฐ์ €๋Š” Fetch๊ฐ€ ์„œ๋ฒ„์— ์š”์ฒญ์„ ๋ณด๋‚ด๊ณ  ์‘๋‹ต์„ ๋ฐ›์„ ๋•Œ๊นŒ์ง€ ๋™์ž‘์„ ๋ฉˆ์ถ”๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ๋น„๋™๊ธฐ์ ์ธ ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•ด ๊ณ„์†ํ•ด์„œ ํŽ˜์ด์ง€๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•จ

  • Fetch๋ฅผ ํ†ตํ•ด ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋งŒ ๊ฐ€์ ธ์™€ DOMd์— ์ ์šฉ์‹œ์ผœ ๊ธฐ์กด ํŽ˜์ด์ง€์—์„œ ํ•„์š”ํ•œ ๋ถ€๋ถ„๋งŒ ๋ณ€๊ฒฝ

AJAX์˜ ์žฅ์ 

  • ์„œ๋ฒ„์—์„œ HTML์„ ์™„์„ฑํ•˜์—ฌ ๋ณด๋‚ด์ฃผ์ง€ ์•Š์•„๋„ ์›นํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Œ

  • ํ‘œ์ค€ํ™”๋œ ๋ฐฉ๋ฒ•

  • ์œ ์ € ์ค‘์‹ฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ

  • ๋” ์ž‘์€ ๋Œ€์—ญํญ(๋„คํŠธ์›Œํฌ ํ†ต์‹  ํ•œ๋ฒˆ์— ๋ณด๋‚ผ ์ˆ˜ ์žˆ๋Š” ๋ฐ์ดํ„ฐ ํฌ๊ธฐ)

AJAX์˜ ๋‹จ์ 

  • SEO์— ๋ถˆ๋ฆฌ

(2) SSR๊ณผ CSR

SSR(Server Side Rendering)

  • ์›น ํŽ˜์ด์ง€๋ฅผ ์„œ๋ฒ„์—์„œ ๋ Œ๋”๋ง

  • SEO๊ฐ€ ์šฐ์„ ์ด๊ฑฐ๋‚˜ ๋น ๋ฅธ ์ฒซ ํ™”๋ฉด ๋ Œ๋”๋ง์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ, ์œ ์ €์™€์˜ ์ƒํ˜ธ์ž‘์šฉ์ด ์ ์€ ๊ฒฝ์šฐ

CSR(Client Side Rendering)

  • ์›น ํŽ˜์ด์ง€๋ฅผ ํด๋ผ์ด์–ธํŠธ์—์„œ ๋ Œ๋”๋ง

  • SEO๊ฐ€ ํ•„์š” ์—†๊ฑฐ๋‚˜ ์œ ์ €์™€์˜ ์ƒํ˜ธ์ž‘์šฉ์ด ๋งŽ์€ ๊ฒฝ์šฐ CSR์€ ๊ฐ•๋ ฅํ•œ ๋ผ์šฐํŒ…์œผ๋กœ ๊ฐ•๋ ฅํ•œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜ ์ œ๊ณต

  • ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ œ์ž‘ํ•˜๋Š” ๊ฒฝ์šฐ ๋น ๋ฅธ ๋™์  ๋ Œ๋”๋ง ์ œ๊ณต ๊ฐ€๋Šฅ

Last updated