후니후니

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

#Node.js 오늘은 유저의 프로필 데이터를 변경하는 작업을 진행해보았다. userRouter.post(routes.editProfile, onlyPrivate, uploadAvatar, postEditProfile); export const postEditProfile = async (req, res) => { const { body: { name, email }, file, user: { _id } } = req; try { const user = await User.findById(_id) await User.findByIdAndUpdate(_id, { name, email, avatarUrl: file ? file.path : req.user.avatarUrl }); await user.save..

#Node.js 어제는 페이스북 로그인 시 callback 함수로 데이터를 가져오는 것까지 구현했다. 오늘은 페이스북 로그인을 마무리하려고 한다. export const facebookLoginCallback = async (_, __, profile, cb) => { const { _json: { id, name, email } } = profile; try { const user = await User.findOne({ email }); if (user) { user.facebookId = id; user.avatarUrl = `https://graph.facebook.com/${id}/picture?type=large`; user.save(); return cb(null, user); } const..

# CSS 현 직장의 프로젝트가 점점 커지면서, 기존 CSS 규칙이 모호한 게 문제가 되기 시작했다. 방법론이 정해져있지 않고, 네이밍 규칙은 단순히 하이픈 2개 이상 사용하지 않는 것으로 되어있다. 입사 후에는 신입인지라, 이게 문제가 될 것이라 생각을 하지 못 했는데, CSS를 같이 계속 다루다 보니, 파일 용량도 커지고, 파일 수는 늘어나고, 규칙은 엄격하지 못하니 중복되는 네이밍도 생기고, 무엇보다 가독성이 굉장히 떨어졌다. 그래서 CSS 규칙 및 구조 개편 의견을 제안했는데, 회사에서 해당 내용에 공감해주고 일정까지 따로 마련해주셔서 이번에 작업할 수 있게 되었다. CSS 방법론은 BEM 을 사용하려고 하고, 그 외 다른 규칙은 같이 근무하는 퍼블리셔 분과 상의하여 맞추려고 하고 있다. 현재 C..

# Node.JS export const githubLoginCallback = async (_, __, profile, cb) => { const { id, avatar_url, name, email } = profile._json; console.log(profile); try { const user = await User.findOne({ email }); if (user) { user.githubId = id; user.save(); return cb(null, user); } const newUser = await User.create({ email, name, githubId: id, avatarUrl: avatar_url }); return cb(null, newUser); } catch (..

프로젝트에서 조금 더 의미있는 마크업을 하기 위해 시멘틱 마크업 관련 글을 검색해서 찾아보았다. 기본적으로 의미가 있는 태그를 사용하는 게 의미 있다고 생각하여, 리스트 관련 내용은 ul & li, 테이블은 table, 상단, 하단 헤더 푸터는 header & footer, 적절한 태그가 없을 경우 div 등을 사용해왔다. 근데 의미있는 마크업을 검색해보니 section, article 등이 나왔다. 알고 있는 태그이긴 했지만 잘 사용하지 않았기 때문에 어떤 태그인지 조금 자세히 찾아보고, 앞으로 더 의미있는 마크업을 하기 위해 사용해보려고 한다. article : 해당 컨텐트 영역은 페이지에서 독립적인 내용이어야 하며, 해당 부분을 떼어 다른 페이지로 이동해도 그 영역의 내용만으로 온전히 하나의 기사가..

개발자 카페를 둘러보다가 CORS에 대한 내용을 봤었는데, CORS CORS 들어보기만 했지, 정확한 뜻을 이해하지 못하고 있던 것 같아 조금 더 정보를 찾아봤다. 일반적으로 https://domain-a.com 에서 https://domain-b.com 자료를 요청하는경우 불가능하다. 왜 불가능할까? 동일출처 정책에 의해서 같은 도메인인 경우에만 자료 요청이 가능하고, 다른 도메인으로 요청하는 경우 가능하지 않다. 하지만, 해당 도메인을 CORS 허용 해준다면, 자료를 가지고 올 수 있다. CORS는 Cross-Origin Resource Sharing의 약자다. 그렇다면 허용을 어떻게 해줄 수 있을까? 서버에서 Access-control-allow-origin 설정을 통해 할 수 있다고 한다. 이 부..