NODE.JS/Express

Express - Global View Variable

상단에 메뉴가 있고 로그인 / 비로그인에 따라 화면 뷰가 다르게 보이게 하고 싶다 비로그인일 경우 회원가입 혹은 로그인 사이트가 보이게끔 하는 사이트이고 로그인을 하면 그에 따른 다른 사이트가 보이게끔 하고싶다 우리가 지정한 router 마다 매번 경로에 따라서 지정해줘야하는데 굉장히 비효율적이라고 생각한다 그래서 템플릿에서만 사용하는 글로벌 변수를 템플릿에 셋팅해줄 수 있다 app.js에 코드 추가 app.use( (req, res, next) => { app.locals.isLogin = true; next(); }) isLogin만 변수만 있다면 어디서든 접근이 가능하게 되었다 layout 폴더에 base.html에 코드 추가 {% if isLogin %} 로그인 중 {% else %} 로그인이 안..

Express - 정적파일

Express에서 URL을 만들 때 직접 라우팅을 해서 작성했는데 css나 이미지를 올리는 경우도 있다 이럴 때 하나하나 URL을 만들어서 작업하면 효율적이지 않으니 정적파일을 이용한다 이미지를 담을 수 있는 uploads라는 폴더를 만들고 아무런 이미지파일을 넣는다 app.js에 코드 추가 app.use("/static", express.static("uploads")); 코드에서 볼 수 있듯이 앞에 /static는 URL이고 "uploads"는 VSC에서 만든 폴더명이 된다

Express - from { body-parse }

현재 admin/products 경로는 이 상태이다 작성하기 버튼의 경로는 /admin/products/write인데 라우팅을 해주지 않았으므로 추가 라우팅을 만들어준다 //routes/admin.js router.get('/products/write' , (req, res) => { res.render('admin/write.html'); }) 다시 작성하기 누르면 "template not found: admin/write.html" 이라고 뜬다 현재 페이지가 없다는 뜻 template > admin > write.html를 만들고 아래 코드를 write.html에 작성한다 {% set title = "제품 등록" %} {% extends "layout/base.html" %} {% block cont..

Express - 미들웨어

Express에서 미들웨어는 아주 중요한 부분이다 흔히 볼 수 있는 기능 중 하나가 있는데 로그인을 하지 않았을 때와 했을 때의 화면이 다르게 보이는 사이트가 종종 있다 대표적으로 로그인을 했을 때 추가적은 기능을 통해 사이트를 볼 수 있는 것과 같은 개념이다 router.get('/products' , (req, res) => { if(로그인이 안되어있으면 이동) res.redirect('/accounts/login'); res.send('admin 이후 url') }); router.get('/products' , (req, res) => { if(로그인이 안되어있으면 이동) res.redirect(); 미들웨어를 만들고 호출하면 매번 반복적인 작업을 하지 않아도 된다 미들웨어 만들기 먼저 사용자가 ..

Express - 템플릿상속

공통파일, 자바스크립트, 제이쿼리 등 템플릿 파일이 생성되어있으면 다음 생성될 때 해당 파일을 참조할 수 있다 공동된 템플릿을 구해오는 형식이며 nunjucks 기능이다 //app.js nunjucks.configure('template', { autoescape : true , express : app });먼저 autoecape : true 기능에 대해 알아본다 admin.js에서 message 부분을 string이 아닌 html 태그로 바꿔서 진행해본다면 아래처럼 나오게된다 만약 고객이 게시판을 통해 JS 코드나 공격기법을 진행해서 그대로 출력이되면 안되니 내용 그대로 출력할 수 있게 내용 그대로 출력이 되게끔 하는 기능이다 공통파일 제작 vsc template 폴더 내에 layout..

Express - view engine

DB에서 아래 코드 처럼 http 요청을 받아서 html에 뿌려주게 되는데 템플릿의 상속을 이용하거나, 문법에 차이에 따라 사용되며 여러 방법이 있다 app.get('/', (req, res) => { res.send('hello, 안녕, 안녕하세요'); }); app.get('/test-site', (req, res) => { res.send('hello test-site, get 요청했어!'); }); app.use ( '/admin', admin ); app.listen(port, () => { console.log('Express listening on port', port); }); view engine의 Nunjucks를 사용 $ cd code_test $ npm install nunjucks..

Express - Routing

GET 요청으로 여러 파일을 추가해본다 각각의 컴포넌트에 맞게 폴더를 생성해주고 파일을 리팩토링한다 폴더 생성 - routes - 하위 파일 생성 - admin.js 해당 URL 링크는 admin 내에 있는 URL 이다 const express = require('express'); const router = express.Router(); router.get('/' , (req, res) => { res.send('admin 이후 url') }) module.exports = router; 만약 admin 내에 추가 링크를 지정하고 싶다면 아래 추가 router.get을 생성하고 /products 라는 링크를 넣어준다 //admin.js router.get('/products' , (req, res) ..

Express란?

Express란 node.js를 위한 간결한 웹프레임워크이다 여기서 node.js란 JavaScript를 브라우저 밖에서 사용하게 해주는 프로그램이라고 한다 node.js를 사용해서 서버를 만들어보자 먼저 해야할게 무엇이 있을까? AWS서버, NAS 개인서버, 메일서버 등등을 생각해보고 구상도도 그려보고 리눅스도 설치해야겠고 IP 주소도 설정하고 등등 해야할게 아주 많을것이다 Express는 node.js를 사용하여 이런 서버를 개발하고자 하는 개발자들을 위해 서버를 쉽게 구성하고 제작할 수 있게 해주는 프레임워크다 Express를 사용하지 않고 웹 서버를 띄운다고하면 사용자는 요청하고 서버에선 받는게 기본적인 웹 서버의 기준이다 사용자가 원하는 데이터를 볼 수 있게끔 정리해놓고 즉각 보여지게 하는 코드..