목록전체 글 (447)
For Programmer

1. Comment.js에 SingleComment Component생성 {/* Comment Lists */} {props.commentList && props.commentList.map( (comment, index) => !comment.responseTo && ( ) )} * props.commentList && 는 comment가 존재할떄만 있을 경우에만 comment들을 보여주겠다는 의미이고 !comment.responseTo 의 의미는 responseTo는 답글을 달았으때만 몽고DB에 저장되는 값이기 때문에 이것이 없는 댓글들 즉, 대댓글이 아닌 댓글들만 페이지를 로딩했을때 우선적으로 보여주겠다는 의미이다. Comment.js의 부모컴포넌트인 VideoDetailPage.js에서는 다음과같..

1.Comment.js페이지 코딩(axios통신 포함),(client-src-components-views-VideoDetailPage-Sections-Comment.js) import React, { useState } from 'react'; import Axios from 'axios'; import { useSelector } from 'react-redux'; function Comment(props) { const videoId = props.postId; const [commentValue, setcommentValue] = useState(''); const user = useSelector((state) => state.user); const handleChange = (event) =>..

1.댓글구조 2.Comment model 생성(server-models-Comment.js) const mongoose = require("mongoose"); const Schema = mongoose.Schema; const commentSchema = mongoose.Schema( { writer: { type: Schema.Types.ObjectId, ref: "User", }, postId: { type: Schema.Types.ObjectId, ref: "Video", }, responseTo: { type: Schema.Types.ObjectId, ref: "User", }, content: { type: String, }, }, { timestamps: true } ); const Comm..

call 이란? * call은 어떠한 함수를 실행할때마다 인자를 지정해줘서 this값을 해당 인자로 바꾸는 것을 말한다.따라서 this를 설정해주는 메서드라고 생각하면 된다. 함수.call(해당 함수 this에 들어갈 인자 , 해당함수의 파라미터 .....) 형식이다. bind란? *어떤 함수의 this값을 영구적으로 고정시켜주는 새로운 함수를 만들어내는것을 말한다. call과는 거의 비슷하지만 var kimSum = sum2.bind(kim, 인자,인자..) 와같이 새로운함수로 반환해준다는 것만 기억하면된다. 구조는 똑같다. call 메서드를 활용한 상속 *함수도 객체이기때문에 상속할때 객체상속방식을 이용할 수있다.(1st,2nd방식) 또한 기본적으로 많이쓰는 방식은 3th상속방식이다. * 상속에서 에..

* __proto__ 이용하기 *__proto__는 표준으로 체택된방식은아니다. 또한 Object.create와도 공통된 점인데 객체는 상속을 받고 부모의 객체 프라퍼티 값을 변경해도 부모 객체의 프라퍼티에는 적용이 안된다. __proto__예제 Object.create(상속받을 부모객체 이름) 이용하기 * debugger; 기능은 코드의 흐름을 막아서 실행후 f5를 눌러 크롬 웹사이트에서 f12 -> source -> Watch로 원하는 변수의 상속관계등을 파악할 수 있다. * Object.create()도 상속을 하고나서 자식의 프라퍼티값을 이용하여 부모의 프라퍼티값을 변경을해도 부모의 프라퍼티값에 직접적인 변경이 발생하지 않는다. Object.create(상속받을 부모객체 이름) 예제

클래스 사용하기 *일반적인 함수와 class를 비교해놓은 코드이다. 실제로 es6문법이 도입되면서 class를 많이사용하게 되었다. class는 자바와 비슷하게 생성자(constructor)가 존재하며 생성자는 var kim = new Person('kim',10,20); 과 같이 new라는 키워드를 통해 객체를 생성할 시 생성할때 한번 실행된다. 클래스에서 메서드 선언하기 * 클래스에서 메서드를 선언할 수있는 방법은 다양하다. 웬만하면 2nd선언 방식을 많이사용한다. 1st방식은 생성자 안에서 사용하는 방식이고 2nd방식과 3th방식은 완전히 동일한 생성방식이다. 단 2nd방식이 간편함으로 2nd방식을 많이 사용한다. 4th방식은 kim이라는 객체에 직접 생성하는 방식이다. 단, 같은 이름으로(sum4..

프로토타입 이해하기 *Person() 함수를 이용해서 객체를 생성하게 되면 sum() 함수도 무조건 같이 생성되게 된다. 이는 메모리낭비를 가져올 수 있으며 이때 사용가능한 것이 prototype이다. prototype은 함수만 가지고 있는데 .prototype을 이용하여 함수는 prototype Object을 가지게 된다. prototype Object라는 것은 빈공간이라고 생각하면된다. 객체는 new라는 생성자를 통해 생성하게 되면 무조건 __proto__라는 속성을 가지게 되는데 이는 조상이었던 함수의 Prototype Object를 가리키게 된다. 즉, 객체가 생성되면서(var lee = new Person2()) 위 sum()이라는 함수를 찾기 위해 우선 자기자신부터 그 위의 조상 , 그리고 O..