React
Vite 기반 리액트 프로젝트와 Next.js 프로젝트에서 폰트 Preload 구현
폰트 최적화 알아보기에서 설명한 폰트 preload를 실제로 구현해봤습니다.Vite 기반 리액트 프로젝트폰트 파일, CSS 파일, JS 파일 등 정적 파일은 빌드되면 BMYEONSUNG-94085197.woff2 같이 파일 이름 뒤에 해쉬값이 붙습니다. 이는 빌드 전에는 어떤 해쉬값이 붙을지 알 수 없습니다. 따라서 폰트 Preload를 할 때 아래와 같이 단순히 파일명만 지정하면 프로덕트에서 해당 폰트 파일을 찾을 수 없습니다.관련 Vite 플러그인을 설치빌드된 HTML 파일에 를 삽입하기 위해 관련 플러그인을 설치합니다.npm i -D vite-plugin-inject-preload플러그인 설정vite.config.ts 파일에 설치한 플러그인을 등록합니다. match 속성에 preload하고 싶은 ..
