1. Fly.io - https://fly.io/ Deploy app servers close to your users · FlyA Public Cloud Built For Developers Who Ship Over 3 million apps have launched on Fly.io, leveraging global Anycast load-balancing, zero-config private networking, hardware isolation, and instant WireGuard VPN connections, with push-button deployments scalfly.io2. MongoDB Atlas - https://www.mongodb.com/ko-kr/atlas MongoDB A..

1. Realtime Comment - fetch는 백엔드로 가고 백엔드는 db랑 뭔가를 하고 나서 상태코드를 리턴하고 이후 우리에게 돌아오는데 이때 시간이 소요됨   - 그렇기에 fetch에 await을 사용 - 이게 없어도 작동은 하지만 페이지가 새로고침 됐는데 fetch가 끝나지 않으면 시간이 그만큼 충분하지 않았다는 거임 - 조회수는 간단하기에 필요없지만 지금은 필요함 - fetch는 Promise를 리턴하는데 이게 시간이 좀 걸림   - 그래서 fetch 이후의 코드는 fetch 동작이 끝났을 때만 실행되도록 함 - 끝났다라는 표현은 동작이 성공했다는 것과는 다른 개념임 - 우리가 만든 videoController를 보면 때로는 404 상태코드를 리턴하기도 했음   - 404 상태코드를 받아도 ..

1. Error solution - 이전 상황에서 req.body를 했는데 아무것도 나오지 않았음   - 우리는 서버가 이해할만한 것들을 보내고 있지 않기 때문   - upload에서 form안의 input에 req.body를 사용해서 접근했음   - server.js의 express.urlencoded({extended:true}) 미들웨어를 사용했기에 서버가 form으로부터 오는 데이터를 이해할 수 있었음 - 이것과 비슷하게 서버가 fetch로부터 오는 데이터를 이해할수 있도록 가르쳐줘야 함   - 우리가 fetch를 통해 보내는 데이터는 json 타입임 - 그래서 우리는 fetch의 body를 받아서 stringify 해줘야 함   - 알아둬야 할 것은 js는 객체를 보낼 수 없음   - 브라우저나..

0. Before start - 댓글을 구현할 건데 우리가 했던 모든 것들을 복습할거임 - 새로운 모델, 컨트롤러, 라우터, 바닐라JS, 상태코드, populate, mongoose relationship 등등 - 동적인 댓글을 구현하고 이게 끝나면 배포할 거임 - 실제 db를 사용하고 assets은 서버에 저장하면 안되니 그런 것들을 전부 수정 - 모든 시작은 데이터부터 이므로 모델 먼저 만들거임1. Comment Modelimport mongoose from "mongoose";const commentSchema = new Mongoose.Schema({ text: { type: String, required: true }, owner: { type: mongoose.Schema.Types.Obj..

1. Flash Message - 우리가 기존에 만든 미들웨어를 보면 아직까진 아무런 메시지도 랜더링 하고 있지 않음 - 지금은 단순히 리다이렉트 되고 있지만 유저에게 메시지를 보여주는게 좋을거 같음 - 이걸 만들기 위해서는 express-flash가 필요함 - https://www.npmjs.com/package/express-flash express-flashFlash Messages for your Express Application. Latest version: 0.0.2, last published: 11 years ago. Start using express-flash in your project by running `npm i express-flash`. There are 190 other ..

1. FFmpeg /  WebAssembly  - 영상을 압축하거나 영상의 포맷을 변환하거나 영상에서 음성만 추출할 때 등등에 사용 - 유튜브에서 화질이 여러개 나뉘어져있는 것도 이걸 이용하면 구현 가능 - 문제는 FFmpeg을 실행하려면 백엔드에서 해야 하는데 이건 비용이 비싸게 발생 - 이 문제를 해결하기 위해 WebAssembly를 사용   - WebAssembly는 개방형 표준이며 기본적으로 웹사이트가 매우 빠른 코드를 실행할 수 있게 해줌   - 실행 비용이 큰 프로그램들을 브라우저에서 실행할 수 있음 - 즉 우린 이 두가지를 결합하여 ffmpeg.wasm을 사용할 거임 - ffmpeg.wasm는 영상을 변환하기 위해 우리 서버대신  유저의 컴퓨터를 사용 - WebAssembly을 사용하여 FF..

1. Stop Button - 기다리지 않고 버튼 누르면 녹화가 중단되게 살짝 변경 - 정지버튼을 누르고 콘솔을 보면 영상을 얻게 됨 - createObjectURL은 브라우저 메모리에서만 가능한 url을 만들고 앞에 있는 URL은 파일을 가리킴   - 해당 url로 가보면 우리 서버상에 없는데, 이 url은 브라우저에 의해 만들어졌고 접근할 수 있는 파일을 가리킴   - 즉 파일은 메모리에 있음   - 파일을 가지고 뭔가를 하고 싶다면 파일을 url에 집어넣어서 접근할 수 있도록 해야함 - 테스트 해보기 위해 미리보기 부분을 제거하고 녹화한 영상으로 대체 해보겠음 - 그러기 위해선 기존에 만들었떤 srcObject 제거 - 지금은 윈도우를 사용하는 피시로 하다보니 영상을 확인할 순 없지만 해당 url로..

1. Video Recorder - 버튼을 누르면 영상촬영이 되는 기능 구현 - recorder.js파일 만들고 웹팩 entry에 알아서 만들고 업로드에 버튼 만들거임 - 버튼을 누르면 유저의 카메라에 접근 권한이 생기고 유저에게 녹화된 영상을 미리보기 해주고 그걸 저장까지 되게 해야 함 - https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia MediaDevices: getUserMedia() method - Web APIs | MDNThe getUserMedia() method of the MediaDevices interface prompts the user for permission to use a media inpu..

1. Views - 이번에 해볼건 조회수 관리임 - 이번에는 랜더링하지 않는 views를 만들어 볼건데 이런걸 api views라고 함 - 대부분 브라우저에서 이렇게 작동하고 있는데, 요즘 시대에는 백엔드에서 템플릿을 랜더링하지 않음   - 대부분의 웹 앱은 프론트와 백을 정확히 나누고 있기 때문   - 백엔드에서 db와 인증을 처리하고 프론트에서는 리액트 같은 걸로 만듦 - 우리가 사용하고 있는 방식은 SSR(Server Side Rendering)   - 즉 서버가 템플릿을 랜더링 하는 것까지 처리   - 요즘은 리액트로 프론트를 만들고 nodejs로 백엔드를 처리   - 사실 nodejs로 템플릿을 랜더링하지 않음 - 지금 하게 될 새로운 방식의 views를 만들고 나면 차이를 알 수 있게 됨 - ..

1. Timeline - 영상의 시간을 업데이트하는 기능을 만들거임 - range input의 step에는 어느 크기정도로 넘길지 쓰면 됨   - 현재 재생시간에는 0.1초로 되어있고 timeline의 경우에는 1초씩 넘기게 할 거임 - timeline의 value는 0으로 하고 max는 정의안함   - 그 이유는 min은 0이지만 max의 경우 영상의 길이이기 때문 - 비디오가 열려야 영상의 길이를 알 수 있으므로 우리는 timeline에 영상의 길이를 알려줘야 함 - handleLoadedMetaData가 영상의 길이를 알고 있으므로 이걸 이용해 max값을 찾아냄 - 이제 영상의 시간이 변할때 마다 timeline을 움직이게 만들어야함 - handleTimeUpdate는 영상의 시간이 변경될때마다 감..