일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- form
- node.js
- frontend
- 자바스크립트
- pug
- nodejs
- Session
- Mongoose
- graphQL
- CLONE
- MongoDB
- clonecoding
- TypeScript
- ECMAScript
- react
- JavaScript
- heroku
- backend
- CSS
- express
- GRID
- Component
- DART
- javscript
- API
- HTML
- 리액트
- Flutter
- ES6
- NextJs
- Today
- Total
목록JavaScript/Node.JS (79)
Enjoy Programming
1. videoPlayer.pug 만들어주고 scss작성 기존 video__player는 삭제 2. javascript 작성 videoPlayer.js play & pause function - 고유의 아디를 만들어주고 ~ videoContainer가 있을때만 작동하도록 해야 오류 안남. 그리고 이벤트 리스너를 통해 video play & pause 함수를 만들어 준다. https://developer.mozilla.org/ko/docs/Web/API/HTMLMediaElement HTMLMediaElement - Web API | MDN HTMLMediaElement는 오디오와 비디오에 통용되는 미디어 관련 확장성을 제공하기 위해 HTMLElement에 메소드와 프로퍼티를 추가한 인터페이스입니다. de..
앞서 만든 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가 무엇인가... 예를 들어 데이터베이스에 두명의 사용자가 동일한 암홀르 가진 경우 동일한 해시가..
기존 프로필 수정 페이지는 get방식만 있었다 그런데 이제 프로필 이미지 수정이나 이름 수정 , email 수정등을 추가할 예정이라 이제 post방식의 컨트롤러도 하나 만들어 준다. 수정했으니 이제 라우터도 바꿔주자 음 이제~~ 프로필 이미지 변경에 필요한 미들웨어를 하나 만들어 준다. 비디오 업로드와 동일하다~~ 인코딩 타입 정해주고~ 업로드 파일 형식 지정을 해줬다. 그리고 프로필 수정페이지에 들어가면 인풋박스에 벨류값으로 현재 로그인된 유저의 이름과 이메일을 띄워준다. 그리고 postEditProfile 컨트롤러를 만들어주자 먼저 body parser를 통해 이름과 이메일 업로드 파일을 가져오고 만약 파일이 있다면 이전에 저장소에 저장된 파일을 경로를 통해 삭제해주고 또한 함께 db의 avatarU..
하,,,,페이스북은 버렸다.. 다들 욕이 난무한다.. 페이스북은,... ㅋㅋㅋㅋ 노마드코더 2021 업데이트 버전도 페이스북은 빠졌다 ㅋㅋ 그냥 카카오톡 연결하고 넘어가겠다 카카오톡은 살짝 json에서 멍해지긴 했지만 잘 해결했다. 우선 카카오 디벨로퍼 사이트로 가자 https://developers.kakao.com Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 다들 카카오톡 아이디는 있을테니~~ 들어가게 되면 애플리케이션 하나를 만들어주자 애플리케이션을 만들었으면 내가 등록할 싸이트 도메인을 적어주고 redirect URI도 등록해주자. r..