[노드/리액트 유튜브] #3~4. 비디오 업로드 FORM 만들기 **본 포스팅은 유튜브&인프런 John Ahn님의 노드 리액트 유튜브 클론 강의를 참고하여 작성하였습니다.** 4. form template 만들기 : antdesign 사용 5. drop-zone 만들기 // VideoUploadPage.js import React from 'react'; import { Typography, Button, Form, message, Input, Icon } from 'antd'; import Dropzone from 'react-dropzone'; const { TextArea } = Input; const { Title } = Typography; function VideoUploadPage(){ return( Upload Video {/* Drop zone */}.. 2022. 2. 13. [노드/리액트 유튜브] #1~2. 유튜브 사이트 만들기!, 전체적인 틀 만들고 Mongo DB 연결 **본 포스팅은 유튜브&인프런 John Ahn님의 노드 리액트 유튜브 클론 강의를 참고하여 작성하였습니다.** 강의 링크 : https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EB%85%B8%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%9C%A0%ED%8A%9C%EB%B8%8C-%EB%A7%8C%EB%93%A4%EA%B8%B0/dashboard [무료] 따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기 - 인프런 | 강의 이 강의를 통해 리액트와 노드의 개념을 익히는 것뿐만이 아닌 실질적으로 어떻게 웹사이트를 만들 수 있는지를 배울 수 있습.. 2022. 2. 12. [노드/리액트 기초] #33~34. 인증 체크 // 완강★ **본 포스팅은 유튜브&인프런 John Ahn님의 노드 리액트 기초 강의를 참고하여 작성하였습니다.** Authentication Check HOC (Higher Order Component) 다른 component를 받아서 새로운 component를 return하는 function 이다. 2022.02.05 - [Study/Node&React_basic] - [노드/리액트 기초] #18~20. CRA 구조, Boilerplate, React Router Dom backend에 request를 날려서 그 사람의 현재 상태를 가져온다. 해당 유저가 해당 페이지에 들어갈 자격이 되는지 체크한 후 component로 보내준다. // auth.js export default function (SpecificCo.. 2022. 2. 10. [노드/리액트 기초] #29~32. 로그인 페이지, 회원가입 페이지, 로그아웃 **본 포스팅은 유튜브&인프런 John Ahn님의 노드 리액트 기초 강의를 참고하여 작성하였습니다.** Login Page 이메일 -> 비밀번호 -> 확인(redux로 처리) => 로그인 Dispatch -> Action -> Reducer // type.js export const LOGIN_USER = "login_user"; // LoginPage.js (Dispatch) import React, { useState } from 'react' import Axios from 'axios' import { useDispatch } from 'react-redux'; import { loginUser } from '../../../_actions/user_action' import { useNaviga.. 2022. 2. 8. [노드/리액트 기초] #28. React vs React Hooks **본 포스팅은 유튜브&인프런 John Ahn님의 노드 리액트 기초 강의를 참고하여 작성하였습니다.** Class vs Functional Component Class에서 Functional보다 더 많은 기능들을 사용할 수 있다. React Hook 하지만 React Hook 덕분에 이제 functional component에서도 위의 기능들을 사용할 수 있다. constructor -> const state -> useState componentDidMount -> useEffect 2022. 2. 7. [노드/리액트 기초] #26~27. Redux, Props vs State **본 포스팅은 유튜브&인프런 John Ahn님의 노드 리액트 기초 강의를 참고하여 작성하였습니다.** Redux state 관리 라이브러리 Props vs State - Props : property의 줄임말이다. 컴포넌트를 주고받을 때 부모-> 자식으로만 보낼 수 있다. 부모가 자식한테 '1'을 보냈다고 하면 자식은 그걸 변경할 수 없다. 변경하려면 부모가 자식한테 '2'를 보내줘야 한다. - State : 부모 자식 개념이 없다. 컴포넌트가 변경 가능하다. state가 변하면 re-rendering 된다. redux를 이용하면 굳이 하나하나 타고 올라가서 전달하지 않고, 직접 전달할 수 있다. Redux Data Flow : 한 방향으로만 흘러감 Action : 무엇이 일어났는지를 설명하는 객체이며.. 2022. 2. 7. 이전 1 2 3 4 5 6 7 다음
