Enjoy Programming

유저 프로필 페이지를 수정을 해줄 건데 약간의 수정사항과 추가사항이 있다. 일단 로그인한 유저의 프로필 페이지로 이동을 하면 기존에는 /:id 를 이용해서 갔는데 userDetail 컨트롤러를 이용해서 id값을 찾아 이동을 했다. 사용자마다 똑같은 user template을 이용하는데 이부분을 바꾼다. 그래서 사용자 프로필 페이지 routes와 컨트롤러를 하나 더만들어준다 헤더 템플릿으로 가서 경로도 다시 설정 해주자 기존 userDetail과 같은 기능을 하지만 다른점은 userDetail은 사용자를 찾는 과정이 필요한데 새로 만든 getMe user를 지금 로그인한 유저인 req.user로 전달한다. 햔재 userDetail은 제 역할을 못하기에 프로필 페이지 접속후 :id부분의 url을 임의로 바꿔..

사용자 정의 인증방식과 깃헙strategy 방식 두가지를 했다. 사용자 정의 인증방식(passport-local)은 username과 passport를 post방식으로 전달하고 passport-local-mongoose 플러그인을 통해 자동으로 체크해준다. 만약 password가 일치하면 passport가 쿠키를 자동으로 생성한다 passport-github strategy는 먼저 사용자를 깃헙 페이지로 보내고 깃헙에서 권한 승인을 하고 이후 깃헙은 요청한 웹에 인증정보를 전송하고 내가 설정한 callback url로 오게 된다. 이때 passport가 내가 만들어놓은 콜백함수를 호출한다 이콜백 함수는 토큰과 프로필 cb를 받게되고 프로필의 이메일 값을 db의 유저들중 같은 이메일이 있는지 확인하고 있으..

앞서 인증 정보를 받았을때 토큰과 프로필 cb가 있었는데 토큰은 신경안쓰고 githubId & email & name & avartar 이것들이 중요한 정보이다. 현재 _json형태로 담겨있고 그안에서 정보를 추출하자 cb는 무엇인가 - cb는 passport에서 제공된 callback함수이다. 그리고 passport에서 이 callback 함수는 인증이 성공했을 때 호출이 된다. 이때 두가지 옵션이 있는데 한가지는 cb를 호출 할 때 에러 없이, user를 넣어주는 것, 에러가 없다고 하고 user object를 넣고 함수를 호출 하면 passport는 user ID를 쿠키에 넣어주고 사용자 인증방식으로 인증할 때와 똑같은 process가 진행된다. 만약 user object 없이 에러만 넣어서 cb를..

아 잠을 못자서 그런가 키보드 타이핑이 잘 안된다. ㅡㅡ;; 이제 소셜 로그인에 대해서 다뤄보자 passport site에 가서 strategy중 github을 살펴보자 (이제 감이 온다 strategy는 전략이다 passport가 만들어놓은.. local일지 github일지 인스타그램일지 어떤 사이트일지 모르지만 각 passport에서 각사이트마다 인증 전략을 새워놓은 것이다.) 우선 npm install passport-github으로 설치를 한다. 음 이모듈은 깃헙을 이용해서 너의 node.js 앱의 인증을한다. passport 에 견결해서 깃헙 인증은 express를 포함한~~~어쩌고 자 다음 섹션을 보면 passport-github을 이용하기 전에 깃헙에 앱을 등록해야 한다~ 깃헙에서 setti..

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