일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- DART
- pug
- node.js
- TypeScript
- Session
- nodejs
- Mongoose
- JavaScript
- graphQL
- react
- backend
- CLONE
- frontend
- heroku
- NextJs
- API
- MongoDB
- clonecoding
- 자바스크립트
- ES6
- Component
- form
- javscript
- express
- CSS
- GRID
- Flutter
- ECMAScript
- 리액트
- HTML
- Today
- Total
목록JavaScript/Node.JS (79)
Enjoy Programming
기존 클론코딩시 password의 암호화시 hash와 salt기능을 passport-local-mongoose를 사용했다. 이번에는 블로피시 암호에 기반을둔 암호해시 함수인 bycript를 사용해 진행을 해보았는데. bycript에 대해 잠시 짚고 넘어가본다. bcrypt는 비밀번호 해시 함수로서 Blowfish라는 암호에 기반한다. bcrypt는 조정할 수 있는 해시 알고리즘을 써서 패스워드를 저장한다. bcrypt는 패스워드를 해싱할 때 내부적으로 랜덤한 salt를 생성하기 때문에 같은 문자열에 대해서 다른 인코드된 결과를 반환한다. but 공통된 점은 매번 길이가 60인 string을 만든다. bcrypt는 단반향 암호화를 위해 만들어진 해시 함수이다. sha256같은 기존 해시 함수들의 문제는 ..
몽고db를 사용을 위해 mongoose를 사용하던 중 업로드한 파일을 수정시 파일이 있는지 여부를 체크할때 기존 findById로 video객체를 전부 불러와 있는지 확인했다. 그런데~ 더 간단? 하게 확인 할 수 있는 방법이 있는데 바로 Model.exists()를 사용하면 된다. exists() function은 Promise를 return하는데 데이터베이스에 해당 필터와 일치하는 문서가 하나 이상이 있으면 true를 반환하고 아니라면 false를 반환한다. 여기서 filter는 object이다. callback함수도 필요하다고 doc에는 나와있으나 async await을 이용해 콜백없이 사용해본다. 기존 해당 비디오가 있는지 판단후 없다면 오류메세지를 반환하는 코드이다. exists를 사용해서 동일..
음.. 오랜만에 챌린지 기록을 해본다 그동안 계속 챌린지는 진행중이긴 한데 ~ 다른거 포스팅하고 공부하느라 이것 까진 못하겠다 싶었는데 오늘부터는 간단하게라도 기록해야겠다. 일단 오늘의 challenge내용은 영화정보가 담긴 fakeDB를 이용해서 간단한 웹을 제작하는 내용이다. 조건이 세가지 있는데 먼저 기본적으로 정의된 세가지 컨트롤러가 있는데 1. home should list all the movies 2. movieDetail should show a movie based on the :id 3. filterMovie should filter for a movies based on the rating or the year.~! 홈 컨트롤러는 모든 영화리스트를 보여줘야하고, 영화디테일 컨트롤러는 ..
코멘트 작업을 해주는데 프론트 엔드 작업을 하기전에 백엔드 부터 해본다. root를 설정해주러 routes.js에서 api part에 url 설정을 해주고 videoController에서 postAddComment컨트롤러를 만들고 (videoDeail컨트롤러에서 populate를 이용해 creator와 comments를 가져온다) video, user를 이용해 comment를 만들고 넣어준다. 그리고 apiRouter에서 post방식으로 라우터 하나 만들어준다. 이제 템플릿에가서 코멘트 폼을 만들고 코멘트 리스트를 만들자. 그리고 이번에는 ajax를 통해 서버로 코멘트 정보를 보내고 받아오겠다. 프론트에서 작동할 addComment.js하나 만들고 submit 이벤트 핸들러를 하나만들어서 submit 이..
Asynchronouse Javascript and XML 비동기자바스크립트, xml통신 조회수 작업을 한다. ajax 작업을 하기 전에 새로운 파일을 웹사이트에 추가하는데 API view이다. 템플릿이 랜더링한 /video url과 /idXXXX의 유알엘 두개가 보인다. 랜더링과 상관없는 URL과 controller를 만들건데 http status code로 답해주는 것들이다. 사용자는 이url을 찾을 수 없고, 이 url에 어떤것도 랜더링 할 수 없다. routes 설정해주고 app.js에서 라우트 사용해준다. 그리고 router를 설정해주기 위해 router파일을 만들어서 라우터 설정해주고 적용될 컨트롤러를 videoController에 만들어준다. 컨트롤러는 post방식의 컨트롤러이고 기본적으로 ..
1. recording video create videoRecorder.scss, videoRecorder.js && upload.pug modify mediadevice mdn https://developer.mozilla.org/ko/docs/Web/API/MediaDevices MediaDevices - Web API | MDN MediaDevices 인터페이스는 카메라, 마이크, 공유 화면 등 현재 연결된 미디어 입력 장치로의 접근 방법을 제공하는 인터페이스입니다. 다르게 말하자면, 미디어 데이터를 제공하는 모든 하드웨어 developer.mozilla.org getVideo 함수를 만들어서 웹캠애 접근까지 함. navigator.mediaDevices.getUserMedia()를 이용. 웹캠을 ..