프론트엔드 정복하기

*REDUX FLOW : dispatch -> ACTION(type, action 기입) -> REDUCER((previousState, action)=>nextState) -> STORE [[ ex. 로그인 기능 구현 ]] 1. // src/components/LoginPage.js 파일 : dispatch ( action명 ( variable명 ) ) 를 한다. ex ) dispatch(loginUser(body)) : "body" variable을 가지고 "loginUser"라는 action을 할거다. (loginUser는 _actions 폴더에서 불러온 것) import {useDispatch} from 'react-redux' import {loginUser} from '...../_action..

1. auth function 만들기 function (SpecificComponent, option, adminRoute = null) { 더보기 -SpecificComponent : 컴포넌트명 -option : null(아무나 출입 가능), true(로그인 유저 출입), false(로그인 유저 출입 X) -adminRoute : true(admin 계정만), null(x, =null ; 기본값이 null임) function AuthenticationCheck(props){ const dispatch=useDispatch(); useEffect(() => { dispatch(auth()).then(response=>{ //로그인하지 않은 상태 if(!response.payload.isAuth){ if(..

1. 로그아웃 button 'click' event 만들기 2. onClickHandler function 선언 const onClickHandler = () => { axios.get('/api/users/logout') .then(reponse=>{ if(reponse.data.success){ props.history.push("/login") }else{ alert('로그아웃 하는 데 실패했습니다.') } }) }

[ usestate 불러오기 > state 만들기(state, setState) > state 함수 선언하기 ] 까지 동일 [ submit(회원가입) 버튼 click 했을 때 ] [ 비밀번호 - 비밀번호 확인 일치하는지 확인하기 ] function onSubmitHandler { if (Password !== ConfirmPassword){ return alert ('비밀번호와 비밀번화 확인이 일치하지 않습니다.') }

1. dispatch dispatch(loginUser(body)) .then(reponse=> { if(reponse.payload.loginSuccess){ props.history.push('/') }else{ alert('Error') } }) dispatch를 통해 body를 인자로, loginUser라는 action(function)을 취함 2. action(function) 선언 -user_action.js파일- import{ LOGIN_USER } from './types'; //types : type을 관리하는 파일 / user_reducer.js, user_action.js 모두 types.js에서 type을 import export function loginUser(dataToSubm..

1. useState/dispatch 불러오기 import React, { useState } from 'react' import React, { useDispatch } from 'react-redux' 2. state 선언하기 const [ state, setstate ] = useState (initialState) -state : state 명 입력 ( emial, password 등 상태가 변경되는 것들 / ex) input의 value값 ) -initialState : 해당 state의 처음 상태. ( "" 라고 하면 => 첫 화면에 email 란 = 공란 ) ***state명이 요소의 value에(ex. ) 입력되지 않아도 상관없다. 그저 onChange(submit 등) 함수와 연결되면 된..