node js 를 이용한 웹 컴파일러 만들기

아직 프로젝트에 이용하게 될지는 모르겠지만 웹 기술을 거의 모르는 상태에서 시작한터라 시간이 엄청 걸렸네요 ㅠ

일단 제가 구현한 결과물은 이렇습니다

딱보면 알겠지만 웹사이트 상에서 C 코드를 입력하고 버튼을 누르면 컴파일 된 결과를 출력해주는 것입니다. 

기본적으로 필요한 파일은 html 형태를 가지고 있는 파일과 html 에서 입력한 값을 처리할 서버가 필요합니다.

참고로 서버에는 gcc 컴파일러가 설치되어있어야합니다. 웹상에서 컴파일 된다기보다는 내 컴퓨터(서버)에서 컴파일 하고 나온 결과 값을 다시 클라이언트에게 넘겨주는 형태이기 때문입니다.

저는 클라이언트 부분을 pug 템플릿 엔진으로 작성한터라 기본 html 문법을 사용하는 것과는 모양이 좀 다릅니다.

컴파일 되는 기능만을 중점적으로 하기위해 부트스트랩 부분은 다 빼고 기재하겠습니다.

form.pug

doctype html
html(lang='en')
    head
        script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js')
    body
            h1 문제
                select#language(name='language') 
                    option(name='1') C
                    option(name='2') C++
                    option(name='3') Java
                p
                textarea#code(style='resize:none; width:400px; height:300px;' name='code')
                p
                input#output(type='text' name='output' style='resize:none; width:400px; height:50px;' readonly='readonly')
                p
                input#ajax_post(type = 'button' value='제출하기' class='ajaxsend')
                p
                script.
                    document.querySelector('.ajaxsend').addEventListener('click',function(){
                        sendAjax('http://localhost:3000/form_receive',code.value);
                    })    
                    function sendAjax(url,data,language){
                        var data = {'code': data};
                        data = JSON.stringify(data);
                        var xhr = new XMLHttpRequest();
                        xhr.open('POST',url,true);
                        xhr.setRequestHeader('Content-type','application/json');    
                        xhr.send(data);
 
                        xhr.addEventListener('load',function() {
                            var result = JSON.parse(xhr.responseText);
                            if(result.result !='ok')return;
                            document.getElementById('output').value=result.output;
                        });
                    }
                    script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js')
                p

위에서 말했던 것처럼 이것저것 빼다보니 이게 정확히 돌아가는 코드일지는 모르겠지만 주요 동작부분은 다 기술되어 있습니다.

일단 제가 필요한 부분은 textarea 부분에 작성되는 코드입니다. 그 부분의 입력 받은 값을 서버로 넘기는데 여기서 중요한건 Ajax 통신으로 값을 넘겨줘야한다는 것입니다. 그렇지 않으면 화면 이동을 해줘야하는 부분이 있는데 저는 결과 창만 값을 바꾸고 싶은 상황이기 때문에 전체 화면을 리로드 하는건 불필요하기도하고 보기에도 좋지 않죠.

< AJAX 의 특징>

AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"입니다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해줍니다.

해당코드 전부에서 부분부분 뽑아서 살펴보겠습니다.

input#ajax_post(type = 'button' value='제출하기' class='ajaxsend')

=> '제출하기' 버튼을 누르면 ajaxsend function을 타도록 만든 것 입니다. ajax_post라는 id값을 가집니다.

script.
    document.querySelector('.ajaxsend').addEventListener('click',function(){
        sendAjax('http://localhost:3000/form_receive',code.value);
    })

=> 버튼 클릭 시에 이벤트를 발생시킬 Listener 입니다. 함수를 호출하는 형태로 되어있는데 바로 아래에서 설명하겠습니다.

function sendAjax(url,data){
         var data = {'code': data};
         data = JSON.stringify(data);
         var xhr = new XMLHttpRequest();
         xhr.open('POST',url,true);
         xhr.setRequestHeader('Content-type','application/json');    
         xhr.send(data);
 
         xhr.addEventListener('load',function() {
             var result = JSON.parse(xhr.responseText);
             if(result.result !='ok')return;
                document.getElementById('output').value=result.output;
         });
 }

=> 매개변수로 url과 data 를 받는 function 이다. var data = { 'code' : data }; 를 하게되면 json 형태로 data 변수에 값이 들어가게 되고 그 값을 다시 문자열로 변환하는 함수인 JSON.stringify 를 작성해줍니다.

url 값은 클라이언트에서 보낸 값을 처리할 서버 쪽의 app.post로 작성된 라우터 입니다.

XMLHttpRequest 이 부분은 그냥 그대로 써주면 될 듯합니다. 자세히 공부한건 아니지만 Javascript 를 이용하여 통신을 할 때 필요한 객체? 라고 보면 될 듯 합니다. 결론적으로는 POST형식으로 data를 서버에 전달해주는 역할을 합니다.

addEventListener 부분은 서버쪽에서 다시 클라이언트 쪽으로 값을 전달해줬을 때 동작하는 부분입니다. 서버 쪽에서 전달한 값을 토대로 조건문을 통해 실행여부를 결정하는 형태입니다. 여기선 'ok' 가 전달됐을 때 결과창에다가 컴파일 결과 값을 삽입해줍니다.

app.js

const express = require('express');
const parse = require('parse-json');
const app = express();
const fs = require('fs');
const spawn = require('child_process').spawn;
const bodyParser = require('body-parser');
app.set('view engine','pug');
app.set('views','./views');
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.use(express.static(__dirname + '/public'));
 
 
app.get('/form',function(req,res){
    res.render("form");
});
 
app.post('/form_receive',function(req,res) {
    var code = req.body.code;
    var source = code.split(/\r\n|\r\n/).join("\n");
    var file='test.c';
    
    fs.writeFile(file,source,'utf8',function(error) {
        console.log('write end');
    });
    var compile = spawn('gcc',[file]);
    compile.stdout.on('data',function(data) {
        console.log('stdout: '+data);
    });
    compile.stderr.on('data',function(data){
        console.log(String(data));
    });
    compile.on('close',function(data){
        if(data ==0) {
            var run = spawn('./a.out',[]);    
            run.stdout.on('data',function(output){
                console.log('컴파일 완료');
                var responseData = {'result':'ok','output': output.toString('utf8')};
                res.json(responseData);
            });
            run.stderr.on('data', function (output) {
                console.log(String(output));
            });
            run.on('close', function (output) {
                console.log('stdout: ' + output);
            });
        }
    });
});
 맨 아래 app.listen 부분 생략됨.. 까먹었습니다 써줘야 함

=> 맨 위에 작성되는 app. ~~~ 와 같은 코드들은 해당 작업에서 다 필요한 코드들만 남겨둔 것입니다.

app.get으로 우리가 작성했던 pug 코드를 render 해준다. 그럼 localhost:3000/form 의 형태로 접속했을 때 위에 작성한 html 코드의 페이지가 나오겠죠?

실제로 우리가 컴파일하고 결과 값을 다시 클라이언트로 보내 줄 곳은 app.post 부분입니다.

var code = req.body.code;
    var source = code.split(/\r\n|\r\n/).join("\n");
    var file='test.c';
    
    fs.writeFile(file,source,'utf8',function(error) {
        console.log('write end');
    });
    var compile = spawn('gcc',[file]);
    compile.stdout.on('data',function(data) {
        console.log('stdout: '+data);
    });
    compile.stderr.on('data',function(data){
        console.log(String(data));
    });

=> 클라이언트에서 보낸 값을 변수 값에 저장합니다. 그런데 code 값을 한번 가공해줘야합니다. 왜냐면 클라이언트쪽에서 보내오는 코드값은 개행처리가 안되는 형태로 날라오는데 컴파일을 하기 위해선 적어도 개행처리는 다 되어야하므로 그렇게 처리한 값을 다시 source라는 변수 값에 넣고 우린 이 값을 실제 코드 값으로 사용합니다.

파일시스템을 이용하여 source 변수의 값을 소스코드 파일로 서버 컴퓨터에 저장할 것입니다. 그리고 gcc 컴파일러를 이용해서 서버 내부에서 만들어진 소스코드 파일을 컴파일 해주고 그 파일을 실행해서 결과 값을 출력할 수 있습니다.

compile.on('close',function(data){
        if(data ==0) {
            var run = spawn('./a.out',[]);    
            run.stdout.on('data',function(output){
                console.log('컴파일 완료');
                var responseData = {'result':'ok','output': output.toString('utf8')};
                res.json(responseData);
            });
            run.stderr.on('data', function (output) {
                console.log(String(output));
            });
            run.on('close', function (output) {
                console.log('stdout: ' + output);
            });
        }
    });
});

=> 마지막 이 부분에서 결과 값을 받아낼 수 있습니다. 컴파일 결과로 나온 실행파일 (a.out) 을 실행시켜서 나오는 결과 값 (output)을 다시 클라이언트 쪽으로 전달해주어야 합니다. 전달하는 형태는 json형태로 전달하며 output 전달 시에 toString('utf8') 을 하지 않으면 bufferType 으로 값이 전달되어 아스키 코드 값으로 전달이 되기 때문에 이 작업을 꼭 해줘야 합니다.

xhr.addEventListener('load',function() {
    var result = JSON.parse(xhr.responseText);
    if(result.result !='ok')return;
    document.getElementById('output').value=result.output;
});

아까 클라이언트에서 서버쪽에서 전달하는 값을 업데이트하는 부분인데 json 형태의 전달되는 값 중에서 첫 번째 값인 result의 값이 ok 가 아니라면 return ; 즉 아무 작업도 하지 않고 ok일 때에만 output이라는 textarea에 컴파일의 결과 값을 업데이트 시켜주면 끝!

Ajax랑 json에 익숙치가 않아서 정말 애먹은 작업이었네요.... 필수중에 필수니까 더 연습해야겠네요 ㅠ