#FE

| 서론 안녕하세요, 팡일입니다. 이전 글에서는 React + Node.js 기반의 풀스택 모노레포 환경을 구축하는 과정을 정리했고, 이번 글에서는 그 환경 위에서 실제로 데이터를 저장하고 조회할 수 있는 CRUD 기능을 구현해보겠습니다. 전체 데이…

| 서론 안녕하세요, 팡일입니다. 보통 웹 개발을 하면 프론트엔드 프로젝트와 백엔드 프로젝트를 각각 관리해왔었는데요? 혹시 모노레포라고 들어보셨나요? 모노레포란?: 두 개 이상의 프로젝트, 애플리케이션 또는 라이브러리 코드를 하나의 버전 관리 저장소…

| 서론 안녕하세요, 팡일입니다.프로젝트를 진행하면서 서버 데이터 호출 로직이 점점 복잡해져, API 모듈 구조를 정리하려고 했습니다. 그런데 구조를 손본 직후, 화면이 하얘지고 콘솔에는 courses.ts 404가 터졌습니다.“파일 하나만 만들면 …

| 서론 안녕하세요, 팡일입니다. React Router v6에서 중첩 라우트(nested routes)를 사용하다 보면 index 라우트를 자연스럽게 사용하게 됩니다. 저 역시 메시지 기능을 구현하면서 /message 아래에 여러 하위 페이지를 두…

| 서론 안녕하세요, 팡일입니다. 오늘은 React + Vite + TS 환경과 Firebase Hosting 그리고 Github Action을 구축하는 방법에 대해서 공유 드리려고 합니다. Vercel로 CI/CD를 구축하는 방법도 공유드린 적이 …

| 서론 안녕하세요, 팡일입니다. 지난 포스팅에서는 useQuery와 캐시 생명주기를 중심으로, 서버 데이터를 ‘읽어오는(Read)’ 방식에 대해 깊이 있게 살펴보았습니다. 이번 포스팅에서는 그 데이터를 ‘변경하는(Change)’ 작업, 즉 생성(C…

| 서론 안녕하세요, 팡일입니다! 이번 포스팅에서는 TanStack Query(이하 React Query)의 가장 핵심적인 훅인 useQuery를 깊이 있게 살펴보려고 합니다. 단순히 “데이터를 가져오는 방법”을 넘어서, React Query가 내부…

| 인트로 안녕하세요, 팡일입니다. 이전 포스팅에서는 프로젝트에서 이미지 로딩 구조를 개선하며 성능을 정량적으로 측정하고 검증한 과정을 정리해보았습니다. 이번에는 그 연장선상에서, 초기 로딩 성능에 직접적인 영향을 주는 코드 스플리팅(Code Spl…

| 인트로 안녕하세요, 팡일입니다. 프론트엔드 프로젝트에서 이미지를 사용하는 방식은 여러 가지가 있는데, 이번 프로젝트에서는 public 폴더에 이미지를 위치시키고 경로 문자열로 참조하는 방식을 사용하고 있었습니다. 기능 구현에는 문제가 없었지만, …

| 인트로 안녕하세요, 팡일입니다. 오늘은 프로젝트에서 외부 링크를 새 탭으로 열기 위해 사용한 target="_blank" 속성으로 인해 마주했던 경고에 대한 포스팅을 기록해보려고 합니다. Using target="_blank" without re…

프론트엔드 개발을 하다 보면 예상치 못한 버그를 마주하게 된다. 이번 글에서는 React Input에서 한글 입력이 "서울"→ "ㅅㅓㅇㅜㄹ"처럼 분해되는 IME(Input Method Editor) 문제와 이를 어떻게 해결했는지에 대해 기록하고자 한…

React 프로젝트에서 Axios를 사용해 delete 요청을 보냈을 때, 다음과 같은 타입 오류가 발생했다. 개체 리터럴은 알려진 속성만 지정할 수 있으며 'AxiosXHRConfigBase<unknown>' 형식에 'data'가 없다. 분명히 p…