์๋ฐ์คํฌ๋ฆฝํธ ์ด๋ฒคํธ ๋ฃจํ, ๋น๋๊ธฐ ํ๋ก๊ทธ๋๋ฐ์์์ ์ญํ , ๊ทธ๋ฆฌ๊ณ ๋ค์ํ ํ๊ฒฝ์์ ํจ์จ์ ์ธ ๋ ผ๋ธ๋กํน ์ฝ๋ ์คํ์ ๊ฐ๋ฅํ๊ฒ ํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์.
์๋ฐ์คํฌ๋ฆฝํธ ์ด๋ฒคํธ ๋ฃจํ ํํค์น๊ธฐ: ๋น๋๊ธฐ ์ฒ๋ฆฌ์ ์ดํด
์ฑ๊ธ ์ค๋ ๋ ํน์ฑ์ผ๋ก ์๋ ค์ง ์๋ฐ์คํฌ๋ฆฝํธ๋ ์ด๋ฒคํธ ๋ฃจํ ๋๋ถ์ ๋์์ฑ์ ํจ๊ณผ์ ์ผ๋ก ์ฒ๋ฆฌํ ์ ์์ต๋๋ค. ์ด ๋ฉ์ปค๋์ฆ์ ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ๋น๋๊ธฐ ์์ ์ ๊ด๋ฆฌํ๋ ๋ฐฉ์์ ์ดํดํ๋ ๋ฐ ๋งค์ฐ ์ค์ํ๋ฉฐ, ๋ธ๋ผ์ฐ์ ์ Node.js ํ๊ฒฝ ๋ชจ๋์์ ์๋ต์ฑ์ ๋ณด์ฅํ๊ณ ๋ธ๋กํน์ ๋ฐฉ์งํฉ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ์ด๋ฒคํธ ๋ฃจํ๋ ๋ฌด์์ธ๊ฐ?
์ด๋ฒคํธ ๋ฃจํ๋ ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์ฑ๊ธ ์ค๋ ๋์์๋ ๋ถ๊ตฌํ๊ณ ๋ ผ๋ธ๋กํน(non-blocking) ์์ ์ ์ํํ ์ ์๋๋ก ํ๋ ๋์์ฑ ๋ชจ๋ธ์ ๋๋ค. ์ด๋ฒคํธ ๋ฃจํ๋ ์ฝ ์คํ(Call Stack)๊ณผ ํ์คํฌ ํ(Task Queue, ๋๋ ์ฝ๋ฐฑ ํ)๋ฅผ ์ง์์ ์ผ๋ก ๊ฐ์ํ๋ฉฐ, ํ์คํฌ ํ์ ์์ ์ ์ฝ ์คํ์ผ๋ก ์ฎ๊ฒจ ์คํํฉ๋๋ค. ์ด๋ฅผ ํตํด ์๋ฐ์คํฌ๋ฆฝํธ๋ ์ฌ๋ฌ ์์ ์ ์์ํ ๋ ๊ฐ ์์ ์ด ์๋ฃ๋ ๋๊น์ง ๊ธฐ๋ค๋ฆฌ์ง ์์๋ ๋๋ฏ๋ก ๋ณ๋ ฌ ์ฒ๋ฆฌ์ ๊ฐ์ ํจ๊ณผ๋ฅผ ๋ ๋๋ค.
์ฃผ์ ๊ตฌ์ฑ ์์:
- ์ฝ ์คํ(Call Stack): ์๋ฐ์คํฌ๋ฆฝํธ์์ ํจ์ ์คํ์ ์ถ์ ํ๋ LIFO(Last-In, First-Out) ์๋ฃ ๊ตฌ์กฐ์ ๋๋ค. ํจ์๊ฐ ํธ์ถ๋๋ฉด ์ฝ ์คํ์ ์ถ๊ฐ(push)๋๊ณ , ํจ์ ์คํ์ด ์๋ฃ๋๋ฉด ์คํ์์ ์ ๊ฑฐ(pop)๋ฉ๋๋ค.
- ํ์คํฌ ํ(Task Queue, ์ฝ๋ฐฑ ํ): ์คํ ๋๊ธฐ ์ค์ธ ์ฝ๋ฐฑ ํจ์๋ค์ ํ์ ๋๋ค. ์ด ์ฝ๋ฐฑ๋ค์ ์ฃผ๋ก ํ์ด๋จธ, ๋คํธ์ํฌ ์์ฒญ, ์ฌ์ฉ์ ์ด๋ฒคํธ์ ๊ฐ์ ๋น๋๊ธฐ ์์ ๊ณผ ๊ด๋ จ์ด ์์ต๋๋ค.
- Web API (๋๋ Node.js API): ๋ธ๋ผ์ฐ์ (ํด๋ผ์ด์ธํธ ์ธก ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ฒฝ์ฐ)๋ Node.js(์๋ฒ ์ธก ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ฒฝ์ฐ)์์ ์ ๊ณตํ๋ ๋น๋๊ธฐ ์์
์ ์ฒ๋ฆฌํ๋ API์
๋๋ค. ์๋ฅผ ๋ค์ด ๋ธ๋ผ์ฐ์ ์์๋
setTimeout,XMLHttpRequest(๋๋ Fetch API), DOM ์ด๋ฒคํธ ๋ฆฌ์ค๋๊ฐ ์์ผ๋ฉฐ, Node.js์์๋ ํ์ผ ์์คํ ์์ ์ด๋ ๋คํธ์ํฌ ์์ฒญ์ด ์์ต๋๋ค. - ์ด๋ฒคํธ ๋ฃจํ(The Event Loop): ์ฝ ์คํ์ด ๋น์ด ์๋์ง ์ง์์ ์ผ๋ก ํ์ธํ๋ ํต์ฌ ๊ตฌ์ฑ ์์์ ๋๋ค. ์ฝ ์คํ์ด ๋น์ด ์๊ณ ํ์คํฌ ํ์ ์์ ์ด ์๋ค๋ฉด, ์ด๋ฒคํธ ๋ฃจํ๋ ํ์คํฌ ํ์ ์ฒซ ๋ฒ์งธ ์์ ์ ์ฝ ์คํ์ผ๋ก ์ฎ๊ฒจ ์คํํฉ๋๋ค.
- ๋ง์ดํฌ๋กํ์คํฌ ํ(Microtask Queue): ์ผ๋ฐ ํ์คํฌ๋ณด๋ค ์ฐ์ ์์๊ฐ ๋์ ๋ง์ดํฌ๋กํ์คํฌ๋ฅผ ์ํ ํน๋ณํ ํ์ ๋๋ค. ๋ง์ดํฌ๋กํ์คํฌ๋ ์ฃผ๋ก ํ๋ก๋ฏธ์ค(Promises)์ MutationObserver์ ๊ด๋ จ์ด ์์ต๋๋ค.
์ด๋ฒคํธ ๋ฃจํ ์๋ ๋ฐฉ์: ๋จ๊ณ๋ณ ์ค๋ช
- ์ฝ๋ ์คํ: ์๋ฐ์คํฌ๋ฆฝํธ๋ ์ฝ๋๋ฅผ ์คํํ๊ธฐ ์์ํ๋ฉฐ, ํจ์๊ฐ ํธ์ถ๋ ๋๋ง๋ค ์ฝ ์คํ์ ์ถ๊ฐํฉ๋๋ค.
- ๋น๋๊ธฐ ์์
: ๋น๋๊ธฐ ์์
(์:
setTimeout,fetch)์ ๋ง๋๋ฉด Web API(๋๋ Node.js API)์ ์์ํฉ๋๋ค. - Web API ์ฒ๋ฆฌ: Web API(๋๋ Node.js API)๋ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ๋น๋๊ธฐ ์์ ์ ์ฒ๋ฆฌํฉ๋๋ค. ์ด ๊ณผ์ ์ ์๋ฐ์คํฌ๋ฆฝํธ ์ค๋ ๋๋ฅผ ์ฐจ๋จํ์ง ์์ต๋๋ค.
- ์ฝ๋ฐฑ ๋ฐฐ์น: ๋น๋๊ธฐ ์์ ์ด ์๋ฃ๋๋ฉด, Web API(๋๋ Node.js API)๋ ํด๋น ์ฝ๋ฐฑ ํจ์๋ฅผ ํ์คํฌ ํ์ ๋ฐฐ์นํฉ๋๋ค.
- ์ด๋ฒคํธ ๋ฃจํ ๊ฐ์: ์ด๋ฒคํธ ๋ฃจํ๋ ์ฝ ์คํ๊ณผ ํ์คํฌ ํ๋ฅผ ์ง์์ ์ผ๋ก ๊ฐ์ํฉ๋๋ค.
- ์ฝ ์คํ ๋น์ด ์๋์ง ํ์ธ: ์ด๋ฒคํธ ๋ฃจํ๋ ์ฝ ์คํ์ด ๋น์ด ์๋์ง ํ์ธํฉ๋๋ค.
- ํ์คํฌ ์ด๋: ์ฝ ์คํ์ด ๋น์ด ์๊ณ ํ์คํฌ ํ์ ์์ ์ด ์์ผ๋ฉด, ์ด๋ฒคํธ ๋ฃจํ๋ ํ์คํฌ ํ์ ์ฒซ ๋ฒ์งธ ์์ ์ ์ฝ ์คํ์ผ๋ก ์ด๋์ํต๋๋ค.
- ์ฝ๋ฐฑ ์คํ: ์ด์ ์ฝ๋ฐฑ ํจ์๊ฐ ์คํ๋๋ฉฐ, ์ด ํจ์๋ ๋ค์ ์ฝ ์คํ์ ๋ ๋ง์ ํจ์๋ฅผ ์ถ๊ฐํ ์ ์์ต๋๋ค.
- ๋ง์ดํฌ๋กํ์คํฌ ์คํ: ํ๋์ ํ์คํฌ(๋๋ ๋๊ธฐ์ ์ธ ํ์คํฌ ์ํ์ค)๊ฐ ๋๋๊ณ ์ฝ ์คํ์ด ๋น์์ง๋ฉด, ์ด๋ฒคํธ ๋ฃจํ๋ ๋ง์ดํฌ๋กํ์คํฌ ํ๋ฅผ ํ์ธํฉ๋๋ค. ๋ง์ดํฌ๋กํ์คํฌ๊ฐ ์๋ค๋ฉด, ๋ง์ดํฌ๋กํ์คํฌ ํ๊ฐ ๋น ๋๊น์ง ์์ฐจ์ ์ผ๋ก ๋ชจ๋ ์คํํฉ๋๋ค. ๊ทธ ํ์์ผ ์ด๋ฒคํธ ๋ฃจํ๋ ํ์คํฌ ํ์์ ๋ค์ ํ์คํฌ๋ฅผ ๊ฐ์ ธ์ต๋๋ค.
- ๋ฐ๋ณต: ์ด ๊ณผ์ ์ ๊ณ์ ๋ฐ๋ณต๋์ด ๋น๋๊ธฐ ์์ ์ด ๋ฉ์ธ ์ค๋ ๋๋ฅผ ์ฐจ๋จํ์ง ์๊ณ ํจ์จ์ ์ผ๋ก ์ฒ๋ฆฌ๋๋๋ก ๋ณด์ฅํฉ๋๋ค.
์ค์ฉ์ ์ธ ์์ : ์ด๋ฒคํธ ๋ฃจํ ๋์ ์ดํด๋ณด๊ธฐ
์์ 1: setTimeout
์ด ์์ ๋ setTimeout์ด ์ด๋ฒคํธ ๋ฃจํ๋ฅผ ์ฌ์ฉํ์ฌ ์ง์ ๋ ์ง์ฐ ์๊ฐ ํ์ ์ฝ๋ฐฑ ํจ์๋ฅผ ์คํํ๋ ๋ฐฉ๋ฒ์ ๋ณด์ฌ์ค๋๋ค.
console.log('Start');
setTimeout(() => {
console.log('Timeout Callback');
}, 0);
console.log('End');
์ถ๋ ฅ:
Start End Timeout Callback
์ค๋ช :
console.log('Start')๊ฐ ์ฆ์ ์คํ๋๊ณ ์ถ๋ ฅ๋ฉ๋๋ค.setTimeout์ด ํธ์ถ๋ฉ๋๋ค. ์ฝ๋ฐฑ ํจ์์ ์ง์ฐ ์๊ฐ(0ms)์ด Web API๋ก ์ ๋ฌ๋ฉ๋๋ค.- Web API๋ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ํ์ด๋จธ๋ฅผ ์์ํฉ๋๋ค.
console.log('End')๊ฐ ์ฆ์ ์คํ๋๊ณ ์ถ๋ ฅ๋ฉ๋๋ค.- ํ์ด๋จธ๊ฐ ์๋ฃ๋๋ฉด(์ง์ฐ ์๊ฐ์ด 0ms๋ผ๋), ์ฝ๋ฐฑ ํจ์๋ ํ์คํฌ ํ์ ๋ฐฐ์น๋ฉ๋๋ค.
- ์ด๋ฒคํธ ๋ฃจํ๋ ์ฝ ์คํ์ด ๋น์ด ์๋์ง ํ์ธํฉ๋๋ค. ๋น์ด ์์ผ๋ฏ๋ก ์ฝ๋ฐฑ ํจ์๋ฅผ ํ์คํฌ ํ์์ ์ฝ ์คํ์ผ๋ก ์ด๋์ํต๋๋ค.
- ์ฝ๋ฐฑ ํจ์
console.log('Timeout Callback')์ด ์คํ๋๊ณ ์ถ๋ ฅ๋ฉ๋๋ค.
์์ 2: Fetch API (ํ๋ก๋ฏธ์ค)
์ด ์์ ๋ Fetch API๊ฐ ํ๋ก๋ฏธ์ค์ ๋ง์ดํฌ๋กํ์คํฌ ํ๋ฅผ ์ฌ์ฉํ์ฌ ๋น๋๊ธฐ ๋คํธ์ํฌ ์์ฒญ์ ์ฒ๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ๋ณด์ฌ์ค๋๋ค.
console.log('Requesting data...');
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(data => console.log('Data received:', data))
.catch(error => console.error('Error:', error));
console.log('Request sent!');
(์์ฒญ์ด ์ฑ๊ณตํ๋ค๊ณ ๊ฐ์ ) ๊ฐ๋ฅํ ์ถ๋ ฅ:
Requesting data...
Request sent!
Data received: { userId: 1, id: 1, title: 'delectus aut autem', completed: false }
์ค๋ช :
console.log('Requesting data...')๊ฐ ์คํ๋ฉ๋๋ค.fetch๊ฐ ํธ์ถ๋ฉ๋๋ค. ์์ฒญ์ด ์๋ฒ๋ก ์ ์ก๋ฉ๋๋ค(Web API์ ์ํด ์ฒ๋ฆฌ๋จ).console.log('Request sent!')๊ฐ ์คํ๋ฉ๋๋ค.- ์๋ฒ๊ฐ ์๋ตํ๋ฉด, (ํ๋ก๋ฏธ์ค๊ฐ ์ฌ์ฉ๋์๊ธฐ ๋๋ฌธ์)
then์ฝ๋ฐฑ๋ค์ด ๋ง์ดํฌ๋กํ์คํฌ ํ์ ๋ฐฐ์น๋ฉ๋๋ค. - ํ์ฌ ํ์คํฌ(์คํฌ๋ฆฝํธ์ ๋๊ธฐ์ ๋ถ๋ถ)๊ฐ ๋๋๋ฉด ์ด๋ฒคํธ ๋ฃจํ๋ ๋ง์ดํฌ๋กํ์คํฌ ํ๋ฅผ ํ์ธํฉ๋๋ค.
- ์ฒซ ๋ฒ์งธ
then์ฝ๋ฐฑ(response => response.json())์ด ์คํ๋์ด JSON ์๋ต์ ํ์ฑํฉ๋๋ค. - ๋ ๋ฒ์งธ
then์ฝ๋ฐฑ(data => console.log('Data received:', data))์ด ์คํ๋์ด ์์ ๋ ๋ฐ์ดํฐ๋ฅผ ๋ก๊น ํฉ๋๋ค. - ์์ฒญ ์ค ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ฉด
catch์ฝ๋ฐฑ์ด ๋์ ์คํ๋ฉ๋๋ค.
์์ 3: Node.js ํ์ผ ์์คํ
์ด ์์ ๋ Node.js์์์ ๋น๋๊ธฐ ํ์ผ ์ฝ๊ธฐ๋ฅผ ๋ณด์ฌ์ค๋๋ค.
const fs = require('fs');
console.log('Reading file...');
fs.readFile('example.txt', 'utf8', (err, data) => {
if (err) {
console.error('Error reading file:', err);
return;
}
console.log('File content:', data);
});
console.log('File read operation initiated.');
('example.txt' ํ์ผ์ด ์กด์ฌํ๊ณ 'Hello, world!'๋ฅผ ํฌํจํ๋ค๊ณ ๊ฐ์ ) ๊ฐ๋ฅํ ์ถ๋ ฅ:
Reading file... File read operation initiated. File content: Hello, world!
์ค๋ช :
console.log('Reading file...')๊ฐ ์คํ๋ฉ๋๋ค.fs.readFile์ด ํธ์ถ๋ฉ๋๋ค. ํ์ผ ์ฝ๊ธฐ ์์ ์ Node.js API์ ์์๋ฉ๋๋ค.console.log('File read operation initiated.')๊ฐ ์คํ๋ฉ๋๋ค.- ํ์ผ ์ฝ๊ธฐ๊ฐ ์๋ฃ๋๋ฉด ์ฝ๋ฐฑ ํจ์๊ฐ ํ์คํฌ ํ์ ๋ฐฐ์น๋ฉ๋๋ค.
- ์ด๋ฒคํธ ๋ฃจํ๋ ์ฝ๋ฐฑ์ ํ์คํฌ ํ์์ ์ฝ ์คํ์ผ๋ก ์ด๋์ํต๋๋ค.
- ์ฝ๋ฐฑ ํจ์(
(err, data) => { ... })๊ฐ ์คํ๋๊ณ ํ์ผ ๋ด์ฉ์ด ์ฝ์์ ๋ก๊น ๋ฉ๋๋ค.
๋ง์ดํฌ๋กํ์คํฌ ํ ์ดํดํ๊ธฐ
๋ง์ดํฌ๋กํ์คํฌ ํ๋ ์ด๋ฒคํธ ๋ฃจํ์ ์ค์ํ ๋ถ๋ถ์ ๋๋ค. ํ์ฌ ํ์คํฌ๊ฐ ์๋ฃ๋ ์งํ, ๊ทธ๋ฆฌ๊ณ ์ด๋ฒคํธ ๋ฃจํ๊ฐ ํ์คํฌ ํ์์ ๋ค์ ํ์คํฌ๋ฅผ ๊ฐ์ ธ์ค๊ธฐ ์ ์ ์คํ๋์ด์ผ ํ๋ ๋จ๊ธฐ ์์ ์ ์ฒ๋ฆฌํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. ํ๋ก๋ฏธ์ค์ MutationObserver ์ฝ๋ฐฑ์ ์ผ๋ฐ์ ์ผ๋ก ๋ง์ดํฌ๋กํ์คํฌ ํ์ ๋ฐฐ์น๋ฉ๋๋ค.
์ฃผ์ ํน์ง:
- ๋์ ์ฐ์ ์์: ๋ง์ดํฌ๋กํ์คํฌ๋ ํ์คํฌ ํ์ ์ผ๋ฐ ํ์คํฌ๋ณด๋ค ์ฐ์ ์์๊ฐ ๋์ต๋๋ค.
- ์ฆ์ ์คํ: ๋ง์ดํฌ๋กํ์คํฌ๋ ํ์ฌ ํ์คํฌ ์งํ, ๊ทธ๋ฆฌ๊ณ ์ด๋ฒคํธ ๋ฃจํ๊ฐ ํ์คํฌ ํ์์ ๋ค์ ํ์คํฌ๋ฅผ ์ฒ๋ฆฌํ๊ธฐ ์ ์ ์คํ๋ฉ๋๋ค.
- ํ ์์ง: ์ด๋ฒคํธ ๋ฃจํ๋ ํ์คํฌ ํ๋ก ๋์ด๊ฐ๊ธฐ ์ ์ ๋ง์ดํฌ๋กํ์คํฌ ํ๊ฐ ๋น ๋๊น์ง ๊ณ์ํด์ ๋ง์ดํฌ๋กํ์คํฌ๋ฅผ ์คํํฉ๋๋ค. ์ด๋ ๋ง์ดํฌ๋กํ์คํฌ์ ๊ธฐ์(starvation) ์ํ๋ฅผ ๋ฐฉ์งํ๊ณ ์ ์ํ๊ฒ ์ฒ๋ฆฌ๋๋๋ก ๋ณด์ฅํฉ๋๋ค.
์์ : ํ๋ก๋ฏธ์ค ํด๊ฒฐ
console.log('Start');
Promise.resolve().then(() => {
console.log('Promise resolved');
});
console.log('End');
์ถ๋ ฅ:
Start End Promise resolved
์ค๋ช :
console.log('Start')๊ฐ ์คํ๋ฉ๋๋ค.Promise.resolve().then(...)์ ํด๊ฒฐ๋(resolved) ํ๋ก๋ฏธ์ค๋ฅผ ์์ฑํฉ๋๋ค.then์ฝ๋ฐฑ์ ๋ง์ดํฌ๋กํ์คํฌ ํ์ ๋ฐฐ์น๋ฉ๋๋ค.console.log('End')๊ฐ ์คํ๋ฉ๋๋ค.- ํ์ฌ ํ์คํฌ(์คํฌ๋ฆฝํธ์ ๋๊ธฐ์ ๋ถ๋ถ)๊ฐ ์๋ฃ๋ ํ, ์ด๋ฒคํธ ๋ฃจํ๋ ๋ง์ดํฌ๋กํ์คํฌ ํ๋ฅผ ํ์ธํฉ๋๋ค.
then์ฝ๋ฐฑ(console.log('Promise resolved'))์ด ์คํ๋์ด ์ฝ์์ ๋ฉ์์ง๋ฅผ ๋ก๊น ํฉ๋๋ค.
Async/Await: ํ๋ก๋ฏธ์ค๋ฅผ ์ํ ๋ฌธ๋ฒ์ ์คํ
async์ await ํค์๋๋ ํ๋ก๋ฏธ์ค๋ฅผ ๋ ๊ฐ๋
์ฑ ์๊ณ ๋๊ธฐ์ ์ผ๋ก ๋ณด์ด๋ ๋ฐฉ์์ผ๋ก ๋ค๋ฃฐ ์ ์๊ฒ ํด์ค๋๋ค. ์ด๊ฒ๋ค์ ๋ณธ์ง์ ์ผ๋ก ํ๋ก๋ฏธ์ค์ ๋ํ ๋ฌธ๋ฒ์ ์คํ(syntactic sugar)์ด๋ฉฐ ์ด๋ฒคํธ ๋ฃจํ์ ๊ธฐ๋ณธ ๋์์ ๋ณ๊ฒฝํ์ง๋ ์์ต๋๋ค.
์์ : Async/Await ์ฌ์ฉํ๊ธฐ
async function fetchData() {
console.log('Requesting data...');
try {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const data = await response.json();
console.log('Data received:', data);
} catch (error) {
console.error('Error:', error);
}
console.log('Function completed');
}
fetchData();
console.log('Fetch Data function called');
(์์ฒญ์ด ์ฑ๊ณตํ๋ค๊ณ ๊ฐ์ ) ๊ฐ๋ฅํ ์ถ๋ ฅ:
Requesting data...
Fetch Data function called
Data received: { userId: 1, id: 1, title: 'delectus aut autem', completed: false }
Function completed
์ค๋ช :
fetchData()๊ฐ ํธ์ถ๋ฉ๋๋ค.console.log('Requesting data...')๊ฐ ์คํ๋ฉ๋๋ค.await fetch(...)๋fetch๊ฐ ๋ฐํํ ํ๋ก๋ฏธ์ค๊ฐ ํด๊ฒฐ๋ ๋๊น์งfetchDataํจ์์ ์คํ์ ์ผ์ ์ค์งํฉ๋๋ค. ์ ์ด๊ถ์ ์ด๋ฒคํธ ๋ฃจํ๋ก ๋์ด๊ฐ๋๋ค.console.log('Fetch Data function called')๊ฐ ์คํ๋ฉ๋๋ค.fetchํ๋ก๋ฏธ์ค๊ฐ ํด๊ฒฐ๋๋ฉดfetchData์ ์คํ์ด ์ฌ๊ฐ๋ฉ๋๋ค.response.json()์ด ํธ์ถ๋๊ณ ,awaitํค์๋๋ JSON ํ์ฑ์ด ์๋ฃ๋ ๋๊น์ง ๋ค์ ์คํ์ ์ผ์ ์ค์งํฉ๋๋ค.console.log('Data received:', data)๊ฐ ์คํ๋ฉ๋๋ค.console.log('Function completed')๊ฐ ์คํ๋ฉ๋๋ค.- ์์ฒญ ์ค ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ฉด
catch๋ธ๋ก์ด ์คํ๋ฉ๋๋ค.
๋ค์ํ ํ๊ฒฝ์์์ ์ด๋ฒคํธ ๋ฃจํ: ๋ธ๋ผ์ฐ์ vs. Node.js
์ด๋ฒคํธ ๋ฃจํ๋ ๋ธ๋ผ์ฐ์ ์ Node.js ํ๊ฒฝ ๋ชจ๋์์ ๊ธฐ๋ณธ์ ์ธ ๊ฐ๋ ์ด์ง๋ง, ๊ตฌํ๊ณผ ์ฌ์ฉ ๊ฐ๋ฅํ API์๋ ๋ช ๊ฐ์ง ์ฃผ์ ์ฐจ์ด์ ์ด ์์ต๋๋ค.
๋ธ๋ผ์ฐ์ ํ๊ฒฝ
- Web API: ๋ธ๋ผ์ฐ์ ๋
setTimeout,XMLHttpRequest(๋๋ Fetch API), DOM ์ด๋ฒคํธ ๋ฆฌ์ค๋(์:addEventListener), ์น ์์ปค(Web Workers)์ ๊ฐ์ Web API๋ฅผ ์ ๊ณตํฉ๋๋ค. - ์ฌ์ฉ์ ์ํธ์์ฉ: ์ด๋ฒคํธ ๋ฃจํ๋ ํด๋ฆญ, ํค ์ ๋ ฅ, ๋ง์ฐ์ค ์์ง์๊ณผ ๊ฐ์ ์ฌ์ฉ์ ์ํธ์์ฉ์ ๋ฉ์ธ ์ค๋ ๋๋ฅผ ์ฐจ๋จํ์ง ์๊ณ ์ฒ๋ฆฌํ๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค.
- ๋ ๋๋ง: ์ด๋ฒคํธ ๋ฃจํ๋ ๋ํ ์ฌ์ฉ์ ์ธํฐํ์ด์ค ๋ ๋๋ง์ ์ฒ๋ฆฌํ์ฌ ๋ธ๋ผ์ฐ์ ์ ์๋ต์ฑ์ ์ ์งํฉ๋๋ค.
Node.js ํ๊ฒฝ
- Node.js API: Node.js๋ ํ์ผ ์์คํ
์์
(
fs.readFile), ๋คํธ์ํฌ ์์ฒญ(http๋๋https์ ๊ฐ์ ๋ชจ๋ ์ฌ์ฉ), ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ํธ์์ฉ๊ณผ ๊ฐ์ ๋น๋๊ธฐ ์์ ์ ์ํ ์์ฒด API ์ธํธ๋ฅผ ์ ๊ณตํฉ๋๋ค. - I/O ์์ : ์ด๋ฒคํธ ๋ฃจํ๋ Node.js์์ I/O ์์ ์ ์ฒ๋ฆฌํ๋ ๋ฐ ํนํ ์ค์ํฉ๋๋ค. ์ด๋ฌํ ์์ ์ ๋น๋๊ธฐ์ ์ผ๋ก ์ฒ๋ฆฌํ์ง ์์ผ๋ฉด ์๊ฐ์ด ๋ง์ด ๊ฑธ๋ฆฌ๊ณ ๋ธ๋กํน๋ ์ ์๊ธฐ ๋๋ฌธ์ ๋๋ค.
- Libuv: Node.js๋ ์ด๋ฒคํธ ๋ฃจํ์ ๋น๋๊ธฐ I/O ์์
์ ๊ด๋ฆฌํ๊ธฐ ์ํด
libuv๋ผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํฉ๋๋ค.
์ด๋ฒคํธ ๋ฃจํ ์์ ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
- ๋ฉ์ธ ์ค๋ ๋ ๋ธ๋กํน ํผํ๊ธฐ: ์ค๋ ์คํ๋๋ ๋๊ธฐ ์์ ์ ๋ฉ์ธ ์ค๋ ๋๋ฅผ ์ฐจ๋จํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ์๋ต์ ๋ฉ์ถ๊ฒ ํ ์ ์์ต๋๋ค. ๊ฐ๋ฅํ๋ฉด ํญ์ ๋น๋๊ธฐ ์์ ์ ์ฌ์ฉํ์ธ์. CPU ์ง์ฝ์ ์ธ ์์ ์๋ ๋ธ๋ผ์ฐ์ ์ ์น ์์ปค๋ Node.js์ ์์ปค ์ค๋ ๋๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์.
- ์ฝ๋ฐฑ ํจ์ ์ต์ ํ: ์ฝ๋ฐฑ ํจ์๋ฅผ ์งง๊ณ ํจ์จ์ ์ผ๋ก ์ ์งํ์ฌ ์คํ ์๊ฐ์ ์ต์ํํ์ธ์. ์ฝ๋ฐฑ ํจ์๊ฐ ๋ณต์กํ ์์ ์ ์ํํ๋ ๊ฒฝ์ฐ, ๋ ์๊ณ ๊ด๋ฆฌํ๊ธฐ ์ฌ์ด ๋จ์๋ก ๋๋๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์.
- ์ค๋ฅ๋ฅผ ์ ์ ํ๊ฒ ์ฒ๋ฆฌํ๊ธฐ: ๋น๋๊ธฐ ์์
์์ ๋ฐ์ํ๋ ์ค๋ฅ๋ฅผ ํญ์ ์ฒ๋ฆฌํ์ฌ ์ฒ๋ฆฌ๋์ง ์์ ์์ธ๋ก ์ธํด ์ ํ๋ฆฌ์ผ์ด์
์ด ์ถฉ๋ํ๋ ๊ฒ์ ๋ฐฉ์งํ์ธ์.
try...catch๋ธ๋ก์ด๋ ํ๋ก๋ฏธ์ค์catchํธ๋ค๋ฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ค๋ฅ๋ฅผ ์ฐ์ํ๊ฒ ์ฒ๋ฆฌํ์ธ์. - ํ๋ก๋ฏธ์ค์ Async/Await ์ฌ์ฉํ๊ธฐ: ํ๋ก๋ฏธ์ค์ async/await๋ ์ ํต์ ์ธ ์ฝ๋ฐฑ ํจ์์ ๋นํด ๋น๋๊ธฐ ์ฝ๋๋ฅผ ๋ ๊ตฌ์กฐ์ ์ด๊ณ ๊ฐ๋ ์ฑ ์๊ฒ ๋ค๋ฃฐ ์ ์๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค. ๋ํ ์ค๋ฅ ์ฒ๋ฆฌ ๋ฐ ๋น๋๊ธฐ ์ ์ด ํ๋ฆ ๊ด๋ฆฌ๋ฅผ ๋ ์ฝ๊ฒ ๋ง๋ญ๋๋ค.
- ๋ง์ดํฌ๋กํ์คํฌ ํ์ ์ ์ํ๊ธฐ: ๋ง์ดํฌ๋กํ์คํฌ ํ์ ๋์ ๋ฐฉ์๊ณผ ๊ทธ๊ฒ์ด ๋น๋๊ธฐ ์์ ์ ์คํ ์์์ ์ด๋ป๊ฒ ์ํฅ์ ๋ฏธ์น๋์ง ์ดํดํ์ธ์. ์ง๋์น๊ฒ ๊ธธ๊ฑฐ๋ ๋ณต์กํ ๋ง์ดํฌ๋กํ์คํฌ๋ฅผ ์ถ๊ฐํ๋ฉด ํ์คํฌ ํ์ ์ผ๋ฐ ํ์คํฌ ์คํ์ ์ง์ฐ์ํฌ ์ ์์ผ๋ฏ๋ก ํผํ์ธ์.
- ์คํธ๋ฆผ ์ฌ์ฉ ๊ณ ๋ คํ๊ธฐ: ๋์ฉ๋ ํ์ผ์ด๋ ๋ฐ์ดํฐ ์คํธ๋ฆผ์ ๊ฒฝ์ฐ, ์ ์ฒด ํ์ผ์ ํ ๋ฒ์ ๋ฉ๋ชจ๋ฆฌ์ ๋ก๋ํ์ง ์๋๋ก ์คํธ๋ฆผ์ ์ฌ์ฉํ์ฌ ์ฒ๋ฆฌํ์ธ์.
์ผ๋ฐ์ ์ธ ํจ์ ๊ณผ ์ด๋ฅผ ํผํ๋ ๋ฐฉ๋ฒ
- ์ฝ๋ฐฑ ์ง์ฅ(Callback Hell): ๊น๊ฒ ์ค์ฒฉ๋ ์ฝ๋ฐฑ ํจ์๋ ์ฝ๊ณ ์ ์ง๋ณด์ํ๊ธฐ ์ด๋ ค์์ง ์ ์์ต๋๋ค. ํ๋ก๋ฏธ์ค๋ async/await๋ฅผ ์ฌ์ฉํ์ฌ ์ฝ๋ฐฑ ์ง์ฅ์ ํผํ๊ณ ์ฝ๋ ๊ฐ๋ ์ฑ์ ํฅ์์ํค์ธ์.
- ์๊ณ (Zalgo): ์๊ณ ๋ ์ ๋ ฅ์ ๋ฐ๋ผ ๋๊ธฐ์ ์ผ๋ก ๋๋ ๋น๋๊ธฐ์ ์ผ๋ก ์คํ๋ ์ ์๋ ์ฝ๋๋ฅผ ์๋ฏธํฉ๋๋ค. ์ด๋ฌํ ์์ธก ๋ถ๊ฐ๋ฅ์ฑ์ ์๊ธฐ์น ์์ ๋์๊ณผ ๋๋ฒ๊น ํ๊ธฐ ์ด๋ ค์ด ๋ฌธ์ ๋ก ์ด์ด์ง ์ ์์ต๋๋ค. ๋น๋๊ธฐ ์์ ์ ํญ์ ๋น๋๊ธฐ์ ์ผ๋ก ์คํ๋๋๋ก ๋ณด์ฅํ์ธ์.
- ๋ฉ๋ชจ๋ฆฌ ๋์(Memory Leaks): ์ฝ๋ฐฑ ํจ์ ๋ด์์ ๋ณ์๋ ๊ฐ์ฒด์ ๋ํ ์๋์น ์์ ์ฐธ์กฐ๋ ๊ฐ๋น์ง ์ปฌ๋ ์ ๋์์์ ์ ์ธ๋์ด ๋ฉ๋ชจ๋ฆฌ ๋์๋ก ์ด์ด์ง ์ ์์ต๋๋ค. ํด๋ก์ ์ ์ฃผ์ํ๊ณ ๋ถํ์ํ ์ฐธ์กฐ๋ฅผ ๋ง๋ค์ง ์๋๋ก ํ์ธ์.
- ๊ธฐ์ ์ํ(Starvation): ๋ง์ดํฌ๋กํ์คํฌ๊ฐ ๋ง์ดํฌ๋กํ์คํฌ ํ์ ๊ณ์ ์ถ๊ฐ๋๋ฉด ํ์คํฌ ํ์ ํ์คํฌ๊ฐ ์คํ๋์ง ๋ชปํ์ฌ ๊ธฐ์ ์ํ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค. ์ง๋์น๊ฒ ๊ธธ๊ฑฐ๋ ๋ณต์กํ ๋ง์ดํฌ๋กํ์คํฌ๋ ํผํ์ธ์.
- ์ฒ๋ฆฌ๋์ง ์์ ํ๋ก๋ฏธ์ค ๊ฑฐ๋ถ(Unhandled Promise Rejections): ํ๋ก๋ฏธ์ค๊ฐ ๊ฑฐ๋ถ๋์๋๋ฐ
catchํธ๋ค๋ฌ๊ฐ ์์ผ๋ฉด ๊ฑฐ๋ถ๊ฐ ์ฒ๋ฆฌ๋์ง ์์ ์ํ๋ก ๋จ์ต๋๋ค. ์ด๋ ์๊ธฐ์น ์์ ๋์๊ณผ ์ ์ฌ์ ์ธ ์ถฉ๋๋ก ์ด์ด์ง ์ ์์ต๋๋ค. ์ค๋ฅ๋ฅผ ๋ก๊น ํ๋ ๊ฒ๋ง์ผ๋ก๋ ์ข์ผ๋ ํญ์ ํ๋ก๋ฏธ์ค ๊ฑฐ๋ถ๋ฅผ ์ฒ๋ฆฌํ์ธ์.
๊ตญ์ ํ(i18n) ๊ณ ๋ ค์ฌํญ
๋น๋๊ธฐ ์์ ๊ณผ ์ด๋ฒคํธ ๋ฃจํ๋ฅผ ์ฒ๋ฆฌํ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ๋ฐํ ๋, ๋ค๋ฅธ ์ง์ญ ๋ฐ ๋ค๋ฅธ ์ธ์ด์ ์ฌ์ฉ์๋ฅผ ์ํด ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ฌ๋ฐ๋ฅด๊ฒ ์๋ํ๋๋ก ๊ตญ์ ํ(i18n)๋ฅผ ๊ณ ๋ คํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ๊ณ ๋ ค์ฌํญ์ ๋๋ค:
- ๋ ์ง ๋ฐ ์๊ฐ ํ์: ํ์ด๋จธ๋ ์ค์ผ์ค๋ง๊ณผ ๊ด๋ จ๋ ๋น๋๊ธฐ ์์
์ ์ฒ๋ฆฌํ ๋ ๋ค๋ฅธ ๋ก์ผ์ผ์ ๋ง๋ ์ ์ ํ ๋ ์ง ๋ฐ ์๊ฐ ํ์์ ์ฌ์ฉํ์ธ์.
Intl.DateTimeFormat๊ณผ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ๋์์ด ๋ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ์ผ๋ณธ์ ๋ ์ง๋ ์ข ์ข YYYY/MM/DD ํ์์ด๊ณ , ๋ฏธ๊ตญ์์๋ ์ผ๋ฐ์ ์ผ๋ก MM/DD/YYYY ํ์์ ๋๋ค. - ์ซ์ ํ์: ์ซ์ ๋ฐ์ดํฐ์ ๊ด๋ จ๋ ๋น๋๊ธฐ ์์
์ ์ฒ๋ฆฌํ ๋ ๋ค๋ฅธ ๋ก์ผ์ผ์ ๋ง๋ ์ ์ ํ ์ซ์ ํ์์ ์ฌ์ฉํ์ธ์.
Intl.NumberFormat๊ณผ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ๋์์ด ๋ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ์ผ๋ถ ์ ๋ฝ ๊ตญ๊ฐ์์๋ ์ฒ ๋จ์ ๊ตฌ๋ถ ๊ธฐํธ๊ฐ ์ผํ(,) ๋์ ๋ง์นจํ(.)์ ๋๋ค. - ํ ์คํธ ์ธ์ฝ๋ฉ: ํ์ผ ์ฝ๊ธฐ ๋๋ ์ฐ๊ธฐ์ ๊ฐ์ด ํ ์คํธ ๋ฐ์ดํฐ๋ฅผ ํฌํจํ๋ ๋น๋๊ธฐ ์์ ์ ์ฒ๋ฆฌํ ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ฌ๋ฐ๋ฅธ ํ ์คํธ ์ธ์ฝ๋ฉ(์: UTF-8)์ ์ฌ์ฉํ๋์ง ํ์ธํ์ธ์. ์ธ์ด์ ๋ฐ๋ผ ๋ค๋ฅธ ๋ฌธ์ ์งํฉ์ด ํ์ํ ์ ์์ต๋๋ค.
- ์ค๋ฅ ๋ฉ์์ง ํ์งํ: ๋น๋๊ธฐ ์์ ์ ๊ฒฐ๊ณผ๋ก ์ฌ์ฉ์์๊ฒ ํ์๋๋ ์ค๋ฅ ๋ฉ์์ง๋ฅผ ํ์งํํ์ธ์. ์ฌ์ฉ์๊ฐ ๋ชจ๊ตญ์ด๋ก ๋ฉ์์ง๋ฅผ ์ดํดํ ์ ์๋๋ก ๋ค๋ฅธ ์ธ์ด์ ๋ํ ๋ฒ์ญ์ ์ ๊ณตํ์ธ์.
- ์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ(RTL) ๋ ์ด์์: UI์ ๋ํ ๋น๋๊ธฐ ์ ๋ฐ์ดํธ๋ฅผ ์ฒ๋ฆฌํ ๋ ํนํ RTL ๋ ์ด์์์ด ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฌ์ฉ์ ์ธํฐํ์ด์ค์ ๋ฏธ์น๋ ์ํฅ์ ๊ณ ๋ คํ์ธ์. ๋ ์ด์์์ด RTL ์ธ์ด์ ๋ง๊ฒ ์ฌ๋ฐ๋ฅด๊ฒ ์กฐ์ ๋๋์ง ํ์ธํ์ธ์.
- ์๊ฐ๋(Time Zones): ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋ค๋ฅธ ์ง์ญ ๊ฐ์ ์๊ฐ์ ์์ฝํ๊ฑฐ๋ ํ์ํ๋ ๊ฒฝ์ฐ, ์ฌ์ฉ์์ ๋ถ์ผ์น์ ํผ๋์ ํผํ๊ธฐ ์ํด ์๊ฐ๋๋ฅผ ์ฌ๋ฐ๋ฅด๊ฒ ์ฒ๋ฆฌํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. Moment Timezone(ํ์ฌ ์ ์ง๋ณด์ ๋ชจ๋์ด๋ฏ๋ก ๋์์ ์ฐพ์๋ด์ผ ํจ)๊ณผ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์๊ฐ๋ ๊ด๋ฆฌ์ ๋์์ด ๋ ์ ์์ต๋๋ค.
๊ฒฐ๋ก
์๋ฐ์คํฌ๋ฆฝํธ ์ด๋ฒคํธ ๋ฃจํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋น๋๊ธฐ ํ๋ก๊ทธ๋๋ฐ์ ์ด์์ ๋๋ค. ์ด๊ฒ์ด ์ด๋ป๊ฒ ์๋ํ๋์ง ์ดํดํ๋ ๊ฒ์ ํจ์จ์ ์ด๊ณ ์๋ต์ฑ์ด ๋ฐ์ด๋๋ฉฐ ๋ ผ๋ธ๋กํน ์ ํ๋ฆฌ์ผ์ด์ ์ ์์ฑํ๋ ๋ฐ ํ์์ ์ ๋๋ค. ์ฝ ์คํ, ํ์คํฌ ํ, ๋ง์ดํฌ๋กํ์คํฌ ํ ๋ฐ Web API์ ๊ฐ๋ ์ ๋ง์คํฐํจ์ผ๋ก์จ ๊ฐ๋ฐ์๋ ๋น๋๊ธฐ ํ๋ก๊ทธ๋๋ฐ์ ํ์ ํ์ฉํ์ฌ ๋ธ๋ผ์ฐ์ ์ Node.js ํ๊ฒฝ ๋ชจ๋์์ ๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ง๋ค ์ ์์ต๋๋ค. ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฅด๊ณ ์ผ๋ฐ์ ์ธ ํจ์ ์ ํผํ๋ฉด ๋ ๊ฒฌ๊ณ ํ๊ณ ์ ์ง๋ณด์ํ๊ธฐ ์ฌ์ด ์ฝ๋๋ฅผ ์์ฑํ ์ ์์ต๋๋ค. ์ด๋ฒคํธ ๋ฃจํ๋ฅผ ์ง์์ ์ผ๋ก ํ๊ตฌํ๊ณ ์คํํ๋ฉด ์ดํด๋ฅผ ์ฌํ์ํค๊ณ ๋ณต์กํ ๋น๋๊ธฐ ๊ณผ์ ๋ฅผ ์์ ์๊ฒ ํด๊ฒฐํ ์ ์๊ฒ ๋ ๊ฒ์ ๋๋ค.