리셋 되지 말자

[NodeJS] file system을 이용한 동적 페이지 생성 시 동작 방식 본문

NodeJS

[NodeJS] file system을 이용한 동적 페이지 생성 시 동작 방식

kyeongjun-dev 2020. 9. 15. 14:31

파일 구조

폴더 아래에 html, js 폴더가 있고, index.html은 html 폴더에 그리고 hello.js와 main.js는 js 폴더에 위치해 있다.

 

소스코드

  • index.html
<!DOCTYPE html>
    <head>
        <title>kkjs index html</title>
        <script src="./hello.js"></script>
    </head>
    <body>
        <h1>js link test</h1>
        <script>
            alert('wow first!');
        </script>
        <script>
            var arr = [1,2,3,4,5];
            show_arr(arr);
        </script>
    </body>
</html>

head 부분에 hello.js를 가져와서 사용한다. 여기서 중요한건 hello.js파일의 위치이다. 보통 index.html 파일의 기준으로 생각했는데 이번 테스트 결과에서는 'main.js'의 위치로부터의 경로가 된다.

  • hello.js
alert('from hello js');

function show_arr(arr){
    for(var i in arr){
        console.log(i);
    }
}

alert 명령어와 'show_arr' 함수가 정의되어 있다.

 

  • main.js
var http = require('http');
var fs = require('fs');

var app=http.createServer(function(request, response){
     //console.log(request.url);
    
    var url = request.url;
    if(request.url == '/'){
      url = '/../html/index.html';
    }
    if(request.url == '/favicon.ico'){
      return response.writeHead(404);
    }
    response.writeHead(200);
    
    var body = fs.readFileSync(__dirname+url);
    
    //response.end(body);
    console.log(body.toString());
    response.end(body);
    
})

app.listen(3000);

localhost:3000 으로 웹서버를 여는 파일이다. 접속하면 아래와 같이 body에 담긴 내용을 확인할 수 있다.

  • body 출력 내용
<!DOCTYPE html>
    <head>
        <title>kkjs index html</title>
        <script src="./hello.js"></script>
    </head>
    <body>
        <h1>js link test</h1>
        <script>
            alert('wow first!');
        </script>
        <script>
            var arr = [1,2,3,4,5];
            show_arr(arr);
        </script>
    </body>
</html>
alert('from hello js');

function show_arr(arr){
    for(var i in arr){
        console.log(i);
    }
}

여기가 제일 중요한 부분이다. 파일을 읽어올 때, src="./hello.js"를 만나면, 해당 파일의 내용을 html 파일 내용 아래에 추가되는거 같다. 

실제로 body 에서 </html> 아래의 내용을 컷 한뒤, 직접 response.end()의 인자로 보내면 hello.js가 실행되지 않는다. hello.js의 함수를 사용하지 않더라도, 아래에 똑같이 추가가된다.

 

실행순서

hello.js를 <head>안에서 불러왔으므로, 'arlert('from hello js');'가 먼저 실행되어 'from hello js'문구가 alert 되고 이후에는 'wow first!'가 alert 된다. 그리고 콘솔을 확인하면 0, 1, 2, 3, 4가 출력된다.

 

결론

동적 페이지를 생성할 때, html파일을 그대로 복사해서 변수에 할당한 뒤, response.end()의 인자로 보냈는데, 외부 js 파일이 호출되는 html 파일이라면 js파일을 불러오지 못하는 문제가 생겼다.

이런 경우에는 위와같은 사항을 참고로 하여 동적 페이지를 생성해야 한다.

저작자표시

'NodeJS' 카테고리의 다른 글

[express] 미들웨어 종류와 실행 순서  (0) 2020.09.23
[NodeJS] nodejs 동기/비동기 테스트  (0) 2020.09.16
[NodeJS] nodejs 그림 불러오기  (4) 2020.09.16
2장-알아두어야할 자바스크립트 (2-2 프런트엔드 자바스크립트)  (0) 2020.09.04
[nodejs 교과서] 2장-알아두어야할 자바스크립트 (2-1 ES2015+)  (0) 2020.09.04
'NodeJS' Related Articles more
Comments