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

CS/Network

๋ธŒ๋ผ์šฐ์ €์™€ ๋ Œ๋”๋ง ์—”์ง„ ๋™์ž‘ ์›๋ฆฌ

728x90
๋”๋ณด๊ธฐ

๐Ÿ™‹ ์˜ค๋Š˜ ํฌ์ŠคํŒ…์—์„œ๋Š” ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ์ „๋‹ฌ(์‘๋‹ต)๋ฐ›์€ ์ž์›์„ ์–ด๋–ป๊ฒŒ ํ™”๋ฉด์— ์ถœ๋ ฅํ•˜๋Š” ์ง€๋ฅผ ๋‹ค๋ฃฐ ์˜ˆ์ •์ด๋‹ค.

์ด ๊ธ€์„ ์ฝ๊ณ  ๋‚˜๋ฉด, ๋ธŒ๋ผ์šฐ์ € ์ฃผ์†Œ ์ฐฝ์— google.com์„ ์ž…๋ ฅํ–ˆ์„ ๋•Œ ์–ด๋–ค ๊ณผ์ •์„ ๊ฑฐ์ณ ๊ตฌ๊ธ€ ํŽ˜์ด์ง€๊ฐ€ ํ™”๋ฉด์— ๋ณด์ด๊ฒŒ ๋˜๋Š”์ง€ ์•Œ๊ฒŒ ๋œ๋‹ค.

 

๋ชฉ์ฐจ


  • ๋ธŒ๋ผ์šฐ์ €
  • ๋ธŒ๋ผ์šฐ์ €์˜ ๊ตฌ์„ฑ ์š”์†Œ
  • ๋ Œ๋”๋ง ์—”์ง„์˜ ๋™์ž‘ ์›๋ฆฌ

 

 

 

๋ธŒ๋ผ์šฐ์ €


1) ๋ธŒ๋ผ์šฐ์ € ๋ž€?

๋ธŒ๋ผ์šฐ์ € ์˜ˆ์‹œ

๋ธŒ๋ผ์šฐ์ €๋ž€ ์›”๋“œ ์™€์ด๋“œ ์›น(WWW)์—์„œ ์ •๋ณด๋ฅผ ๊ฒ€์ƒ‰, ํ‘œํ˜„ํ•˜๊ณ  ํƒ์ƒ‰ํ•˜๊ธฐ ์œ„ํ•œ ์†Œํ”„ํŠธ์›จ์–ด์ด๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, ๊ตฌ๊ธ€ ํฌ๋กฌ, ์ธํ„ฐ๋„ท ์ต์Šคํ”Œ๋กœ๋Ÿฌ ๋“ฑ๊ณผ ๊ฐ™์ด ๊ฒ€์ƒ‰์ฐฝ์ด ์žˆ๋Š” ํ”„๋กœ๊ทธ๋žจ์ด๋ผ ์ƒ๊ฐํ•˜๋ฉด ๋œ๋‹ค.

๋ธŒ๋ผ์šฐ์ €๋Š” ์ธํ„ฐ๋„ท์—์„œ ํŠน์ • ์ •๋ณด๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ๋Š” ์ฃผ์†Œ ์ž…๋ ฅ์ฐฝ(=์ธํ„ฐํŽ˜์ด์Šค)์ด ์žˆ๊ณ , ์„œ๋ฒ„์™€ HTTP๋กœ ์ •๋ณด๋ฅผ ์ฃผ๊ณ  ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š” ๋„คํŠธ์›Œํฌ ๋ชจ๋“ˆ๋„ ํฌํ•จํ•˜๊ณ  ์žˆ๋‹ค.

์„œ๋ฒ„์—์„œ ๋ฐ›์€ ๋ฌธ์„œ(HTML, CSS, Javascript)๋ฅผ ํ•ด์„ํ•˜๊ณ  ์‹คํ–‰ํ•˜์—ฌ ํ™”๋ฉด์— ํ‘œํ˜„ํ•˜๊ธฐ ์œ„ํ•œ ํ•ด์„๊ธฐ(Parser)๋“ค์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

 

2) ๋ธŒ๋ผ์šฐ์ €์˜ ์—ญํ• 

์›น ๋ธŒ๋ผ์šฐ์ €์™€ ์›น ์„œ๋ฒ„์˜ ๋™์ž‘

๋ธŒ๋ผ์šฐ์ €์˜ ์ฃผ์š” ์—ญํ• ์€ 2๊ฐ€์ง€์ด๋‹ค.

์ฒซ์งธ, ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•œ(์›ํ•˜๋Š”) ์›นํŽ˜์ด์ง€, ์ด๋ฏธ์ง€, ๋™์˜์ƒ ๋“ฑ์˜ ์ž์›์„ ์„œ๋ฒ„์—๊ฒŒ ์š”์ฒญํ•˜๋Š” ์—ญํ• 

๋‘˜์งธ, ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ์ „๋‹ฌ(์‘๋‹ต)๋ฐ›์€ ์ž์›์„ ํ™”๋ฉด์— ์ถœ๋ ฅํ•˜๋Š” ์—ญํ• 

 

 

 

 

๋ธŒ๋ผ์šฐ์ €์˜ ๊ตฌ์„ฑ ์š”์†Œ


๋ธŒ๋ผ์šฐ์ €์˜ ๊ตฌ์„ฑ ์š”์†Œ

๋ธŒ๋ผ์šฐ์ €์˜ ๊ตฌ์„ฑ ์š”์†Œ์—๋Š” User Interface, Browser Engine, Rendering Engine, Networking, JS Engine, UI Backend, Data Storage๊ฐ€ ์žˆ๋‹ค.

User
Interface
 - ์‚ฌ์šฉ์ž๊ฐ€ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ์˜์—ญ์ด๋‹ค.
 - ์˜ˆ๋ฅผ ๋“ค์–ด, ๊ฒ€์ƒ‰์ฐฝ, ๋’ค๋กœ๊ฐ€๊ธฐ/์•ž์œผ๋กœ๊ฐ€๊ธฐ ๋ฒ„ํŠผ, ์ƒˆ๋กœ ๊ณ ์นจ ๋ฒ„ํŠผ ๋“ฑ ๋ธŒ๋ผ์šฐ์ € ํ”„๋กœ๊ทธ๋žจ ์ž์ฒด์˜ GUI๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๋ถ€๋ถ„์ด๋‹ค.
Browser
Engine
 - User Interface์™€ Rendering Engine ์‚ฌ์ด์˜ ๋™์ž‘์„ ์ œ์–ดํ•ด์ฃผ๋Š” ์—”์ง„์ด๋‹ค.
 - ๋ธŒ๋ผ์šฐ์ €๋ผ๋Š” ํ”„๋กœ๊ทธ๋žจ์˜ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง, ํ•ต์‹ฌ ์ค‘์ถ” ๋ถ€๋ถ„์ด๋‹ค.
 - Data Storage๋ฅผ ์ฐธ์กฐํ•˜๋ฉฐ ๋กœ์ปฌ์— ๋ฐ์ดํ„ฐ๋ฅผ ์“ฐ๊ณ  ์ฝ์œผ๋ฉด์„œ ๋‹ค์–‘ํ•œ ์ž‘์—…์„ ํ•œ๋‹ค.
Rendering Engine  - ์š”์ฒญํ•œ ์ฝ˜ํ…์ธ ๋ฅผ ํ™”๋ฉด์— ์ถœ๋ ฅํ•˜๋Š” ์—ญํ• ์ด๋‹ค.
 - HTML, CSS ๋“ฑ์„ ํŒŒ์‹ฑํ•˜์—ฌ ์ตœ์ข…์ ์œผ๋กœ ํ™”๋ฉด์— ๊ทธ๋ฆฐ๋‹ค.
Networking  - http ์š”์ฒญ์„ ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ๋„คํ‹ฐ์›Œํฌ๋ฅผ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ๋‹ค.
JS Engine  - javascript ์ฝ”๋“œ๋ฅผ ํ•ด์„ํ•˜๊ณ  ์‹คํ–‰ํ•œ๋‹ค.
UI Backend  - ๊ธฐ๋ณธ์ ์ธ ์œ„์ ฏ์„ ๊ทธ๋ฆฌ๋Š” ์ธํ„ฐํŽ˜์ด์Šค์ด๋‹ค.
Data Storage  - Local Storage, Indexed DB, ์ฟ ํ‚ค ๋“ฑ ๋ธŒ๋ผ์šฐ์ € ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ €์žฅํ•˜๋Š” ์˜์—ญ์ด๋‹ค. 

 

 

 

๋ Œ๋”๋ง ์—”์ง„์˜ ๋™์ž‘ ์›๋ฆฌ


1) ๋ Œ๋”๋ง ์—”์ง„์˜ ๊ธฐ๋ณธ์ ์ธ ๋™์ž‘ ์›๋ฆฌ

๋ Œ๋”๋ง ์—”์ง„์˜ ๊ธฐ๋ณธ์ ์ธ ๋™์ž‘ ์›๋ฆฌ

โ‘  ๋ธŒ๋ผ์šฐ์ €๋Š” ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ HTML ๋ฌธ์„œ๋ฅผ ๋ชจ๋‘ ์ „๋‹ฌ ๋ฐ›๋Š”๋‹ค.

โ‘ก ๋ Œ๋”๋ง ์—”์ง„์€ ์ „๋‹ฌ๋ฐ›์€ HTML ๋ฌธ์„œ ํŒŒ์‹ฑํ•˜์—ฌ DOM ํŠธ๋ฆฌ๋ฅผ ๊ตฌ์ถ•ํ•œ๋‹ค.

โ‘ข ์™ธ๋ถ€ CSS ํŒŒ์ผ๊ณผ ํ•จ๊ป˜ ํฌํ•จ๋œ ์Šคํƒ€์ผ ์š”์†Œ๋ฅผ ํŒŒ์‹ฑํ•œ๋‹ค. 

โ‘ฃ DOM ํŠธ๋ฆฌ์™€ โ‘ข์˜ ๊ฒฐ๊ณผ๋ฌผ์„ ํ•ฉ์ณ ๋ Œ๋” ํŠธ๋ฆฌ๋ฅผ ๊ตฌ์ถ•ํ•œ๋‹ค.

โ‘ค ๋ Œ๋” ํŠธ๋ฆฌ์˜ ๊ฐ ๋…ธ๋“œ์— ๋Œ€ํ•ด์„œ ํ™”๋ฉด ์ƒ์—์„œ ์–ด๋””์— ๋ฐฐ์น˜ํ•  ์ง€ ๊ฒฐ์ •ํ•œ๋‹ค.

โ‘ฅ UI๋ฐฑ์—”๋“œ์—์„œ ๋ Œ๋” ํŠธ๋ฆฌ๋ฅผ ๊ทธ๋ฆฌ๊ฒŒ ๋˜๊ณ , ํ™”๋ฉด์— ์šฐ๋ฆฌ๊ฐ€ ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ์ถœ๋ ฅ๋œ๋‹ค.

 

2) ๋ Œ๋”๋ง ์—”์ง„์˜ ๋™์ž‘ ๊ณผ์ • ์˜ˆ์‹œ

์›นํ‚ท ๋ Œ๋”๋ง ์—”์ง„

๋ Œ๋”๋ง ์—”์ง„์˜ ๊ธฐ๋ณธ ๋™์ž‘ ๊ณผ์ •์„ ๋” ์ž์„ธํ•˜๊ฒŒ ๋‚˜ํƒ€๋‚ธ ๊ทธ๋ฆผ์ด๋‹ค.

๋‹ค์–‘ํ•œ ์ข…๋ฅ˜์˜ ๋ Œ๋”๋ง ์—”์ง„์ด ์กด์žฌํ•˜์ง€๋งŒ, ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ์›นํ‚ท ์—”๋”๋ง ์—”์ง„๋งŒ ๋‹ค๋ฃฐ ๊ฒƒ์ด๋‹ค.

๋ Œ๋”๋ง ์—”์ง„์˜ ์ž์„ธํ•œ ๊ณผ์ •์„ ์„ค๋ช…ํ•ด๋ณด๋ฉด, ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

 

โ‘  DOM ํŠธ๋ฆฌ ๊ตฌ์ถ•

๋ฌธ์„œ ์†Œ์Šค๋กœ๋ถ€ํ„ฐ ํŒŒ์‹ฑ ํŠธ๋ฆฌ๋ฅผ ๋งŒ๋“œ๋Š” ๊ณผ์ • / DOM ํŠธ๋ฆฌ ์˜ˆ์‹œ

- ๋ธŒ๋ผ์šฐ์ €๋Š” ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ HTML ๋ฌธ์„œ๋ฅผ ๋ชจ๋‘ ์ „๋‹ฌ ๋ฐ›๋Š”๋‹ค.

- ์–ดํœ˜์™€ ๊ตฌ๋ฌธ์„ ๋ถ„์„ํ•˜์—ฌ HTML ๋ฌธ์„œ๋ฅผ ํŒŒ์‹ฑํ•˜๊ณ , ํŒŒ์‹ฑ ํŠธ๋ฆฌ๋ฅผ ์ƒ์„ฑํ•œ๋‹ค. ๋ฌธ์„œ ํŒŒ์‹ฑ์€ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ฝ”๋“œ๋ฅผ ์ดํ•ดํ•˜๊ณ  ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ตฌ์กฐ๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค.

- ํŒŒ์‹ฑ ํŠธ๋ฆฌ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ DOM ์š”์†Œ์™€ ์†์„ฑ ๋…ธ๋“œ๋ฅผ ๊ฐ€์ง€๋Š” DOM ํŠธ๋ฆฌ๋ฅผ ์ƒ์„ฑํ•œ๋‹ค.

 

โ‘ก CSSOM(CSS Object Model) ์ƒ์„ฑ

CSS ํŒŒ์‹ฑ

- โ‘ ์˜  DOM์„ ์ƒ์„ฑํ•  ๋•Œ ๊ฑฐ์ณค๋˜ ๊ณผ์ •์„ ๊ทธ๋Œ€๋กœ CSS์— ๋ฐ˜๋ณตํ•œ๋‹ค.

- ๊ทธ ๊ฒฐ๊ณผ๋กœ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ดํ•ดํ•˜๊ณ  ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ํ˜•์‹(Style Rules)์œผ๋กœ ๋ณ€ํ™˜๋œ๋‹ค.

 

โ‘ข ๋ Œ๋” ํŠธ๋ฆฌ(DOM + CSSOM) ์ƒ์„ฑ

DOM ํŠธ๋ฆฌ์™€ ๋ Œ๋” ํŠธ๋ฆฌ

- DOM Tree๊ฐ€ ๊ตฌ์ถ•์ด ๋˜์–ด๊ฐ€๋Š” ๋™์•ˆ ๋ธŒ๋ผ์šฐ์ €๋Š” DOM Tree๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๋ Œ๋” ํŠธ๋ฆฌ๋ฅผ ์ƒ์„ฑํ•œ๋‹ค. ๋ฌธ์„œ๋ฅผ ์‹œ๊ฐ์ ์ธ ๊ตฌ์„ฑ ์š”์†Œ๋กœ ๋งŒ๋“ค์–ด์ฃผ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค.

 

โ‘ฃ ๋ Œ๋” ํŠธ๋ฆฌ ๋ฐฐ์น˜

- ๋ Œ๋”๋ง ํŠธ๋ฆฌ๋Š” ์œ„์น˜์™€ ํฌ๊ธฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์—, ๊ฐ์ฒด๋“ค์—๊ฒŒ ์œ„์น˜์™€ ํฌ๊ธฐ๋ฅผ ๊ฒฐ์ •ํ•ด์ค€๋‹ค.

 

โ‘ค ๋ Œ๋” ํŠธ๋ฆฌ ๊ทธ๋ฆฌ๊ธฐ

- ๋ Œ๋” ํŠธ๋ฆฌ์˜ ๊ฐ ๋…ธ๋“œ๋ฅผ ํ™”๋ฉด์˜ ํ”ฝ์…€๋กœ ๋‚˜ํƒ€๋‚ธ๋‹ค.

- ๋ Œ๋” ํŠธ๋ฆฌ ๊ทธ๋ฆฌ๊ธฐ๊ฐ€ ์™„๋ฃŒ๋˜๋ฉด, ํ™”๋ฉด์— ์ฝ˜ํ…์ธ ๊ฐ€ ํ‘œํ˜„๋œ๋‹ค.

 

 

 

 

 


์œ„ ๊ธ€์€ edwith์˜ < [๋ถ€์ŠคํŠธ ์ฝ”์Šค] ์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ > ๊ฐ•์˜ ์‹œ์ฒญ๊ณผ ์ž๋ฃŒ ์กฐ์‚ฌ๋ฅผ ํ†ตํ•ด ๊ณต๋ถ€ํ•œ ๋‚ด์šฉ์„ ์ž‘์„ฑํ•œ ๊ฒƒ ์ž…๋‹ˆ๋‹ค.

๋‚ด์šฉ์ƒ ์˜ค๋ฅ˜๊ฐ€ ์žˆ๋‹ค๋ฉด ๋Œ“๊ธ€๋กœ ์ ์–ด์ฃผ์„ธ์š”. ๐Ÿ–