Fe/bugfix/#428 게스트가 들어오기전에 프로필을 설정하면 상대방에게 적용 안됨

[Doosies]

변경 사항

• 해당 이슈 해결

고민과 해결 과정

문제의 원인

자바스크립트의 클로저에 대해 제대로 이해하지 못해서 생긴 문제였음
전에는 아래와 같이 이벤트 리스너에 핸들러를 등록 해 주었음.

function useDataChannel() {
  profileChannel?.addEventListener('open', sendMyProfileImage.bind(profileChannel));
}
function useDataChannelEventListener() {
  const { myProfile } =useProfileInfo();

  function sendMyProfileImage(this: RTCDataChannel) {
    if (!myProfile) {
      return;
    }
    this.send(JSON.stringify({ myProfile }));
  }
}

이 때 핸들러는 현재 실행 컨텍스트를 기억하고 있음.
그래서 브라우저가 이 이벤트가 발생되고, 핸들러를 실행시키면 등록될 당시의 환경에서 실행이됨

그런데 원래 원했던건 그 당시 값이 아니라 최신값이었음
그래서 zustand의 store.getState()로 최신 값을 받아와줘서 해결함
이러면 이벤트 핸들러가 등록될 당시 환경이 아니라 저 모듈의 현재 상태를 받아올 수있음

function sendMyProfileImage(this: RTCDataChannel) {
  const { myProfile } = useProfileInfo.getState();
  if (!myProfile) {
    return;
  }
  this.send(JSON.stringify({ myProfile }));
}

(선택) 테스트 결과

ex) 베이스 브랜치에 포함되기 위한 코드는 모두 정상적으로 동작해야 합니다. 결과물에 대한 스크린샷, GIF, 혹은 라이브 데모가 가능하도록 샘플API를 첨부할 수도 있습니다.

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Pages

Latest commit:	e6ff7a9
Status:	⚡️  Build in progress...

View logs

[kimyu0218]

👍 scenario 활용하니까 진짜 깔끔하다!! e2e 테스트 다 작성하고 시나리오로 리팩토링 할 수 있으면 해볼게!!
💬 빌드 실패 떴는데 여기서 오류 난 건가?!

[Doosies]

👍 scenario 활용하니까 진짜 깔끔하다!! e2e 테스트 다 작성하고 시나리오로 리팩토링 할 수 있으면 해볼게!! 💬 빌드 실패 떴는데 여기서 오류 난 건가?!

작업 하면서#505 여기 PR 내용들이 필요했었어 그래서 merge하니까 이쪽 PR에 그 내용이 전부 뜨더라고 ㅋㅋㅋㅋㅋ
그래서 git rebase -i로 #505 에 있는 커밋을 지우고, 실제로 작업한 커밋내역만 올라오도록 했는데 더 좋은 방법 없을까!