avatar

Javascript 10

  • ๋ฆฌ๋•์Šค ๊ณต๋ถ€ํ•ด๋ณด๊ธฐ (3) - ์šฉ์–ด

    https://redux.js.org/glossary#state ## ์šฉ์–ด ๋ชจ์Œ ### State (์ƒํƒœ) ```typescript type State = any ``` State (State tree๋ผ๊ณ  ๋„ ๋ถˆ๋ฆฌ์šด๋‹ค)๋Š” Redux API์—์„œ๋Š” ๋ณดํ†ต ์Šคํ† ์–ด์—์„œ ๊ด€๋ฆฌํ•˜๊ณ , `getState()`์— ์˜ํ•ด ๋ฐ˜ํ™˜๋˜๋Š” ๋‹จ์ผ ๊ฐ’์„ ๊ฐ€๋ฆฌํ‚จ๋‹ค. ๊ด€๋ก€์ ์œผ๋กœ, ๊ฐ€์žฅ...

    10๋ถ„
  • ๋ฆฌ๋•์Šค ๊ณต๋ถ€ํ•ด๋ณด๊ธฐ (2) - ๋ฆฌ๋•์Šค์˜ ํƒ„์ƒ, ํ•ต์‹ฌ ๊ฐœ๋… ๊ทธ๋ฆฌ๊ณ  3๊ฐ€์ง€ ์›์น™.

    ## ๋ฆฌ๋•์Šค์˜ ํƒ„์ƒ ๋ฐฐ๊ฒฝ https://redux.js.org/introduction/motivation **์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹ฑ๊ธ€ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ๋Œ€ํ•œ ์š”๊ตฌ ์‚ฌํ•ญ์ด ์ ์  ๋ณต์žกํ•ด ์ง์— ๋”ฐ๋ผ์„œ, ์šฐ๋ฆฌ์˜ ์ฝ”๋“œ๋Š” ๊ทธ ์–ด๋А ๋•Œ ๋ณด๋‹ค๋„ ๋” ๋งŽ์ด ์ƒํƒœ๊ด€๋ฆฌ์— ๋Œ€ํ•œ ํ•„์š”์„ฑ์„ ๋А๋ผ๊ณ  ์žˆ๋‹ค.** ์—ฌ๊ธฐ์„œ ๋งํ•˜๋Š” ์ƒํƒœ์—๋Š” ์„œ๋ฒ„ ์‘๋‹ต, ์บ์‹œ๋œ ๋ฐ์ดํ„ฐ ๋ฟ๋งŒ์•„๋‹ˆ๋ผ ์„œ๋ฒ„์— ์•„์ง ์š”...

    9๋ถ„
  • ๋ฆฌ๋•์Šค ๊ณต๋ถ€ํ•ด๋ณด๊ธฐ (1) - ๊ฐœ์š”

    ## ๋ฆฌ๋•์Šค ๊ณต๋ถ€ํ•ด๋ณด๊ธฐ 1 [๋ฆฌ๋•์Šค ๊ณต์‹๋ฌธ์„œ](https://redux.js.org/introduction/getting-started)๋ฅผ ์Šค์Šค๋กœ ๋Œ€์ถฉ ๋ฒˆ์—ญํ•ด๋ณธ ๊ธ€์ž…๋‹ˆ๋‹ค. ๋ฆฌ๋•์Šค๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์•ฑ์„ ์œ„ํ•œ **์˜ˆ์ธก ๊ฐ€๋Šฅํ•œ ์ƒํƒœ ๊ด€๋ฆฌ ์ปจํ…Œ์ด๋„ˆ**๋‹ค. ๋ฆฌ๋•์Šค๋Š” ์ผ๊ด€์„ฑ ์žˆ๊ฒŒ ๋™์ž‘ํ•˜๊ณ , ์„œ๋กœ ๋‹ค๋ฅธ ํ™˜๊ฒฝ (ํด๋ผ์ด์–ธํŠธ, ์„œ๋ฒ„, ๋„ค์ดํ‹ฐ๋ธŒ)์—์„œ ์‹คํ–‰๋˜๋ฉฐ, ํ…Œ์ŠคํŠธํ•˜๊ธฐ ...

    7๋ถ„
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ปค๋ง๊ณผ ํด๋กœ์ ธ

    ## ์ปค๋ง [์ด ๊ธ€](https://www.sitepoint.com/currying-in-functional-javascript/) ์— ์ž˜ ์ •๋ฆฌ ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. Currying์€ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์ธ์ž๋ฅผ ๊ฐ€์ง„ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœ ํ•  ๊ฒฝ์šฐ, ํŒŒ๋ผ๋ฏธํ„ฐ์˜ ์ˆ˜๋ณด๋‹ค ์ ์€ ์ˆ˜์˜ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ์ธ์ž๋กœ ๋ฐ›์œผ๋ฉด ๋ˆ„๋ฝ๋œ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ์ธ์ž๋กœ ๋ฐ›๋Š” ๊ธฐ๋ฒ•์„ ๋งํ•œ๋‹ค. ์ฆ‰ ์ปค๋ง์€ ํ•จ์ˆ˜ ํ•˜๋‚˜๊ฐ€ n๊ฐœ...

    2๋ถ„
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ http ์š”์ฒญํ•˜๊ธฐ - fetch์— ๋Œ€ํ•œ ๊ณ ์ฐฐ

    `toc tight: true, from-heading: 2 to-heading: 3 ` ## 1. ์„œ๋ก  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ http ์š”์ฒญ์„ ํ•˜๋Š” ๊ฒƒ์€ ์ด์ œ ๋น„์ผ๋น„์žฌํ•œ ์ผ์ด ๋˜์—ˆ๋‹ค. ์„œ๋ฒ„์—์„œ ๋ชจ๋“  ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™€์„œ static ํ•œ html์„ ๋งŒ๋“ค์–ด์„œ ๋ณด์—ฌ์ฃผ๊ณ  ์žˆ๋Š” ์›นํŽ˜์ด์ง€๋Š” ์•„๋งˆ ์ฐพ๊ธฐ ์–ด๋ ค์šธ ๊ฒƒ์ด๋‹ค. ๋งจ ์ฒ˜์Œ ์›น์„ ๋ฐฐ์šธ ๋•Œ, jquery์˜ ajax ...

    6๋ถ„
  • React count down์—์„œ ๋ฐฐ์šด event-emitter ์™€ requestAnimationFrame

    # ๋ฆฌ์•กํŠธ์—์„œ ์นด์šดํŠธ ๋‹ค์šด์„ ๋งŒ๋“ค๋ฉฐ ๋ฐฐ์šด ๊ฒƒ๋“ค ๋ฆฌ์•กํŠธ์—์„œ ์นด์šดํŠธ ๋‹ค์šด์„ ๋งŒ๋“ ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด์ž. ๊ฐ€์žฅ ๋จผ์ € ์ƒ๊ฐ๋‚˜๋Š”๋Œ€๋กœ, ๋น ๋ฅด๊ฒŒ ๊ตฌํ˜„ํ•œ๋‹ค๋ฉด ์•„๋ž˜์™€ ๊ฐ™์€ ๋А๋‚Œ์ด ๋  ๊ฒƒ์ด๋‹ค. https://codepen.io/yceffort/pen/BayPyNe ํ•˜์ง€๋งŒ ์ด ์ฝ”๋“œ๋Š” ํ•œ๊ฐ€์ง€ ๋ฌธ์ œ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ## setInterval, setTimeout `setInte...

    6๋ถ„
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ด๋ฒคํŠธ๋ฃจํ”„, ํƒœ์Šคํฌ, ๊ทธ๋ฆฌ๊ณ  ๋งˆ์ดํฌ๋กœ ํƒœ์Šคํฌ

    ## ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋‹จ์ผ ์Šค๋ ˆ๋“œ ๊ธฐ๋ฐ˜์˜ ์–ธ์–ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” '๋‹จ์ผ ์Šค๋ ˆ๋“œ' ๊ธฐ๋ฐ˜์˜ ์–ธ์–ด๋‹ค. ์ฆ‰, ์Šค๋ ˆ๋“œ๊ฐ€ ํ•˜๋‚˜์ด๊ธฐ ๋•Œ๋ฌธ์— ๋™์‹œ์— ํ•˜๋‚˜์˜ ์ž‘์—…๋งŒ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์‚ฌ์šฉ๋˜๋Š” ์›น์„ ๊ณฐ๊ณฐํžˆ ์ƒ๊ฐํ•ด๋ณด๋ฉด ๋™์‹œ์— ์—ฌ๋Ÿฌ๊ฐœ์˜ ์ž‘์—…์„ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ชจ์Šต์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ์Šค๋ ˆ๋“œ๊ฐ€ ํ•˜๋‚˜์ธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋™์‹œ์„ฑ์„ ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌํ• ๊นŒ? ๋จผ์ € ๋ธŒ๋ผ์šฐ์ € ๊ตฌ๋™ํ™˜๊ฒฝ์„ ์‚ดํŽด๋ณด...

    5๋ถ„
  • 2020๋…„ ๋ชฉํ‘œ

    Don't do anything boring ## Tensorflow JS ์ค‘์š”๋„: โ˜…โ˜…โ˜…โ˜…โ˜… ๋‚œ์ด๋„: โ˜…โ˜…โ˜…โ˜…โ˜… AI๊ฐ€ ํ•˜๊ณ  ์‹ถ์–ด์š” ์„ ์ƒ๋‹˜... tensorflowjs ๋ฅผ ํŠœํ† ๋ฆฌ์–ผ๋ถ€ํ„ฐ ๋”ฐ๋ผํ•˜๋ฉด์„œ ๋ฐฐ์›Œ๋ณด์ž. ## ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๊ฐ•์˜ [๋ฐฑ์ค€๊ฐ•์˜](https://code.plus/bundle/8) ์ด์ œ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ์ •๋ณตํ•  ๋•Œ๊ฐ€ ๋˜์—ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ ํŒŒ์ด์ฌ์œผ...

    2๋ถ„
  • ๋ฆฌ์•กํŠธ ๋ฉด์ ‘ ์งˆ๋ฌธ ๋ชจ์Œ (1)

    [๋ชฉ์ฐจ](/2019/08/13/reactjs-interview-questions/) ```toc tight: true, from-heading: 2 to-heading: 3 ``` ## Core React ### What is React ๋ฆฌ์•กํŠธ๋Š” ์˜คํ”ˆ์†Œ์Šค ํ”„๋ก ํŠธ์—”๋“œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ, ํŠนํžˆ ์‹ฑ๊ธ€ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค ๊ตฌ์ถ•์„...

    64๋ถ„
  • Javascript Reduce

    ๋ฉ์ฒญ์ด๋ผ ๊ทธ๋Ÿฐ์ง€ `reduce` ํ•จ์ˆ˜๊ฐ€ ์ž˜ ์ดํ•ด ๋˜์ง€ ์•Š์•˜๋‹ค. ## Reduce ```javascript const list = [1, 2, 3, 4, 5]; const initValue = 10; const totalSum = list.reduce( (accumulator, currentValue, currentIndex, array) => { ...

    2๋ถ„