2021/10/08 : 시크릿 모드에서는 localStorage를 사용하지 못한다, jest에서는 --detectOpenHandles 옵션을 사용한다.

 

-시크릿 모드에서는 localStorage를 사용하지 못한다.

 

시크릿모드에서 localStorage를 사용하지 못하는 모습

 

 

다라쓰에서는 react-query의 useQuery를 사용하여 user정보를 가져오고 있습니다.

여기서 단점은 react-query들의 정보들은 모두 메모리에 저장되어 있는 것이기 때문에, 새로고침하면 user를 요청하는 동안에는 빈 유저 이미지가 나타난다는 것입니다.

그것을 최대한 방지하기 위해서, 로그인된 상태면 로그인된 유저의 정보를 localStorage에 저장하고 새로고침할때 초기값으로 localStorage 값을 불러와서 먼저 렌더링하도록 했습니다.

물론 로그아웃을 하면, localStorage 정보를 날립니다.

유저 정보같은 경우는 민감한 정보가 없는 부분이라 localStorage에 저장해도 큰 문제가 없다는 판단도 있었습니다.

 

하지만, 배포후에 실시간 알림을 테스트하는 도중에 시크릿모드를 켜서 테스트를 해보랴했는데, 에러가 발생해서 프로그램이 동작하지 않았습니다.

그 이유는 위 그림처럼 시크릿모드에서는 localStorage를 사용하지 못하도록 기본적으로 막혀있기 때문입니다. (https://blog.naver.com/PostView.naver?blogId=gingsero&logNo=222473838747&categoryNo=0&parentCategoryNo=0&viewDate=&currentPage=1&postListTopCurrentPage=1&from=postView)

 

따로 설정해주지 않는이상.. 이런에러가 발생할 수 있기 때문에, 어떠한 페이지에서나 정상적으로 동작해야하는 댓글서비스에서는 치명적인 이슈입니다.

 

그래서 일단, localStorage의 로직들에대해서 try/catch으로 에러를 throw하지 않게하고 읽지못했을 경우에 Falsy값을 반환해주도록 수정하였습니다.

더 좋은 방법이 있으면 추후에 리팩터링해야겠습니다.

 

https://github.com/woowacourse-teams/2021-darass/pull/688

[FE][공통] 시크릿모드에서 Window localStorage 접근못할때 예외 처리 by zereight · Pull Request #688 · woowaco

 

 

jest를 돌릴때에는 --detectOpenHandles를 사용한다.

 

jest 테스트 코드를 작성해서 로컬에서 직접 돌려볼때에는 잘 돌아갔는데,

github action에서 test를 수행하고 aws를 배포하는 코드에서, test의 결과값이 나왔는데 다음단계로 넘어가지 않는 이슈가 있었습니다.

 

아래와 똑같은 에러가 잠깐 나타났다가 사라졌었는데요.

https://stackoverflow.com/questions/68368577/react-tests-unhandledpromiserejection

React tests - UnhandledPromiseRejection

 

jest의 테스트 중에 비동기 로직이 아직 끝나지 않은 것이 있으니, 계속 기다린다는 것이었습니다.

로컬에서는 무슨이유인진 몰라도 정상적으로 테스트가 끝나길래 전혀 예상하지 못했습니다.

그래서 --detectOpenHandles 를 jest 명령어 뒤에 붙여주었습니다.

위 옵션을 달아주게 되면, jest 테스트가 끝났는데 아직 open되어있는 핸들러가 있는지 알려줍니다.

 

그런데 open되어있는 핸들러가 있다는 사실만 알려주지, 어디서 발생했는지는 알려주지 않습니다.

그래서 수십개의 테스트코드들을 까보며 비동기처리가 끝맺음되어있지 않은 부분들을 수정해주어야 했습니다.