일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- javscript
- 리액트
- frontend
- Session
- heroku
- Flutter
- nodejs
- graphQL
- DART
- backend
- GRID
- CSS
- ES6
- clonecoding
- CLONE
- pug
- form
- ECMAScript
- NextJs
- MongoDB
- express
- Mongoose
- HTML
- react
- TypeScript
- 자바스크립트
- node.js
- Component
- API
- JavaScript
- Today
- Total
목록MongoDB (21)
Enjoy Programming

코멘트 작업을 해주는데 프론트 엔드 작업을 하기전에 백엔드 부터 해본다. root를 설정해주러 routes.js에서 api part에 url 설정을 해주고 videoController에서 postAddComment컨트롤러를 만들고 (videoDeail컨트롤러에서 populate를 이용해 creator와 comments를 가져온다) video, user를 이용해 comment를 만들고 넣어준다. 그리고 apiRouter에서 post방식으로 라우터 하나 만들어준다. 이제 템플릿에가서 코멘트 폼을 만들고 코멘트 리스트를 만들자. 그리고 이번에는 ajax를 통해 서버로 코멘트 정보를 보내고 받아오겠다. 프론트에서 작동할 addComment.js하나 만들고 submit 이벤트 핸들러를 하나만들어서 submit 이..

이제 할 일은 업로드된 비디오에 작성자를 연결해주고 작성자가 로그인 되었다면 edit을 할수 있게한다 그리고 다른 유저라면 그냥 수정할 수 없게 하겠다 먼저 각 모델에 스키마를 추가한다. 비디오에는 유저의 정보를 그리고 유저에는 비디오와 코멘트 정보, 코멘트에는 유저의 정보를 넣어주자 그리고 비디오 컨트롤러에서 post업로드 컨트롤러를 수정해주자 새로 만들어진 비디오의 스키마 creator를 req.user.id를 추가해주고 (유저가 로그인 되어있다면 항상 req에는 user가 있다) videos에 neVideo.id를 넣어준다. 그리고 저장. 그리고 상세정보 컨트롤러를 살짝 수정해준다. populate함수를 통해 객체를 가져오도록 하는데 이 함수는 Object ID타입에만 쓸수있다 마지막으로 video..

기존 프로필 수정 페이지는 get방식만 있었다 그런데 이제 프로필 이미지 수정이나 이름 수정 , email 수정등을 추가할 예정이라 이제 post방식의 컨트롤러도 하나 만들어 준다. 수정했으니 이제 라우터도 바꿔주자 음 이제~~ 프로필 이미지 변경에 필요한 미들웨어를 하나 만들어 준다. 비디오 업로드와 동일하다~~ 인코딩 타입 정해주고~ 업로드 파일 형식 지정을 해줬다. 그리고 프로필 수정페이지에 들어가면 인풋박스에 벨류값으로 현재 로그인된 유저의 이름과 이메일을 띄워준다. 그리고 postEditProfile 컨트롤러를 만들어주자 먼저 body parser를 통해 이름과 이메일 업로드 파일을 가져오고 만약 파일이 있다면 이전에 저장소에 저장된 파일을 경로를 통해 삭제해주고 또한 함께 db의 avatarU..

페이스북 소셜 로그인 연동을 할 차례인데 꽤 어렵다고 한다 먼저 developer.facebook.com으로 들어가서 애플리케이션 등록을 해야한다 난 facebook아이디가 없다.. 먼저 만들어주고 developer사이트로 가서 로그인 해주고 새앱 만들기를 진행했다. 이 화면에서 그냥 일단 잘 모르지만 로그인 권한이 적혀있어서 소비자로 만들어 줬다. 그리고 facebook 로그인 설정을 선택하고 계속 계속~ 그리고 이런 화면이 뜨는데 웹으로 선택하고 사이트 url 적어주고~ 뒤에 나오는 내용은 현재 필요 없으므로 전부 무시하고 완료해주자.. 완료버튼이 없다..ㅡㅡ;; 그리고 설정에서 기본설정으로 이동하면 앱 ID와 시크릿ID가 보인다... 이것들을 복사해주자 깃헙 연동할때 처럼 .env에 환경변수 설정을..

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

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