Blog Content

    티스토리 뷰

    02.Node.js - 입력 화면 만들기

    반응형

    디자인을 하도록 하겠습니다.
    그 전에...app.js 파일을 실행을 하면 서버가 실행이 되고 화면에 글씨가 나왔는데요...

    [그림2-1]

     

    이 페이지를 찾아서 디자인 하도록 하겠습니다.
    app.js 소스를 보니...화면에 보여지는 페이지는 모두 view 폴더이고...화면에 보여지는 엔진이...jade?? 이네요...
    express 프레임워크에서는 Jade, Ejs 등을 지원한다고 합니다. Jade 설명은 생략 하겠습니다.
    궁금하신 분들은 여기로...설명이 참 잘 되어있습니다. Jade란?

    jade로 하기에는 아직 많이 부족하니깐 html로 진행하겠습니다.

    저는 visual studio 2012 개발 툴로 작업하겠습니다.

    프로젝트 구성된 폴더 경로에서 views 폴더 안에 html 이지를 만들어주세요.

     input.html
     

    <!DOCTYPE html>

     

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta charset="utf-8" />

        <title></title>

    </head>

    <body>

        <table border="1">

            <tr>

                <td>

                    <input type="text" id="txt" />

                </td>

                <td>

                    <input type="button" id="btnOK" value="버튼" />

                </td>

            </tr>

        </table>

    </body>

    </html>


    작업한 html 페이지가 제대로 열릴수 있도록 코드 수정을 하겠습니다. (전 jade를 안하는게 아니고 못하는거에요.)

    File System 모듈을 사용하겠습니다. 다른 모듈을 사용해서 웹 서버를 구성하는 방법입니다.

    서버 모듈을 새로 만들고 새로 만든 서버 모듈 안에 File System 모듈을 작성해서~추가한 html 페이지를 열겠습니다.

    JavaScript 파일을 새로 만들어 줍니다. 저는 파일 이름을 server.js 로 하겠습니다.

    코드를 작성합니다.

     server.js
     

    var http = require('http')

    var file = require('fs');

    file.readFile('/views/input.html', function (error, html) {

    if (error) {

    console.log(error);

    }

    http.createServer(function (request, response) {

    response.writeHeader(200, { "Content-Type": "text/html" });

    response.write(html);

    response.end();

    }).listen(3000);

    console.log('서버연결');

    });


    다 하셨으면 이제 실행후 결과를 확인합니다.

    [그림2-2]

     


    디자인 까지 끝났습니다.

    아~어렵다~!!
    반응형

    Comments