1월 첫주차 기록

나름 시끌벅적한 새해의 시작

코로나 격리해제됐다. 내 세상이다.

코로나 집콕일기

firebase RealTime database 헤매기

firebase에 firestore 말고 RealTime database가 언제 생겼는지는 모르겠지만, 아무튼 생겼다고 한다.

RealTime database는 여러 클라이언트에서 실시간으로 상태를 동기화해야 하는 모바일 앱을 위한 효율적이고 지연 시간이 짧은 솔루션이다. 하지만 경험해보니 그렇게 유용한지는 모르겠다. 사용 방법도 솔직히 불편하다.

여기에서 서비스의 특성에 맞게 firestore와 RealTime database 중에서 추천해준다고 하는데, 뭘 하든 그냥 RealTime database를 쓰라는 것 같다 😑

더군다나 react query와 함께 사용하려니 정말 거지같았다!

그래도 여차저차 포스팅을 참고해서 realTimeApi 클래스를 만들어보았다.

export class RealTimeApi {
  #firebase: FirebaseApp;

  constructor() {
    this.#firebase = initializeApp({
      // ...
    });
  }

  public fetch<T>(path: string): Promise<T> {
    return new Promise<T>((resolve, reject) => {
      const db = getDatabase();
      const reference = ref(db, path);

      onValue(reference, (snapshot) => {
        const data = snapshot.val();

        if (data) {
          resolve(data);
        } else {
          reject(new Error("firebase get error"));
        }
      });
    });
  }

  public post<T>(path: valueof<typeof API_PATH>, postBody: T): Promise<void> {
    return new Promise<void>((_, reject) => {
      const db = getDatabase();
      const newPostKey = push(child(ref(db), path)).key;

      try {
        const updates: Record<string, T> = {};
        updates[path + newPostKey] = { id: newPostKey, ...postBody };

        return update(ref(db), updates);
      } catch (error) {
        reject(new Error("firebase post error: " + error));
      }
    });
  }
}

export default new RealTimeApi();

react query hook에서 사용은 아래와 같이 하고 있다.

const fetchTalks = async () => {
  try {
    const data = await realTimeApi.fetch<TalkContent[]>(API_PATH.talk);

    return data;
  } catch (error) {
    console.error(error);
  }
};

const useLoadTalks = (
  options?: UseQueryOptions<TalkContent[] | undefined, AxiosError>
) => {
  return useQuery<TalkContent[] | undefined, AxiosError>(
    "confirmedData",
    fetchTalks,
    options
  );
};

타이핑이 아직 살짝 부족하다. 그래도 타입스크립트의 매력을 조금씩 더 알아가고 있다.

어쨌든, ‘이야기’ 탭의 글 작성과 불러오기에 성공했다. 어김없이 어거지 코딩이 조금씩 늘어나고 있긴 하지만

화면 하단 노란 에러는 흐린눈 할거다.

JavaScript의 Date

아직도 헤매면서 사용하고 있었다니! 정말 바보잖아.

Date.now()와 new Date() 모두 현재 시점의 DateTime을 제공하지만, Date.now()는 number 타입의 timestamp를 반환하고, new Date()는 Date 객체를 반환한다. (엄밀히 말하면 타입은 그냥 ’object’지만, Date 객체를 따른다.)

new Date(); // Sat Jan 08 2022 23:52:00 GMT+0900 (한국 표준시)
Date.now(); // 1641653520000

new Date()로 생성한 Date 객체에서 getTime() 메서드를 호출하면 Date.now()와 같은 number 타입의 timestamp를 얻을 수 있다.

const date = new Date();
date.getTime(); // 1641653520000

Ref https://ko.javascript.info/date

기타

Dan abramov - a hundred things i learned working on the react team

1. 매년 사용자는 바뀌고, 새로운 사용자는 과거의 문제를 이해하지 못한다. 이전 사용자는 흥미를 잃는다. 새로운 사용자는 다른 시각을 갖고 있다. 그에 맞춰 계획해야 한다.
2. 문제를 고칠 때 문제를 우선 파악하는 것이 중요하다. 잘못된 문제 해결은 10가지의 새로운 문제를 낳는다.
3. 대부분의 PR은 해결되기보다 더 많은 일을 낳는다. 코딩 자체보다는 결정을 내리는 데 무수한 시간이 들어가기 때문이다.
4. 라이브러리의 PR description은 훌륭해야 한다. 몇 년 후 누군가가 버그를 발견하거나 변경을 할 때 매우 고마워할 것이다.
5. 몇몇 트롤이 전체 토론장을 망칠 수 있다.
6. 내부 실행 모듈에 유닛 테스트 대신 public API에 대한 테스트를 작성해라. 그러면 테스트를 이용하여 실행 코드를 얼마든지 다시 작성할 수 있다.
7. 오래가는 브랜치는 썩는다. 죽은 코드를 제거하거나 배포 환경에서 feature flag changes를 배포할 수 있는 좋은 flag 메커니즘을 고안하자.
8. 측정에 빨간불이 켜졌다면, 느려진 것이다. 그러나 다른 동작을 깨뜨리는 버그를 만들었거나, 측정이 로깅되는 방식이 바뀌었을 수도 있다. 측정은 어렵다.
9. 사람들은 유명한 프로젝트에 PR을 올려 github을 꾸미고 싶어한다. 누군가는 이를 convert하고, 또 다른 누군가는 다시 convert한다. 스타일에서의 단순한 실수를 발견할 때까지는 merge되지 않을 것이다.
10. 뭔가 고쳤다면, 실패하는 테스트를 만들어라. 그렇게 하지 않으면 누군가는 이를 다시 망가뜨려놓을 것이다.

…제목의 ‘a hundred’를 주의했어야 했다. 진짜 백 개라니. 포기 🤮

Ref https://threadreaderapp.com/thread/1470613731071696896.html

하버드 CS50 새로운 버전

Ref https://www.youtube.com/playlist?list=PLhQjrBD2T383f9scHRNYJkior2VvYjpSL

마무리

코로나 격리해제됐다. 나름 잘 놀고 오고, 빡빡하게 친구들도 많이 만났다. 그리고 내일모레면 이제 다시 수술실과 입원실로(…) 들어간다. 이건 예상에 있던 거니까 딱히 우울하진 않다. 입원하는 동안 조용히 할 것들이 많아서 설레기까지 한다(?)

우테코에서 우형으로 크루들 중 절반 정도가 이번주에 입사했다. 톡방이 매일같이 시끌시끌하더니, 금요일 저녁부터 조용해졌다. 벌써 지친게야 🤦‍♀️ 조잘조잘 말하는 내용들을 조금씩 주워담으며 입사 마음가짐을 해본다.

졸업한 주제에 학교 포털에서 여전히 SNUON 강의를 들을 수 있어서, 작년 1월에 절반쯤 듣다 우테코가 너무 빡세 포기했던 컴퓨터구조 강의를 다시 듣고 있다. CS에서 네트워크가 제일 중요하다고는 들었는데, 살짝 찍먹했던 컴퓨터구조 수업도 나름 흥미로웠다. 이때 아니면 언제 공부해보겠어.

아이패드 에어를 구매했다. 신학기 프로모션 열린 당일에 후닥 구매해서 애플스토어까지 가서 직접 픽업했다. 케이스는 맘에 드는 게 하나도 없지만 그래도 적당히 괜찮다 ㅎㅎ 열심히 공부해야지. 좋은 인연이었던 아이디어스에서 드로잉 클래스 수강권도 구매했다!