{"id":26377480,"url":"https://github.com/saseungmin/recoil_todo","last_synced_at":"2025-03-17T03:27:25.055Z","repository":{"id":41525886,"uuid":"334877519","full_name":"saseungmin/Recoil_ToDo","owner":"saseungmin","description":"Todo📆  application created using Recoil and React ⚛️","archived":false,"fork":false,"pushed_at":"2024-03-26T14:58:13.000Z","size":129140,"stargazers_count":20,"open_issues_count":3,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-05-28T21:44:07.879Z","etag":null,"topics":["async","cypress","demo","github-page","jest","react","recoil","recoil-example","recoil-todo","recoiljs","tdd","test","todo","todolist"],"latest_commit_sha":null,"homepage":"https://saseungmin.github.io/Recoil_ToDo/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/saseungmin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2021-02-01T08:17:00.000Z","updated_at":"2024-04-04T02:44:49.000Z","dependencies_parsed_at":"2024-03-26T16:04:24.358Z","dependency_job_id":null,"html_url":"https://github.com/saseungmin/Recoil_ToDo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saseungmin%2FRecoil_ToDo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saseungmin%2FRecoil_ToDo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saseungmin%2FRecoil_ToDo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saseungmin%2FRecoil_ToDo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saseungmin","download_url":"https://codeload.github.com/saseungmin/Recoil_ToDo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243967302,"owners_count":20376214,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["async","cypress","demo","github-page","jest","react","recoil","recoil-example","recoil-todo","recoiljs","tdd","test","todo","todolist"],"created_at":"2025-03-17T03:27:24.458Z","updated_at":"2025-03-17T03:27:25.042Z","avatar_url":"https://github.com/saseungmin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 🦄 ToDo Application created using Recoil and React\n\n### WIP!! [TS기반으로 마이그레이션 중](https://github.com/saseungmin/Recoil_ToDo/issues/91)\n\n\u003ca href=\"https://github.com/saseungmin/Recoil_ToDo/actions/workflows/ci.yml\"\u003e\n  \u003cimg src=\"https://img.shields.io/github/actions/workflow/status/saseungmin/Recoil_ToDo/ci.yml?branch=main\u0026label=CI\u0026logo=GitHub\u0026style=flat-square\" /\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://github.com/saseungmin/Recoil_ToDo/actions/workflows/cd.yml\"\u003e\n  \u003cimg src=\"https://img.shields.io/github/actions/workflow/status/saseungmin/Recoil_ToDo/cd.yml?branch=main\u0026label=build\u0026logo=GitHub\u0026style=flat-square\" /\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://codecov.io/gh/saseungmin/Recoil_ToDo\"\u003e\n  \u003cimg src=\"https://codecov.io/gh/saseungmin/Recoil_ToDo/branch/main/graph/badge.svg?token=UAQ7YZZCA8\"/\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://dashboard.cypress.io/projects/o6z7cm/runs\"\u003e\n  \u003cimg src=\"https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/detailed/o6z7cm\u0026style=flat-square\u0026logo=cypress\" /\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://github.com/saseungmin/Recoil_ToDo/issues\"\u003e\n  \u003cimg src=\"https://img.shields.io/github/issues/saseungmin/Recoil_ToDo?style=flat-square\" /\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://github.com/saseungmin/Recoil_ToDo/blob/main/LICENSE\"\u003e \n  \u003cimg src=\"https://img.shields.io/github/license/saseungmin/Recoil_ToDo?style=flat-square\" /\u003e\n\u003c/a\u003e\n\n### 🚀 Demo URL\n- [Github Page](https://saseungmin.github.io/Recoil_ToDo/)\n- [Demo Image](#-demo)\n  - Theme (light, dark)\n  - Desktop, Mobile\n\n### 🎈 Introduce\n- 이 프로젝트는 React의 상태 관리 라이브러리인 **[Recoil](https://recoiljs.org/)를 배우기 위한** 목적으로 만들어졌습니다.\n- 그로 인해 간단하게 To-Do List를 만드는 것으로 목표로 잡고 시작하였으며, 더 나아가 Recoil을 사용했을때 어떻게 API 통신하는지 배우고 싶어서 백앤드도 같이 구현하였습니다.\n- Recoil 사용에 있어서 미숙한 점이 많아 공식 문서와 여러 커뮤니티 및 [Recoil Github Issue](https://github.com/facebookexperimental/Recoil/issues)를 참고하였습니다.\n- TDD 사이클을 완벽하게 지켰다고는 못하지만, 지키려고 노력하며 구현하였습니다.\n\n### 👉 Back-End Repository\n- https://github.com/saseungmin/Recoil_Todo_Backend\n\n### 🔥 기술 스택 및 사용 라이브러리\n- React\n- Recoil\n- Emotion\n- Axios\n- Lodash\n- universal-cookie\n- Jest, React-Testing-Library, Cypress\n- Webpack, Eslint, Babel\n\n### 🐶 Project Structure\n\n```\n📦 src\n ┣ 📂 assets\n ┃ ┣ 📂 css\n ┃ ┗ 📂 icons\n ┣ 📂 components\n ┃ ┣ 📂 auth\n ┃ ┣ 📂 common\n ┃ ┣ 📂 footer\n ┃ ┣ 📂 info-bar\n ┃ ┣ 📂 input\n ┃ ┣ 📂 todo\n ┃ ┗ 📂 user-info\n ┣ 📂 hooks\n ┣ 📂 recoil\n ┃ ┣ 📂 auth\n ┃ ┣ 📂 common\n ┃ ┣ 📂 todos\n ┃ ┗ 📂 user\n ┣ 📂 services\n ┃ ┣ 📂 api\n ┣ 📂 styles\n ┣ 📂 utils\n ┃ ┣ 📂 constants\n ┃ ┣ 📂 recoil\n ┣ 📜 App.jsx\n ┣ 📜 App.test.jsx\n ┗ 📜 index.jsx\n```\n\n\n### 🛠 Project Settings\n\n#### 📢 Install dependencies\n\n```bash\n\u003e yarn install\n```\n\n#### 📢 Start Dev Server\n\n```bash\n\u003e yarn start\n```\n\n#### 📢 Tests with Jest\n- test\n\n```bash\n\u003e yarn test\n```\n\n- test watch\n\n```bash\n\u003e yarn run test:watch\n```\n\n- Run test with Code Coverage\n\n```bash\n\u003e yarn run coverage\n```\n\n#### 📢 Build project\n\n```bash\n\u003e yarn run build\n```\n\n#### 📢 Check Lint\n\n```bash\n\u003e yarn run lint\n```\n\n#### 📢 Deploy to Github Pages\n- However, I used Github Actions for Continuous Delivery\n\n```bash\n\u003e yarn run deploy\n```\n\n### 🤔 추가적인 Issue 사항과 고민해볼점\n- [Recoil를 사용한 ToDo 리스트 만들기에 대한 구성 사항](https://github.com/saseungmin/Recoil_ToDo/issues/4)\n- [Recoil selector와 selectorFamily의 Cache로 인한 문제점](https://github.com/saseungmin/Recoil_ToDo/issues/57)\n- [JWT 토큰과 쿠키에 대한 해결 방안](https://github.com/saseungmin/Recoil_ToDo/issues/57)\n\n### 💻 Demo\n- Theme\n\n\u003cimg src=\"images/demo-light-mode.png\" width=\"400px\" height=\"420px\" \u003e\u0026nbsp;\u003cimg src=\"images/demo-dark-mode.png\" width=\"400px\" height=\"420px\" \u003e\n\n\n\n- Desktop\n\n![demo-desktop](images/demo-desktop.gif)\n\n- mobile\n\n\u003cimg src=\"images/demo-mobile.gif\" width=\"300px\" height=\"590px\" \u003e\n\n\n## 🐛 Bug reporting\n[Issues](https://github.com/saseungmin/Recoil_ToDo/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc)\n\n## 🔒 LICENSE\nThis Project is [MIT licensed](https://github.com/saseungmin/Recoil_ToDo/blob/main/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaseungmin%2Frecoil_todo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaseungmin%2Frecoil_todo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaseungmin%2Frecoil_todo/lists"}