Community

๐Ÿ•Š๏ธ ์ด JS ์ฃผ์ œ๋“ค์„ ๋ฐฐ์šฐ๊ธฐ ์ „์—๋Š” React๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ๋งˆ์„ธ์š”!

React.js ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์ „์— ๋ช‡ ๊ฐ€์ง€ ๊ธฐ๋ณธ์ ์ธ ์ฃผ์ œ์— ๋Œ€ํ•œ ์ดํ•ด๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ๋ฌผ๋ก , ์ตœ๋Œ€ํ•œ ๋นจ๋ฆฌ ๋ฉ‹์žˆ๋Š” ๊ธฐ์ˆ ๋“ค์„ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ๊ฒ ์ง€๋งŒ, ๋” ๋ฉ‹์ง„ ๊ธฐ์ˆ ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ธฐ๋ณธ ์ง€์‹๋“ค์„ ์•„๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. 1๏ธโƒฃ DOM(Document Object Model) ๋ฌธ์„œ ๊ฐ์ฒด ๋ชจ๋ธ์€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๊ฐ€ DOM ๊ตฌ์กฐ์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์šฐ์„ , JavaScript๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ DOM์„ ์กฐ์ž‘ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์›Œ์•ผ ํ•ฉ๋‹ˆ๋‹ค. [https://www.w3schools.com/js/js_htmldom.asp] 2๏ธโƒฃ Promises ๋ฏธ๋ž˜์— ์–ด๋–ค ๊ฐ’์„ ๋ฐ›๊ฒ ๋‹ค๊ณ  ์•ฝ์†ํ•˜๋Š” ํŠน๋ณ„ํ•œ ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค. resolve ๋˜๋Š” rejectํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. [https://www.w3schools.com/js/js_promise.asp] 3๏ธโƒฃ Async / Await ๋น„๋™๊ธฐ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ธฐ ์œ„ํ•œ ๊ตฌ๋ฌธ์œผ๋กœ, ์ฝ๊ธฐ ์ข‹์€ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ค๋‹ˆ๋‹ค. [https://youtu.be/PoRJizFvM7s] 4๏ธโƒฃ ES6+ JavaScript์˜ ํ‘œ์ค€ ์‚ฌ์–‘์ž…๋‹ˆ๋‹ค. ์ƒˆ๋กญ๊ณ  ํ–ฅ์ƒ๋œ ๋งŽ์€ ๊ธฐ๋Šฅ๋“ค์ด ์ถ”๊ฐ€๋˜์—ˆ์Šต๋‹ˆ๋‹ค. [https://www.w3schools.com/js/js_es6.asp] 5๏ธโƒฃ Vanilla JS ๋” ๋งŽ์€ ๊ธฐ๋ณธ ์ง€์‹๋“ค์„ ๋ฐฐ์šฐ๊ณ  ์‹ถ๋‹ค๋ฉด, ๋‹ค์Œ GitHub repo๋ฅผ ์‚ดํŽด๋ณด์„ธ์š”. [https://github.com/snipcart/learn-vanilla-js]

์•Œ๋ฆผ

์•Œ๋ฆผ์ด ์—†์Šต๋‹ˆ๋‹ค