0611 Youtube Clone coding "VimoLog" updating

주요 업데이트 한 것들

• 모바일로도 편하게 볼 수 있는 반응형 디자인으로 업데이트.
• 썸네일 없이도 비디오 업로드 가능.
• 비디오가 생성된 날짜가 상세하게 표기됨.
• 계정 삭제 가능. ( 로컬 로그인만 )

RESPONSIVE DESIGN

모든 작업물에 반응형 웹사이트로 제작하려고 노력하고 있다.
width나 height , margin값 까지 대부분을 %로 처리했다... @ media로 다시 세세하게 작성하기 귀찮아서 그랬는데 이게 과연 잘하는 짓인지는 모르겠다.

Header만 조금의 변화를 줌.

NO THUMBNAIL!

강의대로 썸네일 따로 또 업로드 해야하는 것이 번거로워서 DB내에 required를 없애고 DB저장 시 썸네일 유무에 따라 thumbUrl이 생성 되던지 말던지 따로 저장하도록 수정했다.
홈 화면엔 !thumbUrl일 때 img대신video 태그에 preload="metadata"속성을 넣엇따.

VIDEO CREATED DATE

- const milliSeconds = new Date() - video.createdAt.getTime();
- const seconds = milliSeconds / 1000;
- const minutes = seconds / 60;
- const hours = minutes / 60;
- const days = hours / 24;
- const weeks = days / 7;
- const months = days / 30;
if seconds < 60 
    span 방금 전
if minutes < 60  && minutes >= 1
    span #{Math.floor(minutes)}분 전
if hours < 60 && hours >= 1
    span #{Math.floor(hours)}시간 전
if days < 7 && days >= 1
    span #{Math.floor(days)}일 전
if weeks < 5 && weeks >= 1
    span #{Math.floor(weeks)}주 전
if months < 12 && months >= 1
    span #{Math.floor(months)}달 전

Pug내부에 if 문을 활용해 상세한 동영상 생성 시간을 추가했다.
정말이지 pug는 너무 짱이다...

아이콘도 이렇게나 귀여울수가 있나!

DELETE ACCOUNT

로컬 로그인 유저에 한해서 계정 삭제를 할 수 있다.

a태그를 누르는 순간 바로 계정이 지워지기에 delete-account페이지를 따로 만들어서 유저의 동의 후에 삭제하도록 수정할 예정이다.

Will Update

• SUBSCRIPT AND LIKE 💛
• DARK MODE
• KAKAO SOCIAL LOGIN
• COMMENT CREATED TIME
• FOR VERIFICATION DELETE USER PAGE