배포하기 전에 빌드하기 이제 우리가 만든 것을 빌드(build)해야 한다. 빌드란, 실행가능한 파일로 만드는 것을 말한다. 우리가 작성한 코드를 예전 코드로 변환하는 과정을 거쳐야 실행할 수가 있다. 🍫@babel/cli 설치 npm install --save-dev @babel/cli 이 명령어로 @babel/cli를 설치한다. 🍫src 폴더 만들어서 넣기 src 폴더를 만든 후, node_modules, package.json, package-lock.json, README, .env, .eslintrc.js, .gitignore만 제외하고 모든 걸 src폴더 안에 넣는다. 🍫 .gitignore에 잊지말고 build를 추가해주기 🍫 app.js 상단에 @babel/polyfill을 import 해주..

데이터베이스를 우리 컴퓨터 안에 두고 있으니까 이건 별로 좋은 방법은 아니다. 데이터베이스를 클라우드에 두어야만 한다. **Mongo Atlas가 Mongo Lab을 인수했으므로 MongoLab이 더 이상 동작하지 않는다. 클러스터가 필요하다. 클러스터를 만들고,, 이 부분은 해당 강의를 듣고 다른 사람들의 덧글을 참고했었다. 그리고 배포 할 때 데이터베이스 URL을 환경변수(.env)의 MONGO_URL_PROD에다가 저장해놓았다.

영상 시간 안뜨는 버그 해결하기(Blob Duration Bug) 나도 전체 영상 시간이 NaN NaN NaN으로 나오는 영상이 있었는데, 니콜라스도 그 버그를 고치는 것을 알려줘서 다행이었다. Blob이 영상 전체 시간을 가지고 있지 않아서 그렇게 나온 것이라고 한다. https://github.com/evictor/get-blob-duration 여기 get-blob-duration 이라는 라이브러리가 있다. 내가 하고 싶은 걸 해주는 녀석이다. 이게 무엇을 말하는 거냐면 Blob의 길이(duration)를 알려주는 것이다. get-blob-duration 설치하기 npm install get-blob-duration videoPlayer.js에 가서 수정하기 import getBlobDuration..

AWS S3 이번 시간에는 AWS S3을 활성화하는 것을 해볼 것이다. AWS(Amazon Web Service)의 S3은 파일을 업로드할 수 있는 서비스이다. 우린 이제 이것을 통해서 우리의 로컬에 데이터베이스에 비디오나 유저의 프로필사진 이런 것들을 저장하지 않고 아마존에다가 올리게 되는 것이다! 🍔AWS 가입하고 퍼블릭으로 버킷 만들기 https://s3.console.aws.amazon.com/s3/home?region=us-east-2# https://s3.console.aws.amazon.com/s3/home?region=us-east-2 s3.console.aws.amazon.com 여기 AWS에 가입하고 진행하면 된다. 버킷을 퍼블릭으로 만들어주면 된다. (다른 블로그 참조해서 했음) 🍔 ..

10.4 API Adding a Comment part.3 🍒이번시간에 할 것 댓글 추가를 페이크(fake)로 할 것이다. 무슨 말이냐면, 누군가 댓글을 달면 덧글 수가 하나 추가된 거처럼 보이고, 방금 작성한 덧글이 보이도록 할 것이다. (그러니까 지금 현재 덧글을 작성하면 새로고침을 해야 반영이 되니까 새로고침하지 않고도 바로 반영이 된 것처럼 보이고 싶어서 그러는 것이다 → 리얼타임처럼 보이고 싶어서 페이크를 하는 것) 🍒 axios의 status code를 listen할 거고 status code가 200이면 그때 댓글이 추가됐다는 거니까 즉 댓글을 페이크로 달 것이다. addComment 함수 만들기(addComment.js) const addComment = (comment) => { cons..

10.3 API Adding a Comment part.2 🍓이번시간에 할 것 덧글(Comment) 기능의 프론트엔드부분을 구현할 것이다. comment를 하나 만들어보자 이번에는 Ajax로 보내보자 videoDetail.pug에서 id 추가하기 .video__comments if video.comments.length === 1 span.video__comment-number 1 comment else span.video__comment-number #{video.comments.length} comments form.add__comment#jsAddComment input(type="text", placeholder="Add a comment", name="comment") ul.video__comm..