๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
์‹œ๋„/Code-States

[D+56] Immersive 2์ฃผ์ฐจ

by ๐Ÿ‡๋ฐ•๋ด‰๋ด‰๐Ÿ‡ 2020. 11. 1.

 

D+49

-  Immersive 2์ฃผ ์ฐจ -

( ์ฝ”๋“œ์Šคํ…Œ์ด์ธ  ์ด๋จธ์‹œ๋ธŒ ์ฝ”์Šค 2์ฃผ ์ฐจ )

 


 

 

๋ฒŒ์จ 2์ฃผ์ฐจ๊ฐ€ ๋˜๋‹ค๋‹ˆ.... ์‹œ๊ฐ„ ์ฐธ ๋น ๋ฅด๋‹ค.

 

1์ฃผ์ฐจ์—๋„ ์Šคํ”„๋ฆฐํŠธ ๊ณผ์ œ๋ฅผ ํŽ˜์–ด๋‹˜๊ณผ ํ•จ๊ป˜ํ•˜๋ฉด์„œ ๊ฝค๋‚˜ ํž˜๋“  ์‹œ๊ฐ„์„ ๋ณด๋ƒˆ์—ˆ๋Š”๋ฐ...

2์ฃผ์ฐจ์—๋Š” ๋ฒŒ์จ ๊ณ ๋น„๊ฐ€ ์‚ด์ง ์™€๋ฒ„๋ ธ๋‹ค.

 

ํ”„๋ฆฌ์ฝ”์Šค๋‹น์‹œ์— ๋‚ด๊ฐ€ ์ •๋ง ์ ˆ๋ง์ ์ธ ์ˆœ๊ฐ„์ด ์žˆ์—ˆ๋Š”๋ฐ

๊ทธ๊ฒƒ์€ ๋ฐ”๋กœ DOM์„ ๋ฐฐ์› ์„ ๋•Œ์˜€๋‹ค.

 

๊ทธ๋•Œ ๋‹น์‹œ ์ดํ•ด๊ฐ€ ์ง„์งœ ์ž˜ ๋˜์ง€ ์•Š์•„์„œ ๊ทธ๋ƒฅ ๋‹ฌ๋‹ฌ๋‹ฌ ์™ธ์› ์—ˆ๊ณ 

๊ทธ๋ž˜์„œ ์‘์šฉ์„ ์š”๊ตฌํ•˜๋Š” ์Šคํ”„๋ฆฐํŠธ ๊ณผ์ œ๋ฅผ ์ง„ํ–‰ํ• ๋•Œ์—๋Š”

์—„์ฒญ ๋ง‰๋ง‰ํ•ด ํ–ˆ๊ณ  ๊ทธ๋‹น์‹œ ํŽ˜์–ด๋ถ„๊ป˜ ์ƒ๋‹นํžˆ ๋ฏธ์•ˆํ•œ ๋งˆ์Œ์œผ๋กœ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์ง„ํ–‰ํ–ˆ๋˜ ๊ธฐ์–ต์ด ์žˆ๋‹ค.

 

๊ทธ๋Ÿฐ๋ฐ ์ด๋ฒˆ์ฃผ ์Šคํ”„๋ฆฐํŠธ ๊ณผ์ œ ์ค‘์— DOM์— ๋Œ€ํ•œ ๊ฐœ๋…์ด ์–ด๋Š์ •๋„ ์žกํ˜€์žˆ์–ด์•ผ ํ’€ ์ˆ˜ ์žˆ๋Š” ๋ฌธ์ œ๋“ค์ด ๋‚˜์™€๋ฒ„๋ ธ๋‹ค...ใ… ใ…œ

 

์—ญ์‹œ๋‚˜ ๋”์— ๋Œ€ํ•œ ๊ฐœ๋…์ด ๋œ ์žกํ˜€์žˆ๋˜ ๋‚˜์—๊ฒ ์ด๋ฒˆ ๊ณผ์ œ๊ฐ€ ์ •๋ง ์–ด๋ ค์› ๊ณ 

๊ทธ๋กœ์ธํ•ด ํŽ˜์–ด ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์ง„ํ–‰ํ• ๋•Œ์—๋„ ๊ฝค ๋งŽ์€ ์–ด๋ ค์›€์„ ๊ฒช์—ˆ๋‹ค.

(ํŽ˜์–ด๋ฆฌ๋ทฐ์—๋„ ๊ฐœ๋…์— ๋Œ€ํ•œ ์ดํ•ด๋„ ๋ถ€์กฑ์— ๋Œ€ํ•œ ๋‚ด์šฉ์ด ๋‚˜์™€์žˆ์–ด ์ ˆ๋Œ€์ ์œผ๋กœ ๋ถ€์ •ํ•  ์ˆ˜ ์—†์—ˆ๋‹ค)

 

๊ทธ๋‚˜๋งˆ ๋‹คํ–‰์ธ ๊ฒƒ์€ ๊ณผ์ œ ์ดํ›„ ๋‹ค์Œ๋‚ ์ด ์ฃผ๋ง์ด์—ฌ์„œ

์ฃผ๋ง์— ์งฌ์งฌํžˆ DOM์„ ๊ณต๋ถ€ํ•˜๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์กŒ๋‹ค.

 

๋‹น์‹œ ํ”„๋ฆฌ์ฝ”์Šค๋•Œ์—๋Š” ์ดํ•ด๊ฐ€ ๊ฑฐ์˜ ์•ˆ๊ฐ€์„œ ๋ง‰๋ง‰ํ•ด ํ–ˆ์—ˆ๋Š”๋ฐ

๊ทธ๋ž˜๋„ ํ•œ๋‹จ๊ณ„ ์˜ฌ๋ผ๊ฐ”๋‹ค๊ณ  ๊ทธ๋Ÿฌ๋‚˜ ํ”„๋ฆฌ์ฝ”์Šค๋•Œ ๋ณด๋‹ค๋Š”

๋ง‰ ์ดํ•ด๊ฐ€ ์ „ํ˜€๊ฐ€์ง€ ์•Š๋Š”๋‹ค๋˜๊ฐ€ ๋ชจ๋ฅด๊ฒ ๋‹คํ•˜๋Š” ๊ฐœ๋…๊ณผ ๋ฌธ์ œ๋“ค์€ ๋ณ„๋กœ ์—†์—ˆ๋˜๊ฒƒ ๊ฐ™๋‹ค.

 

์•„์ง ์‹ฌํ™”์ ์ธ ๋‹จ๊ณ„๋ฅผ ์ดํ•ดํ•˜๊ณ  ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•ด ๋‚˜๊ฐ€๋Š”๋ฐ์—๋Š” ์–ด๋ ค์›€์ด ์žˆ์ง€๋งŒ

๊ณ„์† ์—ฐ์Šตํ•ด์„œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•ด ๋‚˜๊ฐ€์•ผ ๊ฒ ๋‹ค.

 

์•„์ฐธ, ๊ทธ๋ฆฌ๊ณ  ํ”„๋ฆฌ์ฝ”์Šค๋•Œ ํ’€์—ˆ๋˜ ๋ฌธ์ œ๋„ ๊พธ์ค€ํžˆ ๋ฐ˜๋ณตํ•˜๋ คํ•œ๋‹ค.

 

ํ•˜๋ฃจ์— ์ผ๋‹จ ์‰ฌ์šด๊ฑฐ ๊ธฐ์ค€ 3๋ฌธ์ œ ์ •๋„์”ฉ ๋งค์ผ ํ’€์–ด๋ณด๋ ค ํ•œ๋‹ค.

 

ํž˜๋‚ด์„œ ๋ถ€๋žด๋ถ€๋žด ๋”ฐ๋ผ๊ฐ€์ž!

 

 

 

 

๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€