๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ“‚ ๊ฐœ๋ฐœ์ž ์ด์•ผ๊ธฐ/ํšŒ๊ณ 

ํšจ๊ณผ์ ์ธ ๊ฐœ๋ฐœ ๊ณต๋ถ€ ๋ฐฉ๋ฒ• - ํ•™์Šต ๋ถ€์ฑ„๊ฐ ํ•ด์†Œํ•˜๊ธฐ

by Dev. Ella 2023. 9. 7.

ํ•™์Šต ๋ถ€์ฑ„๊ฐ

๋ถ€ํŠธ์บ ํ”„ 6๊ฐœ์›” ๋™์•ˆ ๋งˆ์Œ์†์„ ๋– ๋‚˜์ง€ ์•Š์•˜๋˜ ๋‹จ์–ด.

 

๋น ๋ฅธ ์‹œ๊ฐ„ ๋‚ด์— ์••์ถ•์ ์œผ๋กœ ๋ฐฐ์šฐ๊ณ  ์ ์šฉํ•ด์•ผ ํ•˜๋Š” ๋ถ€ํŠธ์บ ํ”„ ํ•™์Šต ๋ฐฉ์‹์œผ๋กœ ์ธํ•ด ๋ถ€์ฑ„๊ฐ์„ ์ž์ฃผ ๋Š๊ผˆ๋‹ค. ๋งค์ผ๋งค์ผ ๊ณผ์‹์„ ํ•˜๊ณ  ์†Œํ™”๋ฅผ ์‹œํ‚ค์ง€ ๋ชปํ•˜๊ณ  ์žˆ์—ˆ๋˜ ๊ฒƒ์ด๋‹ค. 

 

๊ทธ ์–ด๋ ต๋‹ค๋Š” ๊ณ ์ฐจํ•จ์ˆ˜๋ฅผ ํ•˜๋ฃจ์ดํ‹€ ์•ˆ์— ๋ฐฐ์šฐ๊ณ , ๋ฐฐ์šฐ๋ฉด ๋ฐฐ์šธ์ˆ˜๋ก ์–ด๋ ค์šด ๊ฒŒ CSS์ธ๋ฐ. ๋‚˜๋Š” ์ •๋ง ๊ฒ‰ํ•ฅ๊ธฐ๋งŒ ํ•˜๋Š” ์ˆ˜์ค€์ด๋ผ ๊ณต๋ถ€ํ•˜๋Š” ๋‚ด๋‚ด ์ž˜ํ•˜๊ณ  ์žˆ๋Š” ๊ฒƒ์ผ๊นŒ, ๋ถˆ์•ˆํ–ˆ๋‹ค. 

 

 

๋ถˆ์•ˆ์€ ํ”„๋กœ์ ํŠธ ํ•ฉ๋ฅ˜ ์ง์ „์— ๊ฐ€์žฅ ์‹ฌํ–ˆ๋‹ค.

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

 

๋‹คํ–‰ํžˆ ํ”„๋กœ์ ํŠธ๋Š” ์–ด์ฐŒ์ €์ฐŒ ์ž˜ ๋๋‚ฌ์ง€๋งŒ, ๋‚ด๊ฐ€ ์“ด ์ฝ”๋“œ์— ํ™•์‹ ์„ ๋Š๋ผ๊ธฐ ์–ด๋ ค์› ์„๋ฟ๋”๋Ÿฌ ๋‹ค๋ฅธ ์‚ฌ๋žŒ์˜ ์ฝ”๋“œ๋„ ์ž˜ ์ดํ•ดํ•˜์ง€ ๋ชปํ–ˆ๋‹ค. ์„ฑ๋Šฅ ๊ฐœ์„ ? ํ…Œ์ŠคํŠธ ์ฝ”๋“œ? ๋ฆฌํŒฉํ† ๋ง์€ ๋ฌด์Šจ.

 

๋ฌด์–ธ๊ฐ€๋ฅผ ๊ฐœ์„ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋ฌด์—‡์ด ๋ฌธ์ œ์ธ์ง€๋ฅผ ์•Œ์•„์•ผ ํ•˜๋Š”๋ฐ, ๋‹น์‹œ ๋‚˜๋Š” ๋ฌด์—‡์ด ๋ฌธ์ œ์ธ์ง€ ๋ชจ๋ฅด๋Š” ์ƒํ™ฉ์ด์—ˆ๋‹ค. 

 

 

๊ทธ๋ž˜์„œ ๋‚˜๋งŒ์˜ ๋ถ€ํŠธ์บ ํ”„๋ฅผ ๋‹ค์‹œ ์‹œ์ž‘ํ–ˆ๋‹ค.

๋‚จ๋“ค์ด ์งœ ์ค€ ์ปค๋ฆฌํ˜๋Ÿผ์— ๋”ฐ๋ผ๊ฐ€๊ธฐ ๊ธ‰๊ธ‰ํ•œ ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ๋‚ด๊ฐ€ ์•Œ๊ณ  ๋ชจ๋ฅด๋Š” ๊ฒƒ์„ ์ •ํ™•ํ•˜๊ฒŒ ์•Œ๊ณ , ๋ถ€์กฑํ•œ ๊ฒƒ์„ ์ฑ„์›Œ๋‚˜๊ฐ€๋Š” ๋ถ€ํŠธ์บ ํ”„. ๊ทธ๋ฆฌ๊ณ  ๋‚˜๋งŒ์˜ ์†๋„๋กœ ๊ฐ€๋ฉฐ ๊นŠ์ด 'ํƒ๊ตฌ'๋ผ๋Š” ๊ฒƒ์„ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ง์ด๋‹ค.

 

๋ถ€ํŠธ์บ ํ”„ ์ˆ˜๋ฃŒ ํ›„ ๊ฐ€์žฅ ๋จผ์ € ํ•œ ๊ฒƒ, ์ง€๊ธˆ๋„ ํ•˜๊ณ  ์žˆ๋Š” ๊ฒƒ์€ ์•„๋ž˜ ์„ธ ๊ฐ€์ง€๋‹ค. 

1. ๊ธฐ์ดˆ ๋‹ค์ง€๊ธฐ
2. ๋‹ค์‹œ ์„ค๋ช…ํ•˜๊ธฐ
3. ๊ถ๊ธˆํ•ด ํ•˜๊ธฐ

 

 

1. ๊ธฐ์ดˆ ๋‹ค์ง€๊ธฐ

HTML, CSS, JavaScript ๋“ฑ ์ด๋ฏธ ์•Œ๊ณ  ์žˆ๋Š” ๊ฐœ๋…์ด๋ผ๋„ ๋‹ค์‹œ ํ•œ๋ฒˆ ๊ฐ•์˜๋‚˜ ์ฑ…์„ ์ญ‰ ๋ณด๋ฉด์„œ ์•Œ๊ณ  ์žˆ๋Š” ๊ฒƒ๋“ค์„ ๋‹ค์‹œ ์ •๋ฆฌํ•˜๊ณ  ์žˆ๋‹ค. ์ด๋ฏธ ์•Œ๊ณ  ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์ง€๋งŒ ์ƒˆ๋กญ๊ฒŒ ํ˜น์€ ๋‹ค๋ฅด๊ฒŒ ์•Œ๊ฒŒ ๋œ ๊ฐœ๋…๋“ค๋„ ๋‹ค์‹œ ํ•œ๋ฒˆ ์ •๋ฆฌํ•˜๊ณ  ์žˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ง์ ‘ ๋ฌด์–ธ๊ฐ€ ๊ฐ„๋‹จํ•˜๊ฒŒ๋ผ๋„ ๋งŒ๋“ค์–ด๋ณด๋ฉด์„œ ์Šค์Šค๋กœ ์ž˜ ์•Œ๊ณ  ์žˆ๋Š”์ง€ ์ฒดํฌํ•˜๊ณ  ์žˆ๋‹ค.

 

 

2. ๋‹ค์‹œ ์„ค๋ช…ํ•˜๊ธฐ

๊ณผ๊ฑฐ์˜ ๋ธ”๋กœ๊ทธ๋‚˜ ๊นƒํ—™์— TIL ์ •๋ฆฌํ•ด ๋‘์—ˆ๋˜ ๊ฒƒ๋“ค์„ ์‹น ํ›‘๊ณ  ์žˆ๋‹ค. ํ›‘์œผ๋ฉด์„œ ๋ชจ๋ฅด๊ฑฐ๋‚˜ ์„ค๋ช…ํ•˜์ง€ ๋ชปํ•˜๋Š” ๊ฒƒ๋“ค์€ ์ˆ˜์ •ํ•˜๊ฑฐ๋‚˜ ๋‹ค์‹œ ๊ณต๋ถ€ํ•œ๋‹ค. ํŠนํžˆ ๋ธ”๋กœ๊ทธ์— ์ž˜ ์„ค๋ช…ํ•˜์ง€๋„ ๋ชปํ•˜๋Š”๋ฐ ์ผ๋‹จ ๊ธฐ๋ก๋งŒ ํ•ด๋‘” ๊ฒƒ๋“ค์€ ๋‹ค์‹œ ๋ณด๋‹ˆ ๋ฏผ๋งํ•œ ์ˆ˜์ค€์ด์—ˆ๋‹ค. ๋ˆ„๊ตฐ๊ฐ€์—๊ฒŒ ๋ธ”๋กœ๊ทธ ๊ธ€์„ ๋ณด์—ฌ์ฃผ๋ฉฐ ์ง์ ‘ ์„ค๋ช…ํ•  ์ˆ˜ ์—†๋Š”๊ฐ€? ๊ทธ๋ ‡๋‹ค๋ฉด ๊ทธ ๊ธ€์€ ์“ธ๋ชจ์—†๋‹ค. ๊ณผ๊ฐํžˆ ์ง€์šฐ๊ฑฐ๋‚˜ ๋‹ค์‹œ ๊ณต๋ถ€ํ•ด์•ผ ํ•œ๋‹ค.

 

 

3. ๊ถ๊ธˆํ•ด ํ•˜๊ธฐ

๋ถ€ํŠธ์บ ํ”„์—์„œ๋Š” ํ•˜๋‚˜ ๋ฐฐ์šฐ๋ฉด ๋˜ ๋‹ค์Œ๋‚  ๋‹ค๋ฅธ ๊ฒƒ์„ ๋ฐฐ์›Œ์•ผ ํ•˜๋‹ˆ ๊ทธ๋ƒฅ ๋ณต์Šต๋ฐ–์— ํ•  ์ˆ˜ ์—†์—ˆ๋‹ค. ๋งŽ์ด ๋จน์—ˆ์œผ๋ฉด ๊ทผ์ฒ˜ ์‚ฐ์ฑ…๋„ ํ•˜๊ณ  ๋™๋„ค ๊ณณ๊ณณ์„ ์‚ดํŽด๋ณด๋ฉฐ ์ด๊ฑด ๋ญ˜๊นŒ, ์ €๊ฑด ๋ญ˜๊นŒ ์ข€ ๊ถ๊ธˆํ•ดํ•˜๋ฉด์„œ ์†Œํ™”์‹œํ‚ค๋ฉด ๋” ์ข‹์€๋ฐ. ๋‚˜๋Š” ๊ทธ๋ ‡์ง€ ๋ชปํ–ˆ๋‹ค.

 

๊ทธ๋ž˜์„œ ์Šค์Šค๋กœ ๊ถ๊ธˆํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ์—ฌ์œ ์ด์ž ๊ธฐํšŒ๋ฅผ ์ฃผ๊ณ  ์žˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, JavaScript์˜ ํด๋ž˜์Šค ๊ฐœ๋…์„ ๋‹ค์‹œ ๊ณฑ์”น์–ด๊ฐ€๋ฉฐ 'ES5์—์„œ๋Š” ๋ฌด์—‡์ด ๋ถˆํŽธํ–ˆ๊ธฐ์— ES6์—์„œ ํด๋ž˜์Šค ๊ฐœ๋…์„ ์ถ”๊ฐ€ํ•œ ๊ฒƒ์ผ๊นŒ?' ์ด๋Ÿฌํ•œ ๊ถ๊ธˆ์ฆ์„ ์•ˆ๊ณ  ์Šค์Šค๋กœ ์ฐพ์•„ ๊ณต๋ถ€ํ•˜๊ณ  ์žˆ๋‹ค.

 

์ฆ‰, ์‹œ์ผœ์„œ ํ•˜๋Š” ๊ณต๋ถ€๊ฐ€ ์•„๋‹Œ ์Šค์Šค๋กœ ๊ถ๊ธˆํ•ด์„œ ํ•˜๋Š” ์ง„์งœ ์ž๊ธฐ ์ฃผ๋„์ ์ธ ํ•™์Šต ๋ง์ด๋‹ค.

 

์ปค๋ฆฌํ˜๋Ÿผ์„ ๊ทธ๋ƒฅ ๋”ฐ๋ผ๊ฐ€๋Š” ๊ฒƒ๋„ ๋ฌผ๋ก  ๋‚˜์˜์ง€ ์•Š์ง€๋งŒ, ๊ฐœ์ธ์ ์œผ๋กœ๋Š” ๋จธ๋ฆฟ์†์— ๋‚จ๋Š” ๊ฒŒ ๋ณ„๋กœ ์—†์—ˆ๋‹ค. ๋‡Œ์— ์ผ์ข…์˜ ๋ถ€ํ•˜๋ฅผ ์ฃผ๊ณ , ์Šค์Šค๋กœ ๊ณ ๋ฏผํ•˜๊ณ  ์ฐพ์•„๋ณด๋ฉฐ ๋‹ต์„ ๋‚ด๋ฆฌ๋ฉด ๊ทธ๊ฒƒ๋งŒํผ ์˜ค๋ž˜ ๋‚จ๋Š” ์ƒ์ƒํ•œ ๊ฒฝํ—˜์ด ์žˆ์„๊นŒ?

 

 

์ž์‹ ๊ฐ

์•ž์œผ๋กœ๋Š” ํ•™์Šต ๋ถ€์ฑ„๊ฐ์„ ํ•ด์†Œํ•˜๊ณ , '์ž์‹ ๊ฐ'์ด๋ผ๋Š” ๋‹จ์–ด๊ฐ€ ์ž๋ฆฌํ•˜๊ธฐ๋ฅผ ๋ฐ”๋ž€๋‹ค. ์–ด๋–ค ๊ฐœ๋…์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐํ•  ๋•Œ "์ € ๊ทธ๊ฑฐ ์ž˜ ๋ชจ๋ฅด๋Š”๋ฐ.." ๊ฐ™์€ ํ•™์Šต ๋ถ€์ฑ„๊ฐ์ด ์•„๋‹Œ "์ € ๊ทธ๊ฑฐ ๊ถ๊ธˆํ•ด์„œ ์ง์ ‘ ์•Œ์•„๋ณด๊ณ  ํ•ด ๋ดค๋Š”๋ฐ์š”"์™€ ๊ฐ™์ด ์ž์‹ ๊ฐ์ด ์žˆ๋Š” ๊ฐœ๋ฐœ์ž๋กœ ์„ฑ์žฅํ•˜๊ณ  ์‹ถ๋‹ค.

 

 

๋Œ“๊ธ€