https://github.com/saseungmin/recoil_todo

Todo📆 application created using Recoil and React ⚛️
https://github.com/saseungmin/recoil_todo

async cypress demo github-page jest react recoil recoil-example recoil-todo recoiljs tdd test todo todolist

Last synced: about 2 months ago
JSON representation

Todo📆 application created using Recoil and React ⚛️

• Host: GitHub
• URL: https://github.com/saseungmin/recoil_todo
• Owner: saseungmin
• License: mit
• Created: 2021-02-01T08:17:00.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-03-26T14:58:13.000Z (about 1 year ago)
• Last Synced: 2024-05-28T21:44:07.879Z (12 months ago)
• Topics: async, cypress, demo, github-page, jest, react, recoil, recoil-example, recoil-todo, recoiljs, tdd, test, todo, todolist
• Language: TypeScript
• Homepage: https://saseungmin.github.io/Recoil_ToDo/
• Size: 123 MB
• Stars: 20
• Watchers: 2
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## 🦄 ToDo Application created using Recoil and React

### WIP!! [TS기반으로 마이그레이션 중](https://github.com/saseungmin/Recoil_ToDo/issues/91)



  





  





  





  





  



 

  



### 🚀 Demo URL

- [Github Page](https://saseungmin.github.io/Recoil_ToDo/)

- [Demo Image](#-demo)

  - Theme (light, dark)

  - Desktop, Mobile

### 🎈 Introduce

- 이 프로젝트는 React의 상태 관리 라이브러리인 **[Recoil](https://recoiljs.org/)를 배우기 위한** 목적으로 만들어졌습니다.

- 그로 인해 간단하게 To-Do List를 만드는 것으로 목표로 잡고 시작하였으며, 더 나아가 Recoil을 사용했을때 어떻게 API 통신하는지 배우고 싶어서 백앤드도 같이 구현하였습니다.

- Recoil 사용에 있어서 미숙한 점이 많아 공식 문서와 여러 커뮤니티 및 [Recoil Github Issue](https://github.com/facebookexperimental/Recoil/issues)를 참고하였습니다.

- TDD 사이클을 완벽하게 지켰다고는 못하지만, 지키려고 노력하며 구현하였습니다.

### 👉 Back-End Repository

- https://github.com/saseungmin/Recoil_Todo_Backend

### 🔥 기술 스택 및 사용 라이브러리

- React

- Recoil

- Emotion

- Axios

- Lodash

- universal-cookie

- Jest, React-Testing-Library, Cypress

- Webpack, Eslint, Babel

### 🐶 Project Structure

```

📦 src

 ┣ 📂 assets

 ┃ ┣ 📂 css

 ┃ ┗ 📂 icons

 ┣ 📂 components

 ┃ ┣ 📂 auth

 ┃ ┣ 📂 common

 ┃ ┣ 📂 footer

 ┃ ┣ 📂 info-bar

 ┃ ┣ 📂 input

 ┃ ┣ 📂 todo

 ┃ ┗ 📂 user-info

 ┣ 📂 hooks

 ┣ 📂 recoil

 ┃ ┣ 📂 auth

 ┃ ┣ 📂 common

 ┃ ┣ 📂 todos

 ┃ ┗ 📂 user

 ┣ 📂 services

 ┃ ┣ 📂 api

 ┣ 📂 styles

 ┣ 📂 utils

 ┃ ┣ 📂 constants

 ┃ ┣ 📂 recoil

 ┣ 📜 App.jsx

 ┣ 📜 App.test.jsx

 ┗ 📜 index.jsx

```

### 🛠 Project Settings

#### 📢 Install dependencies

```bash

> yarn install

```

#### 📢 Start Dev Server

```bash

> yarn start

```

#### 📢 Tests with Jest

- test

```bash

> yarn test

```

- test watch

```bash

> yarn run test:watch

```

- Run test with Code Coverage

```bash

> yarn run coverage

```

#### 📢 Build project

```bash

> yarn run build

```

#### 📢 Check Lint

```bash

> yarn run lint

```

#### 📢 Deploy to Github Pages

- However, I used Github Actions for Continuous Delivery

```bash

> yarn run deploy

```

### 🤔 추가적인 Issue 사항과 고민해볼점

- [Recoil를 사용한 ToDo 리스트 만들기에 대한 구성 사항](https://github.com/saseungmin/Recoil_ToDo/issues/4)

- [Recoil selector와 selectorFamily의 Cache로 인한 문제점](https://github.com/saseungmin/Recoil_ToDo/issues/57)

- [JWT 토큰과 쿠키에 대한 해결 방안](https://github.com/saseungmin/Recoil_ToDo/issues/57)

### 💻 Demo

- Theme

 

- Desktop

![demo-desktop](images/demo-desktop.gif)

- mobile



## 🐛 Bug reporting

[Issues](https://github.com/saseungmin/Recoil_ToDo/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc)

## 🔒 LICENSE

This Project is [MIT licensed](https://github.com/saseungmin/Recoil_ToDo/blob/main/LICENSE).