본문 바로가기

전체 글

 (163)
[JAS] Web Socket 패키지 설정 1. socket.io 모듈을 다운 받아준다. npm install socket.io const socket = require('socket.io'); 2. http 라이브러리 사용 web socket을 사용할때에는 express 사용이 안돼서 http라이브러리를 사용해 줘야한다. socket과 연결해서 http 문서를 읽기 위해서 사용함. const http = require('http'); 다만 http 라이브러리는 이미 node.js의 내장 모듈로서 존재하기 때문에 따로 install을 할 필요는 없다. 3. 서버 생성 http method인 createServer 메서드를 사용해서 express와 연결된 server를 생성해준다. const server = http.createServer(app)..
token 생성 및 검사 결과 확인을 위해서 db를 만들지 않고 id:root, pw:root를 기준으로 시작했다. A. 토큰 생성 및 쿠키에 저장 1. login페이지에 와서 맞는 값을 입력했을때 미리 만들어둔 토큰 생성 미들웨어로 토큰을 생성한다. 토큰 생성은 2021.05.27 - [Lecture] - TOKEN 암호화 참고 2. 생성한 토큰을 옵션값과 함께 cookie에 저장해준다. app.post('/auth/local/login',(req,res)=>{ let {userid,userpw} = req.body; let result = {}; if(userid=='root' && userpw=='root'){ result = { result:true, msg:'login success' } let token = ctoke..
Cookie 이해하기 쿠키를 res.cookie('token','aaa') 이런식으로 서버에서 설정해서 보낼 수 있음. res.cookie()는 응답메세지에서 header부분에 쿠키를 생성해서 보내겠다는 의미다. console창에 document.cookie했을때 나오지 않도록 option값을 {httpOnly:true,secure:true,} 이런 식으로 넣어줘도 된다. 쿠키에 정보를 한번 넣게 되면 storage에 정보가 저장되서 어떤 걸 요청할 때마다 storage로부터 값을 가지고 와서 요청한다. 그래서 서버가 옮겨져도 계속 쿠키값이 남을 수 있는것.
TOKEN 암호화 token이 생성되는 순서 1. client가 server에게 ID 와 PW를 보낸다.(요청) 2. server가 ID,PW를 DB에서 조회 후 결과가 맞으면 token을 생성함. (암호화를 거쳐서 생성함) 3. server가 생성한 token을 client에게 보내줌(응답) 4. client가 token을 cookie에 저장한다.(대부분) 5. 4번까지 완료한 후 client는 매 요청마다 token을 보낸다. 토큰을 생성할땐 데이터 암호화를 거치는데 그때 crypto라는 라이브러리를 사용한다. 각각 객체에 담긴 값들이 있다고 가정하자 let header = { 'alg': 'HS2560', 'typ': 'JWT' } let payload = { "sub": "1234567890", "name": "H..
비동기 통신 로딩 처리 비동기 처리를 하는데 기다리는 시간동안 로딩이 돌아가게 만들고 싶으면 이미지를 넣고 display : none으로 준다음 버튼을 눌렀을때 display : block으로 바꿔준다. 그리고 텍스트가 특정 div에 채워질때(비동기 처리가 완료될때) 다시 display:none으로 바꿔주면 된다. 1. 이미지 삽입 + display:none처리 2. onclick이벤트 발생시 display:block처리 3. 비동기 처리 완료되었을때 display : none으로 다시 되돌려 놓음. 결과를 확인하기 위해 setTimeout을 사용해서 텀을 줘봤다. 버튼을 누른뒤 3초뒤에 결과가 나오도록 설정후 버튼을 누르면 결과값 : 3초후엔 원래 나와야할 결과 값이 나오게 된다.
HTTP 비동기 통신 2021.05.25 - [Lecture] - HTTP 동기 통신 저번글은 HTTP 통신중 동기 통신에 대해서 다뤘다. 동기통신은 요청 하나 => 응답 하나 이런 식으로 http프로토콜을 따른다 그래서 버튼을 눌렀을때 새로운 페이지가 로딩되면서 정보값을 주고 받는다 하지만 만약 내가 현재 있는 페이지에서 페이지 로딩 없이 계속해서 요청과 응답을 주고 받고 싶다면 비동기 통신을 이용해야 한다. 비동기 통신의 방법 중에 axios를 사용할 수 도 있지만 이번에는 fetch를 사용했다. 전체 코드 더보기 HTML 비동기 활용하기 GET 통신하기 비동기 활용하기 POST 통신하기 JAVASCRIPT const express = require('express'); const nunjucks = require('nu..
HTTP 동기 통신 HTTP 통신의 형태는 크게 4파트로 구성되어있다. 1. start-line 2. Headers 3. empty line 4. body 이렇게 4파트의 형식을 가진 REQUEST 와 RESPONSES가 서로 통신을 주고 받는걸 HTTP 통신이라고 하는데 각각 어떤 내용을 담고 있는지 확인해 보자 REQUEST 1. start line => request method(GET or POST) 현재 URL HTTP버전 예시) GET http://localhost:3000 HTTP/1.1 2.headers 헤더는 화면에 꾸며지지 않는 정보들을 담고 있다. 몇가지만 살펴보자 host: 사이트의 도메인 주소(ex: 네이버, 구글) user-agent: 사이트를 사용하고 있는 user의 정보 content-type:..
미들웨어로 로그인 확인하기 GOAL : 로그인을 하지 않은 상태로 이동할때 제한을 두고 싶다. if문으로 하나하나 설정해줄 수도 있지만 같은 내용의 반복이기 때문에 하나의 미들웨어로 검사 해보자. const authMiddleware = (req,res,next)=>{ const {session} = req; } 일단 미들웨어 함수를 만들어주고 받아온 request값에 session값만 받아온다. 여기서 if문 처리를 해준다. const authMiddleware = (req,res,next)=>{ const {session} = req; if(session.authData == undefined){ console.log('NO LOGIN INFORMATION'); res.redirect('/?msg=NO LOGIN INFORMA..

티스토리툴바