JNarin Development Story

1. SingleComment.js 생성 아래의 이미지처럼 해당하는 위치에 SingleComment.js파일을 생성한다. 2. Single Comment를 위한 Template 생성 만든 파일에 아래와 같은 템플릿을 작성한다. // client > src > components > views > VideoDetailPage > Sections > SingleComment.js import React from "react"; import { Comment, Avatar, Button, Input } from "antd"; const { TextArea } = Input; function SingleComment() { return ( Submit ); } export default SingleComment..

CSS에서는 초기화 코드라는 것이 있다. 기본적으로 특정 태그에는 기본적으로 CSS가 있는 경우가 있는데, 이 모든 것을 초기화하고 기본으로 설정한다. 그렇게 할 경우 약간의 문제가 생긴 화면 구성을 좀 더 정확하게 코딩 디자인을 할 수 있다. 아래 코드는 퍼블리셔 과정을 했을 당시에 비슷하게 사용하던 reset.css코드다. /* reset CSS Code */ @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,..

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..

DOM에 대한 이야기는 어디에서나 제일 처음 나오지만 제대로 알아본 적이 없다. 그래서 공부하면서 정리를 해보려고 한다. DOM이란? DOM(Document Object Model)은 문서 객체 모델이라고도 한다. DOM은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스다. 여기서 인터페이스(interface)는 서로 다른 두 개의 시스템, 장치 사이에서 정보나 신호를 주고받는 경우의 접점이나 경계면이다. 즉, DOM은 사용자가 기기를 쉽게 동작시키는데 도움을 주는 시스템이라고도 할 수 있다. 이나 같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만드는 것을 의미한다. DOM의 종류 W3C의 DOM의 표준은 세가지 모델로 구분된다. - Core DOM :..

공부를 시작하고 다 올렸지만 필자가 다시 찾아보는데 어려움이 있어 편하게 공부 및 검색을 위해 이 페이지가 제작이 되었음을 밝힙니다. 중요하다고 하는 포인트 혹은 태그를 위주로 정리를 하였습니다. Front 1. react-router-dom jnarin-development-story.tistory.com/98 2. axios, CORS, proxy, ShareArrayBuffer jnarin-development-story.tistory.com/99 3. redux, Redux Extension jnarin-development-story.tistory.com/101 4. class VS function Components, hook jnarin-development-story.tistory.com/..

안녕하세요. 제이나린 입니다. 오늘은 우측에 있는 사이드 비디오를 만드는 과정을 적어보려고 합니다. 1. SideoVideo 템플릿 만들기 먼저 SideVideo 템플릿을 만들기 위해서는 다음과 같은 경로가 필요하다. VideoDetailPage 폴더 안에 Sections라는 폴더를 만든 후 그 안에 SideVideo.js를 만든다. // src > components > views > VideoDetailPage > Sections > SideVideo.js import React from "react"; function SideVideo() { return ( {/* 이미지 */} {/* 이미지에 대한 정보 */} videoTitle videoWriterName videoViews Time ); } ..