์ต๊ทผ ๋ง์ ๊ฐ๋ฐ์์ ํ์๋ค์ด ์จ๋ผ์ธ ์ปดํ์ผ๋ฌ๋ฅผ ํตํด ๋ค์ํ ์ธ์ด์ ์ฝ๋๋ฅผ ์ค์๊ฐ์ผ๋ก ์์ฑํ๊ณ ์คํํ ์ ์๋ ๊ธฐ๋ฅ์ ์ ํธํ๊ณ ์์ต๋๋ค. ์ด ๊ธ์์๋ Node.js๋ฅผ ํ์ฉํด ๊ฐ๋จํ ์จ๋ผ์ธ ์ปดํ์ผ๋ฌ๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ์ ์๊ฐํฉ๋๋ค. ์จ๋ผ์ธ ์ปดํ์ผ๋ฌ๋ ์ฌ์ฉ์๋ก๋ถํฐ ์ฝ๋๋ฅผ ์ ๋ ฅ๋ฐ์ ์๋ฒ์์ ์คํํ๊ณ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํํ๋ ๋ฐฉ์์ผ๋ก ์๋ํ๋ฉฐ, ๊ต์ก, ํ์ต, ์ฝ๋ฉ ํ ์คํธ ๋ฑ์ ๋งค์ฐ ์ ์ฉํฉ๋๋ค.
Node.js์ ์จ๋ผ์ธ ์ปดํ์ผ๋ฌ์ ์ฅ์
Node.js๋ ๋น๋๊ธฐ ์ฒ๋ฆฌ์ ์ค์๊ฐ ํต์ ์ ์ง์ํ๋ ๋น ๋ฅธ ์๋ฒ ํ๊ฒฝ์ผ๋ก, ์จ๋ผ์ธ ์ปดํ์ผ๋ฌ๋ฅผ ๊ตฌ์ถํ๊ธฐ์ ๋งค์ฐ ์ ํฉํฉ๋๋ค. ๋ํ, Node.js๋ฅผ ์ฌ์ฉํ๋ฉด ๋ค์ํ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ์ปดํ์ผ๋ฌ๋ ์ธํฐํ๋ฆฌํฐ๋ฅผ ํธ์ถํ์ฌ, ์น ํ๊ฒฝ์์ ์ฝ๋ ์คํ์ ์ฝ๊ฒ ์ง์ํ ์ ์์ต๋๋ค.
Node.js ๊ธฐ๋ฐ ์จ๋ผ์ธ ์ปดํ์ผ๋ฌ์ ์ฅ์
- ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ก ์ฌ๋ฌ ์ฌ์ฉ์์ ์์ฒญ์ ๋น ๋ฅด๊ฒ ์ฒ๋ฆฌ ๊ฐ๋ฅ
- JavaScript์ Node.js์ ์นํ์ฑ์ผ๋ก ํ๋ก ํธ์๋์์ ์ฐ๊ฒฐ ์ฉ์ด
- ์ค์๊ฐ ์ฝ๋ ์คํ ๋ฐ ๊ฒฐ๊ณผ ๋ฐํ ๊ฐ๋ฅ
Node.js๋ก ์จ๋ผ์ธ ์ปดํ์ผ๋ฌ ๊ตฌ์ถํ๊ธฐ
์จ๋ผ์ธ ์ปดํ์ผ๋ฌ์ ๊ธฐ๋ณธ์ ์ธ ๊ตฌํ ๋จ๊ณ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์ฌ์ฉ์๊ฐ ์น์์ ์ฝ๋๋ฅผ ์ ๋ ฅ
- Node.js ์๋ฒ์์ ์ฝ๋๋ฅผ ์ปดํ์ผํ๊ฑฐ๋ ์คํ
- ์คํ ๊ฒฐ๊ณผ๋ฅผ ํด๋ผ์ด์ธํธ๋ก ์ ์ก
1. ํ๋ก์ ํธ ๋๋ ํ ๋ฆฌ ์์ฑ ๋ฐ ํ์ํ ํจํค์ง ์ค์น
$ mkdir nodejs-online-compiler
$ cd nodejs-online-compiler
$ npm init -y
$ npm install express body-parser cors child_process
์ด ํ๋ก์ ํธ๋ express
๋ก ์๋ฒ๋ฅผ ๊ตฌ์ถํ๋ฉฐ, body-parser
์ cors
๋ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ๊ณ CORS ์ด์๋ฅผ ํด๊ฒฐํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. child_process
๋ Node.js์์ ์ธ๋ถ ํ๋ก์ธ์ค๋ฅผ ์คํํ ์ ์๋๋ก ํ๋ ๋ชจ๋๋ก, ์ด ๋ชจ๋์ ์ฌ์ฉํ์ฌ ์
๋ ฅ๋ ์ฝ๋๋ฅผ ์คํํฉ๋๋ค.
2. Node.js ์๋ฒ ์ฝ๋ ์์ฑ
๋ค์์ Express๋ฅผ ์ฌ์ฉํด ๊ธฐ๋ณธ ์๋ฒ๋ฅผ ์ค์ ํ๊ณ , ์ฌ์ฉ์๊ฐ ์ ๋ ฅํ ์ฝ๋๋ฅผ ์คํํ API๋ฅผ ๊ตฌํํ๋ ์ฝ๋์ ๋๋ค.
// server.js
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const { exec } = require('child_process');
const app = express();
const PORT = 3000;
app.use(cors());
app.use(bodyParser.json());
// ์ฝ๋ ์คํ API
app.post('/execute', (req, res) => {
const { language, code } = req.body;
let command;
// ์ธ์ด๋ณ ์คํ ๋ช
๋ น์ด ์ค์
if (language === 'javascript') {
command = `node -e "${code.replace(/"/g, '\\"')}"`;
} else if (language === 'python') {
command = `python3 -c "${code.replace(/"/g, '\\"')}"`;
} else {
return res.status(400).send('์ง์ํ์ง ์๋ ์ธ์ด์
๋๋ค.');
}
// ์ฝ๋ ์คํ
exec(command, (error, stdout, stderr) => {
if (error) {
res.send({ error: stderr || error.message });
} else {
res.send({ output: stdout });
}
});
});
app.listen(PORT, () => {
console.log(`์๋ฒ๊ฐ http://localhost:${PORT}์์ ์คํ ์ค์
๋๋ค.`);
});
์ ์ฝ๋์์๋ exec
๋ฉ์๋๋ฅผ ์ฌ์ฉํด ์ธ๋ถ ํ๋ก์ธ์ค๋ฅผ ์คํํฉ๋๋ค. ์ฌ์ฉ์๊ฐ ์ ํํ ์ธ์ด์ ๋ฐ๋ผ command
๋ณ์์ ์คํ ๋ช
๋ น์ ์ค์ ํ๊ณ , ์ด๋ฅผ ํตํด ์ฝ๋๋ฅผ ์คํํ ํ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํํฉ๋๋ค.
3. ์น ํด๋ผ์ด์ธํธ ์์ฑ
์ด์ HTML๊ณผ JavaScript๋ก ๊ตฌ์ฑ๋ ๊ฐ๋จํ ์น ํด๋ผ์ด์ธํธ๋ฅผ ๋ง๋ค์ด์ ์ฌ์ฉ์๊ฐ ์ฝ๋๋ฅผ ์ ๋ ฅํ๊ณ ์๋ฒ๋ก ์ ์กํ์ฌ ๊ฒฐ๊ณผ๋ฅผ ํ์ธํ ์ ์๊ฒ ํด๋ณด๊ฒ ์ต๋๋ค.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>์จ๋ผ์ธ ์ปดํ์ผ๋ฌ</title>
</head>
<body>
<h1>Node.js ์จ๋ผ์ธ ์ปดํ์ผ๋ฌ</h1>
<label for="language">์ธ์ด ์ ํ:</label>
<select id="language">
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
</select>
<br><br>
<label for="code">์ฝ๋ ์
๋ ฅ:</label><br>
<textarea id="code" rows="10" cols="50" placeholder="์ฝ๋๋ฅผ ์
๋ ฅํ์ธ์"></textarea><br><br>
<button id="runButton">์ฝ๋ ์คํ</button>
<h3>์ถ๋ ฅ ๊ฒฐ๊ณผ:</h3>
<pre id="output"></pre>
<script>
document.getElementById('runButton').addEventListener('click', async () => {
const language = document.getElementById('language').value;
const code = document.getElementById('code').value;
try {
const response = await fetch('http://localhost:3000/execute', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ language, code })
});
const result = await response.json();
document.getElementById('output').innerText = result.error || result.output;
} catch (error) {
document.getElementById('output').innerText = '์๋ฌ ๋ฐ์: ' + error.message;
}
});
</script>
</body>
</html>
์ด ์น ํด๋ผ์ด์ธํธ๋ ์ฌ์ฉ์๊ฐ ์ ํํ ์ธ์ด์ ์
๋ ฅํ ์ฝ๋๋ฅผ ์๋ฒ๋ก ์ ์กํ๊ณ , ์คํ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ์์ ํ๋ฉด์ ํ์ํฉ๋๋ค. fetch
API๋ฅผ ์ฌ์ฉํด ์๋ฒ์ ํต์ ํ๋ฉฐ, ๊ฒฐ๊ณผ๋ฅผ output
์์์ ์ถ๋ ฅํฉ๋๋ค.
4. ์๋ฒ ์คํ ๋ฐ ํ ์คํธ
์ด์ ์๋ฒ์ ํด๋ผ์ด์ธํธ๋ฅผ ์คํํด ํ๋ก์ ํธ๊ฐ ์ ๋์ํ๋์ง ํ์ธํด ๋ด ์๋ค.
- ๋จผ์ , ํฐ๋ฏธ๋์์
server.js
๋ฅผ ์คํํฉ๋๋ค.
$ node server.js
์๋ฒ๊ฐ ์ ์์ ์ผ๋ก ์คํ๋๋ฉด http://localhost:3000
์์ API๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.
- ์น ๋ธ๋ผ์ฐ์ ์์ HTML ํ์ผ์ ์ด๊ณ , ์ฝ๋๋ฅผ ์ ๋ ฅํ ํ '์ฝ๋ ์คํ' ๋ฒํผ์ ํด๋ฆญํฉ๋๋ค.
์ด์ ์ ํํ ์ธ์ด๋ก ์ ๋ ฅํ ์ฝ๋๊ฐ ์๋ฒ์์ ์คํ๋๋ฉฐ, ๊ทธ ๊ฒฐ๊ณผ๊ฐ ํ๋ฉด์ ์ถ๋ ฅ๋ฉ๋๋ค. ์ด ๊ธฐ๋ณธ ๊ตฌ์กฐ๋ฅผ ํตํด ๋ค์ํ ์ธ์ด์ ๊ธฐ๋ฅ์ ์ถ๊ฐ์ ์ผ๋ก ๊ตฌํํ ์ ์์ต๋๋ค.
5. ๋ณด์ ๋ฐ ํ์ฅ ๊ณ ๋ ค ์ฌํญ
์จ๋ผ์ธ ์ปดํ์ผ๋ฌ์ ๊ฒฝ์ฐ ๋ณด์์ด ๋งค์ฐ ์ค์ํฉ๋๋ค. ๋ค์๊ณผ ๊ฐ์ ๋ช ๊ฐ์ง ๋ณด์ ๊ณ ๋ ค ์ฌํญ์ ์ ์ฉํ๋ ๊ฒ์ด ์ข์ต๋๋ค:
- ์ฝ๋ ์๋๋ฐ์ฑ: ์ ์์ ์ธ ์ฝ๋ ์คํ์ ๋ฐฉ์งํ๊ธฐ ์ํด ์คํ ํ๊ฒฝ์ ์ ํํฉ๋๋ค.
- ์คํ ์๊ฐ ์ ํ: ํน์ ์๊ฐ์ด ์ง๋๋ฉด ์คํ์ ์๋์ผ๋ก ์ข ๋ฃํ๋๋ก ์ค์ ํฉ๋๋ค.
- ๋ก๊ทธ ๊ด๋ฆฌ: ์คํ๋ ์ฝ๋์ ์ค๋ฅ๋ฅผ ๊ธฐ๋กํด ๋ฌธ์ ๋ฅผ ์ถ์ ํ ์ ์๋๋ก ํฉ๋๋ค.
์ด๋ฌํ ์ฌํญ๋ค์ ์ถ๊ฐํ๋ฉด ๋์ฑ ์์ ํ๊ณ ์ ๋ขฐํ ์ ์๋ ์จ๋ผ์ธ ์ปดํ์ผ๋ฌ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.
๊ฒฐ๋ก
Node.js์ Express, ๊ทธ๋ฆฌ๊ณ child_process
๋ชจ๋์ ์ฌ์ฉํ์ฌ ๊ฐ๋จํ ์จ๋ผ์ธ ์ปดํ์ผ๋ฌ๋ฅผ ๊ตฌ์ถํด ๋ณด์์ต๋๋ค. ์ด ๊ธฐ๋ณธ ๊ตฌ์กฐ๋ ๋ค์ํ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ฅผ ํ์ฅํ๊ฑฐ๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๊ฐ์ ํ๋ ๋ฑ ์ฌ๋ฌ ๋ฐฉํฅ์ผ๋ก ๋ฐ์ ์ํฌ ์ ์์ต๋๋ค. ์จ๋ผ์ธ ์ปดํ์ผ๋ฌ๋ฅผ ํตํด ์ค์๊ฐ์ผ๋ก ์ฝ๋๋ฅผ ์คํํ๊ณ ํ์ตํ๋ ๊ฒฝํ์ ์ ๊ณตํ๋ฉฐ, ์ด๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋ ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์
์ ๊ตฌ์ถํด ๋ณด์ธ์!
๋๊ธ ์ฐ๊ธฐ