JNarin Development Story

1. 컴포넌트 생성 너무 많은 내용을 다룰 수 있기 때문에 컴포넌트를 새로 생성을 해준다. 2. 템플릿 생성 // 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) { return ( Replies {/* Comment Lists */} {/* Root Comment Form */} Submit ); } export default Comment; 기본적으로 HTML, CSS를 먼저 ..

유튜브를 사용해보신 분들은 아시겠지만, 유튜브는 각자의 채널의 고유 페이지가 있습니다. 오늘은 그러한 페이지를 만들려고 하는데요. 시작해보려고 합니다. 순서가 많이 헷갈릴 수 있기에 순서를 먼저 표시를 해보도록 하겠습니다. 1. 먼저 구독한 페이지를 볼 수 있는 파일을 먼저 생성을 한다. 2. 페이지의 링크를 위해 라우터를 생성한다. 3. 만든 페이지의 템플릿을 생성한다. (즉, CSS를 입히다.) 4. 내가 구독한 유저의 비디오만을 골라오는 API를 생성한다. 5. 서버에서 만든 데이터들을 화면에 출력하도록 한다. 이렇게 5단계에 순서에 맞게 실행하면 된다. 1. 페이지 생성 해당하는 위치에 혹은 원하는 위치에 폴더 및 파일을 생성한다. 필자의 설치 경로는 다음과 같다. client > src > co..

유튜브에서 구독하는 기능을 만들어 보려고 한다. Subscriber Model 만들기 다음 링크에서 확인하기 Subscribe Button UI 만들기 // client > src > components > views > VideoDetailPage > VideoDetailPage.js // 중략 import Subscribe from "./Sections/Subscribe"; function VideoDetailPage(props) { // 중략 if (VideoDetail.writer) { return ( // 중략 //중략 ) } else { return ...Loading; } } export default VideoDetailPage; UI 디자인 및 코드를 작성하기엔 너무 길기 때문에 Subs..