rbgus2002 / studygroup

0 stars 0 forks source link

[FE] 상호작용 Lazy Update 개선 #226

Open Arkady1356 opened 3 weeks ago

Arkady1356 commented 3 weeks ago

🐌 Summary

AS-IS: lazy update widget 조작 후 화면 리프레시 할 때 lazy_update가 그대로 진행되어 뒤늦게 update 호출 TO-BE: lazy update widget 조작 후 화면 리프레시 할 때 update 즉시 호출

📝 To Do List

Arkady1356 commented 2 weeks ago

@rbgus2002 아래 내용을 참고해주세요

SUMMARY

lazy update가 app단이 아닌 server에서 이루어져야함

Trouble Shooting

lazy update 및 refresh, update 호출은 처음 설계와 기대한 대로 정상 작동
하지만 refresh시 아래의 과정을 거침

  1. 서버로 부터 Data 다시 받아오기
  2. 받아온 Data를 기반으로 화면 재구성
  3. 재구성시 체크박스에서 변화를 감지 -> check update 호출
  4. 화면엔 이전 내용이 표시되고, 서버엔 변화가 전송되는 문제 발생

따라서 앱 단에서 lazy update를 하는 것이 아닌 서버에서 lazy update하는 것이 바람직하다고 생각

// lazy_update_controller.dart
class LazyUpdateController<T> {
  final VoidCallback onUpdate;
  late T _lastState;
  late T _currentState;

  Timer? _timer;
  int _restTime = 0;

  LazyUpdateController({
    required T initState,
    required this.onUpdate,
  }) {
    _lastState = initState;
    _currentState = initState;
  }

  void lazyUpdate(T newState, int waitingTime) {
    _restTime = waitingTime;
    _currentState = newState;

    _timer ??= Timer.periodic(const Duration(seconds: 1), (timer) {
      // stop timer
      if (_restTime <= 0) {
        update();
      }
      else {
        --_restTime;
      }
    });
  }

  void update() {
    if (_lastState != _currentState) {
      _lastState = _currentState;
      onUpdate();
    }

    _reset();
  }

  /// reset timer
  void _reset() {
    if (_timer != null) {
      _timer!.cancel();
      _timer = null;
    }
  }
}
rbgus2002 commented 2 weeks ago

근데 Lazy Update가 나오게 된 경위가 무엇인가요? 코멘트에 적어준 설명과 코드만으로는 흐름이 잘 이해가지 않는데 좀 더 자세히 설명해주시면 답변드리겠습니다. 사용자가 버튼을 클릭한 시점부터 설명해주시면 이해하기 편할 거 같아요

추가적으로 이런 사항은 어디서 작업해야해 라기보다는 해당 이슈를 검토해보고 대화를 통해 결정해나가는 게 좋을 거 같습니다~ 어느 단에서 해야하는 작업인지도 논의가 필요한 사항이고 경우에 따라서 방식 자체를 바꿀 수 있는 부분이라서요 ㅎㅎ

Arkady1356 commented 2 weeks ago

아 뭐야 다쓰고 안올리고 있었어 ...


해당 feature는 이전(서버 종료 이전 시기)에 잠깐 논의되고 개발되었던 기능입니다. 그렇기 때문에 기능에 대해 별다른 설명을 붙이는 것을 깜박했네요 ㅋㅋㅋ...

[Lazy Update가 나오게 된 계기]

이러한 이유로 최종 조작으로 부터 일정 시간이 지난 이후 -> 최초의 상태와 비교하여 변화가 있을때에만
내용을 업데이트하고 알림을 발생하도록 하였었습니다...!!


별다른 논의 없이 Toss 한 부분은 죄송합니다 하하 ... 앞으로는 소통하는 방향으로 갈 수 있도록 하겠습니다 !!!

rbgus2002 commented 2 weeks ago

아하 계기는 잠깐 이야기를 했던 게 기억이 나네요.

https://github.com/rbgus2002/studygroup/issues/226#issuecomment-2176339321 위 댓글에서 설명해주신 걸로는 왜 서버 단에서 작업이 이루어져야하는지 잘 이해가 가지 않습니다.

lazy update 및 refresh, update 호출은 처음 설계와 기대한 대로 정상 작동 하지만 refresh시 아래의 과정을 거침

  1. 서버로 부터 Data 다시 받아오기
  2. 받아온 Data를 기반으로 화면 재구성
  3. 재구성시 체크박스에서 변화를 감지 -> check update 호출
  4. 화면엔 이전 내용이 표시되고, 서버엔 변화가 전송되는 문제 발생

이 흐름에 대해서 설명이 필요해요. 저 흐름 때문에 왜 서버에서 작업이 이루어져야 하는지도 함께 설명해주시면 좋을 거 같아요. 설명해주신 흐름에서 생략되어있는 부분이 꽤 많은 거 같아, 서버에서 작업하는 게 맞을지 잘 모르겠네용 부탁드립니다 ㅎㅎ

Arkady1356 commented 1 week ago

요즘 회사가 너무.. 바쁘네요...


  1. 사용자가 pull to refresh
  2. 서버로 부터 새로운 Data를 받음
  3. 받은 Data를 기준으로 화면을 재구성 함
  4. --
  5. 화면이 재구성되면 위젯이 업데이트 됨
  6. 위젯이 업데이트 될때 lazy-update 작동
  7. lazy-update 동작시 변경 사항이 서버에 전송됨
  8. --
  9. 서버에 데이터가 최신화 됨

결과적으로 1) 서버에 데이터가 업데이트된 후 로딩 및 화면 재구성이 되어야 하나 2) 화면 재구성 후 서버에 데이터가 업데이트 되는 상태입니다.


아... ㅋㅋㅋㅋ 다시 생각해보니 앱 단에서 처리하는게 맞네요... 서버에서 알 수 없는 상황 조건들이 있어서 (화면이 리프레쉬 되었을 때, 사용자가 화면 혹은 앱을 벗어 났을때) 이러한 부분을 고려하기 위해서는 앱에서 처리해주어야 할 것 같습니다.


(몰라도 되는 내용) 앱에서 해당 로직을 구현하기 위해서 다음의 로직이 필요합니다.

화면(route) widget에서 lazy-update를 하는 child widget들을 리스트로 관리하며 pull-to-refresh, dispose시에 해당 리스트의 widget들의 update를 호출시켜주도록

child widget 생성시... subscribe해주는 ... 그런 구조를 만들어야 겠네요... 생각보다 귀찮아져서.. 슬푸네요..


내용은 이해되셨길 바라며 ...!! 시간이 나는대로 구현하도록 하겠습니다...! (참고로 이번주는 또 교육받으러 와서 개발 못함 ㅋㅋ..)

rbgus2002 commented 5 days ago

아하 자세한 설명 감사합니다 ㅎㅎ 바쁜 거 이해합니다요! 그래도 짬짬히 소통하면서 사이드 프로젝트하니까 너무 좋네요


대충 이해가 된 거 같습니다 ~ lazy update가 나오게 된 게 잘못된 클릭으로 알림이 전송되는 것을 방지하기 위함인데, 혹시 알림 전송 기능과 과제 완료 체크 기능 2개를 API 분리하면 좀 더 간단해질까요? 혹시 원하시면 따로 분리해서 API 개발하겠습니다 ~

rbgus2002 commented 5 days ago

개인적으로 해당 Lazy Update 기능 개발이 오래 걸리고 복잡한 작업이라면 다시 이전처럼 잘못눌러도 알림이 전송되도록 원복시키고, 추후에 시간 여유가 있을 때 작업하면 좋을 거 같습니다! 지금은 새로고침 했을 때 체크 풀리는 게 별로여서요 ㅠ