전체 글
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..
Three.js - Renderer, Scene, Camera
Three.js의 큰 틀은 3가지가 있다 제목처럼 Renderer, Scene, Camera 출처: youtube 디자인베이스 장면을 만들어서 3D Object를 넣고 카메라로 비춰고 Renderer를 통해서 html 파일안에 보여주는식이다 Renderer 카메라에 담긴 장면을 웹사이트에 구현해주는 Renderer이다 Scene 여러개의 3D 오브젝트, 즉 말 그대로 특정한 장면이 모인 것 (안개, 배경색, 배경 등) Camera 시야각, 종횡비, 카메라 시작 끝 지점, 카메라 등 3D 공간의을 카메라로 위치 특정 데이터를 비춰서 Renderer 에게 전달해준다 index.js에 Renderer, Scene, Camera 함수 추가 import * as THREE from 'three' import { ..
Three.js - webpack, 보일러플레이트 설치
webpack이란 프론트엔드 모듈 번들러 웹 애플리케이션을 구성하는 자원(HTML, CSS, JS, Image 등)을 각각의 모듈로 보고 이를 병합된 하나의 결과물을 만드는 도구이다 보다 쉽게 작업하기 위해 Three.js + Webpack가 포함된 보일러플레이트 설치 보일러플레이트란 Boilerplate code 기초 골격을 통으로 찍어내는 플레이트, 매번 반복적인 코드를 짤 필요없는 코드 디자인 오픈 소스와 비슷한 개념이다 아래 깃헙에서 오픈소스로 사용 가능하다 three.js Boilerplate를 오픈소스로 올려서 공유해주시는 분들께 감사를 표합니다 https://github.com/aakatev/three-js-webpack $ npm i $ npm run start localhost:9000 ..
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..