[javascript] javascript ๊ธฐ๋ณธ ๊ฐ๋ (feat. nodejs)
javascript ๊ธฐ๋ณธ ๊ฐ๋ (feat. nodejs)
์๋ฐ์คํฌ๋ฆฝํธ๋ก ์น ๊ฐ๋ฐ ๊ณต๋ถํ๋ฉด์ ์ ๋ฆฌํ ๋ด์ฉ ์ ๋๋ค !
์ค๋ฅ๊ฐ ์๋ค๋ฉด ๋๊ธ๋ก ๋จ๊ฒจ์ฃผ์ธ์ :)
1. VanilaJs, jQuery, Vue, React
2. Ajax, Fetch
3.nodejs
4. ๋ชจ๋
5. ๋น๋๊ธฐ ํ๋ก๊ทธ๋๋ฐ, promise
6. ์น ์๋ฒ ๋ง๋ค๊ธฐ(http, express)
1. VanilaJs, jQuery, Vue, React
- VanilaJs
ํ๋ ์์ํฌ ๋๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์ ์ฉ๋์ง ์์ ๊ธฐ๋ณธ ์๋ฐ์คํฌ๋ฆฝํธ ์ธ์ด
- jQuery
์๋ฐ์คํฌ๋ฆฝํธ์์ ์ฌ์ฉ๋๋ ํจ์์ ์ด๋ฆ์ ์งง๊ฒ ๋ฐ๊ฟ์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
- Vue
๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํ๋ ์์ํฌ์ ๊ธฐ๋ฅ์ ๋์์ ๊ฐ์ง ํ๋ ์์ํฌ
- React
์ปดํฌ๋ํธ ๊ธฐ๋ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
์ปดํฌ๋ํธ๋ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ์ ํจ์จ์ ์ด๋ค.
2. Ajax, Fetch
- Ajax
Ajax๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ์ฌ ๋น๋๊ธฐ์ ์ผ๋ก ์๋ฒ์ ํต์ ํ๋ ๊ธฐ์ ์ ๋๋ค.
XMLHttpRequest ๊ฐ์ฒด, fetch ํจ์, axios ํจํค์ง๋ฅผ ํตํด ์ฌ์ฉํ ์ ์์ต๋๋ค.
- Fetch
fetch ํจ์๋ฅผ ์ฌ์ฉํ์ฌ Ajax ํต์ ์ ํ ์ ์์ต๋๋ค.
axios ํจํค์ง(๋ผ์ด๋ธ๋ฌ๋ฆฌ)์ ๊ฐ์ด ์ธ๋ถ ํจํค์ง๋ฅผ ์ค์นํ์ง ์๊ณ ์ฌ์ฉํ ์ ์๋ค.
3. nodejs
nodejs๋ ํ๋ ์์ํฌ๊ฐ ์๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ์คํ ํ๊ฒฝ์ด๋ค.
4. ๋ชจ๋
์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ ํ ๊ฐ๋ฅผ ํ๋์ ๋ชจ๋์ด๋ผ๊ณ ํ๋ค.
์ด๋ฌํ ๋ชจ๋์ด ๋ชจ์ฌ์ ํ๋์ ํ๋ก๊ทธ๋จ์ด ๋๋ค.
- ์ง์ ์์ฑํ ๋ชจ๋ ์ฌ์ฉ
์ฐ์ A์์ B ๋ชจ๋์ ๊ฐ์ ธ์์ ์ฌ์ฉํ๋ค๊ณ ๊ฐ์ ํ์.
A์์ require('๋ค๋ฅธ ๋ชจ๋์ ์๋ ๊ฒฝ๋ก')๋ก ๊ฐ์ ๋๋ ํ ๋ฆฌ ์์ ์กด์ฌํ๋ ๋ชจ๋์ ๋ก๋ํ ์ ์๋ค.
๋ชจ๋์ ๋ก๋ํ๋ฉด ๊ฐ์ฒด 1๊ฐ๋ฅผ return ํ๋๋ฐ, ๊ฐ์ฒด๋ฅผ ๋ด์ ๋ณ์๋ฅผ ์ ์ธํ์ฌ ๊ฐ์ฒด๋ฅผ ๋ด์์ ์ฌ์ฉํ ์ ์๋ค.
์ ๋ง ์ฌ๊ธฐ๊น์ง๊ฐ ๋์ผ๊น?!
์๋๋ค.
B ๋ชจ๋์ ๋ด๋ถ ๋ด์ฉ์ ์ธ๋ถ๋ก ๊ณต๊ฐํด์ค์ผ ์ฌ์ฉ์ด ๊ฐ๋ฅํ๋ค.
B ๋ชจ๋์ ๋ง์ง๋ง์ exports.๋ชจ๋ ์ธ๋ถ๋ก ๊ณต๊ฐํ ์ด๋ฆ = ๋ชจ๋ ๋ด๋ถ์์ ์ด๋ฆ; ์ฝ๋๋ฅผ ์์ฑํด์ผํ๋ค.
์ธ๋ถ๋ก ๊ณต๊ฐํ๊ณ ์ถ์ ๋ชจ๋ ๊ฒ๋ค์ ๋ชจ์ ๊ฐ์ฒด๋ฅผ ์ธ๋ถ์ ๊ณต๊ฐํ ๋๋ module.exports = ๋ชจ๋ ๋ด๋ถ์์ ์ด๋ฆ; ์ ํ๋ฉด ๋๋ค.
- ์ด๋ฏธ ๋ง๋ค์ด์ง ๋ชจ๋ ์ฌ์ฉ(์ฝ์ด ๋ชจ๋, ์๋ ํํฐ ๋ชจ๋)
์ฝ์ด ๋ชจ๋์ node.js์์ ์ด๋ฏธ ํฌํจ๋ ๋ชจ๋๋ก require('๋ชจ๋ ์ด๋ฆ')๋ก ๋ชจ๋์ ๋ก๋ํ ์ ์๋ค.
์๋ ํํฐ ๋ชจ๋์ ์ 3์๊ฐ ๋ง๋ ๋ชจ๋๋ก npm install์ ํตํด ์ค์นํ๊ณ , require('๋ชจ๋ ์ด๋ฆ')๋ก ๋ชจ๋์ ๋ก๋ํ ์ ์๋ค.
5. ๋น๋๊ธฐ ํ๋ก๊ทธ๋๋ฐ, promise
๋น๋๊ธฐ ํ๋ก๊ทธ๋๋ฐ์ ํน์ ์์ ์ด ์๋ฃ ๋์์ ๋ ์คํํ ์ฝ๋ฐฑ์ ๋ฑ๋กํด๋๊ณ ๋ฐ๋ก ๋ค์ ์ฝ๋๋ก ์คํ์ ๋๊ธด๋ค.
nodejs๋ ๋น๋๊ธฐ ์คํ ํจ์๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ๊ถ์ฅ๋๊ณ , ๋น๋๊ธฐ ์คํ ๋ฐฉ๋ณ์ ์ฝ๋ฐฑ๊ณผ ์ด๋ฒคํธ๊ฐ ์๋ค.
- ์ฝ๋ฐฑ
ํน์ ์ด๋ฒคํธ(์์ฒญ)์ ๋ฐ์์ ๋ ์คํ(์๋ต)ํ๋ ๊ฒ์ด๋ค.
- ์ด๋ฒคํธ
const EventEmitter = require('events');๋ก ๋ชจ๋์ ๋ก๋ํ๊ณ const myEmitter = new EventEmitter();๋ก ํ๋์ ๊ฐ์ฒด๋ก ๋ง๋ค์ด ์ค ํ์ ์ฌ์ฉํ๋ค.
on์ ๊ฐ์ฒด ์ด๋ฆ.on('์ด๋ฒคํธ ์ด๋ฆ', () => { ์ฝ๋ฐฑํจ์; }); ๋ก ํด๋น ์ด๋ฒคํธ๊ฐ ๋ฐ์ ์ ์คํํ ์ฝ๋ฐฑ์ ์ค์ ํ๊ณ ,
emit์ ๊ฐ์ฒด ์ด๋ฆ.emit('์ด๋ฒคํธ ์ด๋ฆ'); ๋ก ์ด๋ฒคํธ๋ฅผ ๋ฐ์์ํค๋ ๊ฒ์ด๋ค.
- promise
fetch ํจ์๊ฐ ๋ฆฌํดํ๋ ๊ฐ์ฒด์ด๊ณ , ์ด๋ค ์์ ์ ๊ดํ pending, fulfilled, rejected์ 3๊ฐ์ง ์ํ ์ ๋ณด๋ฅผ ๊ฐ๊ณ ์๋ค.
์์ ์ด fulfilled๊ฐ ๋๋ฉด ์์ ์ ์ฑ๊ณต ๊ฒฐ๊ณผ๋ฅผ ๊ฐ๊ฒ ๋๊ณ , rejected๊ฐ ๋๋ฉด ์์ ์ ์คํจ ์ ๋ณด๋ ๊ฐ๊ฒ ๋๋ค.
6. ์น ์๋ฒ ๋ง๋ค๊ธฐ(http, express)
- http ์ฝ์ด ๋ชจ๋๋ก ์๋ฒ ๋ง๋ค๊ธฐ
const http = require('http');
const server = http.createServer((req, res) => {
res.end('HTTP ์๋ฒ๊ฐ ๋์ ์ค์
๋๋ค!\n');
});
server.listen(3000);
const http = require('http');๋ก http ๋ชจ๋์ ๋ถ๋ฌ์์ http ๋ณ์์ ํด๋์ค๋ฅผ ๋ด์์ค๋ค.
๋ค์์ผ๋ก const server = http.createServer((req, res) => { res.end(); });๋ฅผ ํตํด ์ฝ๋ฐฑ ํจ์๋ฅผ ๋ฑ๋กํ๋ค.
server.listen(3000);์ ํตํด localhost:3000์ผ๋ก ์๋ฒ๋ฅผ ์์ฒญํ๋ฉด ์๋ฒ๊ฐ ์๋ตํ๋๋ก ํ ์ ์๋ค.
- express ์๋ ํํฐ ๋ชจ๋ ํ๋ ์์ํฌ๋ก ์๋ฒ ๋ง๋ค๊ธฐ
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('Express ์๋ฒ๊ฐ ๋์ ์ค์
๋๋ค!');
});
app.listen(3000);
const express = require('express');๋ก express ๋ชจ๋์ ๋ถ๋ฌ์์ express ๋ณ์์ ํด๋์ค๋ฅผ ๋ด์์ค๋ค.
const app = express();๋ฅผ ํตํด app ๊ฐ์ฒด๋ฅผ ํ๋ ๋ง๋ค๊ณ , app.get('/', (req, res) => { res.end(); });๋ฅผ ํตํด ์ฝ๋ฐฑ ํจ์๋ฅผ ๋ฑ๋กํ๋ค.
app.listen(3000);์ ํตํด localhost:3000์ผ๋ก ์๋ฒ๋ฅผ ์์ฒญํ๋ฉด ์๋ฒ๊ฐ ์๋ตํ๋๋ก ํ ์ ์๋ค.
๋ค์ ํฌ์คํ ์์ ๋ง๋์ !