[๋ฉ‹์Ÿ์ด ์‚ฌ์ž์ฒ˜๋Ÿผ] ๋ฉ‹์‚ฌ ํ”„๋ก ํŠธ์—”๋“œ ์Šค์ฟจ 5๊ธฐ 8์ฃผ์ฐจ 4LS ํšŒ๊ณ (์ •๊ทœํ‘œํ˜„์‹/์ด๋ฒคํŠธ ์ „ํŒŒ/๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ)

2023. 4. 26. 11:38ใ†๋ฉ‹์Ÿ์ด์‚ฌ์ž์ฒ˜๋Ÿผ

๋ฐ˜์‘ํ˜•

[๋ฉ‹์Ÿ์ด ์‚ฌ์ž์ฒ˜๋Ÿผ] ๋ฉ‹์‚ฌ ํ”„๋ก ํŠธ์—”๋“œ ์Šค์ฟจ 5๊ธฐ 8์ฃผ์ฐจ 4LS ํšŒ๊ณ 

 

 โค๏ธ‍๐Ÿ”ฅ Liked
  • ์ •๊ทœํ‘œํ˜„์‹ ์ง„์งœ... ์•„๋“ํ–ˆ๋Š”๋ฐ, ๋‹ค ์™ธ์›Œ์„œ ๋Šฅ์ˆ™ํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์Šต๋“ํ•˜๊ธฐ๋ณด๋‹ค๋Š” ๊ธฐ๋ณธ ๋ฌธ๋ฒ•๋งŒ ์ˆ™์ง€ํ•˜๊ณ  ํŒจํ„ด์€ ๊ทธ๋•Œ๊ทธ๋•Œ ๋ณด๋ฉด์„œ ๊ตฌํ˜„ํ•˜๋ฉด ๋  ๊ฒƒ ๊ฐ™๋‹ค!
  • ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์— ๋Œ€ํ•ด ๊ฐ์ฒด๋ฆฌํ„ฐ๋Ÿด ๋ฌธ๋ฒ•, ํ”„๋กœํ† ํƒ€์ž… ๋ฌธ๋ฒ•, ํด๋ž˜์Šค ๋ฌธ๋ฒ•์„ ๋น„๊ตํ•ด์„œ ์ž‘์„ฑํ•ด ๋ณด๋ฉด์„œ ์ฐจ์ด์ ์„ ๋น„๊ตํ•ด ๋ณผ ์ˆ˜ ์žˆ์–ด์„œ ์ข‹์•˜๋‹ค. ์ฃผ๋ง์— ํ•  ์ผ์€ ๋„ˆ๋ฌด ๋งŽ๊ณ  ๊ณ„ํš๋„ ๋ฐ€๋ ธ๋Š”๋ฐ ํ˜ผ์ž ํ”„๋กœํ† ํƒ€์ž…์— ๊ฝ‚ํ˜€์„œ ๊ณต๋ถ€ํ•˜๋‹ค ๋ณด๋‹ˆ ๋ช‡ ์‹œ๊ฐ„์ด ํ›„๋ฃจ๋ฃฉ... ๊ทธ๋ž˜๋„ ์‹œ๊ฐ„์ด ํ•˜๋‚˜๋„ ์•„๊น์ง€ ์•Š์•˜๋‹ค. ํ”„๋กœํ† ํƒ€์ž… ๊ณต๋ถ€ํ•˜๋‹ค๊ฐ€ closer ํŒจํ„ด์„ ์ดํ•ดํ•ด๋ฒ„๋ฆผ... ๐Ÿ‘
  • JS ์ดˆ๋ณด์ž ์Šคํ„ฐ๋””์— ๊ฐ€์ž…ํ–ˆ๋‹ค. ๋น„์ „๊ณต์ž๋„ ์žˆ๊ณ  ๋‚˜์ฒ˜๋Ÿผ ๋‹ค๋ฅธ ์—…๋ฌด๋ฅผ ํ•˜๋‹ค๊ฐ€ ๊ฐœ๋ฐœ์ž๋กœ ์ „ํ–ฅํ•˜์‹  ๋ถ„๋„ ์žˆ๊ณ , ์ˆ™๋ จ์ž๊ฐ€ ์—†์œผ๋ฉด ํšจ์œจ์ด ๋–จ์–ด์งˆ ์ˆ˜ ์žˆ๋Š”๋ฐ ๋ชจ๋‘ ์ ๊ทน์ ์œผ๋กœ ์Šคํ„ฐ๋””์— ์ฐธ์—ฌํ•˜๋ฉด์„œ JS ์ง€์‹์„ ๊ณต์œ ํ•˜๊ณ  ๊ณ„์…”์„œ ๋•๋ถ„์— ๋‚˜๋„ ์ข‹์€ ์˜ํ–ฅ์„ ๋งŽ์ด ๋ฐ›๋Š”๋‹ค. ์ฒ˜์Œ์œผ๋กœ git fork๋„ ํ•ด๋ณด๊ณ ใ…Žใ…Ž ๊ฐ™์ด ๋ณ‘์•„๋ฆฌ์—์„œ ๋‹ญ ๋˜๋ณด์ž๊ณ !!๐Ÿ”ฅ
  • ์‹œ๊ฐํ™”๋„๊ตฌ D3, ChartJS, Canvas ์ฐ๋จน ๊ฐ•์˜ ใ…Žใ…Ž ํ•œ ๋ฒˆ์˜ ๊ฒฝํ—˜์ด ๋‚˜์ค‘์— ํฐ ๋„์›€์ด ๋  ์ˆ˜๋„ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์œ ์ตํ–ˆ๋‹ค.
  • ์ตœ์ ํ™” ๊ฐ•์˜๋Š” ๋””ํ…Œ์ผํ•œ ์ง€์‹์€ ๋” ๋ณด์™„ํ•ด์•ผ๊ฒ ์ง€๋งŒ ๊ฐ€์ด๋“œ๊ฐ€ ์ƒ๊ธด ๊ฒƒ ๊ฐ™์•„์„œ ์ข‹์•˜๋‹ค!
    ์†Œํ”„ํŠธ์›จ์–ด ํ”„๋กœ๊ทธ๋ž˜๋ฐ์€ ์ผ๋‹จ ๋™์ž‘ํ•˜๊ฒŒ ๋งŒ๋“ค๊ณ (Make it work), ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ๋™์ž‘ํ•˜๊ฒŒ ๋งŒ๋“ค๊ณ (Make it right), ๋น ๋ฅด๊ฒŒ ๋™์ž‘ํ•˜๊ฒŒ ๋งŒ๋“ค๊ธฐ(Make it fast).

 

 

 

 ๐Ÿ’ฃ Lacked
  • JavaScript์—์„œ DOM ์ œ์–ดํ•˜๋Š” ๊ฒŒ ์ •๋ง ์ค‘์š”ํ•œ ์Šคํ‚ฌ์ธ ๊ฒƒ ๊ฐ™์€๋ฐ, event propagation์ด ์–ด๋ ค์›Œ์„œ querySelector์„ ๋‚จ๋ฐœํ•˜๋ฉด์„œ ์ฝ”๋”ฉ์„ ํ•˜๊ฒŒ ๋œ๋‹ค. ๋” ๋Šฅ์ˆ™ํ•ด์ง€๊ณ  ์‹ถ๋‹ค.
  • ์›น๋ธŒ๋ผ์šฐ์ €์˜ ๊ตฌ์กฐ๋‚˜, ๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ํ”„๋กœ์„ธ์Šค์— ๋Œ€ํ•œ ์ง€์‹ ๋ณด์™„์ด ํ•„์š”ํ•  ๊ฒƒ ๊ฐ™๋‹ค. ์ˆ˜์—…์‹œ๊ฐ„์— ๋“ค์–ด๋„ ๋ชจ๋ฅด๋Š” ์šฉ์–ด๊ฐ€ ๋งŽ์•„์„œ ์ž˜ ์ดํ•ด๊ฐ€ ๊ฐ€์ง€ ์•Š๋Š”๋‹ค.

 

 

 

 โœ๏ธ Learned
  • ์ •๊ทœํ‘œํ˜„์‹์—์„œ .replace(/์ •๊ทœํ‘œํ˜„์‹/, '๋Œ€์ฒด๋ฌธ์ž์—ด') ๋Š” ๋งค์นญ๋˜๋Š” ํ•ญ๋ชฉ์„ ๋Œ€์ฒด๋ฌธ์ž์—ด๋กœ ๋ฐ˜ํ™˜.
    g๋Š” global๋กœ ๋ชจ๋“  ๋ฌธ์ž์—ด์—์„œ, m์€ multiline์œผ๋กœ ์—ฌ๋Ÿฌ ๋ผ์ธ์—์„œ ํŒจํ„ด์„ ์ฐพ๊ฒ ๋‹ค๋Š” ์˜ต์…˜.
  • ๋กœ์ปฌ์Šคํ† ๋ฆฌ์ง€์—์„œ object ์ €์žฅ์‹œ JSON.stringify(), ํ˜ธ์ถœ์‹œ JSON.parse() JSON ๋ฉ”์†Œ๋“œ ์‚ฌ์šฉ.
  • ์ƒˆ๋กœ๊ณ ์นจ์„ ๋ฐฉ์ง€ํ•˜๋Š” event.preventDefault()
  • event propagation๋ฅผ ๋ง‰๊ณ  ์‹ถ๋‹ค๋ฉด event.stopPropagation() ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€.
  • JavaScript์—์„œ๋Š” ๊ฐ์ฒด์˜ ์ƒ์†์„ ์œ„ํ•ด prototype์„ ์‚ฌ์šฉ.
    ์ด์ฒ˜๋Ÿผ ์ž๊ธฐ ์ž์‹ ์—๊ฒŒ ์กด์žฌํ•˜์ง€ ์†์„ฑ์„ ํ”„๋กœํ† ํƒ€์ž…์„ ํ†ตํ•ด ์ถ”์ ํ•˜๋Š” ๊ณผ์ •์„ ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ด๋‹์ด๋ผ๊ณ  ํ•œ๋‹ค.
  • ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋Š” new ์—ฐ์‚ฐ์ž๋ฅผ ํ†ตํ•ด ๋ฐ˜ํ™˜๋˜์–ด ์ƒ์„ฑ๋œ ๊ฐ์ฒด์˜ ๋ถ€๋ชจ ์—ญํ• ์„ ํ•˜๋Š” ๊ฐ์ฒด prototype์ด ๋˜๋ฉฐ
  • ๊ณตํ†ต์ ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์†์„ฑ์„ ์ถ”๊ฐ€ํ•ด์„œ ์ž์‹์—ญํ• ์„ ํ•˜๋Š” ๊ฐ์ฒด instance ์— ์ƒ์†ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋Š” ์•”๋ฌต์ ์œผ๋กœ ๋Œ€๋ฌธ์ž๋กœ ์‹œ์ž‘ํ•˜๋Š” ์ด๋ฆ„์„ ๊ฐ€์ง„๋‹ค.
  • ๋Œ€ํ‘œ์ ์ธ ์ƒ์„ฑ์ž ํ•จ์ˆ˜์ธ Class๋Š” class + ์ด๋ฆ„ + { constructor ... } ๋กœ ๊ตฌ์„ฑ.
  • Class์˜ ์ƒ์†์€ extends ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉ.
  • ๋ถ€๋ชจ class์—๊ฒŒ ์ƒ์†์„ ๋ฐ›๋Š” ์ž์‹ class๋Š” ์„œ๋ธŒ ํด๋ž˜์Šค(subclass) ํ˜น์€ ํŒŒ์ƒ ํด๋ž˜์Šค(derived class) ๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค.
  • ํด๋ž˜์Šค์˜ ์ƒ์†์€ extends ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉ.
  • super() ํ•จ์ˆ˜๋Š” ๋ถ€๋ชจ ํด๋ž˜์Šค์˜ constructor ์†์„ฑ์„ ์ƒ์†์‹œํ‚ค๋Š” ํŠน์ˆ˜ํ•œ ๋ฉ”์†Œ๋“œ.

 

 

 

 ๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป Longed For
  • 10km ๋Ÿฌ๋‹.
  • ๊ฒŒ์ž„ ํŒ€ํ”„๋กœ์ ํŠธ ๋ ˆํผ๋Ÿฐ์Šค ์กฐ์‚ฌ.
  • ๋ชจ๋˜ JavaScript ํŠœํ† ๋ฆฌ์–ผ, ์ฝ”์–ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ 3๋‹จ๋ฝ ๋‚ด์šฉ ์ˆ™์ง€.
  • ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค 0๋‹จ๊ณ„ ๋ฌธ์ œ ๋งค์ผ 3๊ฐœ์”ฉ ํ’€๊ธฐ.
  • DOM๊ณผ LocalStorage๋ฅผ ํ™œ์šฉํ•ด์„œ ๋ฉ”๋ชจ์žฅ ๋งŒ๋“ค๊ธฐ.

 

 

 

๋ฐ˜์‘ํ˜•