Javascript (128) 썸네일형 리스트형 [node] nunjucks macro base.html에 아래의 소스를 추가한다. List Write {% block content %}{% endblock %} 이 후 http://localhost:3000/admin/products/ (자신이 지정한 y와 같이 자신이 지정한 포트의 url에 접근하면 메뉴바가 뜨는 것을 볼 수 있다. 현재 소스에서는 첫 번째 List에만 검정색 블록이 활성화 되어있고 Write를 클릭해도 블록이 활성화되지 않는다. 템플릿에서 현재 url에 접근이 가능해야 하기 때문에 app.js에 locals변수를 하나 추가한다. app.use( (req,res,next) => { app.locals.isLogin = false; //새로 추가한 변수 app.locals.req_path = req.path; // expr.. [node] 404, 500 error handling 먼저 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 = "에러가.. [node] Global View Variable 예를 들어 상단에 로그인한 사람은 로그아웃 버튼 활성화 로그인 안 한 사람은 로그인과 회원가입이 보이도록 해줘야 하는 경우 템플릿에서만 사용할 글로벌 변수를 선언한다. app.js 에 아래와 같은 소스 코드를 추가한다. app.use( (req,res,next) => { app.locals.isLogin = false; //html 파일에서 isLogin 변수를 사용할 수 있음 next(); }); 해당 소스코드를 추가하게 되면 .html 파일에 해당 변수를 사용할 수 있다. base.html 화면으로 이동하여 아래 소스코드를 추가한다. {% if isLogin %} 로그인 중 {% else %} 로그인이 안 되어 있습니다. {% endif %} 해당 url에 접근 시 아래의 이미지와 같이 로그인 상태가.. [node] 파일 읽기 새로운 폴더(node.js)를 만들어 fileread.js와 sample.txt 생성 sample.txt에 입력하고 싶은 문구 입력 fileread.js에 아래 소스 추가 var fs = require('fs'); fs.readFile('sample.txt', 'utf8', function(err, data){ console.log(data); }); cmd 창에서 fileread.js 실행 출처 : 본 포스트는 이고잉님의 '생활코딩' 강의를 보고 직접 정리한 소스입니다. [node] 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.. [node] 정적파일 우선 이미지를 담아둘 폴더를 하나 생성한다. 그 다음 app.js에 아래의 소스코드를 추가한다. app.use('/uploads', express.static('uploads')); 완료 후 해당 폴더의 파일명으로 url에 접근하면 이미지를 확인할 수 있다. 출처 : 본 포스트는 패스트캠퍼스의 Node 웹 프로그래밍 올인원 패키지 Online의 박준영 강사님의 강의를 보고 직접 정리한 내용입니다. [node] form(body-parser) 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에.. [node] 미들웨어(middleWare) 미들웨어는 쉽게 말해 해당 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에 아래와 같.. 이전 1 ··· 11 12 13 14 15 16 다음
