반응형
방명록 웹 애플리케이션 만들기
지금까지 공부한 내용을 복습하기위해 간단한 애플리케이션 제작.
1. 준비
1) npm init 명령으로 package.json 파일 만들기.
2) 필요한 npm 모듈 설치 (npm install express morgan body-parser ejs --save)
2. 코딩
app.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | var http = require("http"); var path = require("path"); var express = require("express"); var logger = require("morgan"); var bodyParser = require("body-parser"); var app = express(); app.set("views",path.resolve(__dirname,"views")); app.set("view engine","ejs"); var entries = []; // 모든 글을 저장할 배열 app.locals.entries = entries; //모든 뷰에서 배열을 사용할 수 있게 함 app.use(logger("dev")); app.use(bodyParser.urlencoded({extended:false})); // 사용자가 폼을 전송할 때 req.body라는 변수에 담음 // 루트경로로 왔을때 index 파일 렌더링 app.get("/",function(request,response){ response.render("index"); }); // new-entry경로로 get으로 왔을 때 new-entry 렌더링 app.get("/new-entry",function(request,response){ response.render("new-entry"); }); // new-entry에서 post 폼이 있을 때 아래 코드를 통해 방명록 입력하고 // redirect를 통해 루트경로로 감 app.post("/new-entry",function(request,response){ if(!request.body.title || !request.body.body){ response.status(400).send("제목과 내용을 입력하세요"); return; } entries.push({ title : request.body.title, content : request.body.body, published : new Date() }); response.redirect("/"); }); app.use(function(request,response){ response.status(404).render("404"); }) http.createServer(app).listen(3000,function(){ console.log("Guestbook app started on port 3000."); }); |
index.ejs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <% include header %> <% if(entries.length) {%> <% entries.forEach(function(entry){ %> <div class="panel panel-default"> <div class="panel-heading"> <div class="text-muted pull-right"> <%= entry.published %> </div> <%= entry.title %> </div> <div class="panel-body"> <%= entry.content %> </div> </div> <% }) %> <% } else{ %> 글이 없습니다.<a href="/new-entry">작성하기</a> <% } %> <% include footer %> |
header.ejs
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Express Guestbook</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> </head> <body class="container"> <h1> Express Guestbook <a href="/new-entry" class="btn btn-primary pull-right">방명록쓰기</a> </h1> | cs |
부트스트랩 사용했습니다.
footer.ejs
1 2 3 | </body> </html> |
404.ejs
1 2 3 4 | <% include header %> <h2> 404! 페이지를 찾을 수 없습니다. </h2> <% include footer %> |
new-entry.ejs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <% include header %> <h2>작성하기</h2> <form method="post" role="form"> <div class="form-group"> <label for="title">제목</label> <input type="text" class="form-control" id="title" name="title" placeholder="제목" required /> </div> <div class="form-group"> <label for="content">내용</label> <textarea class="form-control" id="body" name="body" placeholder="내용" rows="3" required></textarea> </div> <div class="form-group"> <input type="submit" class="btn btn-primary" value="등록" /> </div> </form> <% include footer %> | cs |
명령프롬프트
morgan을 이용해서 로그가 찍히는 모습입니다.
디렉토리 구조
디렉토리에서 파일 위치 확인.
npm start 명령 이용하는 방법
package.json 파일에서 "scripts"에 "start" : "node app" 이라고 작성하면 됩니다.
뜻은 npm start가 node app.js 명령어를 대신한다는 뜻.
"start" : "node apppppppp" 이렇게 적어놓으면 npm start를 했을 때
apppppppp.js 파일을 찾아서 실행시킵니다.
웹 애플리케이션 화면
* 따로 방명록을 읽거나 수정하거나 삭제하는 기능은 없지만 간단하게 작성하고 전체적으로 볼 수 있는 웹 애플리케이션을 만들었습니다.
app.js 파일을 보면 알다시피 간단하게 코딩했습니다. 오히려 ejs를 이용한 뷰에 시간(?)이 더 소요되는것을 알 수 있습니다.
ejs 보다 pug(jade)를 사용하면 시간 단축이 더 기대됩니다.
반응형
'Javascript > Node.js' 카테고리의 다른 글
| 라우팅 (Routing) (0) | 2017.09.27 |
|---|---|
| Node.js 미들웨어(Middleware) (0) | 2017.09.26 |
| Express 기초 (morgan 로깅미들웨어, 라우팅, 요청/응답 확장, 뷰 렌더링) (0) | 2017.09.24 |
| Node.js 기초와 모듈 (내장 모듈, npm, 사용자정의 모듈) (1) | 2017.09.24 |
| Node.js 와 Express (2) | 2017.09.23 |