리액트 로컬 폰트가 리눅스에서만 적용이 안 되던 이유 (Feat. 대소문자 파일명)

이 글에서는 리액트 프로젝트의 로컬 폰트를 사용 하던 중
Linux 환경에서만 로드되지 않던 문제를 해결한 경험을 다룹니다

목차

1. Mac이랑 Windows는 되는데 Linux만 안 되네?
2. 범인은 대소문자
3. 느낀점과 예방 방법

Mac이랑 Windows는 되는데 Linux만 안 되네?

React 사이드 프로젝트를 하던중
Pretendard 를 로컬 폰트로 적용했는데,
이상한 현상이 발생했습니다

맥이랑 윈도우에서는 분명 폰트가 잘 적용되는데,
이상하게 리눅스 환경에서만 폰트가 적용되지 않았습니다
(인텔리제이 IDE 원격 개발로 리눅스 OS 환경에서 개발을 하고 있었습니다)

윈도우

리눅스

처음엔 이런 것들을 의심했습니다:

• IntelliJ 원격 개발 환경 문제?
• Linux 서버에 특별한 설정이 필요한가?

범인은 대소문자

그러다 문득 리눅스는 대소문자를 구분한다는 사실이 생각났습니다
IDE를 열고 폰트가 적용된 CSS 파일을 확인 해봤는데

아주 친절하게 IDE 내에 빨간줄까지 표시되어 있었습니다

실제 폰트 파일명: Pretendard-Regular.woff2
CSS에서 참조: pretendard-regular.woff2

해결 방법은 너무 간단해서 허무하지만 파일명을 맞춰주면 됩니다

느낀점과 예방 방법

먼저 이 경험을 통해 왜 케밥 케이스를 선호하는 개발자들이 있는지 이해하게 되었습니다

맥은 유닉스 계열인데 왜 대소문자 구분을 안 하지?

macOS도 Unix 기반이지만, Apple이 사용자 편의성을 위해 파일 시스템의 기본값을 대소문자 구분 안 함으로 설정했기 때문입니다 디스크 유틸리티에서 APFS (대소문자 구분) 옵션을 선택할 수도 있습니다

예방 방법

1. 처음부터 소문자로 통일하기

components/
  user-profile.jsx
  header.jsx
hooks/
  use-auth.js
  use-modal.js

2. ESLint 플러그인 사용

// .eslintrc.js
module.exports = {
  plugins: ['filenames'],
  rules: {
    'filenames/match-regex': ['error', '^[a-z0-9\\-\\.]+$', true]
  }
};