본문 바로가기

nunjucks7

[220303] npm과 jwt을 활용해서 로그인 확인 기능 만들기 [목록] 1. npm 명령어로 서버 시작하기 2. 코드를 자동으로 갱신해주는 nodemon 3. 로그인시 jwt 생성하기 4. 로그인 확인을 위해 쿠키에서 jwt 정보 추출하기 5. try/catch문을 통해 응답코드 짜기 1. npm 명령어로 서버 시작하기 서버를 시작하는 node server의 의미 node로 된 명령어를 쓸건데, server.js파일을 실행할거란 명령문. 명령문을 이용하면 다른 명령어를 사용해서 서버를 시작할 수 있다. npm run start npm 스크립트 안에 있는 start 명령어를 run(실행)할게. start 명령어는 node server과 연결되어있기때문에 결과적으로 서버가 시작된다. 2. 서버를 자동적으로 갱신해주는 nodemon 서버를 껐다 켜는 것을 반복하지 않아도.. 2022. 3. 3.
[220210] 템플릿 엔진, nunjuck란? 목록 1. nunjucks의 역할 2. nunjucks의 문법 3. nunjucks 설치법 (링크) 1. 브라우저에 입력된 값을 받아 html을 다시 짜는 nunjucks html이나 css를 사용할때, 서로 다른 파일을 연결하기 위해 script나 style을 사용했었다. 그와 같게 자바스크립트도 독립적으로 존재한다. 그래서 js도 서로를 연결해주는 수단이 필요한데, 그게 바로 템플릿 엔진인 nunjucks다. 그렇다면 템플릿 엔진은 뭘까. 지정된 템플릿 양식에 데이터를 조합해서 HTML문서를 만드는 소프트웨어다. 우리가 보는 웹사이트 화면을 만들어줄때 도와준다고 생각하면 쉽다. 간단히 그림을 그려보자면, 이렇게 이해하면 편하다. 웹서버는 헤더를 읽어주는 express를 통해서 브라우저가 보내주는 요청.. 2022. 2. 10.
[220209] 라우터 2개 사용하기, 라우터를 폴더화 시키는 2가지 방법 목록 1) 라우터 2개 사용하기 2) 다른 파일에 있는 코드를 불러오기 3) 라우터를 폴더화 시키기 라우터에 미들웨어 2개 넣기 app.get('/join', (req,res,next)=>{console.log('join1'); next()}, (req,res)=>{console.log('join2')} ) 2개를 이렇게 넣을 수도 있지만 보기에 복잡해서 따로 변수로 받아 넣는 경우가 더 많다. //2) 코드 안에 없으므로 코드 밖에서 a를 찾는다 let a = (req,res,next)=>{ console.log('join1'); next() } app.get('/join', a, (req,res)=>{ //1) a를 코드 안에서 찾는다. //3) a를 실행한다 //4) 그 다음 인자를 실행한다. co.. 2022. 2. 9.
[220208] 라우터와 미들웨어, 매개변수 next, 라우터 매개변수 목록 1. 라우터와 미들웨어 2. 미들웨어 매개변수 next 3) 라우터 매개변수 미들웨어와 라우터의 정의 미들웨어는 양쪽을 연결하여 데이터를 주고 받을 수 있도록 중간에서 매개 역할을 하는 소프트웨어다. 라우터는 클라이언트의 요청경로를 보고 이 요청을 처리할 수 있는 곳으로 기능을 전달해 주는 역할을 한다. 이러한 역할을 라우팅이라고 하는데, URI(통합 자원 식별자, 인터넷에 있는 자원을 나타내는 주소)의 정의와 URI가 클라이언트 요청에 응답하는 방식을 의미한다. express에선 라우터를 미들웨어로 다음과 같은 기능을 제공하고 있다. 1) 라우터 객체 참조 2) 라우팅 함수 등록 3) 라우터 객체를 app객체에 등록 해당 라우터가 실행되면 첫번째 인자값인 '/'을 충족한 후에, 두번째 인자값인 미.. 2022. 2. 9.
[220207]크롬에서 개발자도구>네트워크를 켠 상태에서 새로고침을 하면 인터넷이 끊기는 현상 해결 네트워크 수업을 따라가야하는데 크롬에서는 매번 오류가 떠서 환장하겠다. 혼자서 해결을 도저히 못해서 교수님께 질문했고, 5분만에 고쳐주심. 감사합니다ㅠㅠㅠㅠㅠㅠ 개발자도구 > 네트워크로 들어가서 빨간 박스를 누르면 다음같은 박스가 뜨는데, 나는 오프라인으로 되어있었다. 혹시 또 이런일이 일어날지도 모르니까 미래의 나를 위해서 적어놓는다. 그리고 미래의 나야, 앞으로 에러메세지가 뜨면 그거 긁어서 구글에 때려박아서 검색돌리렴. 굳이 한글로 문제 입력하지말고. 그게 가장 최선의 해결방법이야... 2022. 2. 7.
[220204] 서버로 이루어진 게시판 만들기(CRUD 구현 : 생성,작성,수정,삭제) 목록 1. 홈 만들기 2. 리스트 게시판 만들기 3. 글쓰기 게시판 만들기 4. 글보기 게시판 만들기 5. 글삭제 기능 만들기 6. 글수정 기능 만들기 여태까지 배웠던 내용을 총 정리하면서 게시판을 만들어보자. 웹템플릿 express, 템플릿엔진 nunjucks를 사용하기 위한 전제코드는 밑에 적어놓고, 앞으로 설명할때는 생략하겠다. //express를 쓰기 위한 세팅 const express=require('express') const app=express() //nunjucks를 쓰기 위한 세팅 const nunjucks=require('nunjucks') app.set('view engine','html') nunjucks.configure('views',{ express:app }) //heade.. 2022. 2. 4.
[220128] express 모듈로 서버 시작하기, 요청헤더, 응답헤더, form과 연결하기 목록 1. 헤더란? 2. 서버시작하기 3. 요청헤더 (express 모듈 : get, post) 4. 응답헤더 (express 모듈 : send, render) 5. form과 연결하기 1. 헤더란? : 긴 텍스트로 이루어진 요청헤더, 응답헤더 브라우저가 해당 서버에 대한 htto://localhost:3000을 입력하게되면 요청을 하게된다. '/' : 현재 연결되어있는 호스트. 아무것도 적어놓지 않았기때문에 기본(홈)주소를 뜻함 app.get('/',(req,res)=>{ res.send(`hello world`) } 요청을 하는 data(긴 텍스트 정보들)는 연결되어 있는 파일로 넘어오고, request가 get인 이 코드가 받게된다. 네트워크에 접속하고 개발자도구에 들어가면 다음과 같은 값을 볼 수.. 2022. 2. 3.