#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 ..
- Total
- Today
- Yesterday
- backend
- JS
- Core Components
- NUXT
- react
- vuetify
- 타입스크립트
- e2e
- 호이스팅
- vuex
- pinia
- vue
- Closure
- 자바스크립트
- Cypress
- three.js
- vue.js
- react-query
- Front
- Store
- pagination
- composition
- 포트폴리오
- frontend
- Redux
- vue3
- 퍼블리셔
- react query
- CORS
- react native
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |