거니의 velog

(5) 로그인 구현 * 회원가입을 구현할 때와 비슷하게 로그인 기능도 구현해 보겠다. LoginForm 컴포넌트를 다음과 같이 수정해 보자. [containers/auth/LoginForm.js] import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { withRouter } from 'react-router-dom'; import { changeField, initializeForm, login } from '../../modules/auth'; import AuthForm from '../../components/auth/AuthForm'; import { check ..

(4) 회원가입 구현 * 바로 회원가입 기능을 구현해 보자. 오류 처리는 나중에 할 것이므로, 지금은 신경 쓰지 말고 코드를 작성해 보자. [containers/auth/RegisterForm.js] import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { changeField, initializeForm, register } from '../../modules/auth'; import AuthForm from '../../components/auth/AuthForm'; const RegisterForm = () => { const dispatch = useDispatch..

(3) API 연동하기 * 이제 API를 연동해 보자. axios를 사용하여 API를 연동해 보자. 그리고 리덕스에서 비동기 작업을 쉽게 관리하기 위해 redux-saga와 이전에 만들어서 사용했던 createRequestSaga 유틸 함수를 이용해 보겠다. * 먼저 필요한 라이브러리를 설치해 주자. $ yarn add axios redux-saga { "name": "blog-frontend", "version": "0.1.0", "private": true, "dependencies": { "axios": "^0.19.0", // axios 추가 "immer": "^3.1.3", "react": "^16.8.6", "react-dom": "^16.8.6", "react-redux": "^7.1.0",..

(2) 리덕스로 폼 상태 관리하기 * 이번에는 리덕스로 회원가입과 로그인 폼의 상태를 관리하는 방법을 알아보자. 이전에 만들어 놓았던 auth 모듈을 다음과 같이 수정해 보자. [modules/auth.js] import { createAction, handleActions } from 'redux-actions'; import produce from 'immer'; const CHANGE_FIELD = 'auth/CHANGE_FIELD'; const INITIALIZE_FORM = 'auth/INITIALIZE_FORM'; export const changeField = createAction( CHANGE_FIELD, ({ form, key, value }) => ({ form, // register..