환경에 따라 간헐적으로 발생하는 타이밍 이슈

팀원이 해결한 이슈중에 최초로 진입하여 태스크를 등록하는 경우 진행상태가 공란인 이슈가 있었다.

 

프론트 개발 원칙을 로직과 뷰를 분리하기로 하여

로직은 Container에서 호출하고, 뷰는 Component에서 처리한다.

 

태스크 등록/수정을 담당하는 TaskWriteContainer에서 task를 dependency로 들고 있었는데

등록화면은 task 정보를 받아오지 않기 때문에 초기에 타야하는 로직이 안타는 문제가 있었다.

 

그래서 ComponentDidMount (= useEffect(()=>{},[]); ) 에서 해당 태스크 내용을 세팅했다.

그리고 TaskWriteContainer에서 사용하는 훅에서 task에 관한 dependency를 뺀 것이다.

 

문제는 태스크 등록/수정 하는 Container를 같은 것을 사용하고 있었다는 것이다.

 

태스크를 수정하는 경우 수정할 태스크에 대한 정보를 불러와야 한다.

기존에 서비스 환경이 빠른경우는 Task조회한 후에 TaskWriteContainer에 ComponentDidMount를 탔기 때문에 문제가 발생하지 않았다.

 

그런데 스테이징환경이 굉장히 느린 경우가 문제가 발생했다.

서비스콜은 비동기로 호출하기 때문에 task에 대한 정보를 받아오기 전에 TaskWriteContainer에 ComponentDidMount를 타는 현상이 발생한 것이다.

 

렌더링을 최적화하겠다고 서비스 조회에 대한 hook dependency를 빼는것에 대해 조심스럽게 생각해야한다는 것을 다시한번 깨달았고, 오랜만에 타이밍이슈를 접해서 처음엔 당황했지만 나름 다시생각해보니 재미있어서 정리해보았다.