Node.js - express로 서버를 만들었습니다.
Mongodb(mongoose) - mongodb(local) mongodb atlas를 통하여 사용자의 글/영상/댓글/아이디을 관리합니다.
AmazonS3 - Multer Amazon을 사용하여 아마존서버에 영상과 프로필사진을 업로드합니다.
PUG - Node.js의 템플릿엔진으로 View를 담당하였습니다.
Passport - 사용자 인증과정을 위해 이용하였습니다.
babel - ES6 이상의 최신문법을 사용하기위한 바벨입니다.
Webpack,Scss - 배포와 CSS를 구분하였습니다.
처음 메인화면에는 사용자가 업로드한 영상들이 그리드로 나뉘어져서 목록에 올라옵니다.
로그인 화면입니다. 카카오톡/네이버 로그인은 패스포트를 이용하여 구현하였습니다. 위의 form형식으로도 가입이 가능합니다. 중복메일 가입을 막기위해서 mongodb 안의 사용자의 이메일과 비교하여 이메일 중복이 있다면 기존에 가입된 아이디로 연결되도록 하였습니다.
로그인시에 헤더가 오른쪽과 같이 비디오/게시판/프로필/로그아웃으로 변경됩니다.
검색란에 비디오를 검색하면 검색어에 해당하는 영상들을 보여줍니다.
검색결과가 없으면 나타나지않습니다.
메인의 비디오를 클릭하면 나오는 상세화면입니다.
중간에 비디오가 나오고 오른쪽에 비디오가 올라온 순서대로 영상/제목/작성자/조회수 가 뜨도록 하였습니다.
메인 비디오 아래의 VideoEdit와 VideoDelete는 글을 작성한 작성자외의 다른사용자에게는 보이지않습니다.
수정버튼을 누르면 제목과 내용이 textarea로 변경되어 있고 수정을 한후 수정을 누르면 적용됩니다.
로그아웃되어 헤더가 조인/로그인 으로 변하였고 비디오화면아래의 수정/삭제 기능은 사라진것을 볼수있습니다.
이 프로젝트는 자바스크립트로 만들어졌지만 실시간인것처럼 반영하기위해 DOM을 조작하여서
실시간으로 좋아요/싫어요 가 갱신되는것처럼 보이게 하였습니다.
비디오에 있는 각 댓글들도 사용자가 아닐땐 수정/삭제가 보이지 않도록 하였습니다.
작성자의 닉네임을 누르면 작성자가 게시한 글을 볼수있도록 하였습니다.
로그인이 된 사용자가 왼쪽의 MY POST를 누르면 자기가 쓴 게시글들을 확인할수있습니다.
좋아요 숫자가 높은 순서대로 영상이 sort되어 순서대로 나타납니다.
프로필의 기본사진은 파란색머리 사진입니다. 프로필 수정하기를 누르면 아래사진과같이 변경이 가능합니다.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent