#Node.js 어제 작업했던 코드를 get에서 post로 변경하고 (데이터를 변경하기 위해), 함수 하나를 추가해줬다. const registerView = () => { const videoId = window.location.href.split("/videos/")[1]; fetch(`/api/${videoId}/view`, { method: "POST" }); }; function handleEnded() { registerView(); videoPlayer.currentTime = 0; playBtn.innerHTML = ''; } 현재 url을 가져온 후 /videos/를 기준으로 split하고, 1에 해당하는 배열을 가져온다. 1에 해당하는 배열은 video의 id가 되고, fetch를 해당..
#Node.js 프로젝트를 할 때 백엔드에서 API가 완료되어야 프론트에서 최종적으로 API를 통해 데이터를 받고, 가공해서 최종적으로 완성을 한다. 지금까지 수많은 API 통신을 했지만, API는 어떻게 만들까? 궁금하기도 했었다. 하지만 백엔드쪽을 들여다 볼 일이 없으니...그 동안은 API 로직을 몰랐지만! 풀스택 강좌를 통해서 작은 API 하나를 생에 처음으로 구현하게 됐다. 먼저, 이 API는 동영상을 끝까지 시청한 경우 View가 +1 되는 로직이고, Video의 Model은 이미 구현이 되어 있는 상태이다. // app.js app.use(routes.api, apiRouter); // apiRouter.js import express from "express"; import routes f..
#유튜브 클론 코딩 input.videoPlayer__volume#jsVolume(type="range", min="0" max="1" value="0.5" step="0.1") const volumeRange = document.getElementById("jsVolume"); volumeRange.value = 0; function handleDrag(event) { const { target: { value } } = event; videoPlayer.volume = value; if (value >= 0.6) { volumeBtn.innerHTML = ''; } else if (value >= 0.2) { volumeBtn.innerHTML = ''; } else { volumeBtn.innerH..
동영상을 직접 스타일링 하기 위해 구현한 코드다. 오늘 날짜로 TIL이 2개인데, 글이 길어질까봐 글을 나눴다. const fullScrnBtn = document.getElementById("jsFullScreen"); const currentTime = document.getElementById("currentTime"); const totalTime = document.getElementById("totalTime"); function exitFullScreen() { fullScrnBtn.innerHTML = ''; fullScrnBtn.addEventListener("click", goFullScreen); if (document.exitFullscreen) { document.exitFulls..
// AnimateCountDown.vue // 함수 분리 export function dayCounter(timeStamp) { const days = Math.floor(timeStamp / (1000 * 60 * 60 * 24)); if (days < 0) return '00'; if (days < 10) return `0${days}`; return days; } export function hourCounter(timeStamp) { const hours = Math.floor((timeStamp % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); if (hours < 0) return '00'; if (hours < 10) return `0${hours}`; re..
#유튜브 클론 코딩 Video 태그에서 지원되는 함수나 기능이 많은 걸 오늘에서야 알았다. 회사 서비스에 동영상을 지원해주는 게 있는데, 회사만의 디자인으로 커스터마이징을 할 수 있을 거 같다. 비디오 재생, 멈춤, 음소거를 자바스크립트로 구현해봤다. const videoContainer = document.getElementById("jsVideoPlayer"); const videoPlayer = document.querySelector("#jsVideoPlayer video"); const playBtn = document.getElementById("jsPlayButton"); const volumeBtn = document.getElementById("jsVolumeBtn"); function ..
#Node.js 동영상을 업로드한 사람이 아닐 경우 동영상 삭제 페이지나, 편집 페이지에 url을 통해 접근하지 못하도록 creater.id !== user.id 의 로직을 추가 구현해주었다. 백엔드 부분은 얼추 마무리가 되었고, 추후 오류 부분이나 부족한 부분이 있다면 리팩토링 할 계획이다. mixin videoPlayer(video = {}) .videoPlayer video(src=`/${video.src}`, autoplay) .videoPlayer__controls .videoPlayer__column span i.fas.fa-volume-up span |00:00 / 10:00 .videoPlayer__column span i.fas.fa-play .videoPlayer__column span..
#Node.js 오늘은 유저 패스워드 변경을 하기 위한 로직을 구현했다. // post 함수 구현 export const postChangePassword = async (req, res) => { const { body: { oldPassword, newPassword, newPassword1 }, user } = req; try { if (newPassword !== newPassword1) { res.status(400); return res.redirect(`/users/${routes.changePassword}`); } await user.changePassword(oldPassword, newPassword); return res.redirect(routes.me); } catch (erro..
- Total
- Today
- Yesterday
- react-query
- e2e
- 호이스팅
- react
- pinia
- vue.js
- vuex
- 포트폴리오
- JS
- Redux
- vue3
- 타입스크립트
- pagination
- Store
- Front
- Core Components
- Cypress
- vue
- composition
- 퍼블리셔
- react native
- frontend
- react query
- vuetify
- typescript
- three.js
- CORS
- NUXT
- backend
- 자바스크립트
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |