{"id":31624975,"url":"https://github.com/sakamoto-jun/react-todo-practice","last_synced_at":"2026-04-28T21:35:01.520Z","repository":{"id":309592704,"uuid":"1034679645","full_name":"sakamoto-jun/react-todo-practice","owner":"sakamoto-jun","description":"연습 - ReduxToolkit / MobX / zustand / Jotai / React Query / React Table / Storybook / Cypress Test","archived":false,"fork":false,"pushed_at":"2025-09-08T13:49:03.000Z","size":1080,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-06T18:56:56.010Z","etag":null,"topics":["cypress","gsap","jotai","mobx","react-query","react-table","redux","storybook","zustand"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sakamoto-jun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-08T19:47:02.000Z","updated_at":"2025-09-08T13:49:06.000Z","dependencies_parsed_at":"2025-08-12T19:31:10.156Z","dependency_job_id":"677cca7d-fcb2-484d-98af-55accf4c1b60","html_url":"https://github.com/sakamoto-jun/react-todo-practice","commit_stats":null,"previous_names":["sakamoto-jun/react-todo-practice"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/sakamoto-jun/react-todo-practice","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakamoto-jun%2Freact-todo-practice","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakamoto-jun%2Freact-todo-practice/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakamoto-jun%2Freact-todo-practice/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakamoto-jun%2Freact-todo-practice/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sakamoto-jun","download_url":"https://codeload.github.com/sakamoto-jun/react-todo-practice/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakamoto-jun%2Freact-todo-practice/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32400868,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-28T19:38:08.556Z","status":"ssl_error","status_checked_at":"2026-04-28T19:37:55.688Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cypress","gsap","jotai","mobx","react-query","react-table","redux","storybook","zustand"],"created_at":"2025-10-06T18:54:30.130Z","updated_at":"2026-04-28T21:35:01.515Z","avatar_url":"https://github.com/sakamoto-jun.png","language":"TypeScript","readme":"# 📝 상태관리 학습 - Todo App\n\n이 프로젝트는 상태 관리 라이브러리 **Redux Toolkit**, **MobX**, **Zustand**, **Jotai**를 사용하여 Todo 애플리케이션을 구현하는 학습 프로젝트입니다.\n\n각 상태관리 도구의 특징과 사용법을 학습하는 데 중점을 두었으며, **TanStack Query**, **TanStack Table**, **Storybook**, **Cypress E2E Test**까지 통합해 실제 개발 환경에 가까운 구조를 학습.\n\n## 📌 프로젝트 개요\n\n- **목표**  \n  다양한 상태 관리 라이브러리와 도구를 실습하여, 상태 관리 패턴과 장단점을 비교 학습\n- **핵심 포인트**\n  - Redux Toolkit, MobX, Zustand, Jotai를 활용한 **전역 상태 관리**\n  - TanStack Query를 통한 **서버 상태 관리**\n  - TanStack Table을 이용한 **데이터 테이블 구성**\n  - Storybook을 통한 **컴포넌트 단위 개발 환경**\n  - Cypress를 활용한 **엔드투엔드(E2E) 테스트**\n\n## 🌿 브랜치 목록\n\n\u003e ✅ 각 브랜치별로 `README.md`에 해당 라이브러리의 특징과 간단한 예시를 작성하였습니다.\n\n- **`dev/feat/redux`**\n  - **Redux Toolkit** 기반 Todo App\n  - **TanStack Query**, **TanStack Table**\n  - **GSAP 애니메이션**\n  - **Storybook 통합**\n- **`dev/feat/mobx`**\n  - **MobX**를 사용한 Todo App 구현\n- **`dev/feat/zustand`**\n  - **Zustand**를 사용한 Todo App 구현\n- **`dev/feat/jotai`**\n  - **Jotai**를 사용한 Todo App 구현\n\n## 🏗️ 상태의 종류\n\n1. **로컬 상태 (Local State)**\n   - 개별 컴포넌트 내부에서만 관리되는 상태\n   - 컴포넌트가 언마운트되면 상태가 초기화됨\n   - **예시:** `useState`, `useReducer`\n2. **서버 상태 (Server State)**\n   - 서버에서 데이터를 가져와 클라이언트에서 캐싱 및 동기화\n   - 주로 **TanStack Query**를 활용\n   - **예시:** API 호출, `useQuery`, `useMutation`\n3. **전역 상태 (Global State)**\n   - 애플리케이션 전역에서 여러 컴포넌트가 공유하는 상태\n   - **예시:** Redux, MobX, Zustand, Jotai\n\n## 📚 Storybook 통합\n\nStorybook을 사용하여 **컴포넌트 단위 개발 환경**을 학습.\n\n### 설치 및 실행\n\n```pwsh\n# 설치\nnpm install -D storybook\n\n# 실행\nnpm run storybook\n```\n\n### 적용 예시\n\n- Checkbox, Dropdown, Radio, Textarea 등 **UI 컴포넌트별 스토리 작성**\n- `Meta\u003ctypeof Component\u003e` 및 `StoryObj\u003ctypeof meta\u003e`를 활용한 **타입 안전한 스토리 구성**\n- **Accessibility 검사** 및 **Storybook Test Runner** 활용\n\n## 🧪 Cypress E2E Test\n\nCypress를 사용하여 **엔드투엔드(E2E) 테스트**를 학습.\n\n### 테스트 목적\n\n- Todo 추가, 완료, 삭제 기능의 정상 동작 검증\n- Protected 페이지 접근 제어 확인\n\n### 실행 방법\n\n```pwsh\n# Cypress 실행\nnpx cypress open\n```\n\n### 예시 테스트 코드\n\n```ts\ndescribe(\"todo\", () =\u003e {\n  it(\"todo 아이템을 추가하고, 상태를 변경할 수 있다\", () =\u003e {\n    cy.visit(\"/\");\n\n    // 리스트 로딩 기다리기\n    cy.findAllByRole(\"checkbox\").should(\"have.length.gte\", 1);\n\n    // 아이템 추가\n    cy.findByRole(\"textbox\").as(\"todoInput\");\n    cy.get(\"@todoInput\").type(\"새로운 할 일\");\n    cy.findByRole(\"button\", { name: /추가/ }).click();\n    cy.get(\"@todoInput\").should(\"have.value\", \"\");\n\n    // 아이템 추가 확인\n    cy.findByText(\"새로운 할 일\").should(\"exist\").as(\"newTodo\");\n\n    // 아이템 상태 변경\n    cy.get(\"@newTodo\").click();\n    cy.findByLabelText(\"새로운 할 일\").should(\"be.checked\");\n  });\n});\n```\n\n## 🛠️ 사용 기술 스택\n\n| 분류            | 사용 기술                           |\n| --------------- | ----------------------------------- |\n| **프레임워크**  | React, TypeScript                   |\n| **상태 관리**   | Redux Toolkit, MobX, Zustand, Jotai |\n| **데이터 관리** | TanStack Query, TanStack Table      |\n| **UI 개발**     | Storybook, GSAP                     |\n| **테스트**      | Cypress E2E Testing                 |\n\n## 🔍 정리 포인트\n\n- 상태관리 라이브러리 **4종 비교 및 실습**\n- **TanStack Query** + **TanStack Table**로 서버 데이터 관리\n- **Storybook**을 통한 컴포넌트 단위 개발\n- **Cypress**로 기능 단위 **E2E 테스트** 자동화\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsakamoto-jun%2Freact-todo-practice","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsakamoto-jun%2Freact-todo-practice","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsakamoto-jun%2Freact-todo-practice/lists"}