For Programmer

*이번시간에는 4번 GridCardComponent를 만들예정이며 5번 다음시간에 할 예정이다. 1. Grid Card Component를 만들기 (client-src-components-views-commons-GirdCards.js) *LandingPage폴더 내부에 만들지 않는 이유는 그리드카드를 사용할 곳이 LandingPage뿐만 아니라 몇군데 더있기 때문에 상위 폴더에 생성 2. antd Col , Row를 이용하여 GridCard페이지 코딩 import React from 'react'; import { Col } from 'antd'; function GridCards(props) { return ( {/*브라우저의 크기가 가장클때는 24중에 6만쓰겠다는의미 중간은 8 가장작을때는 24를 ..

*이번시간에는 3번까지 할예정이며 4~5번은 다음시간에 할예정이다. *fetch 통신에대한 사용법은 다음글을 참고하자 https://webisfree.com/2019-05-15/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-fetch-api-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0 자바스크립트 fetch API 알아보기 자바스크립트에서 fetch API를 사용하여 서버와 비동기 통신을 어떻게 할 수 있는지 그 방법과 예제에 대하여 자세히 알아봅니다. webisfree.com *또한 fetch통신과 Axios통신의 차이점은 fetch통신은 응답을 promise형태로 하기때문에 이를 json형태로 바꿔야한다는점과 에러처리방식에있어서..

* The MovieDB Website로 이동 ( https://www.themoviedb.org/) 1. 회원가입 2.API 키 요청(설정으로 이동) 3.DEVELOPER 전용 API 선택 4.개인정보 입력 5.API키 복사 *동영상 API url 과 이미지 url 을 가져오기 위해 중복되는 주소를 상수로 설정하기 *최근 동영상 가져오기 *동영상 세부사항 가져오기 *동영상 리뷰 가져오기 *동영상 트렌드 정보 가져오기 * client - src - components - Config.js export const API_URL = 'https://api.themoviedb.org/3/'; export const IMAGE_BASE_URL = 'http://image.tmdb.org/t/p/'; 코드 추가하..

유튜브 클론코딩에이어 이번에는 영화사이트를 만들어보려고 합니다. 해당 영화사이트 만들기에 참고한 강의는 John-Ahn 님의 https://www.youtube.com/watch?v=RxPJeeEgdIs 유튜브강의를 참고하였습니다. 우선 boiler-plate 에대한 설명은 https://ji-gwang.tistory.com/2?category=953263 1. boiler-plate란? git-hub에 보면 boilerplate란 용어를 굉장히 많이쓴다. 또한 boiler-plate이 실제 개발에 있어서 굉장히 유용한데 이는 단어 뜻 그대로 보일러를 찍어내는 통(접시) 정도라고 생각하면 된다. 즉, 코딩에�� ji-gwang.tistory.com 다음글을 참고하시면 됩니다. * boiler-plate은..

1.onClick func 만들기(Axios통신 포함)(LikeDislikes.js) * onClick 이벤트 like 버튼에 적용시키기 {LikeAction === '' ? ( ) : ( )} * onLike 함수만들기 const onLike = () => { if (LikeAction === '') { Axios.post('/api/like/upLike', variable).then((response) => { if (response.data.success) { setLikes(Likes + 1); setLikeAction('liked'); if (DisLikeAction !== '') { setDisLikeAction(''); setDislikes(Dislikes - 1); } } else { al..

1. Like & Dislike 버튼만들기 Like버튼만들기(VideoDetailPage.js) ...이하생략 * 다음과 같이 actions에 버튼을 만들어준다. Dislike버튼만들기(SingleComments.js) const actions = [ , Reply to , ]; return ( { Axios.post('/api/like/getLikes', variable).then((response) => { if (response.data.success) { //얼마나 많은 좋아요를 받았는지 setLikes(response.data.likes.length); //내가 좋아요를 이미 눌렀는지 response.data.likes.map((like) => { if (like.userId === props...

1.Like 와 Dislike Model을(몽고DB) 서버에 만든다. server-models-Like.js const mongoose = require("mongoose"); const Schema = mongoose.Schema; const likeSchema = mongoose.Schema( { userId: { type: Schema.Types.ObjectId, ref: "User", }, commentId: { type: Schema.Types.ObjectId, ref: "Comment", }, videoId: { type: Schema.Types.ObjectId, ref: "Video", }, }, { timestamps: true } ); const Like = mongoose.model("..

* 위 구조에서 볼 수 있듯이 ReplyComment안에 있는 SingleComment 와 ReplyComment를 중첩시켜놓는 구조를 만들어야한다. 1.Comment.js에서 큰 틀 잡기위한 코딩 {/* Comment Lists */} {props.commentList && props.commentList.map( (comment, index) => !comment.responseTo && ( //대댓글은 우선 숨기겠다는 의미 ) )} {/* Root Comment Form */} ...이하생략 * 각각의 코멘트 마다 map메서드를 통해서 댓글내용을표시하고(SingleComment) 그 밑에 대댓글의 개수를 구하는 형태(ReplyComment)를 만들겠다는 코드 (단 !comment.reponseTo ..