먼저 404, 500 에러 시 보여줄 템플릿 파일을 작성한다. template 하위 폴더에 comoon 폴더를 생성하고 404.html/ 500.html 파일을 각각 만들어준다. 만든 파일에 아래와 같은 소스 코드를 추가한다. 먼저 404 {% set title = "페이자가 없습니다" %} {% extends "layout/base.html" %} {% block content -%} 페이지가 없습니다. {%- endblock %} 다음으로 500 {% set title = "에러가 발생했습니다" %} {% extends "layout/base.html" %} {% block content -%} 에러가 발생했습니다. {%- endblock %} 다음으로 500 소스 {% set title = "에러가..

예를 들어 상단에 로그인한 사람은 로그아웃 버튼 활성화 로그인 안 한 사람은 로그인과 회원가입이 보이도록 해줘야 하는 경우 템플릿에서만 사용할 글로벌 변수를 선언한다. app.js 에 아래와 같은 소스 코드를 추가한다. app.use( (req,res,next) => { app.locals.isLogin = false; //html 파일에서 isLogin 변수를 사용할 수 있음 next(); }); 해당 소스코드를 추가하게 되면 .html 파일에 해당 변수를 사용할 수 있다. base.html 화면으로 이동하여 아래 소스코드를 추가한다. {% if isLogin %} 로그인 중 {% else %} 로그인이 안 되어 있습니다. {% endif %} 해당 url에 접근 시 아래의 이미지와 같이 로그인 상태가..

먼저 url의 구성이다. Url의 구성 http:opentutorials.org:3000/main?id=MTML&page=12 http -> protocol opentutorials -> host(domain) 3000 -> port main -> path(컴퓨터 디렉토리) id=MTML&page=12 -> query string url에 queryString을 화면에 출력하는 소스 var http = require('http'); var fs = require('fs'); var url = require('url'); //url이라는 모듈을 사용할 것이다. var app = http.createServer(function(request,response){ var _url = request.url; va..

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에 아래와 같..

동기와 비동기를 나누는 가장 큰 차이는 어떻게 실행 순서를 가지느냐에 있다. 아래 이미지와 같이 동기(Synchronous)는 요청을 보낸 후 해당 요청의 응답을 받아야 다음 동작을 실행하는 방식을, 비동기( Asynchronous)는 요청을 보낸 후 응답과 관계 없이 다음 동작을 실행할 수 있는 방식을 의미한다. 아래와 같이 일반적으로 함수를 작성하여 호출하면 동기적으로 실행된다.function work() { const start = Date.now(); for (let i = 0; i 위 결과와 같이 함수 로직이 끝난 후에야 '다음 작업'이라는 문구가 호출되는 것을 볼 수 있다. 그리고 이를 비동기적으로 전환하려고 한다면 setTimeout을 사용하여 아래와 같이 변경할 수 있다.func..