[Day 32] 발표 하루 전날 에러 발생

오늘에서야 백엔드 배포가 되었다.

계획보다 좀 늦어지기는 했지만, 발표 전에 완료되어서 정말 다행이었다.

하지만, 배포를 하고 정식으로 테스트를 해보면서 프론트 쪽에 에러가 있었다는 것을 알게 되었다.

insertRule

하하하....

발표 전날에 저런 에러를 맞닥뜨리니 사람이 되게 초조해졌다.

에러가 나는 부분을 찾아보니, waiting화면에서 크롬의 공룡 게임 부분이 저런 에러를 발생시키고 있었다.

waiting 화면

저 에러를 해결하기 위해 엄청난 구글링을 했지만... 내가 할 수 있는 것은 없었다.

 

나는 크롬 공룡 게임을 리액트에서 사용하기 위해, react-chrome-dino 라이브러리를 설치해서 사용했었다.

사용하기에 매우 간단하지만, 내가 수정할 수 있는 부분이 없어서 자유도가 떨어졌다.

즉, 위에서 만난 에러를 내 힘으로 해결할 수 없었다는 뜻이다.

 

그래서 나는 react 라이브러리를 쓰는 것이 아닌 방법을 찾았다.

졸업 프로젝트 때도 썼단 방식인데, 이렇게 또 쓰게 될 줄은 몰랐다.

iframe을 이용하여 공간을 뚫어두고, 그곳으로 게임을 불러오는 방식이다.

 

https://github.com/wayou/t-rex-runner 

GitHub - wayou/t-rex-runner: the t-rex runner game extracted from chromium

위의 레포지토리를 fork 한 다음에, 나의 목적의 맞게 쓸데없는 코드는 지우고 깃허브 action으로 배포를 했다.

그리고 그 링크를 iframe에 넣어서, 전체 프론트 배포한 사이트에서 오류 없이 제대로 돌아가는 것처럼 보이게 만들었다.

편법이지만 해결할 수 있어서 정말 다행이었다.