또 너냐? Next.js

오늘 기본 작업을 하던 중에 재밌는(?) 문제가 발생했다. yarn dev 로 개발서버를 올렸는데 자체적으로 사용하는 폰트가 404 이다.

분명히 있다

정확히는 http://localhost:3000/_next/ 이하에 번들링 된 폰트 파일이 없다는 소리다. 그런데 분명히 그 위치에 폰트파일이 존재한다. 왜 없다고 하는지 알 길이 없다. 미치는 줄 알았다.

무지성은 헛다리를 짚고

처음에는 tsconfig.json 에 alias 설정해놓은 것이 잘못된 줄 알고 온갖 것을 만져봤는데 백약이 무효했다. 담주부터는 신입개발자 데리고 ui 박아넣어야 하는데 미치겠다.

해결 - 구글은 알고 있다

열심히 구글링을 하니 next.config.js 의 폰트관련 loader 설정이 좀 다른 글이 보였다. 설마하는 심정으로 바꿔봤는데 바로 적용되었다.

무엇을 바꿨나?

바로 file-loader 를 url-loader 로 바꾸었다. 그러자 .next 이하에 생기는 번들링 된 폰트파일이 사라지고 그냥 다 묶인 거 같은 상태의 svg 로 바뀌어서 폰트가 서빙되었고 404 에러는 사라졌다.

아쉬운 점

원인을 좀 알았으면 하는데 원인을 알 수 없었다. 원통하다. 이게 무지성, 무근본, 야매의 고통이다.