메인 페이지 배너 로직의 안티패턴 리팩토링

[Queue-ri]

Case

특정 네트워크 환경(공용 와이파이 등)의 로컬 실행 시,
배너 이미지를 로드하는 과정에서 TypeError: Cannot read properties of undefined (reading 'style') 발생.

Tasks

• 배너 로딩 로직을 리액트 라이프사이클로 편입
  • 현 상태는 비동기로 쌩JS 실행하는 안티 패턴으로, 리액트 알못 시절 코드라 매우 레거시함.
  • 배포 환경은 이미 정적으로 빌드된 상태라 괜찮은데(SSG), 로컬 실행의 경우 CSR로 동작함.
    • 네트워크 상태에 따라 리액트 번들 실행, <script> 태그의 실행이 서로 비동기적이라 순서가 꼬일 수 있음
    • DOM을 그리기 전 style에 접근하려는 코드가 트리거될 수 있음 -> undefined 인데요? -> 퍼펑펑💥
  • 홈 와이파이같이 빠릿한건 리액트 번들을 광속으로 다운받아 실행해서 멀쩡해보일 수 있음.
    • 공용 와이파이같이 버벅이는건 해당 race condition 문제를 유발함.
  • 매우 한정된 케이스에서만 발생하는 heisenbug이나, 안티패턴이기도 하고 알못시절 땜빵한 똥코드라 교체하는 것으로 결정.

Comment

• 해당 이슈는 특정 네트워크 환경의 로컬에서만 발생함. 배포환경은 문제 없음.
• react-helmet 디펜던시 삭제