20 POSTS

Javascript 6

  • #algorithm#javascript

    Codility - Odd Occurrences in array

    ## 2-2 Odd Occurrences in array ### ๋ฌธ์ œ ์ˆซ์ž๋กœ ์ด๋ค„์ง„ ๋ฐฐ์—ด์—์„œ ํ™€์ˆ˜ ๋ฒˆ ๋“ฑ์žฅํ•˜๋Š” ์ˆซ์ž๋ฅผ ์ฐพ์•„์„œ ๋ฆฌํ„ดํ•ด๋ผ. ``` A[0] = 9 A[1] = 3 A[2] = 9 A[3] = 3 A[4] = 9 A[5] = 7 A[6] = 9 7์€ ํ•œ๋ฒˆ๋งŒ ๋“ฑ์žฅํ•˜๋ฏ€๋กœ 7์„ ๋ฆฌํ„ดํ•ด์•ผ ํ•œ๋‹ค. ``` ### ํ’€์ด ```javascri...

    1๋ถ„
  • #algorithm#javascript

    Codility - Genomic Range Query

    ## Genomic Range Query ### ๋ฌธ์ œ DNA๋Š” A, C, G, T๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ๋Š”๋ฐ, ์ด๋Š” ๊ฐ๊ฐ 1, 2, 3, 4๋ฅผ ๊ฐ€๋ฅดํ‚จ๋‹ค. ์ด๋Ÿฌํ•œ DNA๋ฅผ ๋ฆฌํ„ดํ•˜๋Š” S๊ฐ€ ์žˆ๊ณ , ๋ฐฐ์—ด์˜ ๊ธธ์ด๊ฐ€ ๊ฐ™์€ P์™€ Q๊ฐ€ ์žˆ๋‹ค. ``` S=CAGCCTA P=[2, 5, 0] Q=[4, 5, 6] ๊ฐ 0๋ฒˆ์งธ ์š”์†Œ๋Š” 2, 4๋‹ค. 2๋ฒˆ์งธ ~ 4๋ฒˆ์งธ DNA๋Š” GCC...

    2๋ถ„
  • #javascript

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์Šคํ‚ฌ์„ ํ–ฅ์ƒ ์‹œํ‚ฌ 10๊ฐœ์˜ ์งˆ๋ฌธ

    ## ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์Šคํ‚ฌ์„ ํ–ฅ์ƒ ์‹œํ‚ฌ 10๊ฐœ์˜ ์งˆ๋ฌธ [10 JavaScript Quiz Questions and Answers to Sharpen Your Skills](https://typeofnan.dev/10-javascript-quiz-questions-and-answers/) ์˜ ์งˆ๋ฌธ์„ ๋ณด๊ณ , ๋‹ต์— ๋Œ€ํ•œ ํ•ด์„์„ ์ œ๋ฉ‹๋Œ€๋กœ ์จ๋ณด์•˜์Šต๋‹ˆ๋‹ค. ### 1....

    6๋ถ„
  • #javascript

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ œ๋„ค๋ ˆ์ดํ„ฐ

    ## Generator ์ œ๋„ค๋ ˆ์ดํ„ฐ์˜ ๊ฐœ๋…์— ๋Œ€ํ•ด ์ดํ•ดํ•˜๊ธฐ ์ „์—, ๋จผ์ € ๋ฐ˜๋ณต์ž (Iterator)์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž. ### 0. Iterator ๋ฐ˜๋ณต์ž๋Š”, ๋‘๊ฐœ์˜ ์†์„ฑ (`value`์™€ `done`)์„ ๋ฐ˜ํ™˜ํ•˜๋Š” `next()`๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ [Iterator protocal](https://developer.mozilla.org/en-US/docs/W...

    4๋ถ„
  • #typescript#javascript

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ

    ## ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ ### 0. ์„ค๋ช…์ž ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ์— ๋Œ€ํ•ด ์‹œ์ž‘ํ•˜๊ธฐ ์ „์—, ์„ค๋ช…์ž(Descriptor)์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž. ์„ค๋ช…์ž๋ž€, ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๊ฐ€ ์“ฐ๊ธฐ๊ฐ€ ๊ฐ€๋Šฅํ•œ์ง€, ๊ทธ๋ฆฌ๊ณ  ์—ด๊ฑฐ๊ฐ€ ๊ฐ€๋Šฅํ•œ์ง€ ์—ฌ๋ถ€๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์„ค๋ช…์ž๋ฅผ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š”, [Object.getOwnPropertyDescriptor(obj, propName)](https://develo...

    4๋ถ„
  • #javascript

    var let const, ๊ทธ๋ฆฌ๊ณ  ํ˜ธ์ด์ŠคํŒ…

    ## var let const, ๊ทธ๋ฆฌ๊ณ  ํ˜ธ์ด์ŠคํŒ… ### var ์šฐ๋ฆฌ๊ฐ€ ๋ชจ๋‘ ์•„๋Š” `var` ํ‚ค์›Œ๋“œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์€ ํŠน์ง•์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. 1. ํ•จ์ˆ˜๋ ˆ๋ฒจ ์Šค์ฝ”ํ”„๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋“ค์ด ๋ธ”๋ก ๋ ˆ๋ฒจ ์Šค์ฝ”ํ”„๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์ง€๋งŒ, `var`๋กœ ์„ ์–ธ๋œ ํ‚ค์›Œ๋“œ๋Š” ํ•จ์ˆ˜๋ ˆ๋ฒจ ์Šค์ฝ”ํ”„๋ฅผ ๊ฐ–๋Š”๋‹ค. ```javascript var ...

    6๋ถ„
  • #javascript

    javascript ์ผ๋ฐ˜ ํ•จ์ˆ˜์™€ ํ™”์‚ดํ‘œ ํ•จ์ˆ˜์˜ ์ฐจ์ด

    ES6์—์„œ๋ถ€ํ„ฐ ์ƒ๊ธด `arrow function`์€ ์ผ๋ฐ˜์ ์œผ๋กœ `()=>{}`์˜ ๋ชจ์–‘์„ ํ•˜๊ณ  ์žˆ์œผ๋ฉฐ, ๋™์ž‘๋„ ๋น„์Šทํ•ด๋ณด์ธ๋‹ค. ํ•˜์ง€๋งŒ ์ด ๋‘ ์„ ์–ธ๋ฐฉ์‹์€ ๋‘๊ฐ€์ง€ ๋ถ„๋ช…ํ•œ ์ฐจ์ด๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ํ•˜์ง€๋งŒ ๊ทธ์ „์— this๋ฅผ ์•Œ์•„์•ผ ํ•œ๋‹ค.

    3๋ถ„
  • #javascript

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ private

    ์ด ๊ธ€์€ [์€๋‹‰์„ ํ–ฅํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์—ฌ์ •](https://meetup.toast.com/posts/228)์„ ์š”์•ฝํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค. ## History ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” ๊ฐ์ฒด์— private ํ•œ ์†์„ฑ์„ ๋งŒ๋“ค ์ˆ˜๊ฐ€ ์—†์—ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๋ณดํ†ต ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐœ๋ฐœ์ž๋Š” privateํ•œ ๊ฒƒ์ด๋‹ค ๋ผ๋Š” ์•ฝ์†์œผ๋กœ `_` prefix๋ฅผ ๋ถ™์—ฌ์„œ ์‚ฌ์šฉํ•˜๊ณ ๋Š” ํ–ˆ์—ˆ๋‹ค. ```javas...

    4๋ถ„
  • #redux#javascript

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

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

    10๋ถ„
  • #javascript#react

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

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

    9๋ถ„
  • #redux#react#javascript

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

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

    7๋ถ„
  • #javascript#regex

    Javascript Regex ์ˆซ์ž๋ฅผ comma์™€ ํ•จ๊ป˜ Formatting ํ•˜๊ธฐ

    regex๋ฅผ ํ™œ์šฉํ•ด์„œ ์ˆซ์ž๋ฅผ ๋ณด๊ธฐ์ข‹๊ฒŒ formatting์„ ํ•ด๋ณด์ž.

    2๋ถ„
  • #javascript

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

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

    2๋ถ„
  • #javascript#web-performance

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

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

    6๋ถ„
  • #react#javascript#web-performance

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

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

    6๋ถ„
  • #javascript#browser

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

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

    5๋ถ„
  • #ai#javascript#algorithm

    2020๋…„ ๋ชฉํ‘œ

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

    2๋ถ„
  • #javascript#browser

    ๋ธŒ๋ผ์šฐ์ € ํžˆ์Šคํ† ๋ฆฌ ์กฐ์ž‘

    ๋ธŒ๋ผ์šฐ์ € ํžˆ์Šคํ† ๋ฆฌ ์กฐ์ž‘ํ•˜๊ธฐ

    4๋ถ„
  • #react#javascript#frontend

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

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

    64๋ถ„
  • #javascript

    Javascript Reduce

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

    2๋ถ„