ALL

Sequelize란?

Sequelize ORM(Object-Relational Mapping) Node.js로 mysql 또는 Postresql(db)를 제어할 수 있게 한다 Postresql는 웹용 엑셀 느낌이며 회원가입 시 한줄 한줄 데이터가 쌓인다 db상에선 user-table이라고 부른다 ORM db를 컨트롤 할 수 있게한다 Sequelize로 CRUD를 구현해본다 셋팅 GitHub - dubipy/Sequelize: Sequelize로 CRUD 제작 Sequelize로 CRUD 제작. Contribute to dubipy/Sequelize development by creating an account on GitHub. github.com

Express - nunjucks macro

//base.html List Write {% block content %}{% endblock %} 코드 상에 나와있듯이 List 클릭 시 /admin/products를 바라보고 write 클릭 시 active를 바라보게 지정한다 현재 URL에 접근이 가능해야하니 변수를 추가한다 app.use((req, res, next) => { app.locals.req_path = req.path; next(); }); req.path는 Express에서 현재 URL로 전해주는 함수이다 base.html body 최상단에 코드를 req_path를 추가한다 {{req_path}} 현재 URL이 추가된 걸 확인할 수 있다 List 이렇게 URL을 지정할 수 있지만 URL이 많아질 수록 반복작업이 되니 매크로로 하나 ..

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 { ..