๐ฆ ToDo Application created using Recoil and React
๐ Demo URL
๐ Introduce
- ์ด ํ๋ก์ ํธ๋ React์ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ Recoil๋ฅผ ๋ฐฐ์ฐ๊ธฐ ์ํ ๋ชฉ์ ์ผ๋ก ๋ง๋ค์ด์ก์ต๋๋ค.
- ๊ทธ๋ก ์ธํด ๊ฐ๋จํ๊ฒ To-Do List๋ฅผ ๋ง๋๋ ๊ฒ์ผ๋ก ๋ชฉํ๋ก ์ก๊ณ ์์ํ์์ผ๋ฉฐ, ๋ ๋์๊ฐ Recoil์ ์ฌ์ฉํ์๋ ์ด๋ป๊ฒ API ํต์ ํ๋์ง ๋ฐฐ์ฐ๊ณ ์ถ์ด์ ๋ฐฑ์ค๋๋ ๊ฐ์ด ๊ตฌํํ์์ต๋๋ค.
- Recoil ์ฌ์ฉ์ ์์ด์ ๋ฏธ์ํ ์ ์ด ๋ง์ ๊ณต์ ๋ฌธ์์ ์ฌ๋ฌ ์ปค๋ฎค๋ํฐ ๋ฐ Recoil Github Issue๋ฅผ ์ฐธ๊ณ ํ์์ต๋๋ค.
- TDD ์ฌ์ดํด์ ์๋ฒฝํ๊ฒ ์ง์ผฐ๋ค๊ณ ๋ ๋ชปํ์ง๋ง, ์งํค๋ ค๊ณ ๋
ธ๋ ฅํ๋ฉฐ ๊ตฌํํ์์ต๋๋ค.
๐ Back-End Repository
๐ฅ ๊ธฐ์ ์คํ ๋ฐ ์ฌ์ฉ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
- 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
> yarn install
๐ข Start Dev Server
> yarn start
๐ข Tests with Jest
> yarn test
> yarn run test:watch
- Run test with Code Coverage
> yarn run coverage
๐ข Build project
> yarn run build
๐ข Check Lint
> yarn run lint
๐ข Deploy to Github Pages
- However, I used Github Actions for Continuous Delivery
> yarn run deploy
๐ค ์ถ๊ฐ์ ์ธ Issue ์ฌํญ๊ณผ ๊ณ ๋ฏผํด๋ณผ์
๐ป Demo
![](https://github.com/saseungmin/Recoil_ToDo/raw/main/images/demo-dark-mode.png)
![demo-desktop](https://github.com/saseungmin/Recoil_ToDo/raw/main/images/demo-desktop.gif)
๐ Bug reporting
Issues
๐ LICENSE
This Project is MIT licensed.