배경팀원들과 진행하던 프로젝트에서 인증 방식을 AccessToken과 RefreshToken을 사용하는 JWT 토큰으로 채택하였다.로그인 시 AccessToken을 발급 받고 인증이 필요한 요청에서 AccessToken을 사용하는 방식이었다. 만약, AccessToken이 만료되면 RefreshToken을 통해 재발급 받는 요청을 서버에 보내게 되는데, Axios interceptor를 활용하여 재발급 로직을 처리하고 있다.하지만 불필요한 API 요청이 발생하여 서버에 부담이 생기는 현상이 발생하였다.이러한 현상이 발생하는 이유와 해결한 과정을 공유하고자 한다.문제 상황현재 발생하고 있는 문제는 아래의 과정을 거친다. 이 과정으로 인해, 불필요한 API 요청이 발생하여 서버에 부담이 발생하게 된다. 또한..

배경이번에 팀 프로젝트를 진행하면서 이메일 인증을 위한 페이지 제작 업무를 맡게 되었다. 지금까지 로그인/회원가입 기능은 많이 구현해봤지만, 이메일 인증을 구현하는 것은 처음이었다. 물론 input 태그와 button 태그 하나로 간단하게 구현할 수 있겠지만, 좀 더 사용자 입장에서 사용하기 편한 이메일 인증 폼을 만들고 싶었다. 이를 위해 네이버, 깃허브 등 잘 만들어진 이메일 인증 폼을 보면서 어떤 기능을 구현할 지 고민하게 되었다.기술 스택- React 18- React-Hook-Form- Tanstack-Query설계이메일 인증 폼을 구현하기 위해 페이지를 따로 제작하기로 하였고, 이메일 인증 페이지의 사용자 흐름은 아래와 같이 설계하였다.이메일 인증 동작 흐름신규 회원가입 시 회원가입 처리 후 ..

에러 발견React와 TypeScript를 활용하여 프로젝트를 진행하던 도중 프로젝트를 빌드하다가 다음과 같은 에러를 발견했다.setData라는 값이 선언되었으나 사용되지 않았다는 이유로 빌드에 실패하였다. 처음에는 그냥 setData만 삭제하면 실패하지 않겠구나 하고 setData를 제거하는 선에서 끝낼려고 했는데, 생각해보니 너무 억울했다. 고작 그런 이유로 에러를 발생시킨다는게 규칙이 너무 엄격한 것 같다고 생각했다. 그래서 이러한 규칙을 완화하기 위해 에러가 발생하는 이유를 찾아보았다.에러 원인빌드를 시도했을 때 에러가 발생하였으니 컴파일 과정에서 실패했을거라 예상하고 tsconfig.json 파일을 열어보았다. TypeScript 공식문서에서 tsconfig.json에 대해서 확인할 수 있다. ..

웹에서 특정 요소에서 이벤트가 발생하면 이벤트가 원하는 요소에 도달하기까지는 다음과 같은 과정을 거친다. 먼저 캡처링 단계에서는 최상위 window 객체에서 문서 트리를 따라 하위 요소로 이벤트가 전파된다. 그리고 타깃 단계에서 이벤트의 발생원을 식별한다. 버블링 단계는 이벤트가 발생원에서 상위 요소로 전파되는 단계다. 최종적으로 최상위 window 객체에 도달하면 이벤트 전파가 종료된다. 정리하자면, 이벤트 처리는 이벤트 발생원에서만 실행되는 것이 아니다.아래 예시 코드를 보면export default function App() { const handleParent = () => alert('부모 요소'); const handleCurrent = () => alert('현재 요소'); const ..

리액트로 프론트엔드 개발을 하다보면 웹 어플리케이션의 크기가 커지게 되는데, 그만큼 번들 크기가 커지고 초기 로딩 시간이 길어져 사용자 경험(UX)가 저해된다. 이런 상황에서 React의 Suspense와 동적 import를 활용하면 사용자에게 필요한 코드만 그때그때 가져와 초기 렌더링 비용을 감소시킬 수 있다. 이번 글에서는 내가 진행했던 프로젝트에서 Suspense와 동적 import를 활용하여 성능을 개선한 과정을 이야기하고자 한다. 성능 최적화 전 코드는 다음과 같다.import { createBrowserRouter, createRoutesFromElements, Route,} from 'react-router-dom';import Layout from './components/layout..

React로 진행하던 웹 프로젝트에서 외국인을 위해서 여러 언어를 지원하는 기능을 도입하자는 얘기가 나왔다. 서비스 주요 대상이 외국인이었기 때문에 한국어, 영어, 중국어, 일본어, 베트남어 등 많은 언어를 지원해야 한다. 그래서 리액트 프로젝트에 국제화 서비스를 도입하기 위해 react-i18next 라이브러리를 사용하기로 하였다. react-i18next 사용법react-i18next은 번역을 위한 JSON 파일을 언어별로 준비하고 useTranslation Hook에서 반환해서는 t 함수를 통해 key 값을 넘겨주면 value를 반환하는 방식으로 동작한다. 아래는 각각 한국어, 영어에 해당하는 JSON을 작성한 결과이다.한국어// locales/ko/common.json{ "Hello": "안녕하..

다른 폼 요소와 달리 파일 입력 박스는 앱에서 값을 설정하지 않는다(사용자가 지정한 값을 앱이 받을 뿐, 앱이 특정 파일을 지정할 수 없다). 따라서 파일 입력 박스는 항상 비제어 컴포넌트로 구현된다.다음은 선택한 파일 정보를 로그에 출력하는 예시다.export default function FormFile() { // 파일 입력창에 대한 참조 const file = useRef(null); // [보내기] 버튼 클릭 후 파일 정보 로그 출력 function show() { const fs = file.current.files; // 획득한 파일군을 순서대로 스캔 for (const f of fs) { console.log(`파일명: ${f.name}`); con..

Immer 라이브러리는 주로 객체를 업데이트 하는 용도로 사용된다. 리액트에서는 state 객체를 업데이트 할 때 불변성을 관리하는 용도로 사용될 수 있는데, 기본적으로 state 객체를 업데이트 할 때는 다음과 같은 방법을 사용한다.import { useState } from 'react';export default function StateForm() { const [form, setForm] = useState({ name: '홍길동', address: { do: '경기도', city: '성남', }, }); const handleForm = (e) => { const { name, value } = e.target; setForm({ ..

이번 글에서는 리액트에서 state를 업데이트하는 두 가지 방법에 대해서 소개한다.일단 첫 번째 방법이자 기본적인 state를 변경하는 방법은 아래와 같다.import { useState } from 'react';export default function Counter() { const [count, setCount] = useState(10); // 카운트 버튼을 클릭하면 count 값이 1 상승한다. const handleClick = () => { setCount(count + 1); setCount(count + 1); }; return ( 카운트 {count} );}handleClick 함수에서 setCount 함수를 2번 호출하고 있기 때문에 카운트 버튼을 클릭할 때마다..

className 속성에 대한 스타일 지정은 매우 간단하지만, ‘고정 스타일과 선택 스타일이 혼재된 경우’, ‘선택해야 할 스타일이 여러 개에 걸쳐 있는 경우’에는 {…} 표현식이 복잡해지기 쉽다는 문제가 있다.이러한 번거로움을 피하기 위해 classnames라는 라이브러리를 도입하는 것이 좋으며, classnames 라이브러리는 터미널에서 다음 명령어로 설치할 수 있다.npm install classnameshttps://github.com/JedWatson/classnamesimport React from 'react';import cn from 'classnames';export default function Button (props) { return ( 클릭 );}사용법..