728x90 반응형 Web/React Node js23 리액트 기초 강의 (12) - 인증체크 1. 회원이 접근할 수 있는 페이지는 권한이나 상태에 따라 다를 수 있고, 이러한 페이지에 대한 통제는 HOC를 이용함 HOC : 다른 컴포넌트를 받아 새로운 컴포넌트를 return하는 function - 아래와 같이 상태를 체크하여 페이지를 통제하는 방식임 import React from 'react'; import { BrowserRouter as Router, Routes, Route, } from "react-router-dom"; import LandingPage from './components/views/LandingPage/LandingPage' import LoginPage from './components/views/LoginPage/LoginPage' import RegisterPag.. 2022. 3. 2. 리액트 기초 강의 (11) - 로그아웃 - LandingPage에 버튼 하나를 생성하여 로그아웃을 하게 만들면 됨 import React, {useEffect} from 'react'; import axios from 'axios'; function LandingPage(){ useEffect(() => { axios.get('/api/hello').then(response => console.log(response.data)) }, []) const onClickHandler = () =>{ axios.get('/api/users/logout') .then(response => { console.log(response.data) }) } return ( 시작 페이지 로그아웃 ) } export default LandingPage; - 로그아.. 2022. 3. 2. 리액트 기초 강의 (10) - 회원가입 - Redux를 적용하여 회원가입 페이지 구현 - RegisterPage.js import React, { useState } from 'react'; import {useDispatch} from 'react-redux'; import {registerUser} from '../../../_actions/user_actions'; import {useNavigate} from 'react-router-dom'; function RegisterPage(){ const navigate = useNavigate(); const dispatch = useDispatch(); //state와 setState를 작성하여 타이핑을 가능하게 만듦 const [Email, setEmail] = useState("") .. 2022. 3. 2. 리액트 기초 강의 (9) - 로그인 페이지 - 현재 Boiler Plate는 로그인과 회원가입 부분을 Formik과 Yup이란 라이브러리를 사용해서 좀 더 다이나믹하게 만들었음 - 그러나, 참고 강의가 기초 강의 수업이므로 기본 기능을 가진 로그인 페이지를 만들 예정. - LandginPage & LoginPage 생성 import React, {useEffect} from 'react'; import axios from 'axios'; function LandingPage(){ useEffect(() => { axios.get('/api/hello').then(response => console.log(response.data)) }, []) return ( 시작 페이지 ) } export default LandingPage; - 이메일과 패스.. 2022. 3. 2. 리액트 기초 강의 (8) - React Hooks - React Component : Class Component & Functional Component => Class Component : 더 많은 기능을 제공하지만, 코드가 길어지고 복잡해지고 성능이 좋지 않음 => Functional Component : 제한된 기능을 제공하지만, 코드가 짧고 성능이 좋음 - lifecycle은 Fuctional Component에서는 사용이 불가능했지만, react 16.8 이후에 Hook이 발표되면서 Functional Component에서도 사용 가능하게 되었음 - 아래 그림은 React Hooks을 사용한 예시임 2022. 3. 1. 리액트 기초 강의 (7) - Redux 1. Redux : state 관리 라이브러리임 - state : 컴포넌트 안에서 데이터를 전달하는 방식이며, 컴포넌트 안에서도 충분히 값을 변경할 수 있음 state가 변하면 re-rending 되는 특징이 있음 - props는 부모에서 자식 방향으로 값을 보내, 변하지 않는 값을 의미하며 생성할 때 전달하는 값임 => redux는 state를 관리해주는 tool임 - 데이터를 공유하는 컴포넌트들이 계층적으로 존재한다면, 계속해서 부모와 자식 사이를 지나가며 상태를 유지해야 함 - 그러나, redux를 사용한다면 store 하나를 만들어 컴포넌트들의 상태를 관리할 수 있음 - Redux data flow : 철저하게 한방향으로 흐르는 것을 의미함 - Action : 어떤 일이 일어났는지 설명하는 객체 .. 2022. 3. 1. 리액트 기초 강의 (6) - Antd CSS Framework 1. Antd CSS Framwork - 스타일 작업이 너무 오래 걸리기 때문에, 성능 집중을 위해 framework를 사용하는 것이 좋음 - 사용할 framework는 ant.design임 https://ant.design/ Ant Design - The world's second most popular React UI framework ant.design - 단점 : 사이즈가 큼 - 장점 : 스타일이 깔끔하고, 사용하기 굉장히 편함 - 설치 cd client npm install antd --save - index.js에 임의로 import import 'antd/dist/antd.css'; 2022. 3. 1. 리액트 기초 강의 (5) - Concurrently 1. 프론트, 백 서버 한번에 키기 위해서는 Concurrently를 이용해야 함 - 라이브러리 다운 npm install concurrently --save - package.json의 스크립트 안에 추가 작성을 함 - --prefix client 디렉토리에 작성된 npm run start를 하기위해 추가함 [결과 출력] 2022. 3. 1. 리액트 기초 강의 (4) - Proxy server 1. Proxy => 아이피를 Proxy server에서 임의로 바꿔 버릴 수 잇으며, 그래서 인터넷에서는 접근하는 사람의 IP를 모르게 됨 => 보내는 데이터도 임의로 바꿀 수 있음 2. 기능 => 방화벽 기능 => 웹 필터 기능 => 캐쉬 데이터, 공유 데이터 제공 기능 3. 사용 이유 => 회사에서 직원들이나 집안에서 아이들 인터넷 사용 제어 => 캐쉬를 이용ㅇ해 더 빠른 인터넷 이용 제공 => 더 나은 보안 제공 => 이용 제한된 사이트 접근 가능 2022. 3. 1. 리액트 기초 강의 (3) - 데이터 Flow & Axios - server : node.js - client : react.js - data base : mongoDB - client 부분이 없어서 포스트맨을 사용하였는데, axios를 설치하여 client 안에서 요청을 보내려고 함 npm install axios --save - client/component/views/LadingPage/LandingPage.js import React, {useEffect} from 'react'; import axios from 'axios'; function LandingPage(){ useEffect(() => { axios.get('/api/hello').then(response => console.log(response.data)) }, []) return ( La.. 2022. 3. 1. 이전 1 2 3 다음 728x90 반응형
