[๋ฐ๋ธŒ์ฝ”์Šค] WEEK3๐Ÿš€

๋ฐ•์†ก์ดยท2021๋…„ 8์›” 17์ผ
1
post-thumbnail

ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฐ๋ธŒ์ฝ”์Šค ํ”„๋ก ํŠธ์—”๋“œ 11์ผ์ฐจ

๋Œ€์ฒด๊ณตํœด์ผ ๐Ÿ’จ


์‹ ๋‚˜๋Š” ๊ณตํœด์ผ์ด์˜ˆ์š” ~~ ๋ฌผ๋ก  ๋ฐ๋ธŒ์ฝ”์Šค๋Š” ์ด์–ด์ง€์ฃ  ~~
์กฐ๊ธˆ์€ ์ง€์น˜๊ฒŒ ๋งŒ๋“  ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด ๋„˜์–ด๊ฐ”๋‹ค. ๋„˜์–ด๊ฐ”๋‹ค?๋Š” ์ข€ ์ด์ƒํ•˜์ง€๋งŒ ์ฃผ์ฐจ๊ฐ€ ๋‹ฌ๋ผ์กŒ๋‹ค. ๋งŽ์ด ์–ด๋ ค์› ์ง€๋งŒ ์กฐ๊ธˆ์ด๋‚˜๋งˆ for, if ๋Œ€์‹ ์— map, filter, reduce๋ฅผ ๋Œ€์‹  ์จ๋ณด๋Š” ์—ฐ์Šต์„ ํ•˜๊ณ  ์žˆ๊ณ , ๋ช…๋ นํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์ง€์šฐ๊ธฐ ์œ„ํ•ด ์ƒ๊ฐ์„ ์ฒœ์ฒœํžˆ ํ•˜๋ ค๊ณ  ๋…ธ๋ ฅ ์ค‘์ด๋‹ค. ์•ฝ 3.5๋…„์„ ๋ช…๋ นํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์œผ๋กœ ๋””๋ฒ„๊น…ํ•˜๊ณ  ์ปดํŒŒ์ผ ํ–ˆ์œผ๋‹ˆ ๊ทธ ์Šต๊ด€์ด ๋‹น์žฅ ๊ณ ์ณ์ง€์ง€ ์•Š์„ํ…Œ์ง€๋งŒ, ์–ธ์  ๊ฐ„ ๋˜๊ฒ ์ง€? :>

TIL

๊ณผ์ œ + ์Šคํ„ฐ๋”” + ๊ฐ•์˜์— ์ง€์นœ ์ˆ˜๊ฐ•์ƒ๋“ค์„ ์œ„ํ•ด ๊ฐ“๊ฐ“๋งค๋‹ˆ์ €๋‹˜์€ ์›”์š”์ผ์„ ๋ผ์ดํŠธํ•˜๊ฒŒ ๋งŒ๋“ค์–ด์ฃผ์…จ๋Œœ์•„~!

1๋ฒˆ ๋ฌธ์ œ ํ’€์ด ๐ŸŒป

์ฝ”๋“œ์˜ cat์€ new ํ‚ค์›Œ๋“œ๊ฐ€ ๋ถ™์ง€ ์•Š๊ณ  ํ˜ธ์ถœ๋œ "์ผ๋ฐ˜ ํ•จ์ˆ˜"๋‹ค. ์ผ๋ฐ˜ ํ•จ์ˆ˜๋Š” this๊ฐ€ window ์ฆ‰ ์ „์—ญ๊ฐ์ฒด๋กœ ํ• ๋‹น๋˜๊ณ , new๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— ์ธ์Šคํ„ด์Šค๋„ ์ƒ์„ฑํ•˜์ง€ ์•Š๋Š”๋‹ค. ์ƒ์„ฑ๋˜์ง€ ์•Š์€ ์ธ์Šคํ„ด์Šค + return ๊ฐ’์ด ์—†๋Š” ํ•จ์ˆ˜๋ฅผ ํ• ๋‹น ๋ฐ›์€ ๋ณ€์ˆ˜๋Š” ๋‹น์—ฐํžˆ undefined๊ฐ€ ๋œ๋‹ค.

2๋ฒˆ ๋ฌธ์ œ ํ’€์ด ๐ŸŒป

์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ ์ „์—ญ์— ๋ณ€์ˆ˜, ํ•จ์ˆ˜๋ฅผ ์„ ์–ธํ•˜๋Š” ๊ฒƒ์€ ์‚ฌ์‹ค ์กฐ๊ธˆ์€ ์œ„ํ—˜ํ•  ์ˆ˜ ์žˆ๋‹ค. ์™œ๋ƒํ•˜๋ฉด ์ „์—ญ์— ์„ ์–ธ๋œ ๋ณ€์ˆ˜๋‚˜ ํ•จ์ˆ˜๋Š” ์ „์—ญ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๊ฐ€ ๋˜๊ธฐ ๋•Œ๋ฌธ. ์ด๋ฅผ ์ง€์–‘ํ•˜๊ธฐ ์œ„ํ•ด ์ฆ‰์‹œ ์‹คํ–‰ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

3๋ฒˆ ๋ฌธ์ œ ํ’€์ด ๐ŸŒป

๊ฐ์ฒด์˜ this๋Š” ํ˜ธ์ถœํ•œ ๋ถ€๋ถ„์„ ์‚ดํŽด๋ณด์•„์•ผํ•œ๋‹ค. ๋˜ํ•œ this๋Š” ํ•จ์ˆ˜ ์Šค์ฝ”ํ”„ ์ฒด์ธ์ฒ˜๋Ÿผ ์œ„๋กœ ํƒ€๊ณ  ํƒ€๊ณ  ์˜ฌ๋ผ๊ฐ€๋Š”๊ฒŒ ์—†๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ์ฒด์˜ this๊ฐ€ ๋ˆ„๊ตฌ์ธ์ง€๋ฅผ ์ •ํ™•ํžˆ ์‚ดํŽด๋ด์•ผํ•œ๋‹ค.

4๋ฒˆ ๋ฌธ์ œ ํ’€์ด ๐ŸŒป

์ฝœ๋ฐฑ ํ•จ์ˆ˜์˜ this๋Š” undefined๋‹ค. ์™œ๋ƒํ•˜๋ฉด ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•œ ์ƒ์œ„ ํ•จ์ˆ˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋Š” ์ฝœ๋ฐฑํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋  ๋•Œ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ์Šคํƒ์—์„œ ์ด๋ฏธ pop๋˜์–ด ์—†๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์ด๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ 3๊ฐ€์ง€ ๋ฐฉ๋ฒ•์€ (1) arrow func: ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋Š” ์Šค์ฝ”ํ”„๋ฅผ ๊ฐ€์ง€์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์ „์—ญ ๊ฐ์ฒด๊ฐ€ this๊ฐ€ ๋œ๋‹ค. (2) bind: this๋ฅผ ์ •ํ•ด์ค€๋‹ค. (3) ํด๋กœ์ €: let that = this; ์™€ ๊ฐ™์€ ์ฝ”๋“œ๋กœ ํ•˜์œ„ ํ•จ์ˆ˜์—๊ฒŒ this๋ฅผ ๋„˜๊ฒจ์ค€๋‹ค.

5๋ฒˆ ๋ฌธ์ œ ํ’€์ด ๐ŸŒป

์ฝœ๋ฐฑ ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋œ ์‹œ์ ์—” ์ด๋ฏธ i = 5์˜ ๊ฐ’์„ ๊ฐ€์ง„๋‹ค. ์›ํ•˜๋Š” ๊ฒฐ๊ณผ๋ฅผ ์–ป๊ธฐ ์œ„ํ•ด์„ , 3๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค. (1) IIFE (2) var๋ฅผ let์œผ๋กœ ๋ฐ”๊พธ๊ธฐ (3) for -> forEach ๋ฐ”๊พธ๊ธฐ

์ด ๋ถ€๋ถ„์€ ๋‹ค์‹œ๊ธˆ ๊ณต๋ถ€ํ•ด์•ผํ•  ๊ฒƒ ๊ฐ™๋‹ค. ๐Ÿ’ฌ

6๋ฒˆ ๋ฌธ์ œ ํ’€์ด ๐ŸŒป

var - ํ•จ์ˆ˜ ์Šค์ฝ”ํ”„, ์„ ์–ธ + ์ดˆ๊ธฐํ™” ๋‹จ๊ณ„๊ฐ€ ๋™์‹œ์— ์ด๋ค„์ง
let, const - ๋ธ”๋Ÿญ ์Šค์ฝ”ํ”„, TDZ์„ ๊ฐ€์ง„๋‹ค.

7๋ฒˆ ๋ฌธ์ œ ํ’€์ด ๐ŸŒป

ํด๋กœ์ €๋Š” ๋ฐ˜ํ™˜๋œ ๋‚ด๋ถ€ ํ•จ์ˆ˜๊ฐ€ ์ž์‹ ์ด ํ˜ธ์ถœ๋œ ๋ ‰์‹œ์ปฌ ํ™˜๊ฒฝ์„ ๊ธฐ์–ตํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค. ์ฆ‰, ์ƒ์œ„ ํ•จ์ˆ˜ ์Šค์ฝ”ํ”„์—์„œ ๋ฒ—์–ด๋‚ฌ์ง€๋งŒ ๋ ‰์‹œ์ปฌ ํ™˜๊ฒฝ์€ ๋‚จ์•„์žˆ์–ด ๋‚ด๋ถ€ ํ•จ์ˆ˜์—์„œ ์ƒ์œ„ ํ•จ์ˆ˜์˜ ์Šค์ฝ”ํ”„๋ฅผ ๊ธฐ์–ตํ•œ๋‹ค.

ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฐ๋ธŒ์ฝ”์Šค ํ”„๋ก ํŠธ์—”๋“œ 12์ผ์ฐจ

๋ช…๋ นํ˜•? ์„ ์–ธํ˜•? โœจ

ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค 3์ฃผ์ฐจ๊ฐ€ ์‹œ์ž‘๋˜์—ˆ๋‹ค. ์›”์š”์ผ์€ ๊ฐ€๋ณ๊ฒŒ ํ…Œ์ŠคํŠธ๋กœ ๋Œ€์ฒด ๋˜์—ˆ๊ณ , ๋•๋ถ„์— ์‰ด ์‹œ๊ฐ„์ด ์ƒ๊ฒจ์„œ ๋‹ค์‹œ๊ธˆ ๋งˆ์Œ์„ ๋‹ค ์žก๊ณ ! ๊ณต๋ถ€๋ฅผ ์‹œ์ž‘ํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค. 3์ฃผ์ฐจ ์ฃผ์ œ๋Š” ๋ฐ”๋‹๋ผ JS ๊ธฐ๋ณธ ์—ญ๋Ÿ‰ ๊ฐ•ํ™”๋กœ, ํ”„๋ ˆ์ž„์›Œํฌ๋‚˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์—†์ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•? ์— ๋Œ€ํ•ด ๋ฐฐ์šฐ๋Š” ๋“ฏ ํ•˜๋‹ค. ์˜ค๋Š˜์€ ๋ช…๋ นํ˜•๊ณผ ์„ ์–ธํ˜•์˜ ๊ฐ„๋‹จํ•œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด๋ณด๊ณ  ๋‘˜์˜ ์ฐจ์ด์ ์„ ๋น„๊ตํ•œ ๋’ค ๊ฐ„๋‹จํ•œ ๋ฒ„ํŠผ์„ ์„ ์–ธ์ ์œผ๋กœ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ์‹ค์Šต์„ ํ–ˆ๋‹ค. 2์ฃผ์ฐจ ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ํ•˜๋ฉด์„œ for, if๋ฅผ ๋Œ€์‹ ํ•ด map, reduce, filter์™€ ๊ฐ™์€ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋Š๋‚Œ?์„ ์–ด๋Š์ •๋„ ๋ฐ›์•˜๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋Š”๋ฐ, ์ด๋ ‡๊ฒŒ ์ผ๋ฐ˜์ ์ธ ์ฝ”๋“œ๋กœ ๋„˜์–ด์˜ค๊ฒŒ ๋˜๋ฉด ๋˜ ๊ทธ ๊ฐ์ด ์Šฌ๊ธˆ์Šฌ๊ธˆ ์‚ฌ๋ผ์ง€๋Š” ๊ธฐ๋ถ„์ด๋‹ค. (๋„๋Œ€์ฒด ์„ ์–ธํ˜•... ๋ฌด์—‡...)

ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฐ๋ธŒ์ฝ”์Šค ํ”„๋ก ํŠธ์—”๋“œ 13์ผ์ฐจ

๊ธฐ๋ก์€ ์ค‘์š”ํ•ด ๐Ÿ™‹โ€โ™€๏ธ

๋ญ ํ–ˆ๋‹ค๊ณ  ๋ฒŒ์จ ์ˆ˜์š”์ผ์ธ๊ฐ€์š”? ๋ฐ๋ธŒ์ฝ”์Šค์™€ ~ ํ•จ๊ป˜ํ•˜๋Š” ~ ์ผ์ƒ ~ ๋Š˜ ~ ์ค‘๊ฐ„ ๊ณ ์‚ฌ ~ ๊ฐ™์€ ~ ๊ฑธ ~ !
3์ฃผ์ฐจ๊ฐ€ ๋˜๊ณ  ๋‚˜์„œ ๊ฐ•์˜ ๋‚œ์ด๋„์™€ ์–‘์ด ์ค„์—ˆ๋‹ค. ์‹œ๊ฐ„๋„ ์ €๋ฒˆ์ฃผ๋ณด๋‹จ ๋งŽ์ด ๋‚จ์•„์„œ ๋ฏธ๋ค„๋’€๋˜ ํ•˜๊ณ  ์‹ถ์—ˆ๋˜ ๊ณต๋ถ€์™€, ์–ด์ œ ํŠน๊ฐ• + ๊ณ ๋ฏผ์ƒ๋‹ด์†Œ ์ง„ํ–‰์œผ๋กœ ์–ป์€ ๊ฒƒ๋“ค์— ๋Œ€ํ•ด ์ƒ๊ฐ์„ ํ•˜๋Š” ์ค‘์ด๋‹ค. ๊ฐœ๋ฐœ์ž๋กœ ์‚ด์•„๊ฐ„๋‹ค๋Š” ๊ฒƒ. ์• ํ‹ฐํŠœ๋“œ. ์›Œ๋ผ๋ฒจ๋“ฑ ๊ฐœ๋ฐœ์ž๋กœ์จ์˜ ๋งŽ์€ ๊ฒƒ์„ ์–ป๊ธฐ๋„ ํ–ˆ์ง€๋งŒ ๊ฐœ๋ฐœ์„ ์—…์œผ๋กœ ์‚ผ๋Š” ์–ด๋ฅธ์˜ ๋ง์„ ๋“ค์€ ๊ธฐ๋ถ„? ์ฝ”๋“œ๋Š” ๋ˆ„๊ตฌ๋‚˜ ์งค ์ˆ˜ ์žˆ์ง€๋งŒ ๊ฐœ๋ฐœ์€ ๋ˆ„๊ตฌ๋‚˜ ์‰ฝ๊ฒŒ ํ•  ์ˆ˜ ์—†๋‹ค. ๋‚˜๋Š” ๊ฐœ๋ฐœ์„ ์ž˜ ํ•˜๊ณ  ์‹ถ๋‹ค!

ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฐ๋ธŒ์ฝ”์Šค ํ”„๋ก ํŠธ์—”๋“œ 14์ผ์ฐจ

mETorIng DaY ๐Ÿ’š

์„ธ๋ฒˆ์งธ ๋ฉ˜ํ† ๋‹˜๊ณผ ์ปคํ”ผ์ฑ—์ด ์ง„ํ–‰๋œ ๋‚ ์ด๋‹ค. ๋ฉ˜ํ† ๋‹˜์€ kdt๋ง๊ณ ๋„ ๋‹ค๋ฅธ ๋™์•„๋ฆฌ์—์„œ ์šด์˜์ง„์œผ๋กœ ํ™œ๋™ํ•˜๊ณ  ๊ณ„์‹œ๋Š” ํ˜„์—… ๊ฐœ๋ฐœ์ž์‹ ๋ฐ, ์˜ค๋Š˜์€ ๋ฉ˜ํ† ๋‹˜์˜ ์ทจ๋ฏธ๋ถ€ํ„ฐ ์ธ์Šคํƒ€๊ทธ๋žจ ํƒ๋ฐฉ์„ ํ†ตํ•ด ๋ฉ˜ํ† ๋‹˜๊ณผ ๋ฆฌ๋ชจํŠธ ์นœ๋ฐ€๊ฐ์ด ํ˜•์„ฑ๋œ ๋‚ ์ด๋‹คใ…Žใ…‹ใ…Žใ…‹ :) ๋ฉ˜ํ† ๋‹˜์€ ๋ฎค์ง€์ปฌ, ์ฝ˜์„œํŠธ๋ฅผ ์ข‹์•„ํ•˜์‹œ๊ณ  ์ปคํ”ผ๋ฅผ ์ข‹์•„ํ•˜์‹ ๋‹ค. ์ธ์Šคํƒ€๊ทธ๋žจ์„ ํ†ตํ•ด ๋ฉ˜ํ† ๋‹˜์˜ ์•„์ด๋ดํ‹ฐํ‹ฐ์™€ ๊ฐœ๋ฐœ์„ ์ •๋ง ์ฆ๊ฑฐ์›Œํ•˜์‹œ๋Š” ๋“ฏํ•œ ๋Š๋‚Œ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ์—ˆ๋‹ค. ์ง€๊ธˆ์€ "๊ฐœ๋ฐœ์ž"๊ฐ€ ๋˜๋Š”๊ฒŒ ๋ชฉํ‘œ๋ผ ์—ฌ์œ ๊ฐ€ ์—†์ง€๋งŒ, ๊ผญ ๋‚˜๋ˆ„๊ณ  ์‚ด๊ณ  ๐Ÿ˜ ์ฆ๊ฒ๊ฒŒ ์‚ด๊ณ  ๐Ÿ˜ ์ทจ๋ฏธ๋กœ ๋””์ €ํŠธ ์นดํŽ˜๋ฅผ ์šด์˜ํ•˜๋Š” ๐Ÿ˜ ๊ฐœ๋ฐœ์ž๋กœ ์„ฑ์žฅํ•˜๊ณ  ์‹ถ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€