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

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

๋ฐ˜์‘ํ˜•

 

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

 โค๏ธ‍๐Ÿ”ฅ Liked
  • JavaScript ์˜ˆ์Šตํ–ˆ๋˜ ๊ฒŒ ์‚ด์ง ๋น›์„ ๋ฐœํ–ˆ๋˜ ํ•œ ์ฃผ. ๊ทธ๋™์•ˆ ์˜ˆ์Šตํ–ˆ๋˜ ๊ฑฐ 4์ผ ๋งŒ์— ์ง„๋„ ๋‹ค ๋‚˜๊ฐ„ ๊ฑฐ ์‹คํ™”์ธ๊ฐ€... ๋งค์ผ ๋งŒ์กฑ๋„๋ฅผ ์ฒดํฌํ•˜๋Š”๋ฐ ์ด๋ฒˆ ์ฃผ๋Š” 100%๊ฐ€ ์—†๋‹ค...๐Ÿซ  ๊ทธ๋งŒํผ ์‰ฝ์ง€ ์•Š์•˜๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ. ๊ทธ๋‚˜๋งˆ ์˜ˆ์Šตํ•ด์„œ ๋‹คํ–‰์ด์—ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค. ์ฐจ๊ทผ์ฐจ๊ทผ ์ •ํ™•ํžˆ ์ด ๊ธฐ์ˆ ์„ ์Šต๋“ํ•˜๋Š” ๋ฐ ์ง‘์ค‘ํ•˜์ž.
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋„ˆ๋ฌด ํ—ท๊ฐˆ๋ฆฌ๋Š” ๋ฐฐ์—ด ๋ฉ”์†Œ๋“œ๋“ค... ์•„์ง ์™„๋ฒฝํ•˜๊ฒŒ ์†์— ์ต์€ ๊ฑด ์•„๋‹ˆ์ง€๋งŒ ์ž…๋ฌธ์ž ์ˆ˜์ค€์— ๋งž๊ฒŒ ๋‹ค ํ’€์–ด์„œ ์„ค๋ช…ํ•ด์ฃผ์…”์„œ ํฐ ๋„์›€์ด ๋๋‹ค. ๋Šฅ์ˆ™ํ•˜๊ฒŒ ํ™œ์šฉํ•˜๋Š” ๋‚ ์ด ์˜ค๊ธธ ๋ฐ”๋ผ๋ฉด์„œ ์—ด์‹ฌํžˆ ๋ณต์Šตํ•˜์ž.
  • ํ˜ธ์ค€ ๋‹˜์ด ๋‹ค ์ดํ•ดํ•˜๋ ค๊ณ  ํ•˜์ง€ ๋ง๊ณ  ์™ธ์šธ ๊ฑด ์™ธ์›Œ๋ผ! ํ•˜๊ณ  ์•”๊ธฐํ•  ๊ฒƒ๋“ค์„ ๋”ฐ๋กœ ์•Œ๋ ค์ฃผ์…”์„œ ์ข‹์•˜๋‹ค. ์ดํ•ดํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ๋„ ์žˆ๊ณ  ์•”๊ธฐํ•  ๊ฒƒ๋„ ์žˆ์„ ํ…๋ฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ž…๋ฌธ์ž๋Š” ๊ตฌ๋ถ„ํ•˜๊ธฐ ์–ด๋ ต๋‹ค. ๋ฌด์ง€์„ฑ ์•”๊ธฐ ์˜คํžˆ๋ ค ์ข‹์•„~
  • ๋น„๊ต์  ์งง๊ฒŒ ๋ฐฐ์šฐ๊ณ  ๋„˜์–ด๊ฐ”๋˜ Sass, ์žฌํ˜„๋‹˜์˜ ๊ณผ์ œ๋ฅผ scss๋กœ ๊ตฌํ˜„ํ•ด๋ดค๋Š”๋ฐ ์ €๋ฒˆ์ฃผ์— ๋ˆˆ์น˜๋ณด์ง€ ๋ง๊ณ  ์ฝ”๋“œ ๋ฆฌ๋ทฐ ๋ฐ›์ž๊ณ  ๋ชฉํ‘œ๋ฅผ ์„ค์ •ํ•ด๋†“์€ ํ„ฐ๋ผ ์šฉ๊ธฐ๋ฅผ ๋‚ด์„œ ์žฌํ˜„๋‹˜๊ป˜ ๊ณผ์ œ์— ๋Œ€ํ•œ ์ฝ”๋“œ ๋ฆฌ๋ทฐ๋ฅผ ์š”์ฒญํ–ˆ๊ณ  ์žฅ๋ฌธ์˜ ์ฝ”๋“œ ๋ฆฌ๋ทฐ๋ฅผ ๋ฐ›๊ฒŒ ๋˜์—ˆ๋‹ค. (์ง€๊ธˆ ์ƒ๊ฐํ•ด๋„ ์ฐŒ์ž‰... ๊ฐ๋™๐Ÿฅน) ์ฝ”๋“œ์˜ ๊ฐœ์„ ์ ์„ ์•Œ๊ฒŒ ๋˜๋ฉด์„œ ๋™๊ธฐ๋“ค์—๊ฒŒ ์ด ๊ฒฝํ—˜์„ ๊ณต์œ ํ•˜๊ณ  ์‹ถ์€ ๋งˆ์Œ์— ํ”ผ๋“œ๋ฐฑ ๊ณต์œ ์™€ ํ•จ๊ป˜ ๊ฐ„๋‹จํ•œ Sass์‹ค์Šต ์Šคํ„ฐ๋””๋ฅผ ๋ชจ์ง‘ํ•˜๊ฒŒ ๋˜์—ˆ๋Š”๋ฐ ์ฒ˜์Œ์—” 5~10๋ช…์˜ ์ธ์› ์ •๋„๋ฅผ ์˜ˆ์ƒํ–ˆ์œผ๋‚˜... ์ ์  ์Šค์ผ€์ผ์ด ์ปค์ง€๊ธฐ ์‹œ์ž‘ํ•˜๋”๋‹ˆ ๊ณ ๋ง™๊ฒŒ๋„ ๋™๊ธฐ์ค‘ ์ ˆ๋ฐ˜์ธ 50๋ถ„์ด๋‚˜ ์ฐธ์—ฌํ•ด์ฃผ์…จ๊ณ  ๋™๋ฃŒํŠน๊ฐ• ์Šคํ„ฐ๋””๋ฅผ ๋ฆฌ๋“œํ•˜๋Š” ํŠน๋ณ„ํ•œ ๊ฒฝํ—˜์„ ํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.
  • ๋‘๊ณ ๋‘๊ณ  ๋ณด๊ณ  ์‹ถ์–ด์„œ ์ €์žฅํ•ด ๋†“์€ ์ˆ˜๊ฐ•์ƒ๋“ค์—๊ฒŒ ์ „ํ•˜๋Š” ํ˜ธ์ค€๋‹˜์˜ ๊ฒฉ๋ ค ๋ฉ”์‹œ์ง€! ๐Ÿ’–

 

๋‘๊ณ ๋‘๊ณ  ๋ณด๊ณ  ์‹ถ์–ด์„œ ์ €์žฅํ•ด ๋†“์€ ์ˆ˜๊ฐ•์ƒ๋“ค์—๊ฒŒ ์ „ํ•˜๋Š” ํ˜ธ์ค€๋‹˜์˜ ๊ฒฉ๋ ค.

 

 

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

 

 

 โœ๏ธ Learned
  • parsrInt() ๋ฌธ์ž์—ด์„ ์†Œ์ˆ˜์  ์—†๋Š” ์ •์ˆ˜๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜.
  • Math.method() ๋‚ด์žฅ ๊ฐ์ฒด ์•”๊ธฐ โญ๏ธ
  • ์‚ผํ•ญ์—ฐ์‚ฐ์ž์˜ ๊ตฌ์กฐ๋Š” ์กฐ๊ฑด์‹ ? ์ฐธ์ผ ๊ฒฝ์šฐ ์‹คํ–‰๋˜๋Š” ํ‘œํ˜„์‹ : ๊ฑฐ์ง“์ผ ๊ฒฝ์šฐ ์‹คํ–‰๋˜๋Š” ํ‘œํ˜„์‹
  • ๋‹จ๋ฝํšŒ๋กœ ํ‰๊ฐ€์™€ nullish ์—ฐ์‚ฐ์ž ์ฐจ์ด์ , or์€ 0์„ false๋กœ ์ธ์‹, nullish๋Š” 0์„ 0์œผ๋กœ ์ธ์‹ํ•œ๋‹ค๋Š” ์ .
  • json์€ JavaScript์—์„œ Object๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ํ˜•์‹์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ํ‘œํ˜„ํ•œ ์ •๋ณด ๋ฉ์–ด๋ฆฌ.
  • Booleanํƒ€์ž…์€ true ๋˜๋Š” false ๊ฐ’ ์ค‘ ํ•˜๋‚˜๋ฅผ ๊ฐ€์ง€๋ฉฐ, ์ฃผ๋กœ ์กฐ๊ฑด๋ฌธ(if)์˜ ๊ฒฐ๊ณผ๊ฐ’์œผ๋กœ ์‚ฌ์šฉ.
  • Boolean ๋…ผ๋ฆฌ์—ฐ์‚ฐ์ž True & false ๋ฐ˜ํ™˜์˜ˆ์‹œ ์•”๊ธฐ โญ๏ธ
  • ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด ์‚ฌ์šฉ๋ฒ• `${}`
  • ๋ฅผ ํ™œ์šฉํ•ด์„œ ์ „๊ฐœ๊ตฌ๋ฌธ์„ ํ™œ์šฉํ•˜๋ฉด array๋‚˜ object ๋‚ด๋ถ€์— ์žˆ๋Š” ๋‚ด์šฉ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.
  • map() ๋ฉ”์†Œ๋“œ๋Š” ๊ฒฐ๊ณผ์— ๋งž๋Š” ์‹ ๊ทœ ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜.
  • ๋ฐฐ์—ด์˜ ํŠน์ง•, ๊ตฌ์กฐ, ๋ฉ”์†Œ๋“œ๋“ค ๋ณ„ ๋‹ค์„ฏ ๊ฐœ! โญ๏ธโญ๏ธโญ๏ธโญ๏ธโญ๏ธ
  • const๋กœ ์„ ์–ธ๋œ ๋ณ€์ˆ˜๋Š” ๊ฐ’์ด ๋ณ€ํ•  ์ˆ˜ ์—†๋Š”๋ฐ ๋ฐฐ์—ด์—์„œ๋Š” ๊ฐ’์ด ๋ณ€ํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด๋Š” ์ด์œ ? Array์—์„œ ๊ฐ’์„ ๋ณ€์ˆ˜์— ์ €์žฅํ•  ๋•Œ ๊ฐ’ ์ž์ฒด๊ฐ€ ์•„๋‹Œ ๊ฐ’์˜ ์œ„์น˜๋ฅผ ์ €์žฅ. ์ฆ‰ ๋ณ€์ˆ˜์˜ ์ฐธ์กฐ(์œ„์น˜)๋Š” ๊ทธ๋Œ€๋กœ ๋ฐฐ์—ด์„ ๊ฐ€๋ฆฌํ‚ค๊ธฐ ๋•Œ๋ฌธ์— ๋ณ€์ˆ˜ ๋‚ด๋ถ€์˜ ๊ฐ’ ์ž์ฒด๋Š” ์œ ๋™์ ์œผ๋กœ ๋ณ€ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • Method๋Š” class ๋‚ด๋ถ€์— ์žˆ๋Š” Function. .์„ ์ฐ์–ด ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” function์ด๋ผ๋ฉด Method
  • ํ™”์‚ดํ‘œ ํ•จ์ˆ˜ ๋ณ„ ๋‹ค์„ฏ ๊ฐœ. โญ๏ธโญ๏ธโญ๏ธโญ๏ธโญ๏ธ
  • ๋ฐ˜๋ณต๋ฌธ for …in๋ฌธ์€ Object, Array ์˜ index๋ฅผ ์ˆœํšŒ.
  • ๋ฐ˜๋ณต๋ฌธ for..of๋ฌธ์€ ๋ฐ˜๋ณต๋˜๋Š” ์—ด๊ฑฐ๊ฐ€๋Šฅ(enumerable)ํ•œ ์†์„ฑ์ด ์žˆ๋Š” ๊ฐ์ฒด๋ฅผ ์ˆœํšŒ. Array Map String
  • ์ „๊ฐœ ๊ตฌ๋ฌธ์€ ๋ฐฐ์—ด์ด๋‚˜ ๊ฐ์ฒด์™€ ๊ฐ™์€ ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ๋ฅผ ํ™•์žฅํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๋ฌธ๋ฒ•. spread ์˜๋ฏธ๋Œ€๋กœ, Array๋‚˜ Object์˜ ๋ฐ์ดํ„ฐ๋ฅผ ํŽผ์ณ๋†“๋Š” ๊ฒƒ.

 

 

 ๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป Longed For
  • 10km ๋Ÿฌ๋‹.
  • ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค 0๋‹จ๊ณ„ ๋ฌธ์ œ ๋งค์ผ 2๊ฐœ์”ฉ ํ’€๊ธฐ.
  • ์ด๋ ฅ์„œ ํ‡ด๊ณ .
  • ์ฝ”๋”ฉ์•™๋งˆ JS ์ค‘๊ธ‰ ๊ฐ•์˜ ์™„๊ฐ•.
  • ๋งค์ผ ์ตœ์†Œ ์˜ˆ์Šต 1์‹œ๊ฐ„, ๋ณต์Šต 3์‹œ๊ฐ„ ์‹คํ–‰ํ•ด๋ณด๊ธฐ.
  • ๊ธฐ์ˆ  2๊ฑด ํฌ์ŠคํŒ… Sass, for...in๊ณผ for...of์˜ ์ฐจ์ด
๋ฐ˜์‘ํ˜•