목록React & Node.js 프로젝트 (46)
For Programmer
*이번시간에는 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 ..
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에서는 다음과같..