드뎌 refresh 되던 버그를 잡았다

아 너무 기쁘다. 장장.. 3주 정도로 끙끙 앓던 이가 나아진 시원한 느낌!

여느 문제가 그렇듯 너무 쉬운 … 거였다.

Input field 에 한 자를 적으면 그게 새로운 변화라고 websocket에서 주고 받고 하는 트래픽은 문제는 없다 보통엔.

근데 그 사이즈가 한번 할때 40KB 이고 내가 그것은 어떻게 할 수가 없는게 리스트가 들어간 전체는 하나의 폼 이기 때문에. 뭐를 쉽게 건드리기 어정쩡한 케이스.

물론, 좀 더 시간이 있다면 이 트래픽 자체를 최소화 할수도 있겟지만 그것은 좀 더 많은 시간을 요하고, 목회진은 내가 어느 정도 끝내서 시범으로 돌릴 수 있기를 원하시고 계시기에 이번달 내게 내가 할애된 시간은.. .이제 3시간 남았다. (총 22시간).

근데 오늘 드디어 해결한거다!

맞다. 프론트엔트 좀 해봤다는 사람들은 위에 읽고 단번에 깨달았을거다. 아니, 그러면 그냥 debounce하면 안되나?

맞다 답은 debounce였다. 그리고 그것을 어떻게 구현하는가?

Lodash? 일부러 그렇게 적용하기 위해서 import 하고~ 따로 function 만들고~ 리액트 안에서 잘 돌아가게 어느 곳에 어떻게 debounce() 해서 렌더링 무지기수로 안 하게 조심하고~ 으으으 나도 6년동안 지긋지긋하게 했던 거.

엘릭서, LiveView에서는 어떻게 하는지 보여주겠다.

  def input(%{type: "textarea"} = assigns) do
    ~H"""
    <div phx-feedback-for={@name}>
      <.label for={@id} class={@label_class}><%= @label %></.label>
      <textarea
        id={@id || @name}
        name={@name}
        class={[
          input_border(@errors),
          "mt-2 block min-h-[6rem] w-full rounded-lg border-zinc-300 py-[7px] px-[11px]",
          "text-zinc-900 focus:border-zinc-400 focus:outline-none focus:ring-4 focus:ring-zinc-800/5 sm:text-sm sm:leading-6",
          "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400 phx-no-feedback:focus:ring-zinc-800/5"
        ]}
# 요 밑에 줄 하나!
        phx-debounce="200"
        {@rest}
      >

    <%= @value %></textarea>
      <.error :for={msg <- @errors}><%= msg %></.error>
    </div>
    """
  end

내가 추가한건 저 phx-debounce하나이다. ㅎㅎㅎㅎㅎ

저거 하나로!!! debounce @ 200ms 가 된거다!

이것으로 websocket은 폼 열어놓고 내가 한시간 다른 짓하다 와도 리셋이 안되는 슈퍼 안정감을 보여주었다.

원래는.. 이거 전까지는 내가 셀 노트 작성하다가 중간에 그냥 확 지워지고 (websocket reset)해서 너무 황당했었다.

물론 여기는 비하인드 스토리가 하나 더 있다. 모든 게 그렇듯.

내가 쓰는 호스팅은 fly.io 인데, 이것이랑 Phoenix LiveView랑은 websocket이라는 것이 겹친다. Websocket은 소켓 커넥션이랑 멀면 확실히 차이가 느껴진다.

AWS, GCP 등과 다른 Fly.io의 장점은, 네트워크에 따라서 Docker Image(같은거지만 사실 살짝 다른) 가 네트워크 커넥션에 가까운 데이타 센터로 자동으로 온다는 거다. 물론 여기도, 돈을 더 내면 그것을 해주지만 나는 무료 티어라서 내가 바꾸었다. 원래는.. DFW (달라스)에 있던 거였다. 그것을 LAX 로 바꾸니까 음청 빨라졌다 ㅎㅎㅎㅎ