02.Node.js - 입력 화면 만들기
디자인을 하도록 하겠습니다.
그 전에...app.js 파일을 실행을 하면 서버가 실행이 되고 화면에 글씨가 나왔는데요...
이 페이지를 찾아서 디자인 하도록 하겠습니다.
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('서버연결'); }); |
다 하셨으면 이제 실행후 결과를 확인합니다.
디자인 까지 끝났습니다.