| 서론안녕하세요, 팡일입니다. 이전 글에서는 React + Node.js 기반의 풀스택 모노레포 환경을 구축하는 과정을 정리했고,이번 글에서는 그 환경 위에서 실제로 데이터를 저장하고 조회할 수 있는 CRUD 기능을 구현해보겠습니다. 전체 데이터 흐름은 다음과 같습니다.React ↓Express API ↓Prisma ↓SQLite Database 간단한 Todo API를 만들어 React에서 데이터를 저장하고 조회해보겠습니다. | 1단계 : Prisma 설치1) Prisma ORMNode 서버에서 데이터베이스를 사용하기 위해 Prisma ORM을 사용합니다. Prisma는 TypeScript 환경에서 매우 사용하기 편한 ORM입니다.타입 자동 생성DB 마이그레이션 지원직관적인 API 2) 설치: ..

| 서론안녕하세요, 팡일입니다. 보통 웹 개발을 하면 프론트엔드 프로젝트와 백엔드 프로젝트를 각각 관리해왔었는데요? 혹시 모노레포라고 들어보셨나요? 모노레포란?: 두 개 이상의 프로젝트, 애플리케이션 또는 라이브러리 코드를 하나의 버전 관리 저장소(Repository)에서 통합하여 관리하는 개발 전략 프론트엔드와 백엔드를 각각 관리할 수도 있지만, 최근에는 모노레포(monorepo) 구조를 사용하는 경우가 많다는 점을 알고만 있었고, 실제로 세팅을 해본 경험은 없었습니다. 그러나, 드디어 환경 세팅에 성공하였고, 보다 쉽게 세팅하는 과정을 공유하고자 포스팅을 작성하게 되었습니다. 1) 모노레포의 장점본격적으로 시작하기에 앞서, 모노레포를 사용하면 다음과 같은 장점을 한 번 살펴보고 싶은데요?프론트엔드..

| 서론안녕하세요, 팡일입니다.프로젝트를 진행하면서 서버 데이터 호출 로직이 점점 복잡해져, API 모듈 구조를 정리하려고 했습니다. 그런데 구조를 손본 직후, 화면이 하얘지고 콘솔에는 courses.ts 404가 터졌습니다.“파일 하나만 만들면 되겠지” 하고 courses.ts를 추가했더니, 이번엔 TypeScript가 “내보낸 멤버가 없다”고 알려 줍니다. 한 문제를 막았더니 다른 문제가 생기는 상황, 실무에서 꽤 익숙한 패턴이죠.이번 글에서는 제가 겪었던 실제 케이스를 바탕으로 아래와 같은 내용을 정리해 보겠습니다. 동일한 폴더/파일 구조를 쓰는 분들께 바로 도움될 내용만 담았습니다.왜 Vite가 courses.ts를 찾아갔는지왜 TS가 export를 못 찾았는지구조를 어떻게 바꾸면 안전한지 ..

| 서론안녕하세요, 팡일입니다. 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 바로 위와 같은 경고였는데요? 이를 보면서 “새 탭으로 여는 것이 왜 문제가 되는 걸까?”라는 의문이 들고는 했습니다. 이에 대해 더 알아본 결과 해당 경고는 실제 보안 취약점을 예방하기 위해 반드시 필요한 안내였습니다. | 문제가 되는 코드앞에서 마주한 경고는 다음과..