Redux6 boilerplate(client) - Authentication 기능 만들기 따라하며 배우는 노드, 리액트 기본 강의를 듣고 정리한 내용입니다. Authentication 기능을 위한 Redux 설정하기 1. type 설정 src > action 폴더의 type.js에 Auth 기능을 위한 type을 설정한다. export const AUTH_USER = "auth_user"; 2. auth action 구현 src > action 폴더의 user_action.js에 auth를 위한 요청을 서버에 보내는 작업을 구현한다. import axios from 'axios'; import { AUTH_USER } from './types'; export function auth() { const request = axios.get('/api/users/auth') .then(respon.. 2021. 6. 22. boilerplate(client) - 회원가입 기능 만들기 따라하며 배우는 노드, 리액트 기본 강의를 듣고 정리한 내용입니다. 회원가입 기능을 위한 Redux 설정하기 1. type 설정 src > action 폴더의 type.js에 회원가입을 위한 type을 설정한다. export const REGISTER_USER = "register_user"; 2. register action 구현 src > action 폴더의 user_action.js에 register를 위한 요청을 서버에 보내는 작업을 구현한다. import axios from 'axios'; import { REGISTER_USER } from './types'; export function registerUser(dataTosubmit) { const request = axios.post('/a.. 2021. 6. 21. boilerplate(client) - 로그인 기능 만들기(2) 따라하며 배우는 노드, 리액트 기본 강의를 듣고 정리한 내용입니다. 로그인 기능 구현하기 1. UI 만들기 src > components > views > LoginPage 폴더 안에 LoginPage.js를 생성한다. 이후 원하는 UI를 구현 후 return 시키면 된다. import React from 'react' function LoginPage() { return ( Email Password Login ); } export default LoginPage 위의 구현 내용을 확인해보면 다음과 같다. 2. state 만들기 input 태그에 입력한 값을 받기 위해서는 useState이 필요하다. useState을 통해 각 state을 생성하고 setState을 통해 state에 값을 넣는 형식이다.. 2021. 6. 21. boilerplate(client) - 로그인 기능 만들기(1) 따라하며 배우는 노드, 리액트 기본 강의를 듣고 정리한 내용입니다. 로그인 기능을 위한 Redux 설정하기 1. type 관리를 위한 type.js 생성 src > action 폴더에 type 관리를 위한 type.js를 생성한다. 이 type들은 같은 action 폴더에 있는 user_action.js와 reducer 폴더의 user_reducer.js 등에서 쓰이는데 이를 쉽게 관리하기 위함이다. export const LOGIN_USER = "login_user"; 위 코드와 같이 type으로 지정할 내용을 적어주면 된다. 2. login action 구현 src > action 폴더에 user와 관련된 action을 구현하기 위한 user_action.js를 생성한다. import axios fr.. 2021. 6. 21. boilerplate(client) - Redux 적용하기 따라하며 배우는 노드, 리액트 기본 강의를 듣고 정리한 내용입니다. Redux 적용 redux를 적용하기 위해서는 index.js의 일부분을 수정할 필요가 있다. 내용 추가 전 index.js 초기의 index.js는 다음과 같다. import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( , document.getElementById('root') ); // If you want to start measuring performance in your app.. 2021. 6. 21. Redux - 상태 관리 라이브러리 Redux란? Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다. Redux를 사용할 경우 다음과 같은 이점이 있다. 일관적으로 동작하고, 서로 다른 환경(클라이언트, 서버, 네이티브)에서도 실행되며, 테스트하기 쉬운 앱을 작성하도록 도와준다. 실행 취소, 다시 실행, 영속적인 상태 등을 가능하게 한다. DevTools를 이용할 경우 앱의 상태를 바로바로 확인할 수 있다. Redux의 아키텍처를 통해 변경사항을 기록하고, 시간여행형 디버깅을 사용하고, 완전한 에러 리포트를 서버로 보낼 수 있다. 어떤 UI 레이어에서도 동작하며 거대한 애드온 생태계를 가지고 있다. Redux 핵심 용어 정리 State state는 Redux API에서는 보통 저장소에 의해 관리되고 getState()에 의.. 2021. 6. 21. 이전 1 다음
