์ธํŒŒ

You Can Become A

Progr

๋Šฆ๊ฒŒ ์‹œ์ž‘ํ•ด๋„ ๋ˆ„๊ตฌ๋“ ์ง€ ๋…ธ๋ ฅํ•˜๋ฉด ๊ฐœ๋ฐœ์ž๊ฐ€ ๋ ์ˆ˜ ์žˆ์–ด์š” !

ajax

๊ณต๋ถ€ํ•œ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•ฉ๋‹ˆ๋‹ค
JS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ชจ์Œ

๐Ÿ“š AXIOS ์„ค์น˜ & ํŠน์ง• & ๋ฌธ๋ฒ• ๐Ÿ’ฏ ์ •๋ฆฌ

Axios ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ Axios๋Š” ๋ธŒ๋ผ์šฐ์ €, Node.js๋ฅผ ์œ„ํ•œ Promise API๋ฅผ ํ™œ์šฉํ•˜๋Š” HTTP ๋น„๋™๊ธฐ ํ†ต์‹  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์•„๋‹ค. ์‰ฝ๊ฒŒ ๋งํ•ด์„œ ๋ฐฑ์—”๋“œ๋ž‘ ํ”„๋ก ํŠธ์—”๋“œ๋ž‘ ํ†ต์‹ ์„ ์‰ฝ๊ฒŒํ•˜๊ธฐ ์œ„ํ•ด Ajax์™€ ๋”๋ถˆ์–ด ์‚ฌ์šฉํ•œ๋‹ค. ์ด๋ฏธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—๋Š” fetch api๊ฐ€ ์žˆ์ง€๋งŒ, ํ”„๋ ˆ์ž„์›Œํฌ์—์„œ ajax๋ฅผ ๊ตฌํ˜„ํ• ๋• axios๋ฅผ ์“ฐ๋Š” ํŽธ์ด๋ผ๊ณ  ๋ณด๋ฉด ๋œ๋‹ค. Axios ํŠน์ง• ์šด์˜ ํ™˜๊ฒฝ์— ๋”ฐ๋ผ ๋ธŒ๋ผ์šฐ์ €์˜ XMLHttpRequest ๊ฐ์ฒด ๋˜๋Š” Node.js์˜ http api ์‚ฌ์šฉ Promise(ES6) API ์‚ฌ์šฉ ์š”์ฒญ๊ณผ ์‘๋‹ต ๋ฐ์ดํ„ฐ์˜ ๋ณ€ํ˜• HTTP ์š”์ฒญ ์ทจ์†Œ HTTP ์š”์ฒญ๊ณผ ์‘๋‹ต์„ JSON ํ˜•ํƒœ๋กœ ์ž๋™ ๋ณ€๊ฒฝ axios vs fetch axios fetch ์จ๋“œํŒŒํ‹ฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ์„ค์น˜๊ฐ€ ํ•„์š” ํ˜„๋Œ€ ๋ธŒ๋ผ์šฐ์ €์— ๋นŒํŠธ์ธ์ด๋ผ ์„ค์น˜ ..

category_image
์ธํŒŒ_
2022.07.18
13
WEB ์ง€์‹

[WEB] ๐ŸŒ ์›น ์†Œ์ผ“ (Socket) ์ •๋ฆฌ (์—ญ์‚ฌ๋ถ€ํ„ฐ ์ฐจ๊ทผ์ฐจ๊ทผ)

โ€‹์›น ๊ฐœ๋ฐœ์„ ์ฒ˜์Œ ๋ฐฐ์šฐ๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค๋ฉด ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ์˜ ํ†ต์‹ ์€ ๋ชจ๋‘ HTTP ํ”„๋กœํ† ์ฝœ๋งŒ ์ด์šฉํ•ด์„œ ์ด๋ฃจ์–ด์ง„๋‹ค๊ณ  ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์›น ๊ฐœ๋ฐœ์„ ํ•˜๋ฉด์„œ ์ฑ„ํŒ…, ๊ฒŒ์ž„, ์ฃผ์‹ ์ฐจํŠธ ๋“ฑ์˜ ์‹ค์‹œ๊ฐ„ ํ†ต์‹ ์ด ํ•„์š”ํ•œ ์„œ๋น„์Šค๋ฅผ ๊ตฌํ˜„ํ•˜๋ ค ํ•˜๋ฉด HTTP ํ”„๋กœํ† ์ฝœ์ด ์•„๋‹Œ ์›น์†Œ์ผ“ ํ”„๋กœํ† ์ฝœ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค๋Š” ์ด์•ผ๊ธฐ๋ฅผ ํ”ํžˆ ์ฐพ์•„๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. HTTP์˜ ํ•œ๊ณ„ [๋ฐฑ์—”๋“œ ๋กœ๋“œ๋งต] ๐ŸŒ HTTP๋Š” ๋ฌด์—‡์ผ๊นŒ์š”? HTTP (Hyper Text Transfer Protocol) HTTP๋Š” ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์„œ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ ๋ฐ›๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋Š” ํ†ต์‹  ๊ทœ์•ฝ์„ ๋งํ•ฉ๋‹ˆ๋‹ค. โ€‹ TCP/IP(Transmission Control Protocol / Internet Protocol)์„ ์ด์šฉํ•˜๋ฉฐ, ์‚ฌ.. inpa.tistory.com HTTP..

category_image
์ธํŒŒ_
2021.10.20
9
JQuery

๐Ÿ“š ์ œ์ด์ฟผ๋ฆฌ AJAX ์š”์ฒญ ๋ฌธ๋ฒ• ์ •๋ฆฌ

์ œ์ด์ฟผ๋ฆฌ AJAX ์š”์ฒญ ์ด๋ฒˆ ํฌ์ŠคํŒ…์—๋Š” ajax์˜ ๊ธฐ๋ณธ๊ฐœ๋… ๊ฐ„๋‹จ ์ •๋ฆฌ์™€ ์ œ์ด์ฟผ๋ฆฌ ajax ๋ฉ”์†Œ๋“œ๋ฅผ ์‚ดํŽด๋ด…๋‹ˆ๋‹ค. AJAX ๋ž€? AJAX๋ž€ asynchronous Javascript and XML์ž…๋‹ˆ๋‹ค. ์š”์ฆ˜์€ XML๋ณด๋‹ค HTML์ด๋‚˜ JSON์„ ๋” ๋งŽ์ด ์“ฐ์ง€๋งŒ, ๊ฐœ๋ฐœ ๋‹น์‹œ xml์ด ์ฃผ๋ฅ˜๋ผ์„œ ์ด๋ฆ„์ด ๊ทธ๋ ‡๊ฒŒ ๋œ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ธฐ์กด์˜ ์›น์—์„œ๋Š” ํ•œ ๋ฒˆ ํŽ˜์ด์ง€๋ฅผ ๋กœ๋”ฉํ•˜๋ฉด ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋ฅผ ๋กœ๋”ฉํ•˜๊ธฐ ์œ„ํ•ด์„œ ๋งํฌ๋ฅผ ํƒ€๊ณ  ๋„˜์–ด๊ฐ€์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡๊ฒŒ ๋˜๋ฉด ํ”ํžˆ ๋งํ•˜๋Š” ํŽ˜์ด์ง€ ๊นœ๋นก์ž„์ด ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ๊ตฌ๊ธ€ ๊ฒ€์ƒ‰์„ ํ•ด๋ณด๋ฉด, ํŽ˜์ด์ง€๋ฅผ ์ „ํ™˜ํ•˜์ง€ ์•Š๊ณ ๋„ ์˜ˆ์ƒ ๊ฒ€์ƒ‰์–ด์™€ ๊ฒฐ๊ณผ๋ฅผ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค. Gmail๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์ฃ . ๋ฐ”๋กœ AJAX ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•˜์˜€๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์ด์ฒ˜๋Ÿผ ๋น„๋™๊ธฐ์ ์œผ๋กœ ์„œ๋ฒ„์— ์š”์ฒญ์„ ํ•˜์—ฌ ํŽ˜์ด์ง€ ์ „ํ™˜ ์—†์ด๋„ ์ƒˆ๋กœ์šด ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ..

category_image
์ธํŒŒ_
2021.10.08
1
JavaScript (WEB)

๐ŸŒ Fetch API ์œผ๋กœ AJAX ์š”์ฒญํ•˜๊ธฐ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ AJAX ์š”์ฒญ ๋ฐฉ์‹ ์ •ํ†ต์ ์œผ๋กœ XMLHttpRequest() ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜์—ฌ ์š”์ฒญํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์ง€๋งŒ ๋ฌธ๋ฒ•์ด ๋‚œํ•ดํ•˜๊ณ  ๊ฐ€๋…์„ฑ๋„ ์ข‹์ง€ ์•Š๋‹ค. ๋”ฐ๋ผ์„œ ์ด๋ฒˆ์‹œ๊ฐ„์—๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ AJAX ํ†ต์‹ ์˜ ์ตœ์‹  ๊ธฐ์ˆ ์ธ fetch() ๋ฉ”์„œ๋“œ ์‚ฌ์šฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์ ธ๋ณผ ์˜ˆ์ •์ด๋‹ค. XML Http Request ๋ฐฉ์‹ xmlhttprequest ๊ฐ์ฒด๋ฅผ ์ด์šฉํ•œ ์ •ํ†ต์ ์ธ ์ดˆ์ฐฝ๊ธฐ ๋น„๋™๊ธฐ ์„œ๋ฒ„ ์š”์ฒญ ๋ฐฉ์‹์ด๋‹ค. ์„ฑ๋Šฅ์—๋Š” ๋ฌธ์ œ๋Š” ์—†์ง€๋งŒ ์ฝ”๋“œ๊ฐ€ ๋ณต์žกํ•˜๊ณ  ๊ฐ€๋…์„ฑ์ด ์ข‹์ง€ ์•Š๋‹ค๋Š” ๋‹จ์ ์ด ์žˆ์—ˆ๋‹ค. var httpRequest = new XMLHttpRequest(); httpRequest.onreadystatechange = function () { if (httpRequest.readyState == XMLHttpReques..

category_image
์ธํŒŒ_
2021.09.21
(0)
JavaScript (WEB)

๐ŸŒ XMLHttpRequest ์œผ๋กœ AJAX ์š”์ฒญํ•˜๊ธฐ

AJAX (Asynchronous Javascript And XML) Ajax๋Š” ์›น ํŽ˜์ด์ง€ ์ „์ฒด๋ฅผ ๋‹ค์‹œ ๋กœ๋”ฉํ•˜์ง€ ์•Š๊ณ ๋„, ์›น ํŽ˜์ด์ง€์˜ ์ผ๋ถ€๋ถ„๋งŒ์„ ๊ฐฑ์‹ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค€๋‹ค. Ajax๋ฅผ ์ด์šฉํ•˜๋ฉด ๋ฐฑ๊ทธ๋ผ์šด๋“œ ์˜์—ญ์—์„œ ์„œ๋ฒ„์™€ ํ†ต์‹ ํ•˜์—ฌ, ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ์›น ํŽ˜์ด์ง€์˜ ์ผ๋ถ€๋ถ„์—๋งŒ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ๋‹ค. ajax๋ฅผ ํ†ตํ•œ ์›น ๋ธŒ๋ผ์šฐ์ €์™€ ์›น ์„œ๋ฒ„ ๊ฐ„์˜ ํ†ต์‹  ์ ˆ์ฐจ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค. ์‚ฌ์šฉ์ž์— ์˜ํ•œ ์š”์ฒญ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒ ์š”์ฒญ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ์— ์˜ํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ํ˜ธ์ถœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” XMLHttpRequest ๊ฐ์ฒด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์„œ๋ฒ„๋กœ ์š”์ฒญ์„ ๋ณด๋ƒ„ ์„œ๋ฒ„๋Š” ์ „๋‹ฌ๋ฐ›์€ XMLHttpRequest ๊ฐ์ฒด๋ฅผ ๊ฐ€์ง€๊ณ  ์š”์ฒญ์„ ์ฒ˜๋ฆฌ ์„œ๋ฒ„๋Š” ์ฒ˜๋ฆฌํ•œ ๊ฒฐ๊ณผ๋ฅผ HTML, XML ๋˜๋Š” JSON ํ˜•ํƒœ์˜ ์‘๋‹ต ๋ฐ์ดํ„ฐ๋ฅผ ์ƒ์„ฑ ์›น ๋ธŒ๋ผ์šฐ์ €์— ์ „๋‹ฌ ์ด๋•Œ ์ „๋‹ฌ๋˜๋Š” ์‘..

category_image
์ธํŒŒ_
2021.09.21
(0)