MapleStory Finger Point

๐ŸŸก JavaScript 3

[JS ES6] JS ES6 ๋ฌธ๋ฒ• Promise, async, await

ํ”„๋กœ๋ฏธ์Šค๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝ์— ๋‚ด์žฅ๋œ ๋‚ด์žฅ๊ฐ์ฒด ์ž…๋‹ˆ๋‹คํ”„๋กœ๋ฏธ์Šค ๊ฐ์ฒด์—์„œ๋Š” 2๊ฐ€์ง€๋ฅผ ํ˜•ํƒœ๋ฅผ ์ง€๋‹™๋‹ˆ๋‹ค. 1. ์ƒํƒœ(state) pending : ์ˆ˜ํ–‰์ค‘fullfilled : ์„ฑ๊ณต์  ์™„๋ฃŒrejected : ์‹คํŒจ2. ํ”„๋กœ๋“€์„œ - ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜๋Š” ์ œ๊ณต์ž(์ฆ‰, Promise)    ์ปจ์Šˆ๋จธ - ์‚ฌ์šฉ์ž(์ฆ‰, ํ˜ธ์ถœํ•˜๋Š”์‚ฌ๋žŒ) ํ”„๋กœ๋ฏธ์Šค ์ƒ์„ฑexecutor์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ ์ „๋‹ฌํ•ด์•ผ ํ•˜๋ฉฐ executor์ฝœ๋ฐฑํ•จ์ˆ˜๋Š” ๋‹ค์‹œ resolveํ•จ์ˆ˜์™€ rejectํ•จ์ˆ˜๋ฅผ ๋ฐ›์Šต๋‹ˆ๋‹ค.//๋งค๊ฐœ๋ณ€์ˆ˜๋Š” ์ปจ์Šˆ๋จธ๊ฐ€ ๋ถ„๋ช… ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ ์ „๋‹ฌํ• ๊ฑฐ์•ผ!(๊ทธ ์ฝœ๋ฐฑํ•จ์ˆ˜๋กœ ๋ฆฌํ„ดํ•ด์ค„๊ฒŒ!)let promise = new Promise( (success, fail) => { //producer ์ž…์žฅ์—์„œ ์„ฑ๊ณตํ–ˆ์„ ๋•Œ ์„ฑ๊ณต์„ ์•Œ๋ฆฌ๋Š” ํ•จ์ˆ˜ success("success"); //..

๋ฏธ์™„[JS ES6] JavaScript ES6 ๋ฌธ๋ฒ• (๊ธฐ์ดˆ ์ •๋ฆฌ)

โ—ˆ JS ES6 ๋ž€?"ECMAScript 6"์˜ ์•ฝ์ž๋กœ, ๊ณต์‹์ ์œผ๋กœ๋Š” ECMAScript 2015๋กœ ๋ถˆ๋ฆผES6๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ค‘์š”ํ•œ ์—…๋ฐ์ดํŠธ ์ค‘ ํ•˜๋‚˜๋กœ, 2015๋…„์— ๋ฐœํ‘œ๋จ๋งŽ์€ ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ๊ณผ ๊ฐœ์„  ์‚ฌํ•ญ์„ ๋„์ž…ํ•จ ๐Ÿ˜ ์‰ฝ๊ฒŒ,  ์ผ์ข…์˜ ์—…๋ฐ์ดํŠธ ๋ฒ„์ „์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋œ๋‹ค.!    โ—ˆ let๊ณผ const๐Ÿ’€ let ์žฌํ• ๋‹น ๋ณ€์ˆ˜ ์žฌํ• ๋‹น ๊ฐ€๋Šฅ์ค‘๋ณต์„ ์–ธ์ค‘๋ณต ์„ ์–ธ ๋ถˆ๊ฐ€๋Šฅ๋ฒ”์œ„์œ ํšจ ๋ฒ”์œ„๋Š” {} ๋ธ”๋ก   ๐Ÿ’€ const ์žฌํ• ๋‹น (์ƒ์ˆ˜) ์žฌํ• ๋‹น ๋ถˆ๊ฐ€๋Šฅ  ๊ฐ์ฒด๋‚˜ ๋ฐฐ์—ด์€ ๋‚ด๋ถ€ ๊ฐ’ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅ ์ค‘๋ณต์„ ์–ธ์ค‘๋ณต ์„ ์–ธ ๋ถˆ๊ฐ€๋Šฅ๋ฒ”์œ„์œ ํšจ ๋ฒ”์œ„๋Š” {} ๋ธ”๋ก  let, const ์œผ๋กœ ์„ ์–ธ๋œ ๋ณ€์ˆ˜๋Š” ํ˜ธ์ด์ŠคํŒ… ๋œ๋‹ค. (์„ ์–ธ ์ „์—๋Š” ๋ถˆ๊ฐ€๋Šฅ, "์ผ์‹œ์  ์‚ฌ๊ฐ์ง€๋Œ€(Temporal Dead Zone, TDZ)" ๋•Œ๋ฌธ)ํ˜ธ์ด์ŠคํŒ…(Hoisting)์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—..

JavaScript ๊ธฐ์ดˆ 1ํƒ„

getElementById()HTML ์š”์†Œ(id="demo" ํฌํ•จํ•œ) ์ฐพ์•„์„œ, ์š”์†Œ ์ฝ˜ํ…์ธ (innerHTML) ๋ฅผ ๋ณ€๊ฒฝํ•จํฐ ๋”ฐ์˜ดํ‘œ, ์ž‘์€ ๋”ฐ์˜ดํ‘œ ๋ชจ๋‘ ํ—ˆ์šฉ ๋ฐ˜๊ฐ‘์Šต๋‹ˆ๋‹ค!Click Me!JavaScript Can Change HTML Attribute ValuesTurn on the lightTurn off the light html - src ์†์„ฑ์„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋‹ค.JavaScript Can Change HTML Styles (CSS)Click Me! css - style ๊ฐ’์„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋‹ค.JavaScript Can Show &  Hide HTML ElementsClick Me!Click Me!html ์š”์†Œ๋ฅผ ์ˆจ๊ธฐ๊ฑฐ๋‚˜ ๋ณด์ด๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋‹ค.  The  ํƒœ๊ทธ ์‚ฌ์ด์— ์ฝ”๋“œ๊ฐ€ ์‚ฝ์ž…๋œ๋‹ค.JavaScript Fu..