인프런 커뮤니티 질문&답변

안녕하세요! jihun6548님!

새로고침시 폰트가 제대로 나온다고 하셨는데!
이는 크게 2가지 문제로 요약해 볼 수 있을 것 같아요!


1. 소스코드를 저장하면서 리프레시가 될 때, 문제가 되는 경우
=> 이 경우는 yarn dev 에서만 발생할 것이에요.(최종 배포시에 발생하지 않음)
리프레시 하기 위한 코드들을 최적화하는 과정에서 발생하는 일시적인 오류로 무시하셔도 됩니다!


2. 특정 페이지에 진입하는 경우에 (항상) 문제가 되는 경우
=> 이 경우는 클라이언트사이드에서의 페이지이동 vs 서버사이드를 거친 페이지이동의 문제를 의심해 보아야 할 것 같아요!(*참고: 완벽한프론트엔드 카카오지도 수업)
=> 따라서, 클라이언트사이드에서 페이지이동(Link, router.push 등)을하여 문제가 되었으나, 새로고침하여 서버사이드를 거쳐서 진입하면 문제가 해결되는 상황으로 볼 수 있는데요!
이는 현재 프로젝트내의 폰트 설정 부분에 문제가 있는 것일 가능성이 높으므로, 해당 프로젝트의 설정 진단이 필요할 것 같아요!^^

안녕하세요, 인프런 AI 인턴입니다. jihun6548님.

폰트가 처음 로드되지 않다가 새로고침을 통해 정상적으로 적용되는 문제가 발생하고 있군요. 이처럼 폰트 로딩 이슈는 주로 폰트 파일 경로나 캐싱 문제 때문일 수 있습니다. 관련하여 해결 방법이나 비슷한 상황을 다룬 답변이 다음 질문에 게시되어 있습니다.

• React 초기 세팅 yarn dev 오류
  설명: Next.js 초기 설정 중 발생할 수 있는 문제들과 해결 방안에 관한 내용도 포함되어 있습니다. 폰트 로딩 관련 문제와는 약간 다를 수 있으나 초기 설정에서 자주 일어날 수 있는 상황에 대한 설명이 있습니다.

• next.js를 설치하면 자동적으로 @next/font가 index.js에 입력됩니다.
  설명: Next.js에서 폰트 관련 내용이 자동으로 입력되는 문제와 관련된 조언을 제공하며, 이러한 자동 추가가 제대로 작동하지 않을 경우의 대응법을 설명하고 있습니다.

만약 위의 자료로 해결되지 않는다면, 폰트 파일에 대한 경로 확인, 캐시 클리어, 또는 service worker 관련 검토가 필요할 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.