Groo - 실시간 상태 업데이트 (State 클래스 만들기, vanilla.js)

최근에 다시 Groo에 신경 써서 열심히 코딩을 하고 있었다.

 

Groo는 DB를 따로 사용하지 않고 localstorage를 이용해서 데이터를 저장하고, 업데이트 하고 있다.

 

Groo의 메인 컨셉이 오늘 실천한 행동 버튼을 선택하고 물을 주면 나무가 자라나는 컨셉이다.

 

 

 

양동이 버튼을 누르면 tree 와 관련된 데이터가 변경된다.

 

tree 는 groo, watering, cnt 프로퍼티를 가지고 있다.

• groo: 현재 몇 그루의 나무를 키웠는지 저장
• watering: 현재 나무에 물을 얼마나 주었는지 저장
• cnt: 몇개의 행동을 실천했는지 저장

그리고 watering과 cnt를 계산하여 groo 프로퍼티를 성장하게 할 수 있도록 했다.

 

 

 

근데 여기서 문제가 발생했다!!!

 

양동이 버튼을 눌렀을 때 sidebar에 있는 "10번 물을 주셨네요"

 

이 문구가 실시간으로 변경 되어야 하는데,

 

지금 상태론 실시간으로 변경 될리가 없었고, 새로고침을 해야 변경 됐다.

 

 

 

그래서 해결방법을 고민하다가 상태를 가진 클래스를 만들고,

 

데이터가 변경될 때 마다 상태가 가지고 있던 함수들을 실행시키는 방식으로 

 

구조를 만들어 보기로 했다!

 

 

 

사실 이 방식은 이 전에 케이쉴드 주니어 프로젝트를 할 때에도 했던 방법인데,

 

내가 한 것이 아니기 때문에 정확한 동작 방식을 몰랐다.

 

이 참에 상태 변경에 대한 이해를 할 수 있는 기회이기도 해서

 

이 전 코드를 분석해서 내 프로젝트에 적용 시켰고,

 

상태가 변경 될 때마다 실시간으로 sidebar의 데이터가 변경된다!!!

 

 

 

다음 목표는 반응형 웹 완성이다.

 

지금 디자인은 좀 별로라서

 

디자인도 최대한 변경해 보려고 한다.

 

CSS에 자신이 없긴 하지만!!

 

열심히 해봐야지!

 

 

---

변경된 코드!!

https://github.com/hyesunie/Project-Groo/pull/16/commits/d4727c1fcfd7e5e25f1d8847f09b233d34f647ae

feat: add State class and feature realtime tree state modify in sidebar by hyesunie · Pull Request #16 · hyesunie/Project-Groo