<aside> <img src="/icons/exclamation-mark_yellow.svg" alt="/icons/exclamation-mark_yellow.svg" width="40px" /> 𝓘𝓷𝓯𝓸𝓻𝓶𝓪𝓽𝓲𝓸𝓷

</aside>

<aside> <img src="/icons/color-picker_purple.svg" alt="/icons/color-picker_purple.svg" width="40px" /> 𝓡𝓾𝓵𝓮

</aside>

<aside> <img src="/icons/gradebook_brown.svg" alt="/icons/gradebook_brown.svg" width="40px" /> Study

</aside>

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/bded516a-0a14-4c7a-9c48-91513ee3b494/a9b11660-757e-48d8-8a0c-87424f4670fa/pngwing.com.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/bded516a-0a14-4c7a-9c48-91513ee3b494/a9b11660-757e-48d8-8a0c-87424f4670fa/pngwing.com.png" width="40px" /> 𝓖𝓲𝓽𝓗𝓾𝓫

</aside>

<aside> <img src="/icons/log-in_red.svg" alt="/icons/log-in_red.svg" width="40px" /> 𝓢𝓸𝓵𝓾𝓽𝓲𝓸𝓷

</aside>

<aside> 📒 Daily

</aside>

<aside> <img src="/icons/book_pink.svg" alt="/icons/book_pink.svg" width="40px" /> 𝓜𝓮𝓮𝓽𝓲𝓷𝓰

</aside>

<aside> <img src="/icons/crayon_green.svg" alt="/icons/crayon_green.svg" width="40px" /> 𝓕𝓲𝓰𝓶𝓪

</aside>

리팩토링 작업 주문

아래의 각각 패키지들이 가지고 있는 역할과 쓰임새를 이해하고 → 조립 해서 리팩토링 작업에 적용 고려해볼 것 (feat: 안쓰는 패키지 없음)

typscript

ts-loader

ts-node

webpack

webpack-cli

webpack-dev-server

html-webpack-plugin

babel-loader (

@babel/core

@babel/preset-env

@babel/preset-react

react

react-dom

@types/node

@types/react