후니후니

#Vuex 큰 프로젝트에서 회원가입처럼 특정 상황에서만 접속하고 평소에는 들어가지 않는 페이지에서 기본적으로 Store를 호출할 필요가 있을까? 그럴 필요가 없다고 생각된다. Vue에서는 registerModule, unregisterModule를 통해 동적으로 스토어를 생성하고 삭제시킬 수 있다. 회원가입의 큰 상위 컴포넌트에서 동적으로 스토어를 생성해주고, 회원가입이 완료되면 Store를 삭제해줌으로써 불필요한 자원을 아낄 수 있다.

#Vue.js 프로젝트 작업 중 created로 API Call을 하고, 값을 Component Data에 저장하여 mounted에서 데이터를 가공하려고 했는데, created에서 API 응답으로 Data에 저장한 값을 mounted에서 찾지 못하는 현상이 생겨 고생했다. 나의 지식으로는, created에서 API Call을 하면, Life Cycle에서 created 후 mounted가 되기 때문에 값을 가져올 수 있을 거라 생각했는데, 그게 아니었다. 정확한 Vue Life Cycle의 로직을 알 순 없지만, Created에서 함수를 부르면 함수는 갈길가고, mounted도 갈길을 가서 이어지지 않는건가...? 라는 생각이 들었다. 결국 한시간 정도 디버깅하며 mounted 내에서 API Call을 ..

#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..