[인프런] 따라하며 배우는 노드, 리액트 시리즈 - 기본강의를 들으며 정리한 내용입니다. HOC : Higher Order Component 다른 컴포넌트를 받아 새로운 컴포넌트를 리턴하는 함수 1. hoc/auth.js 파일 생성하기 import React, { useEffect } from "react"; import { useNavigate } from "react-router-dom"; import { useDispatch } from "react-redux"; import { authUser } from "../_actions/user_action"; export default function (SpecificComponent, option, adminRoute = null) { //option..

[인프런] 따라하며 배우는 노드, 리액트 시리즈 - 기본강의를 들으며 정리한 내용입니다. 1. LandingPage.js 파일에 로그아웃 버튼 및 기능 추가 import React from "react"; import axios from "axios"; import { useNavigate } from "react-router-dom"; export default function LandingPage() { const navigate = useNavigate(); const onLogoutHandler = () => { axios.get("/api/users/logout").then((response) => { if (response.data.success) { navigate("/LoginPage");..

[인프런] 따라하며 배우는 노드, 리액트 시리즈 - 기본강의를 들으며 정리한 내용입니다. 1. RegisterPage.js 파일에 회원가입 폼 추가 import React, { useState } from "react"; export default function RegisterPage() { const [registerInfo, setRegisterInfo] = useState({ email: "", name: "", password: "", confirmPassword: "", }); const onChangeHandler = (e) => { setRegisterInfo((registerInfo) => ({ ...registerInfo, [e.target.name]: e.target.value, })..

[인프런] 따라하며 배우는 노드, 리액트 시리즈 - 기본강의를 들으며 정리한 내용입니다. 1. LandingPage.js 파일에 기본 스타일 적용 시작 페이지 2. LoginPage.js에 로그인 폼 추가 import React, { useState } from "react"; export default function LoginPage() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const onEmailHandler = (e) => { setEmail(e.target.value); }; const onPasswordHandler = (e) => { setPassword(e.target.v..

[인프런] 따라하며 배우는 노드, 리액트 시리즈 - 기본강의를 들으며 정리한 내용입니다. Redux란? predictable state container for JavaScript apps. 상태관리 라이브러리 Props VS State Props State 부모→자식으로 전달만 가능하다. 각 컴포넌트 안에서 state를 통해 데이터를 전달받아 사용가능하다. 전달받은 데이터는 수정불가능 데이터 수정 가능, 데이터 수정시 리렌더링됨 1. react-redux, redux-promise, redux-thunk 설치하기 cd client npm install react-redux redux-promise redux-thunk --save *redux-promise, redux-thunk (redux middl..

[인프런] 따라하며 배우는 노드, 리액트 시리즈 - 기본강의를 들으며 정리한 내용입니다. 프론트와 백 서버를 동시에 킬 수 있게 해준다. 1.concurrently 설치하기 npm install concurrently --save 2. 루트폴더에 있는 package.json 파일에 스크립트 추가하기 "dev": "concurrently \\"npm run backend\\" \\"npm run start --prefix client\\""