2021/03(76)
-
[유튜브 클론코딩] 10.3 API Adding a Comment part.2
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..
2021.03.23 -
[유튜브 클론코딩] 10.2 API Adding a Comment part.1
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) =..
2021.03.23 -
클래스(Class)
클래스(Class) 🍼 클래스(Class) vs 객체(Object) Class 붕어빵 틀에 비유 템플릿, 청사진이라고도 한다 클래스 안에는 데이터가 들어있지 않다 Object 붕어빵 틀로 만든 붕어빵 클래스에 데이터를 넣어서 만든 것이 객체 클래스를 이용해서 많은 객체를 만들 수 있음 붕어빵 클래스에 팥 데이터를 넣으면 팥 붕어빵, 크림 데이터를 넣으면 크림 붕어빵이 된다. 클래스는 ES6에 추가된 기능임 클래스가 없었을 때에는 function을 이용해서 바로 object를 만들었다(이게 prototype) 기존에 존재하던 프로토타입을 기반으로 하며 간편하게 쓸 수 있도록 문법적으로만 추가되었다고 해서 문법적 설탕(Syntatic sugar)이라고 한다. (여전히 클래스도 프로토타입 기반이다) 클래스 몸..
2021.03.23 -
프로토타입(Prototype)
프로토타입 자바스크립트는 멀티 패러다임 프로그래밍 언어 - 자바스크립트는 명령형, 함수형, 프로토타입 기반, 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다. - C++나 Java 같은 클래스 기반 객체지향 프로그래밍 언어의 특징인 클래스,상속,캡슐화를 위한 키워드인 public, private, protected등이 없어서 자바스크립트는 객체지향 언어가 아니라고 오해하는 경우도 있으나 클래스 기반의 객체지향 프로그래밍 언어보다 효율적이며 더 강력한 객체지향 프로그래밍 능력을 지니고 있는 프로토타입 기반의 객체지향 프로그래밍 언어임 - ES6에서 클래스가 도입되었으나 ES6의 클래스가 기존의 프로토타입 기반 객체지향 모델을 폐지하고 새로운 객체지향 모델을 제공하는 것은 아님 클래스는 생성..
2021.03.23 -
[유튜브 클론코딩] 10.1 API Registering a View part.2
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..
2021.03.22 -
[유튜브 클론코딩] 10.0 API Registering a View part.1
10.0 API Registering a View part.1 💩이번 시간에는 조회수 기능을 구현할 것이다. 조회수 기능을 위해서 Ajax라는 것을 사용할 것이다. Ajax란? Asynchronouse Javascript and XML , 비동기 JS, XML 통신이다. 예를 들면 이 video가 끝나면 JavaScript에 전달해서 서버 URL로 가도록 하고 그 URL은 이 비디오가 시청됐다고 등록하는 것이다. 이 기능은 그 URL에 어떤 템플릿이 필요한 것이 아니다. 즉, 화면을 렌더링하지 않고 서버와 통신하는 것이다. 이런 것이 흔히 말하는 Single Page Application의 기본이 된다. 우리가 잘 아는 넷플릭스와 유튜브도 이러한 방식으로 동작한다. 예를 들어, 유튜브를 보면 내가 홈에서..
2021.03.22