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

일단 유튜브 클론과정은 거의 끝났다 ~ 내가 직접 몇개의 라우터를 더 만들 예정이고~ 홈페이지 디자인도 손보고~ 몇가지 자바스크립트도 추가할예정이고~ 로직도 손보고 있다. 마지막 챌린지였던 댓글 삭제기능은 구현되었고~ 그런데 포스팅을 못했다.. 포스팅할게 너무 밀려있다.. ㅠㅠ 차분히 하자.. 현재는 개발자 모드로 개발을 하고 있었고 이제 실제 배포를 해볼차례이다. Heroku를 통해 배포를 한다. Heroku란 무엇인가~ Heroku는 java, node.js, python등 여러 언어를 지원하는 웹 어플리케이션 배치 모델로 사용되는 클라우드 paas이다. paas? Platform as a Service- 서비스형 플랫폼 : 클라우드 컴퓨팅 서비스 분류 중 하나. 일반적으로 앱을 개발하거나 구현할 때..

프론트에서 비동기로 조회수를 올리기 코드를 짜는데 가물가물한 ajax를 리마인드 해본다. 우선 fetch를 이용해 내가 원하는 url을 가져오고 백엔드에서는 url의 video id를 보내주기위해 잠시 포스팅했던 data-attribute를 사용한다. data-attr를 이용해서 html에 데이터를 저장하고 프론트에서 그 정보를 가져오게 한다. 니코 왈 data-attr는 백엔드와 프론트간에 정보교환을 하는데 있어 가장 쉬운 방법이라고 한다. https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes 데이터 속성 사용하기 - Web 개발 학습하기 | MDN HTML5 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 ..

간단하게 Cookie의 property에서 중요한 정보를 좀 짚고 넘어가자 그보다 먼저 express-session에 secret prop에 대해 알아본다. secret은 쿠키에 sign할때 사용하는 string이다. 쿠키에 sign? 이 말은 backend가 쿠키를 발행했다는 것을 보여주는 것이다. 나의 쿠키를 누군가 해킹해 나인척 하는 session hijack에서 보호하기 위해 secret string이 필요하다 이 string은 매우 길고 무작위이며 강력해야 한다. 이 강력한 string으로 쿠키를 sign하고 나의 backend가 만든 것임을 증명한다. . Domain . Domain은 해당 쿠키를 만든 backend가 누구인지 나타낸다. 그리고 쿠키는 해당 Domain에 있는 backend로만..

기존 클론코딩시 password의 암호화시 hash와 salt기능을 passport-local-mongoose를 사용했다. 이번에는 블로피시 암호에 기반을둔 암호해시 함수인 bycript를 사용해 진행을 해보았는데. bycript에 대해 잠시 짚고 넘어가본다. bcrypt는 비밀번호 해시 함수로서 Blowfish라는 암호에 기반한다. bcrypt는 조정할 수 있는 해시 알고리즘을 써서 패스워드를 저장한다. bcrypt는 패스워드를 해싱할 때 내부적으로 랜덤한 salt를 생성하기 때문에 같은 문자열에 대해서 다른 인코드된 결과를 반환한다. but 공통된 점은 매번 길이가 60인 string을 만든다. bcrypt는 단반향 암호화를 위해 만들어진 해시 함수이다. sha256같은 기존 해시 함수들의 문제는 ..

앞서 만든 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..