TIL_221114 ๐ŸšฉJavascript

์ •์œค์ˆ™ยท2022๋…„ 11์›” 14์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
15/192

๋‚ด์ผ๋ฐฐ์›€์บ ํ”„ 4๊ธฐ ์ŠคํŒŒ๋ฅดํƒ€์ฝ”๋”ฉ React B๋ฐ˜


๐Ÿ“’ ์˜ค๋Š˜์˜ ๊ณต๋ถ€

1. Algorithm_Python 4, 5์ฃผ์ฐจ

  • ๋“œ๋””์–ด ์˜ค๋Š˜ ๊ฐ•์˜ ๋‹ค ๋ดค๋‹ค. 4,5 ์ฃผ์ฐจ๋Š” ์ •๋ง ๊ฐ€๋ณ๊ฒŒ ํ›‘์–ด๋ณด๋Š” ๋Š๋‚Œ์œผ๋กœ๋งŒ ๋ด์„œ ๊ธˆ๋ฐฉ ๋‹ค ๋ณผ ์ˆ˜ ์žˆ์—ˆ๋‹ค.
    • ์ฝ”๋”ฉํ…Œ์ŠคํŠธ ๊ธฐ์ถœ ๋ฌธ์ œ๋Š” ๋‚˜์ค‘์— ๋‹ค์‹œ ๊ผญ ํ’€์–ด๋ด์•ผํ•จ!!

2. SP_์›น ํผ๋ธ”๋ฆฌ์‹ฑ ๊ฐ•์˜

  • 1์ฃผ์ฐจ
    • css๋กœ class๋ฅผ ์ด์šฉํ•˜๋Š” ๋ฐฉ๋ฒ• ์™ธ์— js๋กœ class๋ฅผ ์ฃผ๊ณ  css์—์„œ class๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ฐฉ๋ฒ•๋„ ์žˆ๋‹ค

3. Programmers

  • < Day3 ์‚ฌ์น™์—ฐ์‚ฐ, ๋ฐฐ์—ด, ์ˆ˜ํ•™>

    • ์ตœ๋นˆ๊ฐ’ ๊ตฌํ•˜๊ธฐ
      -> <ํ˜ผ์ž ํ•ด๋ณด๊ธฐ>
    1. ๋ฐฐ์—ด์— ์žˆ๋Š” ์ˆซ์ž์— ๊ณ ์œ ๋ฒˆํ˜ธ ๋ถ€์—ฌ
    2. for๋ฌธ์œผ๋กœ ๋ฐฐ์—ด์„ ๋Œ๋ฉฐ count(๊ณ ์œ ๋ฒˆํ˜ธ) += 1
    3. count(๊ณ ์œ ๋ฒˆํ˜ธ) > often_number
      = often_number = ๊ณ ์œ ๋ฒˆํ˜ธ
    4. return num(๊ณ ์œ ๋ฒˆํ˜ธ)
    5. if count(often_number) > 1
      return -1
      -> <๋‹ค๋ฅธ ํ’€์ด>
      • '๋ฐฐ์—ด์—์„œ ํŠน์ • ๊ฐ’ ๊ฐœ์ˆ˜ ๊ตฌํ•˜๊ธฐ'
        -> count์—์„œ ์˜ค๋ฅ˜๊ฐ€ ๋‚ฌ๋Š”๋ฐ ์ด๋ ‡๊ฒŒ
        let count = 0 ์„ ์–ธํ•˜์ง€ ์•Š์•„์„œ ๊ทธ๋Ÿฐ ๊ฒƒ ๊ฐ™์Œ
      • ์ฐพ์•„๋ด์„œ ๋‹ต์€ ์•Œ๊ฒ ๋Š”๋ฐ ๋‚ด๊ฐ€ ์ดํ•ดํ•ด์„œ ๋‹ค์‹œ ํ’€๊ณ  ์‹ถ์Œ
    • ์ง์ˆ˜๋Š” ์‹ซ์–ด์š”
      -> <ํ˜ผ์ž ํ•ด๋ณด๊ธฐ>
    1. n ์ดํ•˜..?
    2. ํ™€์ˆ˜: n % 2 != 0
    3. ์˜ค๋ฆ„์ฐจ์ˆœ: sort((a,b) => a-b)
      -> <์ฐพ์•„ ๋ณด๊ธฐ>
      • ํ™€์ˆ˜: n % 2 === 1
      • .push ๋ฐฐ์—ด์— ๋„ฃ๋Š” ๊ฒƒ ์ž๊พธ ๊นŒ๋จน์Œ
  • < Day4 ์ˆ˜ํ•™, ๋ฐฐ์—ด >
    • ํ”ผ์ž ๋‚˜๋ˆ  ๋จน๊ธฐ(1)
      -> if, else, Math.floor() ์‚ฌ์šฉํ•ด์„œ ํ’€์—ˆ๋‹ค.
      -> Math.ceil() ์†Œ์ˆ˜์  ์ดํ•˜๋ฅผ ์˜ฌ๋ฆผ!
      -> Math.round() ์†Œ์ˆ˜์  ์ดํ•˜๋ฅผ ๋ฐ˜์˜ฌ๋ฆผ
  • Lv0, Lv1์—์„œ ์ •๋‹ต๋ฅ  ๋†’์€ ๋ฌธ์ œ๋ถ€ํ„ฐ ํ’€์—ˆ๋‹ค.
    • ์ง์ˆ˜์™€ ํ™€์ˆ˜
      -> if, ===0 ์ด์šฉํ•ด์„œ ํ’€์—ˆ๋‹ค.
      -> function evenOrOdd(num) { return num % 2 ? "Odd" : "Even"; } 0=false๋ผ๋Š” ๊ฑธ ์ด์šฉํ•œ ์ฝ”๋“œ!
    • ๊ฐ๋„๊ธฐ
      ->else if ๋Œ€์‹  ? ์™€ : ์ด์šฉ ๊ฐ€๋Šฅ
      -> ๊ทผ๋ฐ ์ž๊พธ ์˜ค๋ฅ˜ ๋‚จ.. ๋‚ด์ผ ๋‹ค์‹œ ํ’€์–ด๋ณด๊ธฐ!

4.Javascript ์ด๋ก 

  • tutorial ๋ณด๊ณ  vscode์—์„œ ํ•ด ๋ดค๋Š”๋ฐ ๊ทธ๋Œ€๋กœ ์•ˆ ๋‚˜์˜ค๋Š” ๋ถ€๋ถ„ ๋•Œ๋ฌธ์— ๋˜ ์‹œ๊ฐ„ ๋งŽ์ด ์”€.
    • prompt ์“ฐ๋ฉด์„œ$์‚ฌ์šฉํ•  ๋•Œ ๋ฐฑํ‹ฑ์จ์•ผ ํ•˜๋Š”๋ฐ ๊ทธ๋ƒฅ ๋”ฐ์˜ดํ‘œ ์จ์„œ ์ž๊พธ ์ด๋ฆ„์€ ${name} ์ž…๋‹ˆ๋‹ค ์ด๋ ‡๊ฒŒ๋งŒ ๋–ด์Œ
  • ๋ชจ๋˜ javascript tutorial ์ˆœ์„œ๋Œ€๋กœ ๋ณผ ์ˆ˜ ์žˆ๋Š” ์œ ํŠœ๋ธŒ ์˜์ƒ์ด ์žˆ์–ด์„œ ๋ดค์Œ
    • ๊ธฐ์ดˆ https://youtu.be/KF6t61yuPCY
    • ์‹ฌํ™” https://youtube.com/playlist?list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB44
    • False: ์ˆซ์ž 0, ๋นˆ ๋ฌธ์ž์—ด", null, undefined, NaN
      -> Number(null) // 0
      -> Number(undefined) // NaN
    • let์œผ๋กœ ์„ ์–ธํ•˜๋Š” ๋‚ด์šฉ์ด ํ•จ์ˆ˜ ์•ˆ์— ์žˆ์œผ๋ฉด '์ง€์—ญ ๋ณ€์ˆ˜'๋กœ ํ•จ์ˆ˜ ๋ฐ–์—์„œ ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜ ์—†์Œ
      -> ํ•จ์ˆ˜ ๋ฐ–์— ์„ ์–ธ๋œ letํ•จ์ˆ˜ = '์ „์—ญ ๋ณ€์ˆ˜'
      -> '์ง€์—ญ ๋ณ€์ˆ˜'์™€ '์ „์—ญ ๋ณ€์ˆ˜'๋Š” ์„œ๋กœ ๊ฐ„์„ญ์„ ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— let์œผ๋กœ ์žฌํ• ๋‹น ๊ฐ€๋Šฅ
      -> '์ง€์—ญ ๋ณ€์ˆ˜'๋ฅผ ์“ฐ๋Š” ๊ฒƒ์ด ๋” ๊ด€๋ฆฌํ•˜๊ธฐ ์‰ฌ์›€
    • ํ™”์‚ดํ‘œ ํ•จ์ˆ˜(arrow function)
      -> function = => / return = () ๋ณ€๊ฒฝ ๊ฐ€๋Šฅ
      -> ๊ฐ์ฒด ์„ค์ •ํ•  ๋•Œ ์ผ๋ฐ˜ ํ•จ์ˆ˜์™€ ๋‹ฌ๋ฆฌ ์ž์‹ ๋งŒ์˜ this๋ฅผ ๊ฐ–์ง€ ์•Š์Œ
      -> ํ™”์‚ดํ‘œ ํ•จ์ˆ˜ ๋‚ด์—์„œ this ์‚ฌ์šฉํ•˜๋ฉด ๊ทธ this๋Š” ์™ธ๋ถ€์—์„œ ๊ฐ’์„ ๊ฐ€์ ธ์˜จ๋‹ค(ex. window)
    • ๋ฐฐ์—ด
      -> .pop() ๋ฐฐ์—ด ๋ ์š”์†Œ ์ œ๊ฑฐ
      -> .unshift() ๋ฐฐ์—ด ์•ž์— ์ถ”๊ฐ€
      -> .shift() ๋ฐฐ์—ด ์•ž ์š”์†Œ ์ œ๊ฑฐ
      -> for(let a of abc) ๊ฐ์ฒด์˜ for in๊ณผ ํ—ท๊ฐˆ๋ฆฌ์ง€ ๋ง ๊ฒƒ

๐Ÿšฉ

์นดํŽ˜์ธ์€ ๋‚˜๋ž‘ ์•ˆ ๋งž์•„

  • ์–ด์ œ(์ผ์š”์ผ) ์˜คํ›„ ์นœ๊ตฌ๊ฐ€ ์ค€ ๋ฒ ํŠธ๋‚จ ์ปคํ”ผ ๋‘ ๋ด‰์ง€๋ฅผ ํƒ€ ๋งˆ์…จ๋Š”๋ฐ ์›๋ž˜ ์ปคํ”ผ๋ฅผ ์•ˆ ๋งˆ์‹œ๊ธฐ๋„ ํ–ˆ๊ณ  ๋„ˆ๋ฌด ์˜ค๋žœ๋งŒ์— ๋งˆ์‹ ๊ฑฐ๋ผ ๊ทธ๋Ÿฐ์ง€ ์ƒˆ๋ฒฝ 3์‹œ๊นŒ์ง€ ์ž ์ด ์•ˆ ์™”๋‹ค.
    • 5์‹œ์ฏค์— ๊นจ์„œ๋Š” ๊ณ„์† ๊ฐ์„ฑ ์ƒํƒœ๋ผ ๊ทธ๋Ÿฐ๊ฑด์ง€ ๋‹ค์‹œ ๋˜ ์ž ์ด ์•ˆ ์™€์„œ 2์‹œ๊ฐ„ ์ •๋„ ์ž” ์ฑ„๋กœ ๊ณต๋ถ€๋ฅผ ํ–ˆ๋‹ค. 10์‹œ์ฏค ์ •๋ง ๊ธฐ์ ˆํ•  ๊ฒƒ ๊ฐ™์•„์„œ ์กธ๋‹ค๊ฐ€ ๊ฒฐ๊ตญ ํŒ€์›๋“ค์—๊ฒŒ ๋งํ•˜๊ณ  20๋ถ„ ์ •๋„ ์ž๊ณ  ์ผ์–ด๋‚˜๋‹ˆ ์กฐ๊ธˆ ๊ดœ์ฐฎ์•„์กŒ๋‹ค.
    • ์ €๋…์—๋„ ์ค‘๊ฐ„์ค‘๊ฐ„ ์กธ๋ ค์„œ ์œ„๊ธฐ๊ฐ€ ๋ช‡ ๋ฒˆ ์™”์ง€๋งŒ ์ €๋…์‹œ๊ฐ„์— ์ž๊ณ  ์ผ์–ด๋‚˜๋‹ˆ ์ดํ›„ ์‹œ๊ฐ„๋„ ๋ฒ„ํ‹ธ๋งŒ ํ–ˆ๋‹ค!
    • ๋ถ€ํŠธ์บ ํ”„ ๊ธฐ๊ฐ„ ๋™์•ˆ ๊ธˆ์ฃผํ•˜๋Š” ๊ฒƒ๋„ ์ง€ํ‚ฌ ๊ฑฐ์ง€๋งŒ ์ปคํ”ผ๋Š” ์ปคํ”ผ๋ง› ์‚ฌํƒ• ๊ฐ™์€ ๊ฒƒ๋„ ํ”ผํ•˜๊ธฐ!

์•Œ๊ณ ๋ฆฌ์ฆ˜

  • ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ํ’€๋‹ค๋ณด๋‹ˆ ์•Œ ๊ฒƒ ๊ฐ™์€๋ฐ ๋จธ๋ฆฌ์— ๋“  ํ•จ์ˆ˜๊ฐ€ ์—†์–ด ๋‚ด ํž˜์œผ๋กœ๋งŒ ํ’€ ์ˆ˜ ์žˆ๋Š” ๋ฌธ์ œ๋“ค์ด ๋งŽ์ด ์—†์œผ๋‹ˆ ๋˜ ์ŠคํŠธ๋ ˆ์Šค.
    • ์ฒ˜์Œ์œผ๋กœ ๋‚˜๋Š” ๊ฐœ๋ฐœ์ชฝ์ด ์•„๋‹Œ๊ฐ€ ์ƒ๊ฐ๋„ ํ–ˆ์Œ..
    • ๋‚˜๋Š” Javascript ๊ฐ•์˜, ์ฑ…, ํŠœํ† ๋ฆฌ์–ผ ๋“ฑ์œผ๋กœ ์ด๋ก  ์ •๋ฆฌ๋ฅผ ๊ฐ™์ด ํ•˜๋ฉด์„œ ๋ฌธ์ œ๋ฅผ ํ‘ธ๋Š” ๊ฒŒ ๋งž๋Š” ๊ฒƒ ๊ฐ™์Œ
  • ํ™•์‹คํžˆ ์˜ค๋Š˜ ์œ ํŠœ๋ธŒ javascript ๊ฐ•์˜๋ฅผ ๋“ค์œผ๋‹ˆ ์ด์ „์— ํ’€์—ˆ๋˜ ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฌธ์ œ์˜ ์ฝ”๋“œ๋“ค์ด ๋” ์ž˜ ์ดํ•ด๋๋‹ค.
    • ํŠนํžˆ ํ™”์‚ดํ‘œ ํ•จ์ˆ˜!!
profile
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž

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