stompJS에 기여하기와 한단계 성장한 느낌

usestomp-hook

항해 마지막 프로젝트에서 stomp로 socket 통신을 구현하면서 조금은 복잡하다고 느꼈다.

또 다른 조에서도 stomp사용에 어려움을 많이 겪고있엇다.

stomp에서 react를 위한 공식적으로 hook을 제공하면 어떨까 싶어서 개발하면서 이를 염두하면서 hook을 만들어 사용했다.

 

이슈를 올리자마자 1시간만에 친절한 답변이왔다.

내 코드를 어느정도만 수정하면 좋다는 얘기였다.

 

개선해야할 점은 크게 3가지였는데,

1. stompJS의 최신 문법 사용하기

2. SockJS의 의존성 없애기

3. 자동 reconnect 대응하기

 

이 내용에 대해서는 그냥 요구사항대로 수정한 것이라 크게 비교하면서 설명할 건 없는거 같다.

index.ts

내가만든건 단 하나의 index.ts 파일이다.

import { Client, StompConfig, StompSubscription } from "@stomp/stompjs";
import { useCallback, useEffect } from "react";

interface ObjectType {
  [key: string]: any;
}

let stompClient: Client;
let isConnected = false;
const subscriptions: { [key: string]: StompSubscription } = {};

export function useStomp(config: StompConfig, callback?: () => void) {
  const connect = useCallback(() => {
    if (!stompClient) {
      stompClient = new Client(config);
      stompClient.activate();
    }

    stompClient.onConnect = (frame) => {
      isConnected = true;
      callback && callback();
    };
  }, []);

  const send = useCallback(
    (path: string, body: ObjectType, headers: ObjectType) => {
      stompClient.publish({
        destination: path,
        headers,
        body: JSON.stringify(body),
      });
    },
    [stompClient]
  );

  const subscribe = useCallback(
    <T>(path: string, callback: (msg: T) => void) => {
      if (!stompClient) return;

      if (subscriptions[path]) return;

      const subscription = stompClient.subscribe(path, (message) => {
        const body: T = JSON.parse(message.body);
        callback(body);
      });
      subscriptions[path] = subscription;
    },
    []
  );

  const unsubscribe = useCallback((path: string) => {
    subscriptions[path].unsubscribe();
    delete subscriptions[path];
  }, []);

  const disconnect = useCallback(() => {
    stompClient.deactivate();
  }, [stompClient]);

  useEffect(() => {
    connect();
  }, []);

  return {
    disconnect,
    subscribe,
    unsubscribe,
    subscriptions,
    send,
    isConnected,
  };
}

 

옛날부터 한참 오픈소스 활동을 해보고싶다는 열망이있었다.

그러기위해서는 다른 저명한 라이브러리 코드가 눈에 읽혀야된다고 생각했다.

그래서 부단히 기초를 파고파고 경험도쌓고, 다양한 시각을 가지기 위해 노력해왔다.

 

이렇게 내가 좋아하는 언어의 라이브러리를 만든다는 것은 그래도 고수준의 언어 이해력이 동반되야한다고 생각하는데,

지금 내가 고수준이라는 것은 아니지만, Typescript 기준으로 타입을 명확하게 알고, 제네릭은 그래도 어느정도 이해하고있다.

JS는 기본베이스이고, 라이브러리를 만들기위해서는 타입을 명확히 아는 것이 중요했다.

이게 되야 응용도, 남의 코드를 읽는것도, 내 코드를 잘 나타내는 일도 가능하다.

 

그렇게 하나의 파일로 만들어진 hook이 사람들이 많이 사용할만한 라이브러리가 될수 있을까? 라는 고민을했다.

그찰나 redux-thunk가 생각났다.

이 라이브러리도 단하나의 index.ts 파일하나로 github star를 1만7천개나 받았다.

이사실이 과감하게 "나도 할 수 있겠다"라는 생각을 심어주었다.

신난다

어제 라이브러리를 npm에 배포하고 102 다운로드가 있었다.

눈뜨면 sns확인하듯, 아침마다 여기들어올거같다.

단순히 뭔가 싶어서 썻든 어쩃든 내코드가 다른 개발자에게 도움이되고있다는 사실이 이때까지 개발하면서 못느껴본 감정을 들게한다.

말로만 공유, 성장이라는 말을 했는데 그 실체를 만난 것 같다.

 

블로그를 방문해주시는 분들께

제 블로그가 왠진 모르겠지만 나날이 100명가까이 되는 분들이 유입되고있습니다.

그것도 하나의 책임감으로 다가오는 거 같기도하고, 통계를 보면 저의 진심이 담긴 경험의 글을 많이 공감해주시는거 같습니다.

그냥 개인 아카이브라고 생각하고 쓰고있었는데, 봐주시는 분들도 늘어나니 재미도 있고, 책임감도 생기고, 좀 더 양질의 글을 쓰고싶다는 생각이 또 저를 성장할 수 있게 만들어주는 거 같습니다.

 

개인적으로 나의 지식을 공유하는 일, 다른사람을 가르치는 일에 능하다고 생각합니다.

근데 그 능력은 저의 주저리주저리... 에서 나오는 것이라 생각하는데, 글로는 주저리가 잘 안되더라구여 (손도아프고)

그것을 글로 잘 표현해보도록 노력해보겠습니다!