우선 이미지를 담아둘 폴더를 하나 생성한다. 그 다음 app.js에 아래의 소스코드를 추가한다. app.use('/uploads', express.static('uploads')); 완료 후 해당 폴더의 파일명으로 url에 접근하면 이미지를 확인할 수 있다. 출처 : 본 포스트는 패스트캠퍼스의 Node 웹 프로그래밍 올인원 패키지 Online의 박준영 강사님의 강의를 보고 직접 정리한 내용입니다.

body-parser란 form에서 넘어 오는 데이터를 body-parser라는 미들웨어로 처리하는 것을 말한다. 우선 admin.js에 아래 소스를 추가한다. router.get('/products/write', (req, res) => { res.render('admin/write.html') }); 추가하였으면 template/admin 폴더에 write.html 파일을 새로 생성하고 아래의 소스 코드를 넣어준다. {% set title = "제품 등록" %} {% extends "layout/base.html" %} {% block content -%} 제품명 가격 설명 작성하기 {% endblock %} 여기까지가 body-parser를 테스트할 기본적인 준비다. 이제 해당 포트의 해당 url에..

미들웨어는 쉽게 말해 해당 url에 접근할 때 중간 요청을 가로채는 역할을 한다고 생각하면 된다. 테스트를 진행하기 전에 cmd 창에서 logger 확인을 위해 morgan을 intall한 후에 시작한다. 설치가 완료되었으면 app.js로 들어와 아래 소스 코드를 추가한다. const logger = require('morgan') // morgan 호출 app.use(logger('div')); 추가가 완료되었으면 cmd 창에서 app.js를 실행하고 해당 포트의 url에 접속할 때마다 아래와 같이 로그가 확인된다. 기본 세팅이 완료되었고 이제 미들웨어를 만들기 위해 admin.js로 돌아간다. 미들웨어는 3개의 인자(request, response, next) 를 갖는다. admin.js에 아래와 같..

템플릿 상속은 이전 포스트인 nunjucks와 이어진다. 지난번에 생성한 template 하위 요소에 layout 폴더를 생성하고 base.html 파일을 생성한다. 생성한 파일에 아래와 같이 코딩한다. {% block content %}{% endblock %} 위의 이미지의 {} 안에 수정할 products.html의 파일의 내용이 들어간다. 완료 되었으면 아래의 소스코드를 products.html 파일에 넣어준다. {% set title = "관리자 리스트" %} {{ message }} {% extends "layout/base.html" %} {% block content -%} 제목 작성일 삭제 제품 이름 2020-03-07 삭제 작성하기 {% endblock %} 이렇게 하면 jQuery나 ..

관련 게시글 nunjuck macro developing-move.tistory.com/88?category=883220 [node] nunjucks macro base.html에 아래의 소스를 추가한다. {{ title }} List Write {% block content %}{% endblock %} 이 후 http://localhost:3000/admin/products/ (자신이 지정한 y와 같이 자신이 지정한 포트의.. developing-move.tistory.com vscode tempate 폴더 생성 이때 템플릿 구조도 url의 구조를 따라가야 한다. template 라는 폴더를 만들고 그 하위 폴더 admin을 생성한 후 admin 폴더에 products.html 이라는 파일을 생성한다..

해당 예시 실행을 위해서는 Express가 추가 되어 있어야 합니다. 혹시 설치가 되어있지 않거나, 설치법을 모르시는 분은 이전 포스트의 npm install을 보고 오시면 됩니다. 예시 작성을 위한 새폴더 생성 및 새 파일(app.js) 생성 새로 생성한 app.js 파일에 다음과 같이 코딩 const express = require('express'); const app = express(); // 익스프레스 가져오기 const port = 3000; // 포트 번호 app.get('/', (req, res) => { res.send('hello express'); //화면에 표출될 부분 }); app.listen(port, () => { console.log('Express listening on ..