배포하기 전에 빌드하기 이제 우리가 만든 것을 빌드(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에 가입하고 진행하면 된다. 버킷을 퍼블릭으로 만들어주면 된다. (다른 블로그 참조해서 했음) 🍔 ..

[백준] 4344. 평균은 넘겠지 (자바스크립트) 시간 제한 메모리 제한 제출 정답 맞은 사람 정답 비율 1 초 256 MB 108753 39857 34011 37.342% 문제 대학생 새내기들의 90%는 자신이 반에서 평균은 넘는다고 생각한다. 당신은 그들에게 슬픈 진실을 알려줘야 한다. 입력 첫째 줄에는 테스트 케이스의 개수 C가 주어진다. 둘째 줄부터 각 테스트 케이스마다 학생의 수 N(1 ≤ N ≤ 1000, N은 정수)이 첫 수로 주어지고, 이어서 N명의 점수가 주어진다. 점수는 0보다 크거나 같고, 100보다 작거나 같은 정수이다. 출력 각 케이스마다 한 줄씩 평균을 넘는 학생들의 비율을 반올림하여 소수점 셋째 자리까지 출력한다. 예제 입력 1 5 5 50 50 70 80 100 7 100 9..

event.target VS event.currentTarget 🎵event.target 이벤트버블링의 가장 마지막에 위치한 최하위의 요소를 반환 (즉 더 세밀하게 클릭된 요소를 기준으로 사용할 때) (event.target은 내가 이벤트를 건 대상만 발생하는 것이 아니라 그 자식(후손)도 될 수 있다) 🎶event.currentTarget 이벤트가 바인딩된 요소를 반환한다. 🎀 예시 이런 코드가 있다고 하면, 나는 div 태그를 클릭했을 때 삭제 작업을 진행하고 싶은 경우div태그에 onclick 이벤트리스너를 추가했다하더라도, 내가 아이콘 부분을 누르면 event.target은 div태그가 아니라 i태그가 event.target이 된다. 이것을 해결하기 위해서는 event.currentTarget을 ..