React/ReactJs

React - FrontEnd Project - 3

사용자의 상태를 담을 user라는 리덕스 모듈을 만들었습니다. src/modules/user.js import { createAction, handleActions } from 'redux-actions'; import { takeLatest } from 'redux-saga/effects'; import createRequestSaga, { createRequestActionTypes, } from '../lib/api/createRequestSaga'; import * as authAPI from '../lib/api/auth'; // 새로고침 이후 임시 로그인 처리 const TEMP_SET_USER = 'user/TEMP_SET_USER'; // 회원 정보 확인 const [CHECK, CHECK..

React - FrontEnd project - 2

axios를 사용하여 API를 연동하겠습니다. Axios // src/lib/api/client.js import axios from 'axios'; const client = axios.create(); /** * 글로벌 설정 예시: * API 주소를 다른 곳으로 사용함 * client.defaults.baseURL = `https://external-api-server.com/` * * 헤더 설정 * client.defaults.headers.common['Authorization'] = 'Bearer alb2c3d4'; * * 인터셉터 설정 * axios.intercepter.response.use( \ * response => { * 요청 성공 시 특정 작업 수행 ..

React - FrontEnd Project - 1

프로젝트를 만드러 가면서 지금까지 배운 다양한 기술을 활용해 봅니다. 이 과정을 통해 실무에서 프로젝트를 개발할 떄 어떤 방식으로 작업하는지 알 수 있습니다. 라우터 적용 총 다섯 개의 페이지를 만듭니다. LoginPage.js - 로그인 RegisterPage.js - 회원가입 WritePage.js - 글쓰기 PostPage.js - 포스트 읽기 PostListpage.js - 포스트 목록 UI ( 기존에 쓰던 블로그가 날라가서 UI부분은 간략하게 적겠다.. 죄송합니다 ) // src/components/common/Button.js import React from 'react'; import styled, { css } from 'styled-components'; import palette fr..

React - JWT

우리가 만든 서버에 회원 인증 시스템을 구현해보겠습니다. 이 시스템을 구현하기 위해 JWT라는 기술을 사용합니다. JWT는 JSON Web Token의 약자로, 데이터가 JSON으로 이루어져 있는 토큰을 의미합니다. 두 개체가 서로 안전하게 정보를 주고받을 수 있도록 웹 표준으로 정의된 기술입니다. 세션 기반 인증과 토큰 기반 인증의 차이 세션을 기반으로 인증 시스템을 만든다는 것은 어떤 의미일까요? 한마디로 서버가 사용자가 로그인 중임을 기억하고 있는 것입니다. 세션 기반 인증 시스템에서 사용자가 로그인을 하면, 서버는 세선 저장소에 사용자의 정보를 조회하고 세션 id를 발급합니다. 발급된 id는 주로 브라우저의 쿠키에 저장하게 됩니다. 그 다음에 사용자가 다른 요청을 보..