회사에서 Next.js를 사용하여 프로젝트를 진행하던중
이전에 잘 build되던 소스가 갑자기 build timeout오류를 뱉어냈다
내용은
안보이게 해놓은 저부분들은 tsx파일들이다.
그래서 기존에 잘 빌드되던 현재 운영버전의 프로젝트를 새로 받아 Build해보았지만 똑같이 Timeout이 발생했다. 정말 이게 뭐지 싶었다.
아무튼 이와 관련해서 인터넷에 정보를 찾아보았지만 정말 정보가 없었다.
관련해서 찾은 정보들은 staticPageGenerationTimeout 속성을 수정하는것 그리고 이와 관련된 문제로 정적페이지 랜더링시간을 페이지 최적화를 통해 줄이는것 두가지였다.
첫번째, staticPageGenerationTimeout시간을 늘려보았다.
그런데 잘 작동했다!
하지만 잘 작동된다고해서 문제의 원인이 해결된것은 아니기때문에 그 원인을 해결해야만했다. 위의 캡쳐를 보면 저 노란색으로 표시된 부분이 내가 새로 개발한 페이지인데 React개발이 처음이다보니(이해도부족으로인한...ㅠㅠ) 페이지 랜더링시간이 저렇게 평균보다 많이나오는것을 확인할 수 있었다.
그래서 저렇게 랜더링시간이 평균이상인부분때문에 Timeout이 발생하지않을까? 라는 합리적의심을 했다.
두번째, 페이지 최적화를통해 랜더링시간을 줄이기
그래서 나는 개발한 페이지에대해 랜더링 시간을 줄이기위해 최적화를 진행했다.(최적화에대한 내용은 별도의 포스트를 쓸 예정이다.)
몇개의 파일을 최적화하여 실제로 저 노란색 표시가 뜨지않도록 속도개선을 하면서 계속 Build를 했으나 별 차도가 없는것같아 다시 에러를보니 내가 개발한 페이지 말고도 다른 파일들도 60초이상 걸리는 것을 뒤늦게 깨닳았다.
(물론 저렇게 랜더링시간이 오래걸리는 것은 좋은것이아니며 추후 모든 페이지를 최적화 할것이다.)
그렇게 나름 할수있는것들을 다 시도해보았지만 해결될 기미가 보이지않았고 결국 나는 로컬 컴퓨터의 성능문제라고 단정지어버렸다.
처음 해결한 방법인 staticPageGenerationTimeout 속성을 늘림으로써 해결하려고 하던 찰나
문제를 해결하면서 여러번의 npm install을 시도하면서 중간에 어떤 문구를 본 것이 기억났다.
바로 이문구 npm버전을 업데이트해라는 문구였다.
이 문구는 내가 build를 시도한 후 봤던 문구였는데 처음에는 대수롭지않게 생각하였으나 혹시나 npm버전의 문제인가라는 생각을 하게되었다.
실제로 여러 프로젝트를 진행하면서 버전문제로인해 원인불명의 문제들이 발생했던것을 몇번 경험했던터라 우선 update를 진행하고 다시 build를 해보았다.
npm install -g npm@10.8.1허무한 결말
그렇다 npm 버전 문제였다.
버전 update진행 후 build가 정상적으로 되었던것이다.
물론 랜더링 시간이 오래걸리는 저런 페이지들또한 추후 쌓이다보면 timeout을 발생시키는 요소가 될 수 있을것이다. 이부분은 최적화를 진행할생각이지만
너무 허무했다.
하루 왠종일 고민하며 수많은 시도의 결말이 버전 문제였다니...
이 포스팅으로 나와 동일한 문제를 가진사람들이 나처럼 고통받지않고 빠르게 문제를 해결했으면 좋겠다는 마음에서 글을 작성한다.
