react-router-dom

프로젝트를 진행하며 404 Not Found와 같이 라우터에 매칭되지 않은 주소로 접속하는 경우 나타낼 페이지를 매칭하려 한다. react-router-dom의 Route의 path 속성에 *을 설정해주어 위에서 개발자가 매칭해둔 주소 이외의 주소로 접근할 때 미리 정해둔 컴포넌트로 라우팅해줄 수 있다. // App.tsximport HomePage from 'pages/HomePage';import NotFound from 'pages/NotFound';import React from 'react';import { Route, Routes } from 'react-router-dom';function App() { return ( {/* 올바르게 매칭된 주소 */} ..

이전에 로그인 API를 구현하고 이제는 컴포넌트들을 생성하여 API와 연결해줘 완성을 했다. 만드는 동안 발생했던 에러들과 내가 새로 알게된 것들과 함께 정리하는 시간을 갖아보려한다. 내가 공부한 로그인 방법의 API를 정리한 글에서 나와있듯이 데이터 입력 > 데이터 검토 > 유효성 검사(토큰확인) > 결과 와 같은 순서로 구성되어있으며, 위의 기능들을 하기 위한 장치들은 API에서 모두 만들어 놨으므로 이제는 이용하는 일만 남았다. 모듈에서는 액션, 액션생성함수, 리듀서, 초기State를 담아주고, 최상위 index에서는 store와 sagaMiddleware, localstorage를 관리해준다. 그리고 컨테이너에서 dispatch로 액션을 전달하여 State에 정보를 전달해준다. 데이터의 흐름은 페..