본문 바로가기

전체 글

 (215)
1/03 공부 컨트롤러 구현하기 1.마우스위치에 따라 컨트롤러 보이기,숨기기 setTimeOut function 사용할 때 return값으로받는 id 이용하기!! const handleMouseLeave = ( )=> { const id = setTimeout( ( ) =>{ videoControls.classListremove("showing"); },3000); console.log(id); clearTimeout(id); } 전체코드 1.비디오에 마우스 움직임이 있으면 컨트롤러가보이고 2.비디오를 벗어나면 컨트롤러 안보이게 3.비디오를 벗어나서 바로 마우스가 비디오에 들어오면 settimeout 때문에 remove.showing이 되어 컨트롤러 안보임 -> clearTimeout let controlsTimeou..
12.29수 공부 비디오플레이어 만들기 서치화면에 녹화js를 실행시키는건 이상하잖아 다양한 js파일 만들기 1.src / client / js / videoPlayer.js 파일 생성 2.웹팩에 여러가지파일 포함시키기 2-1.entry 객체 형태로 만들기 //지금은 main.js 한가지만 entry 하고있음 2-2. output에 변수이용하여 각 파일 출력하기 module.exports ={ entry: { main: "./src/client/js/main.js", videoPlayer: "./src/client/js/videoPlayer.js", }, mode: 'development', watch: true, plugins: [new MiniCssExtractPlugin({ filename: "css/styles.cs..
12.28일 화 공부 main.js에 자바스크립트와 같이 실행되는게아니라 따로 분리하고싶음 https://github.com/webpack-contrib/mini-css-extract-plugin mini-css-extract-plugin 1.설치 npm install --save-dev mini-css-extract-plugin 2.설정 const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const path = require("path"); module.exports ={ entry: "./src/client/js/main.js", plugins: [new MiniCssExtractPlugin()], mode: 'development', output:{ fil..
12.23공부 client에 있는 파일은 우리가 작성하는 폴더 (webpack처리 전 ) 서버가아닌 브라우저에서 실행될 자바스크립트 assets는 변환 된 폴더 주소 loacalhost:4000/assets/js/main.js에 접근 할 수없다. server.js에서 정적파일을 설정 했는데 기본적으로 파일이 공개되지 않음 여기서 express에게 사람들에게 볼 수있게 해달라고 요청함 -> app.use("/static", express.static("assets")); 이쪽부분은 브라우저에게 알려주는 부분이라 이름이달라도 돼 예) /static base.pug랑 assets/js/main.js파일을 연결 시킬 것임 basepug에 script(src="/static/js/main.js")//브라우저를 위한 코드이지 n..
12.22공부 프론트엔드 시작 브라우저에서 구동되는 자바스크립트 작성하기 back-end에서 node.js에 최신버전 자바스크립트를 작성하면 babel-node로 구버전 자바스크립트로 컴파일 했다면 fron-end에서는 node.js에 webpack의 babel-loader을 이용하여 컴파일한다. 두개다 패키지들 package.json에서 관리 보통 webpack을 직접 설정하지않고 이미 포함되어있는 툴을 쓴다.ex) react, react Native vue, sevelte Webpack scss--> css, 최신 javascript --> 구버전 javascirpt, jpg -> 압축 jpg 보통 react,vue등을 다룰때 webpack은 뒤에서 깔려서 활동하고 따로 설정을 할 필요는 없다. 1.webpack설치 npm i w..
12.21 공부 upload.pug input(type="file", accept="video/*", required, id="video", name="video") middleware export const avatarUpload = multer({ dest:"uploads/avatars/", limits:{ fileSize: 3000000, --> byte }}) export const videoUpload = multer({ dest:"uploads/videos/" , limits:{ fileSize: 10000000, }}) videoRouter videoRouter .route("/upload") .all(protectorMiddleware) .get(getUpload) .post(videoUpload.sing..
12.16일 공부 비밀번호 변경 template에 추가 a(href="change-password") 상대 경로가아닌 절대 경로로 입력하면 localhost:4000/users/edit 에서 말단 부분만 바뀜 localhost:4000/users/change-password로 changePassword form 을 만들었는데 깃허브계정으로 가입한경우에는 비밀번호가 없어서 사용 할 수 없게 해야함 1.해당 페이지에 오면 리다이렉트 export const getChangePassword = (req,res)=>{ if(req.session.socialOnly === true){ return res.redirect ("/") } return res.render("users/change-password", {pageTitle: ..
12.15 공부 edit 화면 만듬 .get(getEdit).post(postEdit) 에러1. 로그인하지 않은 사용자가 youtube/user/edit 주소로 들어왔을 때 뜨는 에러 TypeError: /home/uhyun/youtube/src/views/edit-profile.pug:5 3| block content 4| form(method="POST") > 5| input(placeholder="Username" ,name="username", type="text", required, value=loggedInUser.username) 6| input(placeholder="Name",name="name", type="text", required, value=loggedInUser.name) 7| input(pl..

티스토리툴바