๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐Ÿ’๊ณต๋ถ€72

ํ”„๋ก ํŠธ์—”๋“œ์ธ ๋‚ด๊ฐ€ ์ƒˆ๋ฒฝ2์‹œ์— ์ถœ๊ทผํ•ด์„œ ์„œ๋ฒ„๊ต์ฒด๋ฅผ? ๋„ค ๊ทธ๊ฒŒ ์‹ค์ œ๋กœ ์ผ์–ด๋‚ฌ์Šต๋‹ˆ๋‹ค. โœ… ์šฐ๋ฆฌ๋Š” ์™œ ์„œ๋ฒ„๊ต์ฒด๋ฅผ ํ•˜๊ฒŒ ๋˜์—ˆ๋Š”๊ฐ€? ํ˜„์žฌ ์žฌ์ง์ค‘์ธ ํšŒ์‚ฌ๋Š” ํŠธ๋ž˜ํ”ฝ์ด ์ผ์ •ํ•˜์ง€ ์•Š๋‹ค. ํŠน์ • ์ด๋ฒคํŠธ๊ฐ€ ์žˆ์„ ๋•Œ์—๋งŒ ํ™• ๋ชฐ๋ฆฌ๊ณ , ๊ทธ ์™ธ ์‹œ๊ฐ„์—๋Š” ์ž ์ž ํ•œ ํŽธ์ด๋‹ค. 2022๋…„ ์ดˆ๊นŒ์ง€๋Š” ๊ณ ์ •์ธ์Šคํ„ด์Šค๋ฅผ ์‚ฌ์šฉํ•˜๊ณ ์žˆ์—ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‹ค๊ฐ€ ์ด๋ ‡๊ฒŒ ์‚ฌ๋žŒ์ด ๋ชฐ๋ฆฌ๊ฒŒ ๋˜๋ฉด... ์™„์ „ ์ฃฝ์–ด๋ฒ„๋ ค์„œ ์•„~๋ฌด๊ฒƒ๋„ ๋ชปํ•˜๋Š” ๋Œ€ํ˜•์ด์Šˆ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค. ๊ทธ๋ž˜์„œ ์˜คํ† ์Šค์ผ€์ผ๋ง์ด ๋˜๋Š” serverless v1์œผ๋กœ ๋ณ€๊ฒฝ์„ ํ–ˆ์—ˆ๋‹ค. (๊ทธ ๋•Œ์—๋„ ์ ๊ฒ€์ค‘ ํ™”๋ฉด์„ ๋งŒ๋“ค์—ˆ์—ˆ์ง€) ๊ทธ๋Ÿฐ๋ฐ๋„! ์ด๋ฒคํŠธ๊ฐ€ ์žˆ์„ ๋•Œ RDS์˜ ์ปค๋„ฅ์…˜ํ’€์ด ๊ฝ‰์ฐจ๊ณ , CPU๊ฐ€ ํ„ฐ์ง„๋‹ค. serverless v2๋Š” RDS Proxy๋„ ์ ์šฉ ๊ฐ€๋Šฅํ•˜๊ณ , Reader/Writer๋„ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์šฐ๋ฆฌ๋Š” v2๋กœ ๋ณ€๊ฒฝ์„ ํ•˜๊ธฐ๋กœ ๊ฒฐ์‹ฌํ•˜๊ฒŒ ๋œ๋‹ค... โœ… ์–ด๋–ป๊ฒŒ ๋ณ€๊ฒฝ์„ ํ–ˆ๋Š”๊ฐ€? (0.. 2022. 10. 1.
[JavaScript] JS์˜ ๋ฐ˜๋ณต๋ฌธ ๊ทธ๋™์•ˆ ๋ฐฐ์šด ๊ฒƒ๋“ค์ด ์žˆ์—ˆ๋‹ค... ๊ทธ๋ƒฅ for๋ฌธ์„ ์จ๋„ ๋˜๋Š” ์ƒํ™ฉ์— ๊ตณ์ด๊ตณ์ด map์„ ์‚ฌ์šฉํ•œ ๋‚˜๋Š” ๋ฐ”๋ณด๋‹ค ๊ทธ๋ž˜์„œ ์˜ˆ์ „์— ์ •๋ฆฌํ•ด๋‘” ๋ฐ˜๋ณต๋ฌธ์„ ๊ฐ€์ ธ์™”๋‹ค... ๐Ÿ˜Ž ๋‘์ค„ ์š”์•ฝ ๊ฐ์ฒด ์ˆœํšŒ ํ•  ๋•Œ → Object.keys, Object.values, Object.entries ๋ฐฐ์—ด ์ˆœํšŒ ํ•  ๋•Œ → forEach, map, filter, reduce ๋“ฑ๋“ฑ โœ” for for (let i = 0; i < 10; i++) { console.log(i); } ๋„ˆ๋„์•Œ๊ณ  ๋‚˜๋„์•Œ๊ณ  ๋ชจ๋‘๊ฐ€ ์•„๋Š” ๊ทธ for๋ฌธ โœ” for in const obj = { name: '๊น€์ ํ”„', age: '4' } for (const key in obj) { console.log(`${key} : ${obj[key]}`); } // name : ๊น€์ ํ”„ // .. 2021. 11. 21.
[React] ๋ฆฌ์•กํŠธ์—์„œ ์™œ useState๋ฅผ ์“ฐ๋ผ๊ณ  ํ• ๊นŒ ์ฝ”๋“œ๋ฆฌ๋ทฐ๋ฅผ ๋ฐ›์•˜๋Š”๋ฐ, ์—„์ฒญ ์ƒ์„ธํ•ด์„œ ๋†€๋ž๋‹ค! ์—ญ์‹œ ํ•ด๋ด์•ผ ์•„๋Š” ๊ฒƒ๋“ค์ด ์•„์ฃผ ๋งŽ๋‹ค๋Š” ๊ฒƒ์„ ๊นจ๋‹ซ๋Š” ์š”์ฆ˜์ด๋‹ค๐Ÿ˜Ž ๐Ÿค” ๊ทธ๋ƒฅ ๋ณ€์ˆ˜ ๋ง๊ณ  state๋ฅผ ์“ฐ๋Š” ๊ฐ€์žฅ ํฐ ์ด์œ  state๊ฐ€ ๋ณ€๊ฒฝ ๋  ๋•Œ ๊ด€๋ จ๋œ DOM์„ ๋‹ค์‹œ ๋ Œ๋”๋ง ๋˜๊ฒŒ ํ•ด์•ผ ํ•œ๋‹ค๋ฉด, state๋ฅผ ์จ์•ผ ํ•œ๋‹ค! → SPA๋ฅผ ์‚ฌ์šฉํ•˜๊ณ ์‹ถ์œผ๋ฉด state๋ฅผ ์จ์•ผํ•œ๋‹ค ์™œ๋ƒํ•˜๋ฉด ๋ฆฌ์•กํŠธ๋Š” state์— ์ˆ˜์ •์ด ์ผ์–ด๋‚˜๋ฉด state๊ฐ€ ํฌํ•จ๋œ DOM์„ ์žฌ๋ Œ๋”๋ง ํ•ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์ธ๋ฐ.... ๊ทธ๊ฑธ ์•Œ๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋ฆฌ์•กํŠธ์˜ Life cycle์„ ์•Œ์•„์•ผ ํ•œ๋‹ค๐Ÿคฏ #๊ฐ€๋ณด์ž๊ณ  ๐Ÿค” setState๋ง๊ณ  state๋ฅผ ์ง์ ‘ ๋ณ€๊ฒฝํ•ด์ฃผ๋ฉด ์™œ ํ™”๋ฉด ๊ฐฑ์‹ ์ด ์•ˆ๋ ๊นŒ? ๋ฆฌ์•กํŠธ์˜ ์ปดํฌ๋„ŒํŠธ๋Š” Mount ์ƒํƒœ์—์„œ ํ•œ๋ฒˆ render() ๋ฅผ ์‹คํ–‰ํ•˜๊ณ , ํ›„์—๋Š” Update ์ƒํƒœ์— ์ง„์ž…ํ•˜์—ฌ shouldComponentUpdate.. 2021. 10. 26.
[JavaScript] ๋””๋ฐ”์šด์Šค(Debounce) vs ์Šค๋กœํ‹€(Throttle) โœ… ๊ณตํ†ต์  ์งง์€ ์‹œ๊ฐ„์— ์—ฌ๋Ÿฌ๋ฒˆ ๋ฐœ์ƒํ•˜๋Š” ์ด๋ฒคํŠธ๋ฅผ ๊ทธ๋ฃนํ™”ํ•ด์„œ, ๊ณผ๋„ํ•œ ์ด๋ฒคํŠธ ํ˜ธ์ถœ์„ ๋ฐฉ์ง€ ์—„์ฒญ๋‚˜๊ฒŒ ๋น ๋ฅธ์†๋„๋กœ ํด๋ฆญ์„ ์—ฌ๋Ÿฌ๋ฒˆ ํ•˜๊ธฐ ๊ฒ€์ƒ‰์ฐฝ์— ํ‚ค๋ณด๋“œ๋กœ ์ž…๋ ฅํ•˜๊ธฐ ์Šคํฌ๋กค๋ฐ”๋ฅผ ์œ„์•„๋ž˜๋กœ ์ญ‰์ญ‰ ์›€์ง์ด๊ธฐ ์ฐฝ์„ ๋ฆฌ์‚ฌ์ด์ง•ํ•˜๊ธฐ ๋“ฑ๋“ฑ... โœ… ๋””๋ฐ”์šด์Šค (Debounce) ์š”์ฒญ์ด ๋“ค์–ด์˜ค๋ฉด ์ผ์ •์‹œ๊ฐ„์„ ๊ธฐ๋‹ค๋ฆฐ ํ›„ ์š”์ฒญ์„ ์ˆ˜ํ–‰ํ•˜๋Š”๋ฐ, ๊ธฐ๋‹ค๋ฆฌ๋Š” ๋™์•ˆ ๊ฐ™์€ ์š”์ฒญ์ด ์ถ”๊ฐ€๋กœ ๋“ค์–ด์˜ค๋ฉด ์ด์ „ ์š”์ฒญ์€ ์ทจ์†Œ๋จ ์—ฐ์ด์–ด์„œ ํ˜ธ์ถœ๋˜๋Š” ํ•จ์ˆ˜ ์ค‘ ๊ฐ€์žฅ ๋งˆ์ง€๋ง‰(๋˜๋Š” ๊ฐ€์žฅ ์ฒ˜์Œ)๋งŒ ํ˜ธ์ถœ ๋˜๋„๋ก ํ•จ ์‰ผ์—†์ด ๊ณ„~~~์† ํด๋ฆญํ•˜๋ฉด ํด๋ฆญ์ด ๋ฉˆ์ถœ๋•Œ๊นŒ์ง€ ๊ธฐ๋‹ค๋ ธ๋‹ค๊ฐ€ ๋ฉˆ์ถ”๋ฉด ์‹คํ–‰ํ•จ ๊ทธ๋ž˜์„œ ๋งŒ์•ฝ ๋ฌดํ•œ ์ž…๋ ฅ์„ ํ•˜๋ฉด ๋ฌดํ•œ ๊ธฐ๋‹ค๋ฆผ์„ ํ•จ toggle ๋ฒ„ํŠผ ์ด๋ฒคํŠธ ๋“ฑ์— ์ฃผ๋ฉด ์ข‹์Œ function debounce(callback, limit = 100) { let timeout return.. 2021. 10. 12.
[JavaScript] var๊ณผ ํ˜ธ์ด์ŠคํŒ… โœ… ํ˜ธ์ด์ŠคํŒ…์ด๋ž€? catName("ํด๋กœ์ด"); function catName(name) { console.log("์ œ ๊ณ ์–‘์ด์˜ ์ด๋ฆ„์€ " + name + "์ž…๋‹ˆ๋‹ค"); } /* ๊ฒฐ๊ณผ: "์ œ ๊ณ ์–‘์ด์˜ ์ด๋ฆ„์€ ํด๋กœ์ด์ž…๋‹ˆ๋‹ค" */ ํ•จ์ˆ˜ ์•ˆ์— ์žˆ๋Š” ์„ ์–ธ๋“ค์„ ๋ชจ๋‘ ๋Œ์–ด์˜ฌ๋ ค์„œ, ํ•ด๋‹น ํ•จ์ˆ˜ ์œ ํšจ ๋ฒ”์œ„์˜ ์ตœ์ƒ๋‹จ์— ์„ ์–ธํ•˜๋Š” ๊ฒƒ ํ•จ์ˆ˜ ์„ ์–ธ๋งŒ! ๋Œ์–ด์˜ฌ๋ ค์ง (ํ• ๋‹น์€โŒ) //๋ณ€์ˆ˜์˜ ํ˜ธ์ด์ŠคํŒ… ์˜ˆ์‹œ console.log(name); // undefined var name = "๊น€์ ํ”„"; //------------------------------- var name; // name๋ณ€์ˆ˜๊ฐ€ ํ˜ธ์ด์ŠคํŒ… ๋˜์–ด ์ƒ๋‹จ์œผ๋กœ ์ด๋™ console.log(name); name = "๊น€์ ํ”„"; //ํ•จ์ˆ˜์˜ ํ˜ธ์ด์ŠคํŒ… ์˜ˆ์‹œ foo(); foo2(); funct.. 2021. 10. 11.