0409 · 개발1월 28일
mockapi.io 사용법
| 서론 안녕하세요, 팡일입니다. 오늘은 목업데이터를 api로 제공해주는 서비스인 'mockapi.io'의 사용법에 대해서 공유해보려고 합니다. 현재 진행중인 사이드 프로젝트에서 백엔드 환경 연결이 이루어지지 않아, json-server를 사용해왔었…
웹개발 · 프론트엔드 · 개발
#웹개발
9월 0장 · 통산 515장
- 0400 · FE1월 19일[React] React Router 중첩 라우트에서 index 대신 Navigate를 선택한 이유| 서론 안녕하세요, 팡일입니다. React Router v6에서 중첩 라우트(nested routes)를 사용하다 보면 index 라우트를 자연스럽게 사용하게 됩니다. 저 역시 메시지 기능을 구현하면서 /message 아래에 여러 하위 페이지를 두…FE · 웹개발 · 프론트엔드
- 0399 · FE1월 18일[React] React + Vite + TS + Firebase Hosting + Github Action 구축하기| 서론 안녕하세요, 팡일입니다. 오늘은 React + Vite + TS 환경과 Firebase Hosting 그리고 Github Action을 구축하는 방법에 대해서 공유 드리려고 합니다. Vercel로 CI/CD를 구축하는 방법도 공유드린 적이 …FE · 웹개발 · 프론트엔드
- 0398 · FE1월 15일[React] TanStack Query(React Query) 활용하기 - useMutation으로 데이터 생성·수정·삭제 마스터하기| 서론 안녕하세요, 팡일입니다. 지난 포스팅에서는 useQuery와 캐시 생명주기를 중심으로, 서버 데이터를 ‘읽어오는(Read)’ 방식에 대해 깊이 있게 살펴보았습니다. 이번 포스팅에서는 그 데이터를 ‘변경하는(Change)’ 작업, 즉 생성(C…FE · 웹개발 · 프론트엔드
- 0397 · FE1월 15일[React] TanStack Query(React Query) 깊게 파고들기 : useQuery와 캐시 생명주기의 모든 것| 서론 안녕하세요, 팡일입니다! 이번 포스팅에서는 TanStack Query(이하 React Query)의 가장 핵심적인 훅인 useQuery를 깊이 있게 살펴보려고 합니다. 단순히 “데이터를 가져오는 방법”을 넘어서, React Query가 내부…FE · 웹개발 · 프론트엔드
- 0382 · FE12월 27일[React] 코드 스플리팅을 적용했을 뿐인데, 초기 로딩이 줄어들었습니다| 인트로 안녕하세요, 팡일입니다. 이전 포스팅에서는 프로젝트에서 이미지 로딩 구조를 개선하며 성능을 정량적으로 측정하고 검증한 과정을 정리해보았습니다. 이번에는 그 연장선상에서, 초기 로딩 성능에 직접적인 영향을 주는 코드 스플리팅(Code Spl…FE · 웹개발 · 프론트엔드
- 0381 · FE12월 27일[React] public 이미지에서 import 구조로 (이미지 최적화 개선기)| 인트로 안녕하세요, 팡일입니다. 프론트엔드 프로젝트에서 이미지를 사용하는 방식은 여러 가지가 있는데, 이번 프로젝트에서는 public 폴더에 이미지를 위치시키고 경로 문자열로 참조하는 방식을 사용하고 있었습니다. 기능 구현에는 문제가 없었지만, …FE · 웹개발 · 프론트엔드
- 0380 · FE12월 27일[React] target="_blank" ESLint 경고의 의미와 해결 방법 (react/jsx-no-target-blank)| 인트로 안녕하세요, 팡일입니다. 오늘은 프로젝트에서 외부 링크를 새 탭으로 열기 위해 사용한 target="_blank" 속성으로 인해 마주했던 경고에 대한 포스팅을 기록해보려고 합니다. Using target="_blank" without re…FE · 웹개발 · 프론트엔드
- 0283 · FE8월 28일[React] React에서 한글 입력(IME) 깨짐 문제 해결하기프론트엔드 개발을 하다 보면 예상치 못한 버그를 마주하게 된다. 이번 글에서는 React Input에서 한글 입력이 "서울"→ "ㅅㅓㅇㅜㄹ"처럼 분해되는 IME(Input Method Editor) 문제와 이를 어떻게 해결했는지에 대해 기록하고자 한…FE · 웹개발 · 프론트엔드
- 0280 · FE8월 22일[Next.js] Axios delete 요청에서 타입 오류 해결기React 프로젝트에서 Axios를 사용해 delete 요청을 보냈을 때, 다음과 같은 타입 오류가 발생했다. 개체 리터럴은 알려진 속성만 지정할 수 있으며 'AxiosXHRConfigBase<unknown>' 형식에 'data'가 없다. 분명히 p…FE · 웹개발 · 프론트엔드
- 0279 · FE8월 16일[Next.js] Next.js 15와 Tailwind CSS v4: 더 이상 tailwind.config.ts는 필요 없다들어가며 Next.js 15와 Tailwind CSS v4가 나오면서 가장 큰 변화 중 하나는 설정 방식이다. 이제는 더 이상 tailwind.config.ts 파일이 필수적이지 않고, CSS-first 접근 방식으로 globals.css에서 직접 …FE · CSS · 웹개발
- 0268 · BE8월 8일[Node.js] Prisma DB 모델링 완벽 가이드: 필드 속성, 관계 설정, 실무 팁까지시작하며 데이터베이스 설계는 프로젝트의 기초 체력을 결정하는 중요한 과정이다. 특히 Prisma를 ORM으로 사용하는 경우, 모델 선언 방식과 관계 설정 방법을 제대로 이해하면 유지보수성과 확장성을 모두 챙길 수 있다. 이번 글에서는 Prisma 모…웹개발 · orm · Prisma