[노드/리액트 기초] #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. [노드/리액트 기초] #23~25. Proxy Server, Concurrently, CSS Framework **본 포스팅은 유튜브&인프런 John Ahn님의 노드 리액트 기초 강의를 참고하여 작성하였습니다.** Proxy Server 유저와 인터넷이 있을 때, 유저가 무언가를 전송하면 proxy server에서 IP나 data를 임의로 바꿀 수도 있고(보안), 캐쉬를 이용해서 어떤 사이트의 static한 image 등을 저장해뒀다가 보려고 할때 굳이 인터넷까지 가지 않고 빠르게 볼 수 있도록 할 수 있고, 특정 사이트에 못 들어가도록 막을 수도 있다. 그 외에도 여러 가지 기능이 있다. Concurrently 서버를 킬 때, 백엔드/프론트엔드 서버를 각각 일일이 켜야 했다. (npm run backend / npm run start) concurrently를 이용하면 둘 다 한 번에 켤 수 있다. packag.. 2022. 2. 6. [노드/리액트 기초] #21~22. 데이터 Flow & Axios, CORS 이슈 & Proxy 설정 **본 포스팅은 유튜브&인프런 John Ahn님의 노드 리액트 기초 강의를 참고하여 작성하였습니다.** Data Flow 어떤 유저가 로그인을 하고 싶으면 client에서 사용자의 이름과 비밀번호를 넣고 로그인 버튼을 누른다. 그러면 그 요청이 server로 간다. server에서는 DB에 유저 아이디가 있는지 찾고, 있으면 비밀번호가 그 유저 아이디의 비밀번호와 일치하는지 체크한다. 만약 일치한다면 성공했다는 response를 전송한다. 비밀번호가 틀렸거나 유저 자체가 DB에 없다면 그런 사항에 대해 response를 전송한다. 지금까지는 client(React)부분이 없어서 postman을 사용했었는데, 이제 client부분을 만들었으니 거기서 직접 요청을 보낼 수 있다. 요청을 보낼 때 AXIOS라.. 2022. 2. 6. 이전 1 2 3 다음
