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

https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder MediaRecorder - Web APIs | MDN The MediaRecorder interface of the MediaStream Recording API provides functionality to easily record media. It is created using the MediaRecorder() constructor. developer.mozilla.org 앞서 preview를 할 수 있게 웹캠을 켜는 것을 했다면~ 이제 recording을 해봐야한다~ 먼저 자잘하게 preview를 했던 함수를 init으로 바로실행시켜서~ 업로드 페이지에 가면 바로 볼 수 있게하고 st..

앞서 정리 하지 못했던 video recorder만들기를 다시 포스팅 해본다. 여기서 이용할 것은 다음과 같다~ https://developer.mozilla.org/ko/docs/Web/API/MediaDevices MediaDevices - Web API | MDN MediaDevices 인터페이스는 카메라, 마이크, 공유 화면 등 현재 연결된 미디어 입력 장치로의 접근 방법을 제공하는 인터페이스입니다. 다르게 말하자면, 미디어 데이터를 제공하는 모든 하드웨어 developer.mozilla.org MediaDevices인터페이스는 카메라 마이크 공유 화면등 현재 연결된 미디어 입력 장치로의 접근 방법을 제공하는 인터페이스이다. 미디어 데이터를 제공하는 모든 하드웨어로 접근할 수 있다. 부모 인터페이..

프론트에서 비동기로 조회수를 올리기 코드를 짜는데 가물가물한 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 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 ..

기존 자바스크립트에서 삼항연산자의 경우 condition ? ture - return : false- return 이런식으로 condition이 true이면 true일때의 리턴갑슬 false이면 false일때의 리턴값을 보내주는 방식이다. 뭐 중첩도 되고 여러 방향에서 쓰일 수 있다. 그런데~ react를 공부하며 삼항연산자에 && operator를 알게되었는데 true && expression은 항상 expression으로 평가되고 false && expression은 항상 false로 평가된다. 쉽게 말해 true일때만 expression이 실행된다. false라면 그냥 react는 무시한다. 살짝 맛만 보자면 위 코드에서 기본적으로 nowPlaying이 false이면 오른쪽은 아에 실행되지 않는다,..

기존 클론코딩을 하며 mongoose의 populate메서드를 가져다 쓴적이 있는데.. 음 object id를 가져온다는건가? 뭔지 이해가 잘 안갔는데 차근차근 다시 포스팅해본다. mongoose 공식 doc을 보면 mongo-db의 lookup과 같은 연산자를 갖고 있다. 그리고 mongoose는 더 강력한 대체항목으로 populate()메서드를 가지고 있다고 한다. 그럼 간단히 말해 populate()가 하는 역할이 무엇인가~ 다른 스키마의 정보를 참조해서 쓰는것이다. 우선 두개의 스키마 user와 video 가 있다고 하자 그리고 video 스키마에는 owner라는 key가 있다. 그리고 이 owner는 ObjectId 타입이고 User model을 참조하고 있다 이때 owner를 통해 User ..
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce Array.prototype.reduce() - JavaScript | MDN reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. developer.mozilla.org 금일 챌린지 중에서 배열의 원소들을 모두 합하는걸 써야 했는데 음 이전 파이썬 c언어 할때는 주로 for문 돌려서 연산을 했다~ 음 찾아보니 자바스크립트에는 reduce라는 좋은 메소드가 있었다. 배열의 각 요소에 대해 주어진 reducer함수를 실행하고 하나의 결과값을 반환한다. 리듀서는 네개의 인자를 ..