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

10.2 API Adding a Comment part.1 🍎이번시간에 할 것 덧글(Comment) 기능을 구현하기 위해 html과 css는 이미 해놓은 상태이고, 프론트엔드부분을 하기 전에 먼저 백엔드부분을 구현해볼 것이다. Comment를 위한 api 루트 만들기 routes.js에서 루트를 만들어보자. view를 만들었던 것처럼 하면 된다. const ADD_COMMENT = "/:id/comment"; addComment: ADD_COMMENT //이 부분은 당연히 const routes에 추가 ↑ routes.js videoController.js에서 postAddComment함수 만들기 //Add Comment export const postAddComment = async(req,res) =..

클래스(Class) 🍼 클래스(Class) vs 객체(Object) Class 붕어빵 틀에 비유 템플릿, 청사진이라고도 한다 클래스 안에는 데이터가 들어있지 않다 Object 붕어빵 틀로 만든 붕어빵 클래스에 데이터를 넣어서 만든 것이 객체 클래스를 이용해서 많은 객체를 만들 수 있음 붕어빵 클래스에 팥 데이터를 넣으면 팥 붕어빵, 크림 데이터를 넣으면 크림 붕어빵이 된다. 클래스는 ES6에 추가된 기능임 클래스가 없었을 때에는 function을 이용해서 바로 object를 만들었다(이게 prototype) 기존에 존재하던 프로토타입을 기반으로 하며 간편하게 쓸 수 있도록 문법적으로만 추가되었다고 해서 문법적 설탕(Syntatic sugar)이라고 한다. (여전히 클래스도 프로토타입 기반이다) 클래스 몸..

10.1 API Registering a View part.2 😎이번 시간에 할 것 지난 시간에 백엔드에서 작성한 URL에 접근하기 위해 프론트엔드를 작성할 것이다. assets > js > videoPlayer.js로 가서 코드 작성하기 우리가 비동기 통신으로 처리해줘야 할 기능이 조회수 기능과 덧글 기능이 있는데, 일단 지금 하는 조회수 기능은 fetch로 할 것이고 덧글기능을 위해서는 axios를 사용할 것이다. 동영상이 있는 페이지에서 console로 fetch("http://localhost:4000/api/60531411f3ca0d4f485c23ea/view")라고 치면 pending 상태의 promise가 뜬다. 이처럼 fetch는 promise를 반환한다. const registerView..