React + Vite 환경에서 구현한 CRUD 프로젝트
1.[CRUD 실습 - React + Vite] 인트로
그동안 JavaScript와 TypeScript를 공부하면서 기본 개념부터 타입 시스템까지 차근차근 정리해 왔다. > (자바스크립트 스터디 시리즈 & 타입스크립트 스터디 시리즈 보러가기) 이제는 배운 내용을 실제로 사용해 보기 위해, 작은 프로젝트를 만들어 보려고 한다. 프로젝트에서는 데이터를 불러오고, 추가하고, 수정하고, 삭제하는 기본적인 CRUD...
2.[CRUD 실습 - React + Vite] 프로젝트 세팅부터 기획 & UI 제작
산출물 링크 GitHub 배포 페이지 Setting 먼저 프로젝트는 CODEX로 세팅했다. Vite + React TypeScript SCSS Prettier 절대경로 @ GitHub Page Build 프로젝트 폴더 구조 > 세팅 완료한 초기 상태는 feature/setting 브랜치에 올려두었다. 이 상태를 템플릿으로 삼아 다른 실습 프로...
3.[CRUD 실습 - React + Vite] GET (초기 데이터 불러오기)
산출물 링크 GitHub 배포 페이지 지난 게시물까지 기능·UI 설계를 진행하고 실제 UI 코드까지 제작했다. API 데이터를 받아와 화면에 출력하는 직전 단계까지 마무리한 상태다. 이번 글에서는 CRUD를 중심으로 api와 hooks 폴더에 기능을 구현해 나가겠다. GET (초기 데이터 불러오기) 먼저 초기 진입 시 API로부터 데이터를 받아...
4.[CRUD 실습 - React + Vite] POST (데이터 추가하기)
산출물 링크 GitHub 배포 페이지 지난 글에서는 미리 구성해 둔 UI에 API 데이터를 연동해서, 초기 화면 진입 시 데이터를 출력하고 loading / error 상태에 따라 다른 UI를 보여주는 단계까지 진행했다. 이번 글에서는 fetch의 POST 메서드를 활용해 새로운 데이터를 리스트에 추가하는 기능을 구현한다. 이 과정에서 사용할 ...
5.[CRUD 실습 - React + Vite] PATCH (데이터 수정하기)
산출물 링크 GitHub 배포 페이지 지난 글에서는 fetch의 POST 메서드를 활용해 새로운 데이터를 리스트에 추가하는 기능을 구현했다. 다음 단계는 수정하기(PATCH) 작업이다. 현재 프로젝트에서 수정 기능은 전체 데이터 수정하기와 개별 데이터 수정하기 두 가지로 나뉘어 있다. 코드 설계 전체 데이터 수정하기와 개별 데이터 수정하기 두...
6.[CRUD 실습 - React + Vite] DELETE (데이터 삭제하기)
산출물 링크 GitHub 배포 페이지 지난 글에서는 fetch의 PATCH 메서드를 활용해 유저들의 데이터를 수정하는 기능을 구현했다. 다음 단계는 삭제하기(DELETE)로, CRUD 중 마지막 작업이다. 삭제 기능도 수정하기와 마찬가지로 선택된 여러 유저를 한 번에 삭제하기와 개별 유저만 삭제하기 두 가지로 나눠져 있다. DELETE (데이...
7.[CRUD 실습 - React + Vite] 리팩토링 (1) - 문제 분석과 해결 전략
산출물 링크 GitHub 배포 페이지 지난 포스팅까지 DELETE 기능을 끝으로 기본적인 CRUD 구현을 모두 마쳤다. 이번 단계부터는 작성한 코드를 엔지니어링 관점에서 분석하고 개선하는 리팩토링 과정을 기록하고자 한다. 리팩토링 배경: 기존 코드의 3가지 문제점 본격적인 코드 수정에 앞서, 현재 프로젝트가 가진 구조적 한계와 성능 이슈를 분석...
8.[CRUD 실습 - React + Vite] 리팩토링 (2) - POST
Gitlog & Branch > 리펙토링 한 기록은 아래 링크 Branch에서 확인할 수 있다. feature/리펙토링 Branch > > 산출물 링크 GitHub 배포 페이지 지난 포스팅에서 나는 기존 코드의 문제점(God Object, 안티 패턴 등)을 분석했다. 이번 글에서는 그 첫 번째 실천으로 신규 유저 추가(UsersNewForm) ...
9.[CRUD 실습 - React + Vite] 리팩토링 (3) - PATCH
Gitlog & Branch > 리펙토링 한 기록은 아래 링크 Branch에서 확인할 수 있다. feature/리펙토링 Branch > > 산출물 링크 GitHub 배포 페이지 지난 포스팅에서 나는 기존 코드의 문제점(God Object, 안티 패턴 등)을 분석하여 POST 기능인 신규 유저 추가(UsersNewForm) 컴포넌트를 리팩토링했다...
10.[CRUD 실습 - React + Vite] 리팩토링 (4) - DELETE
Gitlog & Branch > 리펙토링 한 기록은 아래 링크 Branch에서 확인할 수 있다. feature/리펙토링 Branch > > 산출물 링크 GitHub 배포 페이지 지난 포스팅에서 UsersNewForm(생성)과 UsersItem(수정)을 리팩토링하며 상태의 위치(State Location)를 바로잡는 것이 얼마나 중요한지 깨달았다...
11.[CRUD 실습 - React + Vite] 리팩토링 (5) - React Hook Form
Gitlog & Branch > 리펙토링 한 기록은 아래 링크 Branch에서 확인할 수 있다. feature/리펙토링 Branch > > 산출물 링크 GitHub 배포 페이지 지난 포스팅에서는 로직이 거대했던 UsersProvider의 복잡한 삭제 로직을 Reducer로 격리하고, form과 onSubmit을 활용하여 코드를 리펙토링한 과정을...