javascript

이번에는 삭제버튼을 만들어볼 것이다.edit버튼과 마찬가지로 특정 글이 선택되었을 때에만 출력하려고한다.   if topic li a(href='/topic/'+topic.id+'/edit') edit li a(href='/topic/' + topic.id + '/delete') deleteif문 조건 안에 있는 edit버튼 아래에 delete버튼을 추가했다.이 상태에서 delete버튼을 누르면 Cannot GET /topic/id/delete 에러메시지가 날 것이다.우리는 이에 해당하는 라우팅을 또 해줘야한다. app.get('/topic/:id/delete', function (r..

저번 포스팅에 이어 편집 기능을 더 개선할 것이다.   app.post(['/topic/:id/edit'], function (req, res) {});post 방식으로 접근하는 프레임코드이다.   var title = req.body.title;var description = req.body.description;var author = req.body.author;var id = req.params.id;var sql = 'UPDATE topic SET title=?, description=?, author=? WHERE id=?'; sql을 포함한 데이터에 들어갈 변수들을 선언해준다.   conn.query(sql, [title, description, author, id], function (err..

이번 포스팅의 개요는 사용자가 topic/:id/edit 경로로 접근하면 edit.pug 파일을 열어서 화면에 표시해주고, 수정작업이 끝난 다음 전송을 누르면 똑같은 주소로 POST방식으로 전송이 될 것이다.수정이 끝나면 redirect를 시켜서 topic의 id값으로 가서 사용자에게 수정이 잘 끝났다라는 것을 암시적으로 보여줄 수 있는 코드를 만들 것이다.또한 사용자가 특정 title을 선택했을 때에만 edit 버튼이 보이게 하고 싶다.(홈으로 갔을 때에는 edit버튼이 사라지는 기능도 포함)첫번째로, add버튼 옆에 edit버튼을 생성해야한다.ul li a(href='/topic/add') add if topic ..

이번에는 글을 추가하는 기능을 포스팅할 것이다.localhost:7777/topic/add로 접근시 add.pug을 이용해 글을 작성할 수 있는 폼을 만들 것이다.views_mysql 디렉토리 내에 add.pug 파일을 만든다.그리고 기존에 사용하였던 new부분을 add로 다음과 같이 변경하였다.(추가로 view.pug 파일 내에 있는 new도 add로 바꿔줘야한다.)app.get('/topic/add', function (req, res) { fs.readdir('data', function (err, files) { if (err) { console.log(err); res.status(500).send('Internal Server Error..

이번 포스팅에서는 글 상세보기 기능을 구현해볼 것이다.   conn.query(sql, function (err, topics, fields) { res.render('view', {topics: topics}); });부분을 아래와 같이 수정했다. conn.query(sql, function (err, topics, fields) { var id = req.params.id; if (id) { var sql = 'SELECT * FROM topic WHERE id=?'; conn.query(sql, [id], function (err, topic, fields) { if (err) { ..

var express = require('express');var bodyParser = require('body-parser');var multer = require('multer');var _storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, 'uploads/') }, filename: function (req, file, cb) { cb(null, file.originalname); }})var upload = multer({storage: _storage});var fs = require('fs');var app = express();app.use(bodyPar..

multer : Express를 이용해서 사용자가 전송한 데이터 파일을 어딘가에 저장하는데에 최적화된 모듈 npm install --save multer이 multer를 사용하기 위해서는 따로 설치가 필요하다.   var multer = require('multer');multer모듈을 사용하기 위해 변수를 선언한다.   app.get('/upload', function (req, res) { res.render('upload');});다음과 같이 프레임을 만들어주고 views 디렉토리 내에 upload.pug 파일을 생성해준다.   doctype htmlhtml head meta(charset='utf-8') body form(action='upload' meth..

앞전에 작성한 코드들을 더 깔끔하게 정리하고자한다. 중복 및 불필요한 코드를 제거할 것이다.코드를 개선 및 정리하면 좋은 점은 가독성뿐만 아니라 코드의 유지보수 측면에서도 매우 편리하다. app.get(['/topic', '/topic/:id'], function (req, res) { fs.readdir('data', function (err, files) { if (err) { console.log(err); res.status(500).send('Internal Server Error'); } res.render('view', {topics: files}); })});배열을 이용해 라우터의 경로를 2개를 설정함으..

출력을 하기 위해서 우리는 라우터를 만들어줘야한다./topic이라는 라우터가 있는데 왜 만들어야할까에 대해 의문을 가질 수 있다.이유는 사용자가 url상으로 입력해서 들어오는 방식은 POST 방식이 아닌 GET 방식이기 때문이다.그래서 GET 방식의 /topic을 한 개 더 만들어줘야하는 것이다.   app.get('/topic', function (req, res) { });우선 다음과 같이 프레임을 만들어준다.   fs.readdir('data', function (err, files) { if (err) { console.log(err); res.status(500).send('Internal Server Error'); } ..

지금까지 작성한 포스팅들을 베이스로 웹애플리케이션을 제작해볼 것이다.사실 개념을 숙지하는 것도 중요하지만 실습을 통해 여러가지 경험을 해보는 것이 더 중요하다고 생각한다.그래서 한 번 애플리케이션을 직접 만들어보기로 했다.사용자로부터 어떠한 정보들을 입력받고, 그렇게 입력받은 정보들을 서버에 저장하고, 사용자가 필요한 정보를 요청하면 그것을 제공하는 로직의 애플리케이션이다.여기서의 핵심은 데이터를 어디에 어떻게 저장하는지다.우리가 일상생활에서 사용하는 대다수의 웹애플리케이션들은 데이터들을 데이터베이스(DB)에 저장한다.하지만 이번에 만들 애플리케이션은 데이터베이스에 저장하는 것이 아닌, 파일에 저장하는 형식으로 만드려고한다. 어떻게보면 파일에 저장하는 형식도 일종의 데이터베이스와 비슷한 개념이긴하다.파일..