일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
- MongoDB
- Session
- 자바스크립트
- frontend
- 리액트
- backend
- express
- NextJs
- HTML
- Flutter
- react
- CLONE
- JavaScript
- ECMAScript
- pug
- CSS
- GRID
- API
- ES6
- DART
- clonecoding
- node.js
- form
- javscript
- graphQL
- Component
- nodejs
- Mongoose
- heroku
- TypeScript
- Today
- Total
목록JavaScript (99)
Enjoy Programming

앞서 만든 video edit은 로그인한 유저와 비디오 작성자 정보가 다르면 수정이 안되는 거였지만 문제는 routes활용해 url 마지막에 /edit을 써주면 수정페이지로 이동하게 된다. 이를 수정해보자~ get edit컨트롤러에서 video 객체를 받아와 조건문을 달아주자 video를 작성한 사람이 현재 로그인한 유저가 아니면 에럴를 발생시키고 아니면 수정페이지를 띄우게 한다. 한가지 주의 할 점은 video.creator는 타입이 object타입이고 req.user.id는 string 타입이다. 둘의 타입을 같게 해줘야 조건문이 성립하기에 video.creator를 toString()을 이용해 변환해주자. 그럼 성공적이다~!~! 이와 같이 delete 컨트롤러도 수정해주자 몇가지 수정을 더 해야하지..

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

이제 비밀번호 변경을 다룰건데 전에 사용했던 passport-local-mongoose를 이용한다 잠시 passport-local-mongoose를 다시 되짚어보면 passport-local-mongoose 는 username과 password를 사용한 login을 passport와 함께 간단히 빌드할 수 있는 플러그인 이다. node.js 에 나온 다큐먼트를 인용해보자 그냥 passport-local-mongoose를 이용하면 암호 모듈을 사용하여 암호를 해시할 필요없이 이 모듈이 다 알아서 해준다고 한다. DB에서 salt및 hash필드를 자동으로 생성한다. hash에 대한 개념은 살짝 잡혀있는데 salt가 무엇인가... 예를 들어 데이터베이스에 두명의 사용자가 동일한 암홀르 가진 경우 동일한 해시가..

오늘은 나에게 휴식을 준날이다~ 요 몇일 하루 두~세시간 잤더니 머리도 멍하고 다리도 풀리는거 같고 ㅋㅋㅋ 휴식을 준 김에 우리 세 가족 가까운 바닷가 가서 모래 놀이도 하고 좀 쉬다 왔다 마냥 쉬긴 그래서 간단히 자바스크립트를 이용해서 시계를 만들어 보았다. 먼저 html은 초침 시침 분침으로 나눈 박스 그리고 전체를 감싸는 시계 테두리 박스 요렇게 구성되어있다 css는 특이점이라면 transform-origin인데~!~! transform-origin으로 시게바늘 세개의 시작점을 바꿔준? 것이다 이건css 포스팅에서 따로 다루자 자바스크립트는 우선 세계의 시계바늘이 될 태그를 쿼리셀렉터로 선택해주고 시간을 적용해줄 함수를 만든다. crretnDate에 new Date()로 시간을 담아주고 각각 get..

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

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