๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
JavaScript/Nomad Coders

[ํ›„๊ธฐ] ๋…ธ๋งˆ๋“œ์ฝ”๋” ๋ฐ”๋‹๋ผJS ์ฑŒ๋ฆฐ์ง€ 1์ฃผ์ผ ์ง€๋‚œ ์‹œ์  ํ›„๊ธฐ

by vividmin 2022. 3. 16.
320x100

 

๋ฐ”๋‹๋ผ JS์ฑŒ๋ฆฐ์ง€๋ž€?

๐Ÿ‘‰ "๋…ธ๋งˆ๋“œ์ฝ”๋”" ์‚ฌ์ดํŠธ์—์„œ ์ง„ํ–‰ ์ค‘์ธ ํ”„๋กœ๊ทธ๋žจ์œผ๋กœ, ๋งค ๊ธฐ๊ฐ„๋ณ„๋กœ ์ง€์›์ž๋ฅผ ๋ฐ›์•„์„œ ์ •ํ•ด์ง„ ๊ธฐ๊ฐ„ ๋™์•ˆ ๋ฏธ์…˜์— ๋„์ „ํ•˜๋Š” ์ผ์ข…์˜ ์Šคํ„ฐ๋””๋‹ค!

๊ทธ๋ฆฌ๊ณ  ์ฑŒ๋ฆฐ์ง€๋Š” ๋ฌด๋ฃŒ์ง€๋งŒ, ์ฑŒ๋ฆฐ์ง€์— ์ฐธ์—ฌํ•˜๊ธฐ ์œ„ํ•ด ์œ ๋ฃŒ ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ•ํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋Š” ๊ฒƒ ๊ฐ™๋‹ค.

๊ทธ์ค‘์—์„œ ๋‚ด๊ฐ€ ์ฐธ์—ฌํ•œ ๊ณผ์ •์€ ๋ฐ”๋‹๋ผJS์ฑŒ๋ฆฐ์ง€๋กœ ์•„๋ž˜์˜ '๋ฐ”๋‹๋ผ JS๋กœ ํฌ๋กฌ ์•ฑ ๋งŒ๋“ค๊ธฐ' ๊ฐ•์˜์™€ ๊ฐ™์ด ์ง„ํ–‰๋˜๋Š” ์ฑŒ๋ฆฐ์ง€์ด๋‹ค.

๊ฐ•์˜๋„ ๋ฌด๋ฃŒ, ์ฑŒ๋ฆฐ์ง€๋„ ๋ฌด๋ฃŒ์ธ๋ฐ ์ฑŒ๋ฆฐ์ง€๋ฅผ ๋๋‚ด๊ณ  ๋‚˜๋ฉด ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋“ค์„ ๋•Œ ์‚ฌ์šฉํ•  ์ˆ˜  ์žˆ๋Š”  ์ตœ๋Œ€ 30% ํ• ์ธ์ฟ ํฐ๊ณผ ๋ฑƒ์ง€, ์ˆ˜๋ฃŒ์ฆ ๋“ฑ์„ ์ œ๊ณตํ•œ๋‹ค๊ณ  ํ•˜๋‹ˆ ์•ˆ ํ•  ์ด์œ ๊ฐ€ ์žˆ๋‚˜?๐Ÿ˜†

 

 

์ฑŒ๋ฆฐ์ง€์˜ ๋ชฉ์ ?

ํ™ˆํŽ˜์ด์ง€์— ๋‚˜์™€์žˆ๋Š” ๋ชฉ์ ์€ ์œ„์™€ ๊ฐ™๋‹ค.

ํฌ๊ฒŒ ๊ฐ•์˜๋ฅผ ๋Š์–ด๋†“๊ณ  ์™„๊ฐ•ํ•˜๊ธฐ ํž˜๋“ค์—ˆ๋˜ ์‚ฌ๋žŒ์ด๋‚˜, ๊ฐ•์˜๋งŒ ๋“ฃ๊ณ  ์‹ค์ „์— ์ ์šฉ์ด ์–ด๋ ค์› ๋˜ ์‚ฌ๋žŒ๋“ค์ด ๋“ค์œผ๋ฉด ์ข‹๋‹ค. ์ฑŒ๋ฆฐ์ง€์— ๋„์ „ํ•  ๊ฒฝ์šฐ์— 2์ฃผ ์ง„๋„ํ‘œ๊ฐ€ ์ œ๊ณต๋˜๋Š”๋ฐ, ์ด์— ๋งž์ถฐ์„œ ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ  ๋งค์ผ ๋‚˜์˜ค๋Š” ๊ณผ์ œ๋ฅผ ์ˆ˜ํ–‰ํ•˜๋ฉด ๋œ๋‹ค.

๊ณผ์ œ์˜ ๊ฒฝ์šฐ ํ€ด์ฆˆ๋Š” ๋ฐ”๋กœ ๋‹ต์„ ์•Œ ์ˆ˜ ์žˆ๊ณ , ์ฝ”๋”ฉ๊ณผ์ œ๋Š” ์ œ์ถœ ์—ฌ๋ถ€๋งŒ ํŒ๋‹จํ•œ ๋’ค ์ฑŒ๋ฆฐ์ง€ ์ตœ์ข… ์ข…๋ฃŒ ํ›„์— ๋‹ค์‹œ ์ฑ„์ ์„ ํ•˜์—ฌ ํ•„์ˆ˜์กฐ๊ฑด์— ๋ฏธ๋‹ฌ๋˜๋ฉด ํƒˆ๋ฝํ•œ๋‹ค๊ณ  ๋‚˜์™€์žˆ๋‹ค.

๋˜ํ•œ Slack์„ ์ด์šฉํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ๊ฐ€ ์žˆ์–ด์„œ, ์—ฌ๋Ÿฌ ์ˆ˜๊ฐ•์ƒ๋“ค๊ณผ ์„œ๋กœ ์งˆ๋ฌธ๋„ ํ•˜๊ณ  ๋Œ€ํ™”๋„ ํ•˜๋ฉด์„œ ๋™๊ธฐ๋ถ€์—ฌ๋ฅผ ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค.

 

 

๐Ÿ“š ๋„์ „ํ•œ ์ฝ”๋”ฉ ๊ณผ์ œ๋“ค

 

1. ํด๋ฆญ์ด๋ฒคํŠธ ๋งŒ๋“ค๊ธฐ

 

2. Screen Resize ์ด๋ฒคํŠธ ๋งŒ๋“ค๊ธฐ

 

3. ๋žœ๋ค ์ˆซ์ž๊ฒŒ์ž„ ๋งŒ๋“ค๊ธฐ

 

 

 

1์ฃผ์ผ์ด ์ง€๋‚œ ์‹œ์ ์˜ ํ›„๊ธฐ๐Ÿค”

์ฒ˜์Œ์‹œ์ž‘ ๋•Œ๋Š” ๋ฌด๋ฃŒ ๊ฐ•์˜์ธ ๋ฐ๋‹ค๊ฐ€ ์ดˆ๊ธ‰ ๋งˆํฌ๊ฐ€ ๋ถ™์–ด์žˆ์–ด์„œ ๊ฐ•์˜ ๋‚ด์šฉ์ด ๋งค์šฐ ์‰ฌ์šธ ์ค„ ์•Œ์•˜๋Š”๋ฐ, ์•Œ๊ณ  ์žˆ๋˜ ๋‚ด์šฉ์ด๋ผ๋„ ๋ช…ํ™•ํ•˜๊ฒŒ ์„ค๋ช…ํ•˜๊ธฐ ์–ด๋ ค์› ๋˜ ๊ฐœ๋…์— ๋Œ€ํ•œ ์„ค๋ช…์ด ๋งค์šฐ ์ž˜ ๋˜์–ด์žˆ์–ด์„œ ๋†€๋ž๋‹ค.

๊ทธ๋ฆฌ๊ณ  ๊ฐ•์˜๊ฐ€ ๊ฐœ๋… ์„ค๋ช… ์‹ค์Šต, ํ™•์žฅ๋œ ๊ฐœ๋… ์‹ค์Šต์˜ ๋ฐ˜๋ณต์ด๋‹ค ๋ณด๋‹ˆ ์ดํ•ด๊ฐ€ ์•„์ฃผ ์ž˜ ๋œ๋‹ค. ์•„์ง ์ดˆ๋ฐ˜์ด๋ผ ๊ทธ๋Ÿฐ ๊ฒƒ ๊ฐ™๊ธฐ๋„ ํ•˜์ง€๋งŒ...๐Ÿ˜…

๊ฐ„๋‹จํžˆ 10๋ถ„ ๋‚ด์™ธ์˜ ๊ฐ•์˜๋กœ ๋˜์–ด์žˆ๊ณ  ์ง„๋„ํ‘œ์— ๋‚˜์˜จ ๋‚ด์šฉ์ด ์ž‘์•„์„œ ๊ธˆ๋ฐฉ ํ•  ์ˆ˜ ์žˆ์„ ์ค„ ์•Œ์•˜๋Š”๋ฐ, ์ƒ๊ฐ๋ณด๋‹ค ์ •๋ฆฌํ•˜๊ณ  ์‹ค์Šตํ•˜๋ฉด์„œ ๋“ฃ๊ธฐ์—๋Š” ์‹œ๊ฐ„ ์†Œ์š”๊ฐ€ ๋งŽ์ด ๋œ๋‹ค.

๋งŒ์•ฝ ์ฑŒ๋ฆฐ์ง€๋ฅผ ์ฐธ์—ฌํ•˜๋ ค๋ฉด ๊ฐ•์˜ ์˜ˆ์Šต์„ ์–ด๋Š ์ •๋„ ํ•˜๊ณ  ์‹œ์ž‘ํ•ด์•ผ ์‹œ๊ฐ„์ด ๋ถ€์กฑํ•˜์ง€ ์•Š์„ ๊ฒƒ ๊ฐ™๋‹ค.

๋งค์ผ ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ  ๊นƒํ—ˆ๋ธŒ์— ์ •๋ฆฌํ•˜๋ฉด์„œ ๋“ค์œผ๋‹ˆ ์ „๋ณด๋‹ค ๋ง‰์—ฐํ•œ ๋Š๋‚Œ์ด ์ค„์–ด๋“ค๊ณ , ์‹ค์ „์—์„œ ๊ฐœ๋…์„ ์‚ฌ์šฉํ•  ๋•Œ ๋„์›€์ด ๋งŽ์ด ๋œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋งค์ผ ์ง„ํ–‰๋˜๋Š” ๊ณผ์ œ๋ฅผ ํ•˜๋ฉด์„œ ๊ฐœ๋…์„ ํ•œ๋ฒˆ ๋” ์ •๋ฆฌํ•  ์ˆ˜ ์žˆ์–ด์„œ ์ •๋ง ์ข‹๋‹ค.

์•ž์œผ๋กœ ๋‚จ์€ ์ผ์ฃผ์ผ ์—ด์‹ฌํžˆ ํ•ด์„œ ๊ผญ ์™„๊ฐ•ํ•˜์—ฌ ์ฟ ํฐ๊ณผ ์ˆ˜๋ฃŒ์ฆ์„ ๋ฐ›์•„์•ผ๊ฒ ๋‹ค!!

 

 

 

๋ฐ”๋‹๋ผJS ์ฑŒ๋ฆฐ์ง€ – ๋…ธ๋งˆ๋“œ ์ฝ”๋” Nomad Coders

์ˆ˜๊ฐ•์ƒ์ด๋ผ๋ฉด ๋ˆ„๊ตฌ๋‚˜ ๋ฌด๋ฃŒ๋กœ ์ฐธ์—ฌ ๊ฐ€๋Šฅ. ์กธ์—…์‹œ 10% ํ• ์ธ์ฟ ํฐ ๊นŒ์ง€!

nomadcoders.co

 

๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€