기업협업 TIL - 11. 기억나는 코드!

오늘은 Hugo a.k.a 코딩폭주기관차와 함께 DB구조 재설계와 여러 비즈니스 로직을 함께 짜봤다..
사실 말이 함께 짠거지 Hugo 지분이 거의 대부분이긴 하지만 확실히 잘하는 사람이 하는 것만 봐도 폴더구조라던지 흐름들이 확실히 눈에 더 들어오기는 했다.
컴퓨터와 대화를 하며 로직을 짜는 Hugo를 보며 저래야 어디가서 개발자한다는 얘기를 하겠구나...싶었고,, 오늘 함께 짰던 코드들 중에 인상깊었던 것들을 정리한다.

먼저 메인페이지의 DB로직을 담당하는 main repository다!

export class MainRepository extends UsingFirebaseDB {
  async getTimeOfTodayWork(): Promise<any | null> {
    const uid = auth().currentUser?.uid;

    const dayNum = todayMilliSec();
    const weekNum = weekOfYear();

    try {
      const todayWorkLog = await super.getDataFromDB(`/${uid}/commuteData/${weekNum}/${dayNum}`, 'value', snapshot => {
        return snapshot.val();
      });
      return Object.values(todayWorkLog);
    } catch {
      return null;
    }
  }

  setWorkTimeOfTodayToDB(value: IWorkToday) {
    const uid = auth().currentUser?.uid;

    const dayNum = todayMilliSec();
    const weekNum = weekOfYear();
    super.setDataToDB(`/${uid}/commuteData/${weekNum}/${dayNum}`, value);
  }

  pushWorkTimeOfTodayToDB(value: any) {
    const uid = auth().currentUser?.uid;

    const dayNum = todayMilliSec();
    const weekNum = weekOfYear();
    super.pushDataInDB(`/${uid}/commuteData/${weekNum}/${dayNum}`, value);
  }

  async getTimeOfWorkThisWeek(): Promise<[string, IWeeklyWorkLog[]] | null> {
    const uid = auth().currentUser?.uid;

    const weekNum = weekOfYear();
    try {
      const weeklyWorkData = super.getDataFromDB(`/${uid}/commuteData/${weekNum}`, 'value', snapshot => {
        let sumNum = 0;
        let weeklyWorkLog: IWeeklyWorkLog[] = [];

        Object.entries(snapshot.val())
          .sort()
          .forEach(elem => {
            const [day, stamp]: [string, any] = elem;
            const start: any = Object.values(stamp).sort()[0];
            const end: any = Object.values(stamp).sort()[Object.values(stamp).length - 1];
            const timeLag = end - start;
            const log = {
              day: parseMiliSecToYearMonth(parseInt(day, 10)),
              start: parseMilliSecToTime(start),
              end: parseMilliSecToTime(end),
            };
            weeklyWorkLog.push(log);
            sumNum += timeLag;
          });

        const weekWorkTime = calcMiliSecTime(sumNum);

        return [weekWorkTime, weeklyWorkLog];
      });
      return weeklyWorkData;
    } catch {
      return null;
    }
  }
}

원래 정말 DB에서 data를 가져오는 부분만 담당하고 있었지만..!
DB를 담당하는 repository에서 어느정도 가공까지 해서 다른 컴포넌트로 넘겨준다면 훨씬 깔끔한 코드가 될 것 같다는 조언에 출근 날짜, 출근 시간, 퇴근 시간, 근무 시간 등 여러가지 정보들을 미리 가공하는 로직까지 짜놓았다.
오랜만에 만나는 sort함수부터 2차 프로젝트 때 날 엄청나게 성장시켜준 object.entries 등 나도 함께 로직을 짜며 참 재미있던 부분이다!

export const MainPresenter = ({navigation}: any) => {
  const [workBtn, setWorkBtn] = useState<true | false>(true);
  const [timeStamp, setTimeStamp] = useState<number>(0);
  const [workTimeLog, setWorkTimeLog] = useState<number[] | null>(null);
  const [loadWorkTimeLog, workTimeLogLoading] = useTodayWorkTimeLog();
  const [weeklyWorkTime, weeklyWorkLog] = useWeeklyWorkTime();

  const [address] = useLocation();

  console.log(weeklyWorkTime, weeklyWorkLog);
  useEffect(() => {
    if (!workTimeLogLoading) {
      if (workTimeLog === null && loadWorkTimeLog !== null) {
        setWorkTimeLog(loadWorkTimeLog);
        setWorkBtn(false);
      }
      if (timeStamp !== 0) {
        if (workTimeLog === null && loadWorkTimeLog === null) {
          setWorkTimeLog([timeStamp]);
          pushWorkTimeOfTodayToDB(timeStamp);
          setWorkBtn(false);
        } else if (workTimeLog !== null) {
          setWorkTimeLog([...workTimeLog, timeStamp]);
          pushWorkTimeOfTodayToDB(timeStamp);
          setWorkBtn(false);
        }
      }
    }
  }, [timeStamp, workTimeLogLoading]);

  return <Main navigation={navigation} workBtn={workBtn} address={address} setTimeStamp={setTimeStamp} />;
};

이 부분은 main presenter 부분!
출근(퇴근) 버튼을 누르면 시간이 찍히는 출퇴근log를 만들고 그걸 이용해서 출퇴근 시간을 표출해야하는 부분이었다.
출근 버튼을 누르면 출근 시간이 찍히며 퇴근버튼으로 바뀌고, 퇴근시간은 누를 때마다 갱신되며 날짜가 바뀌면 다시 리셋되어야 하는 로직을 짜야하다 보니 조건이 점점 늘고 헷갈려지는 로직이었다.
성공을 해도 실패를 해도 명확하게 이해가 되지 않아 많이 고생시켰던 부분이다!

우리가 하고 있던 프로젝트 발표도 얼마 남지 않았고 이렇게 현장에서 직접 경력자에게 질문하고 배울 수 있는 시간도 얼마 남지 않았다!
남은 기간도 하나라도 더 배우고 얻어갈 수 있게 화이팅!