본문 바로가기

전체 글280

[220208] 라우터와 미들웨어, 매개변수 next, 라우터 매개변수 목록 1. 라우터와 미들웨어 2. 미들웨어 매개변수 next 3) 라우터 매개변수 미들웨어와 라우터의 정의 미들웨어는 양쪽을 연결하여 데이터를 주고 받을 수 있도록 중간에서 매개 역할을 하는 소프트웨어다. 라우터는 클라이언트의 요청경로를 보고 이 요청을 처리할 수 있는 곳으로 기능을 전달해 주는 역할을 한다. 이러한 역할을 라우팅이라고 하는데, URI(통합 자원 식별자, 인터넷에 있는 자원을 나타내는 주소)의 정의와 URI가 클라이언트 요청에 응답하는 방식을 의미한다. express에선 라우터를 미들웨어로 다음과 같은 기능을 제공하고 있다. 1) 라우터 객체 참조 2) 라우팅 함수 등록 3) 라우터 객체를 app객체에 등록 해당 라우터가 실행되면 첫번째 인자값인 '/'을 충족한 후에, 두번째 인자값인 미.. 2022. 2. 9.
[220208] 세션의 정의, 세션 구조 구현하기, 세션과 쿠키🍪의 관계 목차 1. 세션이 생겨난 이유 2. 세션 구현하기 3. 쿠키를 생성해서 서버에 저장하기 세션을 만든 이유 : 보안성을 위해. 이처럼 브라우저에 쿠키가 없으면 웹서버에 요청을 하며, 웹서버는 응답을 하며 🍪쿠키를 준다. 그 이후부터 브라우저는 쿠키를 같이 붙여서 웹서버에 요청을 하고, 웹서버는 쿠키를 붙여서 응답한다. 즉, 웹서버는 기본적으로 항상 쿠키를 받는다. 다만 문제가 있다면, 브라우저에 저장을 하다보니 다른 사람이 접근하기도 쉬워진다. pc방을 예로 들어보자. A가 이용을 끝낸 후, B가 브라우저를 열어 쿠키를 확인하면 로그인정보가 고스란히 남아있다. 그걸 보고 게임머니나 각종 개인정보를 털어갈 수 도 있다. 이를 방지하기 위해, 쿠키를 서버에 저장하게 하는것이 세션이다. 구현할 기능 청사진 청사.. 2022. 2. 9.
[220207] 로그인 페이지 만들기 목록 1. 청사진 그리기 2. login 페이지 3. logout 페이지 4. profile 페이지 청사진 그리기 login페이지 정보를 입력할 창 만들기 & 입력한 정보가 터미널에 찍히도록 만들기. 브라우저에서 입력한 정보와 user라는 객체에 있는 정보가 서로 일치하는지 확인하기 오류해결 [ERR_HTTP_HEADERS_SENT]:Cannot set headers after they are sent to the client at new NodeError 해결하기 코드를 잘못 적어서 에러가 났는데, if문이나 반복문에서 중복된 값이 호출될때 생기는거라고하더라. 보니까 사이트를 2번 호출하게 잘못 적어서 해결함. 로그인이 성공했을때, 쿠키 만들어주기 res.setHeader(`Set-Cookie`,`lo.. 2022. 2. 8.
[220207]크롬에서 개발자도구>네트워크를 켠 상태에서 새로고침을 하면 인터넷이 끊기는 현상 해결 네트워크 수업을 따라가야하는데 크롬에서는 매번 오류가 떠서 환장하겠다. 혼자서 해결을 도저히 못해서 교수님께 질문했고, 5분만에 고쳐주심. 감사합니다ㅠㅠㅠㅠㅠㅠ 개발자도구 > 네트워크로 들어가서 빨간 박스를 누르면 다음같은 박스가 뜨는데, 나는 오프라인으로 되어있었다. 혹시 또 이런일이 일어날지도 모르니까 미래의 나를 위해서 적어놓는다. 그리고 미래의 나야, 앞으로 에러메세지가 뜨면 그거 긁어서 구글에 때려박아서 검색돌리렴. 굳이 한글로 문제 입력하지말고. 그게 가장 최선의 해결방법이야... 2022. 2. 7.
[220207] 쿠키 / http 요청, 응답, 브라우저, 특징 [목록] 사전지식 : 응답헤더에 임의로 값을 추가하기 브라우저의 저장소 중 하나인 쿠키 사용자마다 다른 정보를 브라우저에 저장하는 쿠키값 쿠키 사용 설명서 코드의 실행흐름 쿠키에 저장한 내용을 다루기 쿠기의 유효기간, 접근권한 사전지식 : 응답헤더에 임의로 값을 추가하기 이전수업까지는 body 내용만 작성해서 보냈지 header부분은 작성해서 보낸적이 없다. express가 header부분을 작성해주던 긴 텍스트. 오늘은 express가 만들어주는 헤더에다가 우리가 임의로 추가해서 넣을것이다. 응답을 줄때 헤더에 내용을 추가할거니까 다음 코드를 작성한다. res.Header('headerKey','headerValue') : 둘다 string인 인자값을 가짐 app.get('/',(req,res)=>{ .. 2022. 2. 7.
[220204] nvm 완벽삭제하기, 맥OS(M1칩) nvm is not compatible with the npm config "prefix" option: currently set to "/opt/homebrew" Run `npm config delete prefix` or `nvm use --delete-prefix v16.13.2 --silent` to unset it. 갑자기 터미널을 시작하면 이런 메세지가 뜬다. nvm은 npm 구성 "접두사" 옵션과 호환되지 않습니다: 현재 "/opt/homebrew"로 설정됨 `npm config delete prefix` 또는 `nvm use --delete-prefix v16.13.2 --silent`를 실행하여 설정을 해제합니다. 구글에 검색해보니 이런 메세지가 뜨는데 어.. 뭔 말이지. 그냥 싹 지우고.. 2022. 2. 4.
[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.
티스토리 코드블럭 스타일 수정하기 - 모서리 둥글게, 줄간격, margin 코드블럭 안의 폰트스타일이나 배경색을 바꾸고 싶은 경우는 다음 글에 게시해놓았다. https://hancoco.tistory.com/55 티스토리 코드블럭 스타일 수정하기 - highlight, 어두운 배경, 원하는 폰트로 바꾸기. 방법은 2가지다. 1) 블로그 관리 > 플러그인 > 코드 문법 강조를 선택해서 코드블럭 스타일을 바꾼다. 2) 직접 스타일을 받아서 바꾼다. ( 여기서 주의할점은, 위에서 말한 코드 문법 강조를 해제한 hancoco.tistory.com 코드블럭 폰트랑 배경색을 바꾸고나니 좀더 욕심이 생긴다. 줄간격도 넓히고 삐쭉한 모서리도 좀 둥글둥글하게 바꾸고 싶다!!!! 그러니, 바꿔보자. 1) 티스토리 블로그관리 > 스킨편집 > html 편집 > css에 들어가자 2) css에 해당 .. 2022. 2. 3.
티스토리 코드블럭 스타일 수정하기 - highlight, 어두운 배경, 원하는 폰트로 바꾸기. 방법은 2가지다. 1) 블로그 관리 > 플러그인 > 코드 문법 강조를 선택해서 코드블럭 스타일을 바꾼다. 2) 직접 스타일을 받아서 바꾼다. ( 여기서 주의할점은, 위에서 말한 코드 문법 강조를 해제한 상태여야한다. 별 다섯개!!!!! ) 1. 원하는 스타일의 폰트를 고르기 https://highlightjs.org/static/demo/ highlight.js demo highlightjs.org 여기 들어가서 원하는 스타일의 폰트를 고른다. 나는 Atom One Dark를 골랐다. 2. 설치방법을 선택하기 폰트를 설치하는 방법은 두가지가 있다. 첫번째는 파일 다운로드를 하지않고 네트워크로 연결해서 바꾸는 cdnjs 방법. 두번재는 파일을 다운로드해서 폰트를 바꾸는 방법. 첫번째는 간편하지만 인터넷 상.. 2022. 2. 3.

티스토리툴바