๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐Ÿ“จ Web/-- JS & ES6+13

[Javascript] Fetch API๋กœ ๊ตฌํ˜„ํ•˜๋Š” Ajax ๋น„๋™๊ธฐ ํ†ต์‹  ajax XMLHttpRequest ๊ฐ์ฒด๋ฅผ ์ด์šฉํ•ด์„œ ์›น ์„œ๋ฒ„์™€ ๋น„๋™๊ธฐ๋กœ ํ†ต์‹ ํ•˜๊ณ , DOM ์„ ์ด์šฉํ•ด์„œ ์›น ํŽ˜์ด์ง€๋ฅผ ๋™์ ์œผ๋กœ ๋ฐ”๊ฟ”์ฃผ๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ธฐ๋ฒ• Asynchronouse JavaScript XML ํ˜„์žฌ XML์„ ์‚ฌ์šฉํ•˜๋Š”๊ฑด ๋“œ๋ฌผ๊ณ  JSON์„ ์‚ฌ์šฉ ํŽ˜์ด์ง€ ์ƒˆ๋กœ๊ณ ์นจ ์—†์ด ํŠน์ • ๋ฐ์ดํ„ฐ๋งŒ ๋ฆฌ๋กœ๋“œ ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›๊ณ  ์ž‘์—…์„ ์ˆ˜ํ–‰ ajax ๊ตฌํ˜„ํ•˜๊ธฐ ajax๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๊ธฐ์ˆ ์—๋Š” ์—ฌ๋Ÿฌ ๊ธฐ์ˆ ์ด ์กด์žฌํ•œ๋‹ค. ๊ทธ ์ค‘์— ๋Œ€ํ‘œ์ ์ธ 3๊ฐ€์ง€์—์„œ Fetch API์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž. XMLHttpRequest Fetch API JQuery Fetch API Fetch API๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ XMLHttpRequest ๋ณด๋‹ค ๋” ๊ฐ•๋ ฅํ•˜๊ณ  ์œ ์—ฐํ•˜๋‹ค. ์ด๋ฒคํŠธ ๊ธฐ๋ฐ˜์ธ XMLHttpRequest๊ณผ๋Š” ๋‹ฌ๋ฆฌ Fetch API๋Š” Promise ๊ธฐ.. 2021. 2. 26.
[Javascript] ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ HTML Element์˜ ์ด๋ฒคํŠธ๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ฐฉ๋ฒ• ์ด๋ฒˆ ์‹œ๊ฐ„์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ HTML ์š”์†Œ์˜ ์ด๋ฒคํŠธ๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ฐฉ๋ฒ•๊ณผ Todolist๋ฅผ ๋งŒ๋“ค์–ด๋ณด๋ฉฐ ํ•™์Šตํ•˜๋Š” ์‹œ๊ฐ„์„ ๊ฐ–๋„๋ก ํ•˜๊ฒ ๋‹ค. ํ•™์Šต ์ˆœ์„œ ์ด๋ฒคํŠธ ๊ฐ์ฒด๋ž€? ์ด๋ฒคํŠธ ๋“ฑ๋ก, ์‚ญ์ œํ•˜๊ธฐ addEventListener() removeEventListner() ์ง€๊ธˆ๊นŒ์ง€ ๋ฐฐ์šด ๋‚ด์šฉ์œผ๋กœ Todo ๋ฆฌ์ŠคํŠธ ๋งŒ๋“ค์–ด๋ณด๊ธฐ ์ด๋ฒคํŠธ ๋“ฑ๋ก, ์‚ญ์ œํ•˜๊ธฐ ์šฐ๋ฆฌ๋Š” ์ง€๋‚œ ์‹œ๊ฐ„ ๊นŒ์ง€ HTML Element๋ฅผ ๋“ฑ๋ก, ์ˆ˜์ •, ์‚ญ์ œํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ํ•™์Šตํ•˜์˜€๋‹ค. ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” ์šฐ๋ฆฌ๊ฐ€ ์ง€๋‚œ๋ฒˆ์— ๋งŒ๋“  Element์— ์ด๋ฒคํŠธ๋“ค ๋“ฑ๋ก์‹œ์ผœ๋ณด๋Š” ์ผ์„ ํ•  ๊ฒƒ์ด๋‹ค. ์ด๋ฒคํŠธ ๋“ฑ๋กํ•˜๊ธฐ ์ด๋ฒคํŠธ๋ฅผ ๋“ฑ๋กํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” addEventListener() ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. target.addEventListener(type, listener, useCapture); targe.. 2021. 2. 20.
[Javascript] ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ HTML DOM์„ ๋‹ค๋ฃจ๋Š” ๋ฐฉ๋ฒ• ์˜ค๋Š˜์€ JS ์—์„œ HTML DOM ๊ฐ์ฒด๋ฅผ ๊ฐ€์ ธ์™€ ์กฐ์ž‘ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณผ ๊ฒƒ์ด๋‹ค. ์˜ค๋Š˜ ๋ฐฐ์šธ ๋‚ด์šฉ๋“ค์ด ๋ชจ๋“  ์ƒํ™ฉ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๊ณ  ๋Œ€์ถฉ JS ์—์„œ๋„ ์ด๋ ‡๊ฒŒ ํ•  ์ˆ˜ ์žˆ๊ตฌ๋‚˜ ํ•˜๋Š” ์ƒ๊ฐ์ด ๋ชฉ์ ์ด๋‹ค. ๋” ์ž์„ธํ•œ ๋‚ด์šฉ์€ ๋งŽ์ด ์žˆ์œผ๋‹ˆ ์ด๋ฒˆ ๊ธ€์„ ๋ณด๊ณ  ๋ฐฉํ–ฅ์„ ์žก์•„๊ฐ€๊ธธ ๋ฐ”๋ž€๋‹ค. ํ•™์Šต ์ˆœ์„œ ์—˜๋ฆฌ๋จผํŠธ ๊ฐ€์ ธ์˜ค๊ธฐ getElementById() getElementByName() getElementByClassName() getElementByTagName() ์—˜๋ฆฌ๋จผํŠธ์— ์›ํ•˜๋Š” ํ…์ŠคํŠธ ์ถ”๊ฐ€ํ•˜๊ธฐ innerHTML innerText ์—˜๋ฆฌ๋จผํŠธ ์ƒ์„ฑ, ์‚ญ์ œ, ์ˆ˜์ •ํ•˜๊ธฐ createElement() appendChild() removeChild() ์—˜๋ฆฌ๋จผํŠธ ๊ฐ€์ ธ์˜ค๊ธฐ HTML ์š”์†Œ (Elements)๋ฅผ ์ œ์–ดํ•˜๋ ค๋ฉด ์šฐ์„  HTML .. 2021. 2. 20.
[Javascript] ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ JSON ์„ ๋‹ค๋ฃจ๋Š” ๋ฐฉ๋ฒ• JSON Json ์€ JavaScript Object Notation ์ด๋ผ๋Š” ์˜๋ฏธ์˜ ์ถ•์•ฝ์–ด๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†กํ•˜๊ฑฐ๋‚˜ ์ €์žฅํ•  ๋•Œ ์‚ฌ์šฉ๋˜๋Š” ๊ฒฝ๋Ÿ‰ ๋ฐ์ดํ„ฐ ํ˜•์‹์ด๋‹ค. ๋ณดํ†ต JSON์„ REST API ํ†ต์‹ ํ•  ๋•Œ ์ฃผ๊ณ ๋ฐ›๋Š” Request, Response Body ์— ์‚ฌ์šฉํ•œ๋‹ค. ์ฆ‰ ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ๊ฐ„์˜ ๊ต๋ฅ˜์—์„œ ๋งŽ์ด ์‚ฌ์šฉ๋œ๋‹ค. ํด๋ผ์ด์–ธํŠธ๋Š” ์„œ๋ฒ„์—๊ฒŒ ์ฒ˜๋ฆฌํ•ด์•ผํ•  ๋‚ด์šฉ์„ JSON ๋ฐ์ดํ„ฐ๋กœ ๋ณ€ํ™˜ํ•˜๊ณ  ์ „์†กํ•œ๋‹ค. ๊ทธ๋Ÿผ ์„œ๋ฒ„๋Š” ํด๋ผ์ด์–ธํŠธ๋กœ๋ถ€ํ„ฐ ์˜จ JSON ๋ฐ์ดํ„ฐ๋ฅผ ์„œ๋ฒ„์˜ ์ŠคํŽ™์— ๋งž๊ฒŒ ์žฌ๋ณ€ํ™˜ํ•œ๋‹ค. ์—ฌ๊ธฐ์„œ ๋ง ํ•˜๋Š” ์„œ๋ฒ„์˜ ์„œํŽ™์ด๋ž€ Java๋กœ ๊ตฌ์„ฑ๋œ ์„œ๋ฒ„์ธ์ง€, Python์œผ๋กœ ๊ตฌ์„ฑ๋œ ์„œ๋ฒ„์ธ์ง€๋ฅผ ๋œปํ•œ๋‹ค. ์›๋ž˜ JSON์ด๋ผ๋Š” ๊ฒƒ์€ JavaScript์—์„œ ํƒ„์ƒํ•œ ํ˜•์‹์ด๋ผ Js์˜ ๊ฐ์ฒด์™€ ๋งค์šฐ ๋น„์Šทํ•˜๋‹ค. Javascript Object VS JS.. 2021. 2. 20.