Category: React

2024
0
ReactVite

Vite 환경에서 tsconfig Path 사용하기

라이브러리 설치npm install vite-tsconfig-paths import react from "@vitejs/plugin-react";import {defineConfig} from "vite";import EnvironmentPlugin from "vite-plugin-environment";import tsconfigPaths from "vite-tsconfig-paths";// https://vitejs.dev/config/export default defineConfig({ plugins: [ react(), tsconfigPaths(), ], resolve: { alias: {}, }, build : { outDir: "./build", }, server : { port: Number(process.env.PORT || 3000), }, define : {},});

2023
0
ReactReact Query

React Query - 캐싱 라이프 사이클

목차 React Query - 캐싱 라이프 사이클 React Query - React Devtools 사용하기 React Query - 시작하기 cache 와 stale 설정const queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: 1000 * 60, cacheTime: 1000 * 60 * 5, } },});const App = ({ Component, pageProps }: AppProps) => { return ( <QueryClientProvider client={queryClient}> <Component {...pageProps} /> </QueryClientProvider> );}; cacheReact Query 는 설정한 cacheTime 만큼 데이터를 메모리에 저장해 놓습니다. 다시 이야기 하자면 React Query 에서의 Cache 는 QueryCache 객체의 queries 배열과 queriesInMap 객체의 Query 객체가 존재하는 것을 말합니다. cache 라이프 사이클 - fresh 와 stalestale 은 React Query 에서 cache 에 저장된 데이터 상태를 의미합니다. cache 에 저장된 데이터가 staleTime 만큼은 fresh 한 상태로 있다가 그 후에는 stale 상태로 넘어갑니다. stale 상태의 데이터는 cache 에 오랫동안 저장돼 있어 refetch 가 필요한 상태임을 의미합니다. React Query 에서는 stale 상태의 데이터가 특정 조건을 만족하면 refetching 이 일어나도록 합니다.

0
ReactReact Query

React Query - React Devtools 사용하기

목차 React Query - 캐싱 라이프 사이클 React Query - React Devtools 사용하기 React Query - 시작하기 의존성 추가$ npm i @tanstack/react-query-devtools# or$ yarn add @tanstack/react-query-devtools ReactQueryDevtoolsimport React from 'react'import ReactDOM from 'react-dom/client'import App from './App.tsx'import { ReactQueryDevtools } from '@tanstack/react-query-devtools'import {QueryClient, QueryClientProvider } from '@tanstack/react-query'const queryClient = new QueryClient()ReactDOM.createRoot(document.getElementById('root')!).render( <React.StrictMode> <QueryClientProvider client={queryClient}> <App /> <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider> </React.StrictMode>,)

0
ReactReact Query

React Query - 시작하기

목차 React Query - 캐싱 라이프 사이클 React Query - React Devtools 사용하기 React Query - 시작하기 참고 공식문서 https://tanstack.com/query/v4/docs/react/quick-start 의존성 추가$ npm i @tanstack/react-query# or$ yarn add @tanstack/react-query Providerimport React from "react";import ReactDOM from "react-dom/client";import App from "./App.tsx";import { QueryClient, QueryClientProvider } from "@tanstack/react-query";const queryClient = new QueryClient();ReactDOM.createRoot(document.getElementById("root")!).render( <React.StrictMode> <QueryClientProvider client={queryClient}> <App /> </QueryClientProvider> </React.StrictMode>); useQuery

0
ReactRedux

React - React Router Dom 사용하기

목차 Redux Saga Redux Middleware 만들기 Redux 사용하기 - 계산기 만들기 Redux 사용하기 React Router Dom 추가하기# npm 사용npm install react-router-dom# yarn 사용yarn add react-router-dom

2022
0
ReactTypeScript

React - TypeScript 사용하기

참고 https://create-react-app.dev/docs/adding-typescript/ React TypeScript 사용하기create react app 명령어에 --template typescript 파라미터만 추가해주면 초기 구성이 타입스크립트로 설정되는 것을 확인할 수 있다. # npm 사용npx create-react-app my-app --template typescript# yarn 사용yarn create react-app my-app --template typescript

0
ReactRedux

Redux Saga

목차 Redux Saga Redux Middleware 만들기 Redux 사용하기 - 계산기 만들기 Redux 사용하기 Redux Saga 액션을 모니터링하고 있다가 특정 Action 이 발생하면 특정 작업을 진행한다. 비동기 작업을 진행할 때 기존 요청을 취소 할 수 있다. 특정 Action 이 발생했을 때 다른 액션을 디스패치 하거나 자바스크립트 코드를 실행할 수 있다. Generator 에 기반한 미들웨어 Generator 함수의 흐름을 특정 구간에 멈춰 놨다가 다시 실행 할 수 있다.return 값을 여러번 보낼 수 있다. import { delay, put, takeEvery, takeLatest } from "redux-saga/effects";const SET_DIFF = "counter/SET_DIFF";const INCREASE = "counter/INCREASE";const DECREASE = "counter/DECREASE";const INCREASE_ASYNC = "NCREASE_ASYNC";const DECREASE_ASYNC = "DECREASE_ASYNC";export const setDiff = (diff) => ({ type: SET_DIFF, diff });export const increase = () => ({ type: INCREASE });export const decrease = () => ({ type: DECREASE });export const increaseAsync = () => ({ type: INCREASE_ASYNC });export const decreaseAsync = () => ({ type: DECREASE_ASYNC });function* increaseSaga() { yield delay(1000); yield put(increase()); // put 은 dispatch 와 비슷한 개념}function* decreaseSaga() { yield delay(1000); yield put(decrease());}export function* counterSaga() { yield takeEvery(INCREASE_ASYNC, increaseSaga); yield takeLatest(DECREASE_ASYNC, decreaseSaga);}const initialState = { number: 0, diff: 1,};export default function counter(state = initialState, action) { switch (action.type) { case SET_DIFF: return { ...state, diff: action.diff, }; case INCREASE: return { ...state, number: state.number + state.diff, }; case DECREASE: return { ...state, number: state.number - state.diff, }; default: return state; }} import React from "react";import { useSelector, useDispatch } from "react-redux";import Counter from "./Counter";import { increase, decrease, setDiff, increaseAsync, decreaseAsync,} from "../modules/counter";const CounterContainer = () => { const { number, diff } = useSelector((state) => ({ number: state.counter.number, })); const dispatch = useDispatch(); // const onIncrease = () => dispatch(increase()); // const onDecrease = () => dispatch(decrease()); const onIncrease = () => dispatch(increaseAsync()); const onDecrease = () => dispatch(decreaseAsync()); const onSetDiff = (diff) => dispatch(setDiff(diff)); return ( <Counter number={number} diff={diff} onIncrease={onIncrease} onDecrease={onDecrease} onSetDiff={onSetDiff} /> );};export default CounterContainer;

0
ReactRedux

Redux Middleware 만들기

목차 Redux Saga Redux Middleware 만들기 Redux 사용하기 - 계산기 만들기 Redux 사용하기 Redux Middleware 만들기Middleware 생성Dispatch 되는 이력을 콘솔로 찍는 로거를 만든다. const myLogger = store => next => action => { console.log(action); const result = next(action); // 반환하는 result 는 Container 에서 Disaptch 됐을 때 결과 물이 result return result;}export default myLogger; Middleware 적용applyMiddleware 함수를 이용해 Redux 에 미들웨어를 적용한다. import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';import { createStore, applyMiddleware } from 'redux';import rootReducer from './modules';import { Provider } from 'react-redux';import myLogger from './middlewares/myLogger';const store = createStore(rootReducer, applyMiddleware(myLogger));ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root'));reportWebVitals();

2021
0
ReactRedux

Redux 사용하기 - 계산기 만들기

목차 Redux Saga Redux Middleware 만들기 Redux 사용하기 - 계산기 만들기 Redux 사용하기 라이브러리 설치 yarn add react-redux Action Type 정의/* 액션 타입 만들기 */// Ducks 패턴을 따를땐 액션의 이름에 접두사를 넣어주세요.// 이렇게 하면 다른 모듈과 액션 이름이 중복되는 것을 방지 할 수 있습니다.const SET_DIFF = "counter/SET_DIFF";const INCREASE = "counter/INCREASE";const DECREASE = "counter/DECREASE"; Action 생성 함수/* 액션 생성함수 만들기 */// 액션 생성함수를 만들고 export 키워드를 사용해서 내보내주세요.export const setDiff = (diff) => ({ type: SET_DIFF, diff });export const increase = () => ({ type: INCREASE });export const decrease = () => ({ type: DECREASE }); Reducer

0
ReactRedux

Redux 사용하기 - 계산기 만들기

목차 Redux Saga Redux Middleware 만들기 Redux 사용하기 - 계산기 만들기 Redux 사용하기 라이브러리 설치Action 정의하기export const INCREASE = "counter/INCREASE" as const;export const DECREASE = "counter/DECREASE" as const;interface increaseAction { type: typeof INCREASE;}interface decreaseAction { type: typeof DECREASE;}export type CounterType = increaseAction | decreaseAction; Action 생성 함수export const increase = (): increaseAction => ({ type: INCREASE,});export const decrease = (): decreaseAction => ({ type: DECREASE,}); Stateinterface CounterState { value: number;}const initialState: CounterState = { value: 0,};

0
ReactRedux

Redux 사용하기

목차 Redux Saga Redux Middleware 만들기 Redux 사용하기 - 계산기 만들기 Redux 사용하기 Redux 사용하기 하나의 애플리케이션 안에는 하나의 Store 가 존재 State 는 읽기 전용 불변성 을 지켜줘야 한다. 객체의 경우 Spread 연산자 를 사용해 기존 객체를 덮어써준다. 배열의 불변성을 지켜주는 내장함수를 사용해야 한다. 불변성을 지켜야만 Component 들이 제대로 Rerendering 된다. 변화를 일으키는 함수, Reducer 는 순수한 함수 여야 한다. Reducer 는 이전 상태 와 Action 객체 를 파라미터로 받는다. 이전 상태를 변경하지 않고 새로운 상태를 만들어 반환한다.(불변성 유지) 똑같은 파라미터로 호출된 리듀서는 언제나 똑같은 결과값을 반환해야 한다. Redux 모듈 설치yarn add react-redux Action 상태의 변화가 필요할 경우 Action 을 일으킨다.

0
ReactLogin

React 로그인 Modal 만들기 9 - Redux Saga 적용

React 로그인 Modal 만들기 9 - Redux Saga 적용 React 로그인 Modal 만들기 8 - Redux 사용하기 React 로그인 Modal 만들기 7 - JWT 적용하기 React 로그인 Modal 만들기 6 - Login 구현 React 로그인 Modal 만들기 5 - 회원 가입 Back end 구현 React 로그인 Modal 만들기 4 - 비동기 처리 React 로그인 Modal 만들기 3 - 회원 가입 React 로그인 Modal 만들기 2 - styled-component 사용하기 React 로그인 Modal 만들기 React 로그인 Modal 만들기 9 - Redux Saga 적용모듈 설치하기yarn add redux-saga Reducer 정의import { SIGNUP_FAILURE, SIGNUP_REQUEST, SIGNUP_SUCCESS } from "../type";const initialState = "";export const signupRequest = (form) => ({ type: SIGNUP_REQUEST, data: form,});const SignupReducer = (state = initialState, action) => { switch (action.type) { case SIGNUP_REQUEST: return { ...state, }; case SIGNUP_SUCCESS: return { ...state, }; case SIGNUP_FAILURE: return { ...state, }; default: return state; }};export default SignupReducer; import axios from "axios";import { LOGIN_FAILURE, LOGIN_REQUEST, LOGIN_SUCCESS } from "../type";const initialState = { token: localStorage.getItem("token"),};export const loginRequest = (loginData) => ({ type: LOGIN_REQUEST, data: loginData,});const LoginReducer = (state = initialState, action) => { switch (action.type) { case LOGIN_REQUEST: console.log("Log In Reqeust"); return { ...state, }; case LOGIN_SUCCESS: console.log("Log In Success"); return { ...state, token: localStorage.getItem("token"), }; case LOGIN_FAILURE: console.log("Log In Failure"); return { ...state, }; default: return state; }};export default LoginReducer; Root Reducer 생성import { combineReducers } from "redux";import LoginReducer from "./LoginReducer";import SignupReducer from "./SignupReducer";const createRootReducer = combineReducers({ LoginReducer, SignupReducer,});export default createRootReducer;

0
ReactLogin

React 로그인 Modal 만들기 8 - Redux 사용하기

React 로그인 Modal 만들기 9 - Redux Saga 적용 React 로그인 Modal 만들기 8 - Redux 사용하기 React 로그인 Modal 만들기 7 - JWT 적용하기 React 로그인 Modal 만들기 6 - Login 구현 React 로그인 Modal 만들기 5 - 회원 가입 Back end 구현 React 로그인 Modal 만들기 4 - 비동기 처리 React 로그인 Modal 만들기 3 - 회원 가입 React 로그인 Modal 만들기 2 - styled-component 사용하기 React 로그인 Modal 만들기 React 로그인 Modal 만들기 8 - Redux 사용하기모듈 설치하기yarn add reduxyarn add react-redux Action 정의export const LOGIN_REQUEST = "login/LOGIN_REQUEST"; Action 생성 함수 및 Reducer 생성하기import axios from 'axios';import { LOGIN_REQUEST } from "../type"const initialState = { token: localStorage.getItem('token'),};export const loginRequest = (loginData) => { const response = axios.post("/api/login", loginData) .then((response) => { localStorage.setItem("token", response.headers.authorization); console.log(localStorage.getItem("token")); return response.data; }) .catch((err) => { console.log(err); }); return { type: LOGIN_REQUEST, data: response };};const LoginReducer = (state = initialState, action) => { switch (action.type) { case LOGIN_REQUEST: return { ...state, token: localStorage.getItem('token'), }; default: return state; }}export default LoginReducer; Store 생성하기

0
ReactLogin

React 로그인 Modal 만들기 7 - JWT 적용하기

React 로그인 Modal 만들기 9 - Redux Saga 적용 React 로그인 Modal 만들기 8 - Redux 사용하기 React 로그인 Modal 만들기 7 - JWT 적용하기 React 로그인 Modal 만들기 6 - Login 구현 React 로그인 Modal 만들기 5 - 회원 가입 Back end 구현 React 로그인 Modal 만들기 4 - 비동기 처리 React 로그인 Modal 만들기 3 - 회원 가입 React 로그인 Modal 만들기 2 - styled-component 사용하기 React 로그인 Modal 만들기 React 로그인 Modal 만들기 7 - JWT 적용하기Properties에 JWT 설정 값 추가JWT 를 암호화 하기 위한 key 값, token의 유효시간을 정의하기 위한 값, 그리고 토큰을 Http Header에 저장하기 위핸 Header Key를 정의해준다. application.yml jwt: header: Authorization secret: c2lsdmVybmluZS10ZWNoLXNwcmluZy1ib290LWp3dC10dXRvcmlhbC1zZWNyZXQtc2lsdmVybmluZS10ZWNoLXNwcmluZy1ib290LWp3dC10dXRvcmlhbC1zZWNyZXQK token-validity-in-seconds: 86400000 JWT를 다루기 위한 JwtUtils 생성 JwtUtils에서는 createToken 메소드를 이용해 새로운 JWT를 만들고 validateToken 메소드를 이용해 전달 받은 JWT의 유효성을 검증하고 getAuthentication 메소드를 이용해 전달 받은 JWT로부터 Authentication 객체를 가져오도록 한다. Jwts.builder 를 이용해 JWT를 생성하고 Jwts.parser 를 이용해 JWT로부터 정보를 가져온다. Value 어노테이션을 이용해 Properties에 저장한 token을 암호화 하기 위한 Key값과 token 유효시간 정보를 가져온다.

0
ReactLogin

React 로그인 Modal 만들기 6 - Login 구현

React 로그인 Modal 만들기 9 - Redux Saga 적용 React 로그인 Modal 만들기 8 - Redux 사용하기 React 로그인 Modal 만들기 7 - JWT 적용하기 React 로그인 Modal 만들기 6 - Login 구현 React 로그인 Modal 만들기 5 - 회원 가입 Back end 구현 React 로그인 Modal 만들기 4 - 비동기 처리 React 로그인 Modal 만들기 3 - 회원 가입 React 로그인 Modal 만들기 2 - styled-component 사용하기 React 로그인 Modal 만들기 React 로그인 Modal 만들기 6 - Login 구현Json 인증 Filter 구현하기UsernamePasswordAuthenticationFilter 의 경우 Form Login을 위해 구현된 Filter라 Request Body로 요청이 들어오는 Login 요청을 적용하기는 어렵기에 JSON 을 이용해 Login을 진행할 수 있도록 JsonAuthenticationFilter 를 새로 만들어줄 필요가 있다. UsernamePasswordAuthenticationFilter 와 인증을 진행하는 과정은 비슷하므로 AbstractAuthenticationProcessingFilter 를 상속해 새로운 Filter를 생성해준다. JsonAuthenticationFilter.java public class JsonAuthenticationFilter extends AbstractAuthenticationProcessingFilter { private static final String LOGIN_PROCESSING_URL = "/api/login"; @Autowired private ObjectMapper objectMapper; public JsonAuthenticationFilter() { super(new AntPathRequestMatcher(LOGIN_PROCESSING_URL)); } @Override public Authentication attemptAuthentication(HttpServletRequest request, HttpServletResponse response) throws AuthenticationException, IOException, ServletException { if(!isApplicationJSON(request)){ throw new IllegalStateException("Content Type is not Application/json"); } LoginDto loginDto = objectMapper.readValue(request.getReader(), LoginDto.class); if(ObjectUtils.isEmpty(loginDto.getUsername()) || ObjectUtils.isEmpty(loginDto.getPassword())){ throw new IllegalArgumentException("Username or Password is empty"); } JsonAuthenticationToken jsonAuthenticationToken = new JsonAuthenticationToken(loginDto.getUsername(), loginDto.getPassword()); getAuthenticationManager().authenticate(jsonAuthenticationToken); return null; } private boolean isApplicationJSON(HttpServletRequest httpServletRequest){ if(httpServletRequest.getHeader("Content-type").equals(MediaType.APPLICATION_JSON_VALUE)){ return true; } return false; }} 새로운 Authentication Token 만들기 JsonAuthenticationFilter 에서 사용하기 위한 새로운 Authentication 생성