avatar

Javascript 11

  • Javascript Set ๊ทธ๋ฆฌ๊ณ  Map

    ## ๊ทผ๋ฐ ์‚ฌ์‹ค.. ์ปฌ๋ ‰์…˜ ํ•„์š”์—†์ง€ ์•Š์„๊นŒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ์ผ๋ฐ˜์ ์ธ Object๋Š” key-value์Œ์„ ๋Š์ž„ ์—†์ด ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋Š” ํ˜•ํƒœ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ๋‹ค. ๊ทธ๋ž˜์„œ ์‚ฌ์‹ค ์ปฌ๋ ‰์…˜์ด ํ•„์š”ํ•˜์ง€ ์•Š์€ ๊ฒƒ ์ฒ˜๋Ÿผ ๋ณด์ผ ์ˆ˜๋„ ์žˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด๋”ฐ๊ธˆ์”ฉ object๋กœ ๋ถ€์กฑํ•  ๋•Œ๊ฐ€ ์žˆ๋‹ค. - key ์ถฉ๋Œ ์œ„ํ—˜์ด ์กด์žฌํ•˜๋Š” ๊ฒฝ์šฐ - ๋ฌธ์ž์—ด/์‹ฌ๋ณผ ์ด์™ธ์˜ ํ‚ค ๊ฐ’์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ - ๊ฐ...

    6๋ถ„
  • Javascript Symbol

    ## Javascript Primitive ๊ธฐ์กด์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” 6๊ฐ€์ง€์˜ primitive๊ฐ€ ์žˆ์—ˆ๋‹ค. - Object - string - number - boolean - null - undefined ๊ทธ๋Ÿฌ๋‚˜ es6๊ฐ€ ๋“ค์–ด์„œ๋ฉด์„œ `symbol`์ด๋ผ๋Š” 7๋ฒˆ์งธ primitive๊ฐ€ ์ถ”๊ฐ€๋˜์—ˆ๋‹ค. ## Symbol ```javascript const hel...

    4๋ถ„
  • javascript event bubbling & capturing

    ![image](https://miro.medium.com/max/1200/1*Et5UjVPGLfF1L43T7ErrxQ.png) ## Javascript Event Capturing https://codepen.io/yceffort/pen/GbVaaY Event Capturing์€ ํŠน์ • ์š”์†Œ์—์„œ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ, ์ตœ์ƒ์œ„ ์š”์†Œ์—์„œ ๋ถ€ํ„ฐ ์ด๋ฒคํŠธ๋ฅผ ํƒ...

    2๋ถ„
  • javascript class

    # Class ํด๋ž˜์Šค๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์ด๋ ‡๊ฒŒ ์ƒ๊ฒผ๋‹ค. ```javascript class Member { getName() { return "์ด๋ฆ„"; } } let obj = new Member(); console.log(obj.getName()); ``` ## ํŠน์ง• ### 1. strict ๋ชจ๋“œ์—์„œ ์‹คํ–‰ ๋”ฑํžˆ `'use strict'...

    3๋ถ„
  • Intersection Observer

    ## Intersection Observer Intersection Observer๋Š” ์—˜๋ฆฌ๋จผํŠธ๊ฐ€ viewport์— ๋…ธ์ถœ๋˜๊ณ  ์žˆ๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ ํ™•์ธํ•ด์ฃผ๋Š” API๋‹ค. ๊ฐ„๋‹จํžˆ ๋งํ•ด ๋ธŒ๋ผ์šฐ์ €์˜ ์–ด๋–ค ์š”์†Œ๊ฐ€ ํ™”๋ฉด์— ๋…ธ์ถœ๋˜๊ณ  ์žˆ๋Š”์ง€ ์•ˆ๋˜๊ณ  ์žˆ๋Š”์ง€๋ฅผ ํ™•์ธํ•ด์ฃผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋  ๊ฒƒ ๊ฐ™๋‹ค. ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์—†์ด ์—˜๋ฆฌ๋จผํŠธ๊ฐ€ ๋…ธ์ถœ์ค‘์ธ์ง€ ํ™•์ธํ•˜๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ• ๊นŒ? ์ด...

    4๋ถ„
  • Javascript - Promise

    ## Promise ```javascript new Promise(executor) ``` `executor`๋Š” `resolve`๋ฐ `reject` ์ธ์ˆ˜๋ฅผ ์ „๋‹ฌํ•  ์‹คํ–‰ํ•จ์ˆ˜๋ฅผ ์˜๋ฏธํ•œ๋‹ค. ์‹คํ–‰ํ•จ์ˆ˜๋Š” `resolve`์™€ `reject`๋ฅผ ๋ฐ›์•„ ์ฆ‰์‹œ ์‹คํ–‰๋œ๋‹ค. ์‹คํ–‰ํ•จ์ˆ˜๋Š” ๋ณดํ†ต ๋น„๋™๊ธฐ ์ž‘์—…์„ ์‹œ์ž‘ํ•œ ํ›„, ๋ชจ๋“  ์ž‘์—…์„ ๋๋‚ด๋ฉด `resolve`๋ฅผ ํ˜ธ์ถœํ•ด์„œ `Prom...

    2๋ถ„
  • Javascript - Destructuring Assignment

    ## ๊ตฌ์กฐ ๋ถ„ํ•ด ํ• ๋‹น ๊ตฌ์กฐ ๋ถ„ํ•ด ํ• ๋‹น์€ ๋ฐฐ์—ด์ด๋‚˜ ๊ฐ์ฒด์˜ ์†์„ฑ์„ ๋ง๊ทธ๋Œ€๋กœ ๋ถ„ํ•ดํ•˜์—ฌ, ๋ถ„ํ•ด ํ•œ ๊ฐ’์„ ๊ฐœ๋ณ„๋ณ€์ˆ˜์— ๋‹ด์„ ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ฃผ๋Š” ํ‘œํ˜„์‹์ด๋‹ค. ```javascript let a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 // rest ํŒจํ„ด์„ ์ด์šฉํ•˜์—ฌ ๋‚˜๋จธ์ง€๋ฅผ ๋ชจ๋‘...

    3๋ถ„
  • ReactiveX) Subject

    subject๋Š” ์˜ต์ €๋ฒ„๋‚˜ observable์ฒ˜๋Ÿฌ ํ–‰๋™ํ•˜๋Š” ์ผ๋ถ€ ReactiveX๊ตฌํ˜„์ฒด์—์„œ๋งŒ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ์ผ์ข…์˜ ํ”„๋ก์‹œ๋‹ค. subject๋Š” ์˜ต์ €๋ฒ„์ด๊ธฐ ๋•Œ๋ฌธ์— ํ•˜๋‚˜์ด์ƒ์˜ observable์„ ๊ตฌ๋…ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋™์‹œ์— observable ์ด๊ธฐ๋„ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํ•ญ๋ชฉ์„ ํ•˜๋‚˜ํ•˜๋‚˜ ๊ฑฐ์น˜๋ฉด์„œ ๋‹ค์‹œ pushํ•˜๊ณ  ์ƒˆ๋กœ์šด ํ•ญ๋ชฉ์„ pushํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด 4์ข…๋ฅ˜์˜ subject...

    2๋ถ„
  • ReactiveX) Observable

    ๋ณดํ†ต ์ผ๋ฐ˜์ ์ธ ํ”„๋กœ๊ทธ๋žจ์˜ ๊ฒฝ์šฐ์—๋Š”, ํ•˜๋‚˜์”ฉ ์ž‘์„ฑ๋œ ์ˆœ์„œ์— ๋”ฐ๋ผ ๋กœ์ง์ด ์‹คํ–‰๋˜๊ณ , ์™„๋ฃŒ๋˜๋ฉด ๋˜๋‹ค๋ฅธ ๋กœ์ง์ด ์‹คํ–‰๋˜๋Š” ๋“ฑ์˜ ์ˆœ์„œ๊ฐ€ ์žˆ์Œ์„ ์•Œ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด์™€ ๋‹ฌ๋ฆฌ ReactiveX๋Š” "Observer"์— ์˜ํ•ด ์ž„์˜์˜ ์ˆœ์„œ์— ๋”ฐ๋ผ ๋ณ‘๋ ฌ์ ์œผ๋กœ ์‹คํ–‰๋˜๊ณ  ๋‚˜์ค‘์— ๊ฒฐ๊ณผ๋‚˜ ๋‚˜์˜จ๋‹ค. ์ฆ‰ ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, Observable์•ˆ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์กฐํšŒํ•˜๊ณ , ๋ณ€ํ™˜...

    3๋ถ„