[🧑‍💻] Keymory 개발 일지 #7: FleatherViewer 이슈 해결, HomeFeedPage Unexpected null value 이슈 해결

✨ GPT의 요약 　

FleatherViewer의 업데이트 문제를 해결하고, HomeFeedPage의 필터링 방식 개선을 통해 이슈 해결 및 성능 최적화 완료. 덕분에 Query 필터 대신 Conditional Visibility를 활용하는 것이 효과적임을 배웠음.

💻 개발 일지

⏰ 오늘 할 일

• ✅ (이슈) HomeFeedPage - FeedCardDiary: ListView에서 날짜를 변경해도, 오직 FleatherViewerWidget만 값이 변하지 않음.
  • 아마 Widget의 initialDeltaJson 값이 Diary Document 변경 시마다 업데이트되지 않는 것 같음.

  • o1에게 물어보자마자 한 방에 해결.

    /// didUpdateWidget:
    ///  - 동일 위젯 트리에서 단순히 파라미터만 바뀐 경우, Flutter가 기존 State를 재사용.
    ///  - 이때 새 widget 속성과 기존 widget 속성을 비교하여 필요한 로직을 수행할 수 있음.
    @override
    void didUpdateWidget(covariant FleatherViewerWidget oldWidget) {
      super.didUpdateWidget(oldWidget);
    
      // 1) 이전 JSON과 새로운 JSON이 다르면
      if (oldWidget.initialDeltaJson != widget.initialDeltaJson) {
        // 2) FleatherController를 새로 생성
        _controller?.dispose();
        _controller = _createControllerFromDeltaJson(widget.initialDeltaJson);
        // 3) UI 갱신
        setState(() {});
      }
    }
    
    /// Delta JSON 문자열을 FleatherController로 만드는 헬퍼 함수
    FleatherController _createControllerFromDeltaJson(String jsonString) {
      ParchmentDocument doc;
      try {
        final decoded = jsonDecode(jsonString);
        doc = ParchmentDocument.fromJson(decoded);
      } catch (e) {
        // 복원 실패 시, 일반 텍스트 처리
        doc = ParchmentDocument.fromDelta(
          Delta()..insert(_ensureEndsWithNewline(jsonString)),
        );
      }
      return FleatherController(document: doc);
    }
    

• ✅ (이슈) HomeFeedPage: On page load시 Unexpected Null Value 잠깐 떴다 사라짐.
  • HomeFeedPage의 Listview에 걸린 날짜 필터링이 문제인 것으로 확인.
  • ‘ListView’의 ‘Backend Query’ 옵션에서 Filter On Null Values를 켜봤음.
    • Filter On Null Values: By default, if the value of any filter is null, the query will ignore the filter for that field. Checking this will instead keep null filters.
  • Backend Query - Query Collection 수정 시도 1 (실패)
    • Filter On Null Values: ON
    • Filter 1: created_time, Equal To, getFirstTimeOfTheDay
    • Filter 2: created_time, Less Than, getFirstTimeOfNextDay
    • Order by: created_time, Decreasing
    • Backend Query 설정 완료 불가
      • 에러 메시지: You can’t order your query by a field used in a filter using == or in.
  • Backend Query - Query Collection 수정 시도 2 (실패)
    • Filter On Null Values: ON
    • Filter 1: created_time, Greater Than or Equal To, getFirstTimeOfTheDay
    • Filter 2: created_time, Less Than, getFirstTimeOfNextDay
    • Order by: created_time, Decreasing
    • Backend Query 설정 완료 가능

    • 디버깅 모드 진입 시 아래의 에러가 뜨고 페이지가 생성 안 됨.

      Assertion failed: file:/// opt/ - pub-cache/hosted/pub.dev/ cloud_firestore-5.5.0/lib/src/ query dart: 650:9
            
      conditions
      .where ((List<dynamic> item) => equality.equals(condition, item))
        .isEmpty
      "Condition [FieldPath([created_time]), !=, null] already exists in this query."
            
      The relevant error-causing widget was: HomeFeedWidget
      

  • Backend Query - Query Collection 수정 시도 3 (실패)
    • Filter On Null Values: ON
    • Filter 1: created_time, Greater Than, getLastTimeOfPrevDay
    • Filter 2: created_time, Less Than, getFirstTimeOfNextDay
    • Order by: created_time, Decreasing
    • Backend Query 설정 완료 가능

    • 디버깅 모드 진입 시 아래의 에러가 뜨고 페이지가 생성 안 됨.

      Assertion failed: file:/// opt/ - pub-cache/hosted/pub.dev/ cloud_firestore-5.5.0/lib/src/ query dart: 650:9
            
      conditions
      .where ((List<dynamic> item) => equality.equals(condition, item))
        .isEmpty
      "Condition [FieldPath([created_time]), !=, null] already exists in this query."
            
      The relevant error-causing widget was: HomeFeedWidget
      

  • Backend Query - Query Collection 수정 시도 4 (실패)
    • Filter On Null Values: OFF
    • Filter 1: created_time, Greater Than, getLastTimeOfPrevDay
    • Filter 2: created_time, Less Than, getFirstTimeOfNextDay
    • Order by: created_time, Decreasing
    • Backend Query 설정 완료 가능

    • 디버깅 모드 진입 시 아래의 에러가 잠깐 떴다 사라짐.

      Unexpected Null value.
      
      The relevant error-causing widget was: HomeFeedWidget
      

  • (o1 에게 질문) 왜 Unexpected Null Value가 잠깐 뜨는 걸까?
    • FlutterFlow(혹은 내부 코드)에서 페이지 초기 로딩 시점에 getLastTimeOfPrevDay()나 getFirstTimeOfNextDay() 등이 null을 반환하고 있을 가능성이 커. (예: date가 아직 초기화가 안 됐다든지…)
    • Filter On Null Values가 켜져 있으면, 내부적으로 != null 같은 조건을 따로 추가하게 되는데, 이게 로딩 순간에 null 값이 들어가면서 충돌이 날 수 있어.
    • 그래서 “잠깐 null 에러 띄우고 -> 실제 값으로 대체된 뒤 -> 로딩이 끝나면 사라지는” 현상이 발생하는 거지.
  • Backend Query - Query Collection 수정 시도 5 (성공!)
    • Filter On Null Values: OFF
    • Order by: created_time, Decreasing
    • Component Widget Conditional Visibility 설정
      • Filter 1: created_time, Greater Than, getLastTimeOfPrevDay
      • Filter 2: created_time, Less Than, getFirstTimeOfNextDay
    • 게다가 덤으로, ListView 로딩 렉(Latency)이 사라졌음. Query에 Filter 2개와 Order를 동시에 줬기에 많은 시간이 소요된 것 같음.
  • 💡 배운 점
    • Backend Query 사용할 때는 필터 사용을 최대한 배제하고, Conditional Visibility로 컨트롤 하는 게 좋다.
    • 이거 초반에 멘토님께 여쭤봐서 답변 받았던 건인데, 머리로만 대충 이해하고 넘어가서 결국 잊어버렸던 것 같다. 직접 고생해보고나니까 이제서야 확실히 깨닫게 되었음.
• ✅ (이슈) DiaryPage: 날짜가 오늘로만 저장됨
  • DiaryPage - dateFocused 파라미터 생성
  • HomeFeedPage의 dateToShow값을 dateFocused 파라미터로 전달.

💯 한 일에 대한 요약

FleatherViewer 업데이트 문제 해결

• didUpdateWidget을 활용해 FleatherViewer가 Diary Document 변경 시마다 정상적으로 업데이트되도록 수정. HomeFeedPage 필터 최적화

Backend Query의 필터링 방식 대신 Conditional Visibility를 활용해 성능 개선.

• Query 필터링을 최소화함으로써 로딩 속도 향상.

DiaryPage 날짜 저장 오류 수정

• HomeFeedPage에서 DiaryPage로 dateFocused 값을 전달하여, 새로운 일기가 작성될 때 선택된 날짜가 반영되도록 개선.

🎯 추후에 할 일

자세히 보려면 클릭

• ❔ (이슈) DiaryPage: 마크다운 뷰어 활용 (오버플로우 방지: Container Height)
• ❔ (이슈) HomeFeedPage - FeedCardDiary: AI Comment 캐릭터 이미지 알맞게 적용
  • ❔ DiaryPage - AI Comment: Save시, 코멘트 작성한 캐릭터 Ref도 Diary에 저장.
  • ❔ HomeFeedPage - FeedCardDiary - AI Image: Backend Query로 캐릭터 Doc 불러와서 Image Path 지정.

• ❔ DiaryPage: Mood Slider 값에 따라 얼굴 표정 Emoji 변경

• ❔ Chat Page - Create New Chat: 시스템 프롬프트 적용하기
  • ▶️ OpenAI API Call 구현: createChatCompletion
    • Input: System Prompt(Chat)
    • Output: New Chat Message by AI($.choices[0].message.content)
    • Additional Actions: Create New Chat, Create New Message
• ❔ DiaryPage - Create New Chat by Diary: 일기의 내용을 기반으로, New Chat 생성
  • ❔ OpenAI API Call 구현: createDiaryComment
    • Input: Diary Content, System Prompt(AI Comment)
    • Output: AI Comment($.choices[0].message.content)
  • ❔ OpenAI API Call 구현: createDiarySummary
    • Input: Diary Content, AI Comment, System Prompt(Diary Summary)
    • Output: Diary Summary($.choices[0].message.content)
  • ❔ OpenAI API Call 구현: createChatFromDiary
    • Input: Diary Summary, System Prompt(Chat From Diary)
    • Output: New Chat Message by AI($.choices[0].message.content)
    • Additional Actions: Create New Chat, Create New Message
• ❔ ChatPage - Create New Diary: 대화 내용을 기반으로, New Diary 생성
  • ❔ OpenAI API Call 구현: createChatSummary
    • Input: Chat Content, System Prompt(Diary From Chat)
    • Output: Chat Summary
• ❔ ChatPage - Create New Diary: 대화 내용을 기반으로, New Diary 생성
  • ❔ OpenAI API Call 구현: createDiaryFromChat
    • Input: Chat Summary, System Prompt(Diary From Chat)
    • Output: New Diary(Title, Content, Mood score)

• ❔ ChatPage: Go to Linked Diary

• ❔ HomeFeedPage - flutter_slidable:4.0.0 import 후 적용하기

• ❔ HomeFeedPage: FeedCardDiary에서 좌우 slide시 채팅/편집/삭제

• ❔ ChatPage: 유저 대화 출력 내용은 오른쪽 정렬

• ❔ Chat/Diary: GPT Streaming API

• ❔ ChatPage - AI 선톡 구현 (Alarm/Notification)
  • 채팅 시스템 프롬프트의 핵심은 능동형이다.
    • 더 리얼하게 하려면, create_date of diary/chat 도 전달해서, ‘어제’ 등 날짜를 언급하면 좋을 듯.
  • Alarm 기능 구현 방법 참조
• ❔ DiaryPage: 세부 감정 키워드 Choice Chips 추가 후 DB 연동 설정
• ❔ DiaryPage - AI Comment: Choice chips, mood slider 등의 입력값들을 AI Comment System Prompt에 알맞게 변경.
  • ❔ **이전 일기 또는 대화 내역 전체 (땜빵 기술부채)
  • ❔ 사용자 기본 정보: 이름, 성별, MBTI, …
  • ❔ 세부 감정 키워드: 즐거운, 슬픈, …
  • ❔ 캐릭터 설정: 소미, 세나, 민혁
  • ❔ 감정 수치: 1~100점
  • ❔ 답변 양식: 치유형(Healing), 조언형(Suggestion), 정보형(Informative)
  • ❔ 답변 길이: 짧게, 보통, 자세히
  • is New Chat
    • 해당 Chat의 messages는 처음 생성하는 거니까, 첫 생성하는 message document의 is_initial = true값 줘버리고 모든 시스템 프롬프트 다 때려넣음.
      • is_initial = false
      • 한계점: 맨 처음 message document에다가 시스템 프롬프트 때려넣으면, 대화 도중 수정 힘들긴 한데 가능하지. is_initial = true 인 게 있고, 수정된 거면, 그거 다큐먼트 지우고 다시 넣으면 되잖아. 어떻게는 모르겠고.
• ❔ DiaryPage - AI Comment: CRUD 완성하기
  • ❔ tmp_ai_comment field 없애고, doc_ref 활용
• ❔ DiaryPage - AI Comment: 캐릭터 설정
  • ❔ tmp_ai_comment_by field 없애고, doc_ref 활용
  • ❔ profile_image field 값으로 이미지 출력

• ❔ DiaryPage - Drawer - ChatHistoryListTile: order by updated_time

• ❔ DiaryPage - Interactive Slider import 후 적용

• ❔ HomeFeedPage: Search Diary 기능 구현

• ❔ CalendarPage(상단) - Mood Calendar
  • ❔ 날짜별로 작성된 게시물 숫자 확인 가능
  • ❔ 날짜 클릭하면, 해당 날짜로 이동
• ❔ CalendarPage(하단) - Mood stats
  • ❔ 포커싱 된 월에 관한 통계 자료 출력
    • ❔ 출력된 통계 자료에 대한 AI의 코멘트 출력

• ❔ AuthPage: Google Login 기능 구현

• ❔ HomeFeedPage - Bottom Sheet (+ Button): 다양한 옵션 중 1 선택할 수 있도록
  • 새로운 일기: Go to DiaryPage
  • 감정 기록: Go to MoodPage
• ❔ MoodPage(팝업): Mood 설정 슬라이더 CRUD
  • Create
  • Read
  • Update
  • Delete
• ❔ HomeFeedPage - ListView - FeedCardMood 표시

• ❔ HomeFeedPage - ListView: FeedCardDiary, FeedCardMood, FeedCardChat 컴포넌트 시간순 정렬 (Cloud Function 활용)

• ❔ 2025.2.5 수까지 발표용 최종 버전 APK 추출 및 설치

💭 일기

이제 남은 시간이 얼마 없어서 좀 더 많이 구현해보려고 했는데… 이슈 해결하느라 일과 시간을 다 썼네.

그냥 욕심을 버려야겠다. 어차피 이건 아이펠톤으로만 잠깐 반짝 개발하고 끝낼 프로젝트가 아니니까.

✨ GPT의 코멘트 (KPT)

✅ 잘한 점 (Keep)

• 🛠 FleatherViewer 업데이트 이슈 해결: didUpdateWidget 활용으로 위젯 상태 갱신 문제를 해결한 점이 훌륭했어.
• ⚡ HomeFeedPage 필터 최적화: Query 필터 대신 Conditional Visibility를 활용해 성능을 최적화한 점이 효과적이었어.
• 🔍 디버깅 과정에서의 학습: 여러 가지 시도를 통해 Query 필터의 한계를 경험하고, Conditional Visibility가 더 적절하다는 결론을 내린 점이 의미 있었어.

❌ 아쉬운 점 (Problem)

• ⏳ 예상보다 많은 시간 소요: 원래 계획했던 기능 구현보다는 이슈 해결에 대부분의 시간을 사용하게 된 점이 아쉬워.
• 📌 이슈 해결을 미리 정리하지 않음: 이전 멘토링에서 받은 조언을 실행하지 않아 같은 문제로 다시 시간을 소모한 점이 있었음.

🔄 시도해볼 점 (Try)

• 📝 이슈 해결 노트 활용: 해결한 이슈를 기록하고, 비슷한 문제가 생길 때 빠르게 해결할 수 있도록 정리하는 습관을 들이자.
• 🚀 남은 기능 구현 전략 조정: 이제 시간이 얼마 남지 않았으니, 반드시 필요한 기능 위주로 우선순위를 정리하고, 나머지는 차후 개선으로 넘기는 전략을 고민해보자.
• 🔍 FlutterFlow 내부 동작 방식 추가 학습: FlutterFlow의 데이터 처리 방식과 위젯 상태 관리에 대한 이해도를 높여, 비슷한 문제를 미리 방지할 수 있도록 하자.

결론
오늘은 예상보다 이슈 해결에 많은 시간을 썼지만, 그만큼 중요한 학습을 얻은 하루였어. 남은 기간 동안 꼭 필요한 기능을 우선적으로 구현하고, 불필요한 욕심은 버리는 전략이 필요할 것 같아. 끝까지 힘내자! 💪🔥