[Toy Project] 점진적 과부하 사이트 - 8

: 오늘은 계획대로 파이어베이스에 collection, document 및 필드값 등을 만들고, 거기에 운동 기록을 저장, 조회, 수정하는 로직을 만들었다. 사실 NOSQL 구조의 DB를 처음 써보는데, 애초에 데이터를 배열 혹은 객체로 저장할 수 있다는 점이 굉장히 놀랍고(유연성 측면에서), 편리하다. RDBMS(Mysql 같은)에서는 배열을 쓰지말고, 관계를 만들어줘서, 외래키를 통해 참조를 하여 조회를 해야하는데, firebase의 cloudstore에서는 이러한 관계 참조가 필요없다(nosql 구조이므로).

const completeWorkout = async () => {
    const date = moment().format("YYYY/MM/DD");
    var recordRef = await db.collection("records").doc(user.email);
    recordRef
      .get()
      .then((doc) => {
        if (doc.exists) {
          const data = doc.data()[date];
          if (data) {
            data.push(checkList);
            recordRef.set(
              {
                [date]: data,
              },
              { merge: true }
            );
          } else {
            recordRef.set({
              [date]: [checkList],
            });
          }
        } else {
          db.collection("records")
            .doc(user.email)
            .set({
              [date]: [checkList],
            });
        }
      })
      .catch((error) => {
        console.log("Error getting document:", error);
      });

    setCheckList({});
    history.push("/main");
  };

: 위와 같은 코드를 통해 운동 기록(1회)을 collection에 저장하도록 했다. 객체의 키를 그날의 날짜로 해놓고, 해당 키의 값에 배열을 두고, 그 배열 안에 당일에 운동한 여러개의 workout이 저장돼서 나중에 이를 받아오거나, 수정할 때 해쉬테이블처럼 조회해서 쓸 수 있도록 했다. document의 값으로는 고유값인 각자의 이메일을 쓰기로 했다. 그래서 현재, records 페이지(개인의 운동 기록을 가져오는 페이지)까지 완성이 됐다. 하지만, 여기서

• 인피니트 스크롤로 일정한 양의 데이터만 받아오도록 하는 로직(예를 들어, 최근 7일 내의 데이터만 받아오도록 하는 등의 방법)
• react native 메뉴바를 통해 records 페이지, workout 페이지 등 이동할 수 있도록 만들기
• 검색 기능 등이 필요할 것 같다. 예를 들어, 특정 날짜를 검색하면, 해당 날짜가 필터링돼서 나오도록. 이건 UI 적으로도 구현안돼있으니 구현해야할듯.

문제점

: 오늘 블로그를 통해 회고하면서 생각해보니 날짜를 객체의 키로 해뒀기 때문에 이에 대해서 내림차순 혹은 오름차순 정렬을 하려면 다른 로직이 필요하다. 이부분도 해결해야함!. 템플릿 기능 이전까지 구현하는 것을 1/1까지 마무리하는 것을 목표로 하자.

next steps

• 기록 데이터 조회시 오름 및 내림 차순으로 받거나, 정렬하는 방법
• react native 메뉴바 만들고, 이동할 수 있도록 해놓기
• 검색 기능 및 날짜 필터 UI 및 기능 구현
• 기록 데이터 유효성 검사
• 사실 이번 오름차순 내림차순 문제와 유사한 문제인데, 기록 데이터 자체(state 단 혹은 프론트 단에서 관리하는 데이터)도 객체로 돼있고, 이전에 예를 들어, 'bench press', 'incline press' 가 있을 때, 순서상 bench press가 먼저 나오게 되는데, 이를 수정하면 예를 들어, v-ups 로 수정하면, 자동으로 순서가 바뀌어서 UX적으로 혼란을 주는 문제가 있다. 이에 대해서 해결해야한다.