Responsive Advertisement

Node.js๋กœ ์˜จ๋ผ์ธ ์ปดํŒŒ์ผ๋Ÿฌ ๋งŒ๋“ค๊ธฐ: ์‹ค์‹œ๊ฐ„ ์ฝ”๋“œ ์‹คํ–‰ ์„œ๋น„์Šค ๊ตฌํ˜„ํ•˜๊ธฐ

์ตœ๊ทผ ๋งŽ์€ ๊ฐœ๋ฐœ์ž์™€ ํ•™์ƒ๋“ค์ด ์˜จ๋ผ์ธ ์ปดํŒŒ์ผ๋Ÿฌ๋ฅผ ํ†ตํ•ด ๋‹ค์–‘ํ•œ ์–ธ์–ด์˜ ์ฝ”๋“œ๋ฅผ ์‹ค์‹œ๊ฐ„์œผ๋กœ ์ž‘์„ฑํ•˜๊ณ  ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์„ ์„ ํ˜ธํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” Node.js๋ฅผ ํ™œ์šฉํ•ด ๊ฐ„๋‹จํ•œ ์˜จ๋ผ์ธ ์ปดํŒŒ์ผ๋Ÿฌ๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์„ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค. ์˜จ๋ผ์ธ ์ปดํŒŒ์ผ๋Ÿฌ๋Š” ์‚ฌ์šฉ์ž๋กœ๋ถ€ํ„ฐ ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅ๋ฐ›์•„ ์„œ๋ฒ„์—์„œ ์‹คํ–‰ํ•˜๊ณ  ๊ฒฐ๊ณผ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ์ž‘๋™ํ•˜๋ฉฐ, ๊ต์œก, ํ•™์Šต, ์ฝ”๋”ฉ ํ…Œ์ŠคํŠธ ๋“ฑ์— ๋งค์šฐ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.

Node.js์™€ ์˜จ๋ผ์ธ ์ปดํŒŒ์ผ๋Ÿฌ์˜ ์žฅ์ 

Node.js๋Š” ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ์™€ ์‹ค์‹œ๊ฐ„ ํ†ต์‹ ์„ ์ง€์›ํ•˜๋Š” ๋น ๋ฅธ ์„œ๋ฒ„ ํ™˜๊ฒฝ์œผ๋กœ, ์˜จ๋ผ์ธ ์ปดํŒŒ์ผ๋Ÿฌ๋ฅผ ๊ตฌ์ถ•ํ•˜๊ธฐ์— ๋งค์šฐ ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ, Node.js๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋‹ค์–‘ํ•œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์˜ ์ปดํŒŒ์ผ๋Ÿฌ๋‚˜ ์ธํ„ฐํ”„๋ฆฌํ„ฐ๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ, ์›น ํ™˜๊ฒฝ์—์„œ ์ฝ”๋“œ ์‹คํ–‰์„ ์‰ฝ๊ฒŒ ์ง€์›ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Node.js ๊ธฐ๋ฐ˜ ์˜จ๋ผ์ธ ์ปดํŒŒ์ผ๋Ÿฌ์˜ ์žฅ์ 

  • ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋กœ ์—ฌ๋Ÿฌ ์‚ฌ์šฉ์ž์˜ ์š”์ฒญ์„ ๋น ๋ฅด๊ฒŒ ์ฒ˜๋ฆฌ ๊ฐ€๋Šฅ
  • JavaScript์™€ Node.js์˜ ์นœํ™”์„ฑ์œผ๋กœ ํ”„๋ก ํŠธ์—”๋“œ์™€์˜ ์—ฐ๊ฒฐ ์šฉ์ด
  • ์‹ค์‹œ๊ฐ„ ์ฝ”๋“œ ์‹คํ–‰ ๋ฐ ๊ฒฐ๊ณผ ๋ฐ˜ํ™˜ ๊ฐ€๋Šฅ

Node.js๋กœ ์˜จ๋ผ์ธ ์ปดํŒŒ์ผ๋Ÿฌ ๊ตฌ์ถ•ํ•˜๊ธฐ

์˜จ๋ผ์ธ ์ปดํŒŒ์ผ๋Ÿฌ์˜ ๊ธฐ๋ณธ์ ์ธ ๊ตฌํ˜„ ๋‹จ๊ณ„๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค:

  1. ์‚ฌ์šฉ์ž๊ฐ€ ์›น์—์„œ ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅ
  2. Node.js ์„œ๋ฒ„์—์„œ ์ฝ”๋“œ๋ฅผ ์ปดํŒŒ์ผํ•˜๊ฑฐ๋‚˜ ์‹คํ–‰
  3. ์‹คํ–‰ ๊ฒฐ๊ณผ๋ฅผ ํด๋ผ์ด์–ธํŠธ๋กœ ์ „์†ก

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. ์„œ๋ฒ„ ์‹คํ–‰ ๋ฐ ํ…Œ์ŠคํŠธ

์ด์ œ ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ๋ฅผ ์‹คํ–‰ํ•ด ํ”„๋กœ์ ํŠธ๊ฐ€ ์ž˜ ๋™์ž‘ํ•˜๋Š”์ง€ ํ™•์ธํ•ด ๋ด…์‹œ๋‹ค.

  1. ๋จผ์ €, ํ„ฐ๋ฏธ๋„์—์„œ server.js๋ฅผ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค.
$ node server.js

์„œ๋ฒ„๊ฐ€ ์ •์ƒ์ ์œผ๋กœ ์‹คํ–‰๋˜๋ฉด http://localhost:3000์—์„œ API๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  1. ์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ HTML ํŒŒ์ผ์„ ์—ด๊ณ , ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅํ•œ ํ›„ '์ฝ”๋“œ ์‹คํ–‰' ๋ฒ„ํŠผ์„ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค.

์ด์ œ ์„ ํƒํ•œ ์–ธ์–ด๋กœ ์ž…๋ ฅํ•œ ์ฝ”๋“œ๊ฐ€ ์„œ๋ฒ„์—์„œ ์‹คํ–‰๋˜๋ฉฐ, ๊ทธ ๊ฒฐ๊ณผ๊ฐ€ ํ™”๋ฉด์— ์ถœ๋ ฅ๋ฉ๋‹ˆ๋‹ค. ์ด ๊ธฐ๋ณธ ๊ตฌ์กฐ๋ฅผ ํ†ตํ•ด ๋‹ค์–‘ํ•œ ์–ธ์–ด์™€ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€์ ์œผ๋กœ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

5. ๋ณด์•ˆ ๋ฐ ํ™•์žฅ ๊ณ ๋ ค ์‚ฌํ•ญ

์˜จ๋ผ์ธ ์ปดํŒŒ์ผ๋Ÿฌ์˜ ๊ฒฝ์šฐ ๋ณด์•ˆ์ด ๋งค์šฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ช‡ ๊ฐ€์ง€ ๋ณด์•ˆ ๊ณ ๋ ค ์‚ฌํ•ญ์„ ์ ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค:

  • ์ฝ”๋“œ ์ƒŒ๋“œ๋ฐ•์‹ฑ: ์•…์˜์ ์ธ ์ฝ”๋“œ ์‹คํ–‰์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ์‹คํ–‰ ํ™˜๊ฒฝ์„ ์ œํ•œํ•ฉ๋‹ˆ๋‹ค.
  • ์‹คํ–‰ ์‹œ๊ฐ„ ์ œํ•œ: ํŠน์ • ์‹œ๊ฐ„์ด ์ง€๋‚˜๋ฉด ์‹คํ–‰์„ ์ž๋™์œผ๋กœ ์ข…๋ฃŒํ•˜๋„๋ก ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
  • ๋กœ๊ทธ ๊ด€๋ฆฌ: ์‹คํ–‰๋œ ์ฝ”๋“œ์™€ ์˜ค๋ฅ˜๋ฅผ ๊ธฐ๋กํ•ด ๋ฌธ์ œ๋ฅผ ์ถ”์ ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

์ด๋Ÿฌํ•œ ์‚ฌํ•ญ๋“ค์„ ์ถ”๊ฐ€ํ•˜๋ฉด ๋”์šฑ ์•ˆ์ „ํ•˜๊ณ  ์‹ ๋ขฐํ•  ์ˆ˜ ์žˆ๋Š” ์˜จ๋ผ์ธ ์ปดํŒŒ์ผ๋Ÿฌ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฒฐ๋ก 

Node.js์™€ Express, ๊ทธ๋ฆฌ๊ณ  child_process ๋ชจ๋“ˆ์„ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ„๋‹จํ•œ ์˜จ๋ผ์ธ ์ปดํŒŒ์ผ๋Ÿฌ๋ฅผ ๊ตฌ์ถ•ํ•ด ๋ณด์•˜์Šต๋‹ˆ๋‹ค. ์ด ๊ธฐ๋ณธ ๊ตฌ์กฐ๋Š” ๋‹ค์–‘ํ•œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋ฅผ ํ™•์žฅํ•˜๊ฑฐ๋‚˜ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๊ฐœ์„ ํ•˜๋Š” ๋“ฑ ์—ฌ๋Ÿฌ ๋ฐฉํ–ฅ์œผ๋กœ ๋ฐœ์ „์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜จ๋ผ์ธ ์ปดํŒŒ์ผ๋Ÿฌ๋ฅผ ํ†ตํ•ด ์‹ค์‹œ๊ฐ„์œผ๋กœ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๊ณ  ํ•™์Šตํ•˜๋Š” ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๋ฉฐ, ์ด๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๋” ๋ณต์žกํ•œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์ถ•ํ•ด ๋ณด์„ธ์š”!

๋Œ“๊ธ€ ์“ฐ๊ธฐ