Enjoy Programming

html 코드. 음 잘 봐야 할 것은 data-key를 저장해주는데 어떤 값이든 audio와 일치해야 내가 원하는 키를 눌렀을때 원하는 오디오를 이벤트로 발생시킬 수 있다. data-key 속성값을 이용해서 쿼리를 가져오기 때문이다. 아 그리고 기존에는 키 이벤트 사용시 keyCode 속성을 이용했는데 현재는 지양하길 권한다고 한다. 그래서 key 또는 code 속성을 이용해주라고 한다. css 코드이다 다른건 별거 없고 .playing부분이 자바스크립트로 이벤트 발생시 추가해줄 클래스명이고 스타일 효과이다. 자 이제 자바스크립트 코드를 보자 윈도우창에서 이벤트 리스너를 통해 keydown 이벤트가 발생하면 playSound라는 이벤트를 실행해주고 playSound이벤트는 key와 audio를 쿼리셀렉터..

기본적으로 express session은 cookie는 id만 저장할 뿐 data는 서버 store에 해야한다. default session storage는 Memory store이고 실제 사용하기 위해 있는 것이 아니다. session을 유지 하기 위해서는 메모리가 아닌 서버 데이터베이스를 사용해서 session을 저장해야 한다. 먼저 필요한 모듈인 connect-mongo를 설치해주자 그리고 app.js에 import 해준다 session을 MongoStore에 할당하고 CookiStore에 넣어준다 그리고 session미들웨어에서 store 옵션을 주자 new생성자로 CookieStore란 store를 생성해주고 CookieStore와 mongoDB를 연결해준다. 아 mongoose를 import ..

바로 들어가자 npm i express-session 익스프레스 세션을 설치 해주고 app.js에 import passport로 초기화및 세션을 저장해주기 전에 사용해 주자 session은 option을 지정해 주는데 쿠키나 도메인을 원하는데로 바꿔줄 수 있고 유효기간도 설정해 줄 수 있다. 그중 중요한 옵션인 secret을 지정해주자 - random string으로 쿠키에 있는 session ID를 암호화 하기 위한 것이다. session id를 보낼때 실제로 그 값을 그대로 보내진 말자.. 중요정보다 암호화 해주자 randomkeygen.com/ RandomKeygen - The Secure Password & Keygen Generator RandomKeygen is a free mobile-fri..

자 이제 기존에 설정한 로컬 미들웨어를 수정해보자 기존에는 가짜 인증을 만들어서 로그인을 시켰었고 이제는 실제 정보가 있다 res.locals.user = req.user - passport가 user정보를 object로 만들어서 이 정보를 request에 올려준다. 이로써 template들이 local로 유저정보에 접근할 수 있게 해준다. 아 그리고 한가지 or null을 쓴 이유는 유저 정보가 없으면 템플릿에 뿌려줄 정보가 없다.. 이때는 null을 넘겨주도록 하자. 그리고 app.js로 가자 cookieparser 밑에 passpor모듈을 임포트 해줬다. 그리고 passport.js도 import 해주자. 그리고서 localsmiddleware위에 이 두녀석을 사용해 주자. 이렇게 작성하면 cook..

자 이제 사용자 인증을 쉽게 구현해 줄 passport Js를 사용해 봅시다. 앞서 포스팅한 쿠키와 세션인증을 도와줄 녀석이다. 자 쿠키와 세션 다시 한번 복기 하자. 유저를 기억하는 방법중 한가지는 유저에게 쿠키를 보내주는 것이다. 세션은~~ 서버와 브라우저간에 어떤 활동을 했는지 기억하는 것을 말한다. 어떤 사이트에 로그인 했다면 현재 사용하고 있는 브라우저와 내가 만든 백엔드 사이에 세션이 존재한다. 세션은 유효기간이 있기 때문에 일정시간이 지나면 사라진다. http는 stateless이기 때문에 브라우저와 서버가 한번의 요청과 응답이 끝나고나면 session이 종료된다. 유저가 백엔드에 요청을 할때마다 누가 요청했는지 지속적으로 알 수 있어야 하는데 이것을 유지시켜 주기 위해 세션Id를 쿠키에 담..

이번엔 session을 다뤄보자 먼저 앞서 다룬 쿠키와같이 session은 http프로토콜의 약점을 보완하기 위해서 존재한다. session이란 일정 시간동안 같은 사용자(정확히 브라우저)로 부터 들어오는 일련의 요구를 하나의 상태로 보고 ㅡ그 상태를 일정하게 유지시키는 기술... 여기서 일정 시간이란 방문자가 웹 브라우저를 통해 웹 서버에 접속한 시점으로부터 웹브라우저를 종료함으로 끝내는 시점 즉, 방문자가 웹서버에 접속해 있는 상태를 하나의 단위로 보고 세션이라고 한다. 쿠키와의 차이점은! 쿠키는 컴퓨터의 메모리에 저장! 세션은?! 세션은 방문자의 요청에 따른 정보를 방문자 메모리에 저장하는 것이 아닌 웹서버가 세션 아이디 파일을 만들어 서비스가 돌아가고 있는 서버에 저장하는 것을 말함. 쿠키와 세션..