๊ด€๋ฆฌ ๋ฉ”๋‰ด

๋ชฉ๋ก2021/12 (29)

DATA101

[JavaScript] var vs let ์ฐจ์ด์  ์„ค๋ช…

๐Ÿ’ก ํ•™์Šต ๋ชฉํ‘œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ var ํƒ€์ž…๊ณผ let ํƒ€์ž… ๊ฐ„์˜ ์ฐจ์ด์ ์„ ์ดํ•ดํ•œ๋‹ค. ์ฐจ์ด์  1. ๋ณ€์ˆ˜ ์žฌ์„ ์–ธ ๊ฐ€๋Šฅ์—ฌ๋ถ€ ์ฒซ ๋ฒˆ์งธ ์ฐจ์ด์ ์€ ๋ณ€์ˆ˜ ์žฌ์„ ์–ธ ๊ฐ€๋Šฅ์—ฌ๋ถ€์ž…๋‹ˆ๋‹ค. var ํƒ€์ž…์€ ๋ณ€์ˆ˜ ์„ ์–ธ ์ดํ›„์— ๊ฐ™์€ ๋ณ€์ˆ˜๋ช…์œผ๋กœ ์žฌ์„ ์–ธ์ด ๊ฐ€๋Šฅํ•˜์ง€๋งŒ, let ํƒ€์ž…์€ ๋ณ€์ˆ˜ ์„ ์–ธ ์ดํ›„์— ๊ฐ™์€ ๋ณ€์ˆ˜๋ช…์œผ๋กœ ์žฌ์„ ์–ธ์ด ๋ถˆ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. var show = 10; console.log(typeof(show)); var show = "์ฝ”๋ผ๋ฆฌ"; console.log(typeof(show)); let same = 30; same = "๋…์ˆ˜๋ฆฌ"; ์ฐจ์ด์  2. ์ง€์—ญ์„ฑ ์œ ์ง€์—ฌ๋ถ€ ๋‘ ๋ฒˆ์งธ ์ฐจ์ด์ ์€ ์ง€์—ญ์„ฑ ์œ ์ง€์—ฌ๋ถ€์ž…๋‹ˆ๋‹ค. var ํƒ€์ž…์€ ์ง€์—ญ์„ฑ์„ ์œ ์ง€ํ•˜์ง€ ์•Š์•„ ๋ชจ๋“  ๋ณ€์ˆ˜๋ฅผ ์ „์—ญ ๋ณ€์ˆ˜๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐ˜๋ฉด, let ํƒ€์ž…์€ ์ง€์—ญ์„ฑ์„ ์œ ์ง€ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ง€์—ญ๋ณ€..

SW ๊ฐœ๋ฐœ/Vanilla JS 2021. 12. 1. 10:09
[VS Code] ์œ ์šฉํ•œ ๋‹จ์ถ•ํ‚ค ๊ณต์œ (๋ธŒ๋ ˆ์ดํฌ ํฌ์ธํŠธ, ์ž๋™ ๋“ค์—ฌ์“ฐ๊ธฐ, ๋””๋ฒ„๊น…)

VS Code์—์„œ ์ž๋™ ๋“ค์—ฌ์“ฐ๊ธฐ, ๋””๋ฒ„๊น…, ๋ธŒ๋ ˆ์ดํฌํฌ์ธํŠธ๋ฅผ ์ฐ๋Š” ๋‹จ์ถ•ํ‚ค๋ฅผ ๊ณต์œ ํ•ฉ๋‹ˆ๋‹ค. ์•„๋ž˜ ๋‹จ์ถ•ํ‚ค๋ฅผ ์ž˜ ์ˆ™์ง€ํ•˜์‹œ๋ฉด ํ”„๋กœ๊ทธ๋žจ์„ ์œ ์ง€๋ณด์ˆ˜ํ•˜๋Š” ๋ฐ ๋งค์šฐ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋‹จ์ถ•ํ‚ค ์„ค๋ช… F5 ๋””๋ฒ„๊น… F9 (์ปค์„œ์žˆ๋Š” ๋ผ์ธ) ๋ธŒ๋ ˆ์ดํฌ ํฌ์ธํŠธ ์ฐ๊ธฐ F10 ํ•œ์ค„์”ฉ(Next) ๋””๋ฒ„๊น… Shift + F5 ๋””๋ฒ„๊น… ์ข…๋ฃŒ Ctrl + K + F ์ž๋™ ๋“ค์—ฌ์“ฐ๊ธฐ ํฌ์ŠคํŒ… ๋‚ด์šฉ์— ์˜ค๋ฅ˜๊ฐ€ ์žˆ๋‹ค๋ฉด ์•„๋ž˜์— ๋Œ“๊ธ€ ๋‚จ๊ฒจ์ฃผ์„ธ์š”! ๊ทธ๋Ÿผ ์˜ค๋Š˜๋„ ์ฆ๊ฒ๊ณ  ๊ฑด๊ฐ•ํ•œ ํ•˜๋ฃจ ๋ณด๋‚ด์‹œ๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค. ๊ณ ๋ง™์Šต๋‹ˆ๋‹ค :-)

SW ๊ฐœ๋ฐœ/etc 2021. 12. 1. 09:34
[์—๋Ÿฌ ํ•ด๊ฒฐ] node : 'node' ์šฉ์–ด๊ฐ€ cmdlet, ํ•จ์ˆ˜, ์Šค ํฌ๋ฆฝํŠธ ํŒŒ์ผ ๋˜๋Š” ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” ํ”„๋กœ ๊ทธ๋žจ ์ด๋ฆ„์œผ๋กœ ์ธ์‹๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๐Ÿ‘จ‍๐Ÿ’ป ์—๋Ÿฌ ๋ฉ”์‹œ์ง€ node : 'node' ์šฉ์–ด๊ฐ€ cmdlet, ํ•จ์ˆ˜, ์Šค ํฌ๋ฆฝํŠธ ํŒŒ์ผ ๋˜๋Š” ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” ํ”„๋กœ ๊ทธ๋žจ ์ด๋ฆ„์œผ๋กœ ์ธ์‹๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๐Ÿ‘€ ์—๋Ÿฌ ์ƒํ™ฉ VS Code ํ„ฐ๋ฏธ๋„์—์„œ node ๋ช…๋ น์–ด๋ฅผ ํ™œ์šฉํ•˜์—ฌ JavaScript ํŒŒ์ผ์„ ์‹คํ–‰ํ–ˆ๋”๋‹ˆ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์‹ค JavaScript์— ๊ตญํ•œ๋œ ๋ฌธ์ œ๋Š” ์•„๋‹™๋‹ˆ๋‹ค. ๐Ÿ‘ป ์›์ธ ์›์ธ์€ ์•„๋ž˜์™€ ๊ฐ™์ด ๊ธฐ๋ณธ ํ„ฐ๋ฏธ๋„์ด powershell๋กœ ์„ค์ •๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๐Ÿ’ก ํ•ด๊ฒฐ๋ฐฉ๋ฒ• Step 1 VS Code ๊ธฐ๋ณธ ํ„ฐ๋ฏธ๋„์„ ๋ณ€๊ฒฝํ•ด ์ฃผ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. VS Code ์ฐฝ์—์„œ ํ‚ค๋ณด๋“œ Ctrl + Shift + p๋ฅผ ๋ˆŒ๋Ÿฌ์ค๋‹ˆ๋‹ค. Step 2 ์•„๋ž˜์™€ ๊ฐ™์€ ์ฐฝ์— Select Default Profile์„ ์ž…๋ ฅํ•˜๊ณ  ์—”ํ„ฐ ํ‚ค๋ฅผ ๋ˆŒ๋Ÿฌ์ค๋‹ˆ๋‹ค. Step 3 ์•„๋ž˜์™€ ๊ฐ™์ด Command..

SW ๊ฐœ๋ฐœ/Vanilla JS 2021. 12. 1. 09:02
[JavaScript] ์ƒ์„ฑ์ž ํ•จ์ˆ˜ ํ™œ์šฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž!

๐Ÿ’ก๋ชฉํ‘œ JavaScript์—์„œ ์ƒ์„ฑ์ž ํ•จ์ˆ˜์˜ ํ™œ์šฉ๋ฒ•์— ๋Œ€ํ•ด ์ดํ•ดํ•œ๋‹ค. ์ƒ์„ฑ์ž ํ•จ์ˆ˜ ์ •์˜ Java, Python ๋“ฑ ์—ฌ๋Ÿฌ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์—์„œ ์‚ฌ์šฉํ•˜๋Š” ํด๋ž˜์Šค(Class)๊ฐ€ JavaScript์—์„œ ๊ณง ์ƒ์„ฑ์ž(Constructor)์ž…๋‹ˆ๋‹ค. JavaScript์—์„œ๋Š” ํ•จ์ˆ˜๋ช…์˜ ์ฒซ ๊ธ€์ž๋ฅผ ๋Œ€๋ฌธ์ž๋กœ ํ‘œ์‹œํ•˜์—ฌ ์ƒ์„ฑ์ž๋ฅผ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์ธ ํด๋ž˜์Šค์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋Š” ํ•„๋“œ, ํ•จ์ˆ˜๋ฅผ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ์‹œ ์ฝ”๋“œ ์•„๋ž˜ ์˜ˆ์‹œ ์ฝ”๋“œ์™€ ํ•จ๊ป˜ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. // ํ•จ์ˆ˜๋ช…์˜ ์ฒซ ๊ธ€์ž๊ฐ€ ๋Œ€๋ฌธ์ž์ธ ๊ฒฝ์šฐ = ์ƒ์„ฑ์ž ํ•จ์ˆ˜ function ConstructorExample(){ // ----ํ•„๋“œ ์‹œ์ž‘---- this.name = 'Tony'; this.age = 20; // ๋ฉค๋ฒ„ ๋ณ€์ˆ˜(ํ•„๋“œ) // ----ํ•„๋“œ ๋---- // ----๋ฉค๋ฒ„ ..

SW ๊ฐœ๋ฐœ/Vanilla JS 2021. 12. 1. 08:27