| 서론안녕하세요, 팡일입니다. React Router v6에서 중첩 라우트(nested routes)를 사용하다 보면 index 라우트를 자연스럽게 사용하게 됩니다. 저 역시 메시지 기능을 구현하면서 /message 아래에 여러 하위 페이지를 두는 구조를 만들게 되었는데요? 구조는 다음과 같았습니다./message/message/send/message/history/message/template의도는 단순했습니다. /message로 접근했을 때, 가장 기본적인 화면인 ‘문자 보내기’ 페이지를 보여주고 싶었습니다. 그래서 처음에는 index 라우트를 사용해 구현했지만, 포스팅 제목처럼 URL이 그대로인 점으로 인해서 애매한 상황에 놓여 있었습니다. 오늘은 현재 겪은 상황을 공유하고, 어떤 식으로 해결했는..

| 서론안녕하세요, 팡일입니다. 오늘은 React + Vite + TS 환경과 Firebase Hosting 그리고 Github Action을 구축하는 방법에 대해서 공유 드리려고 합니다. Vercel로 CI/CD를 구축하는 방법도 공유드린 적이 있는데요? Vercel의 경우에는 아래의 포스팅을 참고해주셔도 좋을 것 같습니다. [React] React 프로젝트에 Vercel + GitHub Actions로 CI/CD 구축하기시작하며 "린트, 테스트, 배포까지 자동화: CI/CD 개념부터 구성까지"오프닝 프론트엔드 개발을 하면서 코드 품질을 유지하고, 안정적으로 배포하는 방법에 대한 고민이 늘 있었다. 그러던 중 CI/CDpangil-log.tistory.com 이 과정은 크게 어렵지 않습니다! 간단하게 ..

| 서론안녕하세요, 팡일입니다. 지난 포스팅에서는 useQuery와 캐시 생명주기를 중심으로, 서버 데이터를 ‘읽어오는(Read)’ 방식에 대해 깊이 있게 살펴보았습니다. 이번 포스팅에서는 그 데이터를 ‘변경하는(Change)’ 작업, 즉 생성(Create), 수정(Update), 삭제(Delete)를 담당하는 useMutation 훅에 대해 알아보겠습니다. | 들어가며: 데이터 변경의 어려움과 useMutation서버 데이터를 변경하는 작업은 단순히 API를 한 번 호출하는 것으로 끝나지 않습니다. 실제 서비스에서는 다음과 같은 여러 상황을 함께 고려해야 합니다.요청이 진행 중일 때 사용자에게 로딩 상태 표시 (예: 스피너 노출, 버튼 비활성화)요청이 성공했을 때 사용자에게 적절한 피드백 제공성공 ..

| 서론안녕하세요, 팡일입니다!이번 포스팅에서는 TanStack Query(이하 React Query)의 가장 핵심적인 훅인 useQuery를 깊이 있게 살펴보려고 합니다. 단순히 “데이터를 가져오는 방법”을 넘어서, React Query가 내부적으로 데이터를 어떻게 관리하는지, 그리고 우리가 어떤 옵션들을 통해 그 동작을 제어하고 애플리케이션을 최적화할 수 있는지를 실제 코드와 함께 차근차근 정리해보겠습니다. | 들어가며: React Query는 단순한 데이터 페처가 아니다많은 React 개발자들이 서버 데이터를 가져오기 위해 useEffect와 useState를 조합한 패턴을 사용해본 경험이 있을 것입니다. 하지만 이 방식에는 늘 같은 문제가 따라옵니다.로딩 상태 관리에러 상태 처리불필요한 API..

| 인트로안녕하세요, 팡일입니다. 이전 포스팅에서는 프로젝트에서 이미지 로딩 구조를 개선하며 성능을 정량적으로 측정하고 검증한 과정을 정리해보았습니다. 이번에는 그 연장선상에서, 초기 로딩 성능에 직접적인 영향을 주는 코드 스플리팅(Code Splitting)을 실제 프로젝트에 적용하고, “번들 크기가 줄어들면, 사용자는 무엇을 체감하게 되는가?”를 직접 확인해본 과정을 공유해보려고 합니다. 단순히 “코드 스플리팅을 적용했다”가 아니라, 왜 필요했는지 → 어떻게 적용했는지 → 실제로 무엇이 달라졌는지 를 중심으로 정리해보았습니다. | 왜 개선하게 되었는지기존 프로젝트는 React Router 기반의 SPA 구조로, 다음과 같은 특징을 가지고 있었습니다.Home, About, Worship, Cont..

| 인트로안녕하세요, 팡일입니다. 프론트엔드 프로젝트에서 이미지를 사용하는 방식은 여러 가지가 있는데, 이번 프로젝트에서는 public 폴더에 이미지를 위치시키고 경로 문자열로 참조하는 방식을 사용하고 있었습니다. 기능 구현에는 문제가 없었지만, 실제 서비스 관점에서 바라보았을 때 이미지 로딩 속도와 초기 렌더링 성능에 대한 개선이 필요하다는 판단이 들었고, 이를 계기로 이미지 처리 방식을 다시 점검하게 되었습니다. 그래서 이번 글에서는 단순히 “이미지 용량을 줄였다”는 수준을 넘어, 이미지를 다루는 구조 자체를 개선하기 위해 public 이미지 구조에서 import 기반 구조로 전환한 과정과 그에 따른 정량적인 성능 개선 결과를 함께 정리해보려고 합니다. | 문제 인식: 이미지가 느린 것 같았지만..

| 인트로 안녕하세요, 팡일입니다. 오늘은 프로젝트에서 외부 링크를 새 탭으로 열기 위해 사용한 target="_blank" 속성으로 인해 마주했던 경고에 대한 포스팅을 기록해보려고 합니다.Using target="_blank" without rel="noreferrer" (which implies rel="noopener")is a security risk in older browsersreact/jsx-no-target-blank 바로 위와 같은 경고였는데요? 이를 보면서 “새 탭으로 여는 것이 왜 문제가 되는 걸까?”라는 의문이 들고는 했습니다. 이에 대해 더 알아본 결과 해당 경고는 실제 보안 취약점을 예방하기 위해 반드시 필요한 안내였습니다. | 문제가 되는 코드앞에서 마주한 경고는 다음과..

프론트엔드 개발을 하다 보면 예상치 못한 버그를 마주하게 된다. 이번 글에서는 React Input에서 한글 입력이 "서울"→ "ㅅㅓㅇㅜㄹ"처럼 분해되는 IME(Input Method Editor) 문제와 이를 어떻게 해결했는지에 대해 기록하고자 한다. 문제 상황 React에서 value와 onChange를 사용하는 제어 컴포넌트(Controlled Component) 패턴은 흔히 쓰이는 방식이었다. 하지만 아래처럼 작성했을 때 한글 입력에서 문제가 발생했다.// 기존 코드 (문제 발생) setQuizAnswer(e.target.value)} // 매번 리렌더링/> 이 코드에서 발생한 문제는 다음과 같았다.제어 컴포넌트React가 입력값을 완전히 제어하고 있었다.즉시 상태 업데이트onChange가 ..

React 프로젝트에서 Axios를 사용해 delete 요청을 보냈을 때, 다음과 같은 타입 오류가 발생했다.개체 리터럴은 알려진 속성만 지정할 수 있으며 'AxiosXHRConfigBase' 형식에 'data'가 없다. 분명히 post, put 요청에서는 data를 넣어도 문제가 없었는데, delete에서만 타입 오류가 났다. 문제 원인 Axios의 delete 메서드 시그니처는 내부적으로 AxiosRequestConfig를 기대하고 있었는데, TS 버전 및 Axios 타입 정의 문제로 인해 delete의 두 번째 인자가 data를 허용하지 않는 형태로 되어 있었다. 즉, delete에서 data를 직접 넣으면 타입 정의 상 충돌이 발생하는 상황이었다. 해결 과정 처음에는 단순히 delete..

들어가며 Next.js 15와 Tailwind CSS v4가 나오면서 가장 큰 변화 중 하나는 설정 방식이다. 이제는 더 이상 tailwind.config.ts 파일이 필수적이지 않고, CSS-first 접근 방식으로 globals.css에서 직접 테마를 정의할 수 있다. 즉, 테마와 디자인 토큰을 **CSS 변수(@theme)**로 선언하고, Tailwind가 이를 기반으로 유틸리티 클래스를 자동으로 생성한다. 기존(v3)과 새로운(v4) 방식 비교 1) v3 (기존 방식)// tailwind.config.tsexport default { theme: { extend: { colors: { brand: '#7adaa5', }, spacing: { ..