사랑과 유머에 중독된 개발자 사랑과 유머에 중독된 개발자

html 템플릿 엔진 : html 구조를 조금 더 편하게 짤 수 있도록 도와준다. 다음의 3가지를 많이 쓴다고 한다. pug(jade) ejs handlebar 오늘은 이 세가지를 모두 설치한 뒤, PUG부터 알아보도록 한다. 1. 템플릿 엔진 설치하기 설치에는 npm을 사용한다. npm install --save ejs pug express-handlebars 설치가 완료되었다. 2. PUG 사용해보기 2.1 app.js 수정 기존 app.js 코드 // app.js const path = require("path"); const express = require("express"); const bodyParser = require("body-parser"); const app = express(); a..

1. 기존 : module.exports = router // admin.js const path = require("path"); const express = require("express"); const rootDir = require("../util/path"); const router = express.Router(); // /admin/add-product { res.sendFile(path.join(rootDir, "views", "add-product.html")); }); // /admin/add-product { console.log(req.body); res.redirect("/"); }); module.exports = router; //app.js 요약 const adminRoute..

1. 정적 파일 서비스? express.Router나 다른 미들웨어를 거치지 않고 파일 시스템으로 직접 포워딩된다는 뜻이다. 기존 html 코드를 보면 파일마다 style과 class를 적용해두었다. 활용할 사람을 위해 전체 코드를 첨부한다. 다 볼 필요는 없다. 이를 위해 자유로운 접근이 가능한 public 폴더를 설정해야 한다. 3. 정적 서비스를 위한 미들웨어 추가하기 app.js 파일에서 public을 정적 서비스 폴더로 등록해준다. app.use(express.static(path.join(__dirname, 'public'))); static()은 위에서 보듯 익스프레스 내장함수로 지정한 경로에 있는 폴더를 정적 서비스 폴더로 지정한다. 여러개를 써도 되지만 public 폴더 하나로 오늘은 충..

기존 코드에서 경로를 나타내기 위해 아래와 같이 코드를 작성했었다. res.sendFile(path.join(__dirname, "../", "views", "add-product.html")); 이를 아래와 같이 수정한다. 역시 모든 운영체제에서 호환되게 하기 위함이다. res.sendFile(path.join(__dirname, "..", "views", "add-product.html")); // ../ -> .. 그러나 더 간단하게 url을 표시하는 방법이 있다고 한다. 바로 헬퍼 함수를 사용하는 것이다. 1. util함수 파일 만들기 먼저 폴더를 새로 생성한다. util 또는 helpers가 일반적으로 많이 쓰인다. path.js 파일을 생성한다. // path.js const path = re..

1. html 파일 만들기 views 폴더를 만들어 두 개의 html 파일을 만들었다. Shop Add product Add Product 2. sendFile() : 파일을 전송하며 content-type header를 자동으로 생성 기존에는 res.send()로 직접 html 코드를 발송했었다. 이제 res.sendFile()로 html 파일을 발송해보자. // app.js const express = require("express"); const router = express.Router(); router.get("/", (req, res, next) => { res.sendFile("/views/shop.html"); //운영체제의 시점에서 절대경로 }); module.exports = route..

아래와 같이 공통의 경로(/admin)를 포함하는 라우터가 있다고 하자. // admin.js const express = require("express"); const router = express.Router(); // /admin/add-product { res.send( 'Add Product' ); }); // /admin/add-product { console.log(req.body); res.redirect("/"); }); module.exports = router; 둘 다 /admin/add-product라는 url 요청에 응답하지만 get과 post 방식의 접근으로 구분되므로 다른 라우터이다. 이때 라우터 내부에서는 공통의 경로를 삭제하고 아래와 같이 app.js의 미들웨어에서 공통경로..

미들웨어를 활용하면 된다. 기존코드 const express = require("express"); const bodyParser = require("body-parser"); const app = express(); const adminRoutes = require("./routes/admin"); const shopRoutes = require("./routes/shop"); app.use(bodyParser.urlencoded({ extended: false })); app.use(adminRoutes); app.use(shopRoutes); app.listen(3000); 앞서 만든 라우터에 따라 현재 미들웨어는 위에서부터 아래로 브라우저의 요청에 따라 자신이 호출되기를 기다리고 있다. 모든 경로..

지금까지는 라우터를 app.js라는 한 파일에서 모두 처리했다. 그러다보니 코드가 길어지고 무거워졌다. 일반적으로는 라우팅 코드를 여러 파일로 나눈다. 기존코드 const express = require("express"); const bodyParser = require("body-parser"); const app = express(); app.use(bodyParser.urlencoded({extended: false})); app.use("/", (req, res, next) => { next(); }); app.use("/add-product", (req, res, next) => { res.send( 'Add Product' ); }); app.post("/product", (req, res,..