[Groupware] React : Route (라우팅 설정)
·
Project/Frontend
📝 개요라우팅은 사용자가 URL 을 이동할 떄 그에 맞는 화면 컴포넌트를 보여주는 구조를 의미한다. SPA(Single Page Application) 인 React 에서는 실제로 페이지를 새로고침하지 않고 URL 경로에 따라 필요한 컴포넌트만 렌더링하거나 교체하는 방식으로 동작한다. React 에서 라우팅을 구현하기 위해 사용하는 대표적인 라이브러리가 react-router-dom 이다. 이를 통해 페이지 이동, URL 파라미터 처리, 라우트 보호, 리다이렉트 같은 기능을 손쉽게 구현할 수 있다. 프로젝트에서는 로그인 상태 (accessToken) 를 기준으로 인증 여부를 판단하고 인증되지 않은 사용자는 /login 페이지로 이동되도록 한다. 모든 실제 화면은 / 루트 아래에서 와 을 통해 보여지..
[Groupware] React : axios (API 통신)
·
Project/Frontend
📝 개요Backend 서버와 Frontend 서버와의 HTTP 통신을 위해 axios 라이브러리를 사용한다. axios 를 사용하는 이유는 fetch() 와 비교했을 때 비교적 코드가 간결하고 직관적이기 때문이다. 또한, Interceptor 기능을 통해서 JWT 가 적용되어 있는 Backend 에서 매 요청 마다 헤더에 토큰을 적용하는데 효율적이기 때문이다.다음은 Groupware Frontend 서버에 적용되어 있는 axios 공통 설정에 대해서 설명한다.🚀 axios1️⃣ import 및 CustomAxiosRequestConfig type 설정import axios, { type AxiosRequestConfig } from 'axios';type CustomAxiosRequestConfig ..