You Can Become A
๋ฆ๊ฒ ์์ํด๋ ๋๊ตฌ๋ ์ง ๋ ธ๋ ฅํ๋ฉด ๊ฐ๋ฐ์๊ฐ ๋ ์ ์์ด์ !
ajax
๐ 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 ์จ๋ํํฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ์ค์น๊ฐ ํ์ ํ๋ ๋ธ๋ผ์ฐ์ ์ ๋นํธ์ธ์ด๋ผ ์ค์น ..
[WEB] ๐ ์น ์์ผ (Socket) ์ ๋ฆฌ (์ญ์ฌ๋ถํฐ ์ฐจ๊ทผ์ฐจ๊ทผ)
โ์น ๊ฐ๋ฐ์ ์ฒ์ ๋ฐฐ์ฐ๊ธฐ ์์ํ๋ค๋ฉด ์๋ฒ์ ํด๋ผ์ด์ธํธ์ ํต์ ์ ๋ชจ๋ HTTP ํ๋กํ ์ฝ๋ง ์ด์ฉํด์ ์ด๋ฃจ์ด์ง๋ค๊ณ ์๊ฐํ ์ ์์ต๋๋ค. ํ์ง๋ง ์น ๊ฐ๋ฐ์ ํ๋ฉด์ ์ฑํ , ๊ฒ์, ์ฃผ์ ์ฐจํธ ๋ฑ์ ์ค์๊ฐ ํต์ ์ด ํ์ํ ์๋น์ค๋ฅผ ๊ตฌํํ๋ ค ํ๋ฉด HTTP ํ๋กํ ์ฝ์ด ์๋ ์น์์ผ ํ๋กํ ์ฝ์ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข๋ค๋ ์ด์ผ๊ธฐ๋ฅผ ํํ ์ฐพ์๋ณผ ์ ์์ต๋๋ค. HTTP์ ํ๊ณ [๋ฐฑ์๋ ๋ก๋๋งต] ๐ HTTP๋ ๋ฌด์์ผ๊น์? HTTP (Hyper Text Transfer Protocol) HTTP๋ ์๋ฒ์ ํด๋ผ์ด์ธํธ๊ฐ ์๋ก ๋ฐ์ดํฐ๋ฅผ ์ฃผ๊ณ ๋ฐ๊ธฐ ์ํด ์ฌ์ฉ๋๋ ํต์ ๊ท์ฝ์ ๋งํฉ๋๋ค. โ TCP/IP(Transmission Control Protocol / Internet Protocol)์ ์ด์ฉํ๋ฉฐ, ์ฌ.. inpa.tistory.com HTTP..
๐ ์ ์ด์ฟผ๋ฆฌ AJAX ์์ฒญ ๋ฌธ๋ฒ ์ ๋ฆฌ
์ ์ด์ฟผ๋ฆฌ AJAX ์์ฒญ ์ด๋ฒ ํฌ์คํ ์๋ ajax์ ๊ธฐ๋ณธ๊ฐ๋ ๊ฐ๋จ ์ ๋ฆฌ์ ์ ์ด์ฟผ๋ฆฌ ajax ๋ฉ์๋๋ฅผ ์ดํด๋ด ๋๋ค. AJAX ๋? AJAX๋ asynchronous Javascript and XML์ ๋๋ค. ์์ฆ์ XML๋ณด๋ค HTML์ด๋ JSON์ ๋ ๋ง์ด ์ฐ์ง๋ง, ๊ฐ๋ฐ ๋น์ xml์ด ์ฃผ๋ฅ๋ผ์ ์ด๋ฆ์ด ๊ทธ๋ ๊ฒ ๋ ๊ฒ์ ๋๋ค. ๊ธฐ์กด์ ์น์์๋ ํ ๋ฒ ํ์ด์ง๋ฅผ ๋ก๋ฉํ๋ฉด ๋ค๋ฅธ ํ์ด์ง๋ฅผ ๋ก๋ฉํ๊ธฐ ์ํด์ ๋งํฌ๋ฅผ ํ๊ณ ๋์ด๊ฐ์ผ ํ์ต๋๋ค. ๊ทธ๋ ๊ฒ ๋๋ฉด ํํ ๋งํ๋ ํ์ด์ง ๊น๋นก์์ด ๋ฐ์ํฉ๋๋ค. ๊ตฌ๊ธ ๊ฒ์์ ํด๋ณด๋ฉด, ํ์ด์ง๋ฅผ ์ ํํ์ง ์๊ณ ๋ ์์ ๊ฒ์์ด์ ๊ฒฐ๊ณผ๋ฅผ ๋ณด์ฌ์ค๋๋ค. Gmail๋ ๋ง์ฐฌ๊ฐ์ง์ฃ . ๋ฐ๋ก AJAX ๊ธฐ์ ์ ์ฌ์ฉํ์๊ธฐ ๋๋ฌธ์ ๋๋ค. ์ด์ฒ๋ผ ๋น๋๊ธฐ์ ์ผ๋ก ์๋ฒ์ ์์ฒญ์ ํ์ฌ ํ์ด์ง ์ ํ ์์ด๋ ์๋ก์ด ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ฌ ์ ์..
๐ Fetch API ์ผ๋ก AJAX ์์ฒญํ๊ธฐ
์๋ฐ์คํฌ๋ฆฝํธ AJAX ์์ฒญ ๋ฐฉ์ ์ ํต์ ์ผ๋ก XMLHttpRequest() ๊ฐ์ฒด๋ฅผ ์์ฑํ์ฌ ์์ฒญํ๋ ๋ฐฉ๋ฒ์ด ์์ง๋ง ๋ฌธ๋ฒ์ด ๋ํดํ๊ณ ๊ฐ๋ ์ฑ๋ ์ข์ง ์๋ค. ๋ฐ๋ผ์ ์ด๋ฒ์๊ฐ์๋ ์๋ฐ์คํฌ๋ฆฝํธ AJAX ํต์ ์ ์ต์ ๊ธฐ์ ์ธ fetch() ๋ฉ์๋ ์ฌ์ฉ๋ฒ์ ๋ํด ์์๋ณด๋ ์๊ฐ์ ๊ฐ์ ธ๋ณผ ์์ ์ด๋ค. XML Http Request ๋ฐฉ์ xmlhttprequest ๊ฐ์ฒด๋ฅผ ์ด์ฉํ ์ ํต์ ์ธ ์ด์ฐฝ๊ธฐ ๋น๋๊ธฐ ์๋ฒ ์์ฒญ ๋ฐฉ์์ด๋ค. ์ฑ๋ฅ์๋ ๋ฌธ์ ๋ ์์ง๋ง ์ฝ๋๊ฐ ๋ณต์กํ๊ณ ๊ฐ๋ ์ฑ์ด ์ข์ง ์๋ค๋ ๋จ์ ์ด ์์๋ค. var httpRequest = new XMLHttpRequest(); httpRequest.onreadystatechange = function () { if (httpRequest.readyState == XMLHttpReques..
๐ XMLHttpRequest ์ผ๋ก AJAX ์์ฒญํ๊ธฐ
AJAX (Asynchronous Javascript And XML) Ajax๋ ์น ํ์ด์ง ์ ์ฒด๋ฅผ ๋ค์ ๋ก๋ฉํ์ง ์๊ณ ๋, ์น ํ์ด์ง์ ์ผ๋ถ๋ถ๋ง์ ๊ฐฑ์ ํ ์ ์๊ฒ ํด์ค๋ค. Ajax๋ฅผ ์ด์ฉํ๋ฉด ๋ฐฑ๊ทธ๋ผ์ด๋ ์์ญ์์ ์๋ฒ์ ํต์ ํ์ฌ, ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ์น ํ์ด์ง์ ์ผ๋ถ๋ถ์๋ง ํ์ํ ์ ์๋ค. ajax๋ฅผ ํตํ ์น ๋ธ๋ผ์ฐ์ ์ ์น ์๋ฒ ๊ฐ์ ํต์ ์ ์ฐจ๋ ๋ค์๊ณผ ๊ฐ๋ค. ์ฌ์ฉ์์ ์ํ ์์ฒญ ์ด๋ฒคํธ๊ฐ ๋ฐ์ ์์ฒญ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ฉด ์ด๋ฒคํธ ํธ๋ค๋ฌ์ ์ํด ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ํธ์ถ ์๋ฐ์คํฌ๋ฆฝํธ๋ XMLHttpRequest ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ์ฌ ์๋ฒ๋ก ์์ฒญ์ ๋ณด๋ ์๋ฒ๋ ์ ๋ฌ๋ฐ์ XMLHttpRequest ๊ฐ์ฒด๋ฅผ ๊ฐ์ง๊ณ ์์ฒญ์ ์ฒ๋ฆฌ ์๋ฒ๋ ์ฒ๋ฆฌํ ๊ฒฐ๊ณผ๋ฅผ HTML, XML ๋๋ JSON ํํ์ ์๋ต ๋ฐ์ดํฐ๋ฅผ ์์ฑ ์น ๋ธ๋ผ์ฐ์ ์ ์ ๋ฌ ์ด๋ ์ ๋ฌ๋๋ ์..