- 어떤 node.js 환경에서도 서버가 실행될 수 있게 설정을 바꿔야 함 - 현재 DB는 MongoDB가 loclahost에서 실행되고 있지만 이것도 바꿔야 함 - 파일들을 우리 서버가 아니라 아마존에 올려야 함 * Babel CLI - 원하는 대로 코드를 바꿔줌 scripts 안에 "build:server": "babel src/init.js -d build" 추가 -d 빌드한 코드를 어디에 저장할 지를 말하는 것. 여기서는 "build" build 폴더 안에 init.js 파일 생성됨! import가 사라지고 조금 작성 방법이 다름! - Babel CLI는 nodemon처럼 실행되지 않음. nodemon은 파일을 실행하고 그 파일이 모든 걸 실행한다면, Babel CLI의 경우, 한 파일만 실행하는..
- form 안에 있는 버튼을 클릭하면 form이 제출됨 - 자동적으로 새로고침도 되기 때문에 이걸 막기 위해서는 event.preventDefault(); 해주기 - backend로 request 보낼 땐 fetch 사용하기( url로 보냄) const videoContainer = document.getElementById("videoContainer") const form = document.getElementById("commentForm"); const handleSubmit = (event) => { event.preventDefault(); const textarea = form.querySelector("textarea"); const text = textarea.value; //댓글 내용..
* Flash Message - 어떻게 사용자에게 메시지를 보내고, 메시지를 템플릿에 추가할 수 있는지! - 일회성 메시지를 보내고 싶을 때 사용하 * express-flash : 사용자에게 flash message를 남길 수 있게 해줌 - 템플릿에 있는 user에게 메시지를 남길 수 있게 해주는 미들웨어 - 이 메시지는 session에 근거하기 때문에 한 사용자만이 볼 수 있다 npm i express-flash import flash from "express-flash" app.use(flash()) 이 flash() 가 session에 연결해서 사용자에게 메시지를 남길 것이다 -flash() 미들웨어를 설치한 순간부터 req.flash라는 함수를 사용할 수 있음 req.flash(메시지타입, 내용)..
FFmpeg를 가지고 비디오를 webm에서 mp4로 변환할 것 * FFmpeg - 비디오나 오디오같은, 어떤 종류의 미디어 파일을 다룰 수 있음 - 비디오를 압축하거나, 비디오 포맷을 변환해야 하거나, 비디오에서 오디오를 추출하고 싶거나.. 다양한 용도 가능 - 거의 모든 프로그래밍 언어에서 사용가능! 콘솔에도 설치 가능 - 보통 ffmpeg는 백엔드에서 실행되어야 함(ex 유튜브) 유튜브는 자체 서버를 사용하니까 상관 없지만, 우리가 다운로드 할 때마다 webm 파일들을 변환하는건 별로! * WebAssembly - 개방형 표준. 프론트엔드에서 매우 빠른 코드를 실행할 수 있게 해줌 - 자바스크립트를 쓰지 않고, 다른 종류의 프로그램을 사용할 수 있게 해준다 - 실행 비용이 큰 프로그램들을 브라우저에서..
- 버튼을 누르면 비디오를 녹음할 수 있게 해주는 기능 구현! navigator.mediaDevices.getUserMedia(constraints); 사용자의 navigator에서 카메라와 오디오를 가져다 줌 카메라, 오디오 사용 여부 동의를 받아야 하기 때문에 실행하기까지 시간이 좀 걸리니 async-await 사용하기 constraints { audio: true, video : true } 이 객체를 말함 동의를 구하고 사용할 것을 설정! { audio : true , video : { width : 1280, height: 720} } 이런식으로 받아올 것의 크기같은 세부설정도 가능 * 프론트엔드에서 async랑 await을 쓰려면 regeneratorRuntime을 설치해야 함 ( npm i ..
* Register View Controller - 지금까지는 pug을 사용해서 NodeJS로 템플릿을 렌더링했지만, 템플릿을 렌더링하지 않는 view도 존재 =>API views API 프론트엔드와 백엔드가 서버를 통해 통신하는 방법 백엔드가 템플릿을 렌더링하지 않을 때 프론트와 백엔드가 통신하는 방법 * 조회수 기록 - 유저가 영상 보는 걸 마칠 때마다 조회수+1 유저가 영상을 시청하면 백엔드에 요청을 보냄 이 요청으로 URL을 바꾸진 않고, 템플릿을 렌더링하지도 않음 백엔드에 조회수+1할 것 - video의 id를 알아야 조회수를 저장해줄텐데, handleEnded 함수에서 id를 알 수가 없음 handleEnded function 에서 /api/videos/:id/view에 요청해야 됨 HTML ..
* Player setup -다른 javascript 파일을 만들어서, 그 걸 다른 페이지에 포함시켜줌 -홈페이지에서는 어떤 javascript도 로드하지 않고, 비디오 페이지에 가서야 비디오 플레이어 코드를 로드 " js/[name].js" : 이런식으로 작성하면, entry에 있는 이름을 가져옴 const video = document.querySelector("video"); const playBtn = document.getElementById("play"); const muteBtn = document.getElementById("mute"); const time = document.getElementById("time"); const volume = document.getElementById(..
SCSS의 경우 a: hover를 위처럼 간편하게 적을 수 있다 nested 한 형태를 지원함! template 만들었으면 그 다음에 할 일은 screen 폴더에 screen 파일 만들기 mixin이나 partial을 만들었다면 components 폴더에 파일을 만들자
* Webpack - 백엔드 자바스크립트에서는 Babel Node가 다 처리해 주는 것처럼, frontend에서도 javascript를 처리해줄 것이 필요 - Webpack: 우리가 주는 모든 파일을 받아서 다른 파일들로 처리, 변경해줌 input: 내가 쓰는 Sexy JS, Sassy CSS output: 브라우저가 이해할 수 있는 normal js, css webpack은 왼쪽에 있는 것들을 다 가져다가 모아서, 압축,변형시켜서 최소화하고, 필요한 과정을 다 거친 다음 정리된 코드를 결과물로써 내놓음 *Webpack 설치 - package.json 안에 프론트엔드랑 백엔드에 관련된 모든 파일 다 정리된다~~ npm i webpack webpack-cli Webpack cli를 사용해서 콘솔에서 Web..
#8.0 - #8.15 - 로그인 하지 않은 사람들이, 우리가 보호하려는 페이지에 가는 것 막기 => middleware 사용해서 막기! userRouter.route("/edit").all(protectorMiddleware).get(getEdit).post(postEdit); - middleware 쓸 때 get, post 이런식으로 여러 개의 함수가 하나의 라우트에 걸려 있으면 all()을 통해 middleware를 모두에게 적용시킬 수 있다! const { session: { user: { id } } } = req; const id = req.session.user.id; - 둘이 같은 내용이다!! -위의 방법을 사용하면 여러 가지 정보를 하나의 객체에서 한번에 가져오기 편하다! Model.fi..
