[250429] TIL

Today I Learned (2025-04-29)

코딩 테스트 준비

• 자바스크립트 코딩테스트 핵심로직 12가지 학습 시작
• 내일 코딩테스트를 위한 부분적 학습 진행

프로젝트 환경 설정

개발 환경 구성

• 프리티어(Prettier)
• ESLint
• Husky
• 필요 라이브러리 설치
• Storybook 설정

프로젝트 기본 설정

• 모바일 우선 반응형 디자인 구성 시작
• Next.js 폰트 설정 방법 학습

회의 참석

• 1시 정기 회의
• 3시 PL 미팅

---

오늘은 프로젝트의 기본적인 개발 환경을 구성하고, Next.js 에서 ‘Next/font/local’ 를 사용하여 폰트 설정 방법을 학습했다.
폰트를 src 폴더에 둘 지, public 폴더에 둘 지 많이 고민했는데, 최종적으로는 src 폴더에 두는 것이 좋다고 생각했다.

정리한 내용은 아래와 같다.

📁 public 폴더에 폰트 넣기

🔹 장점

1. 자동 제공: public 폴더에 넣은 파일은 별도의 설정 없이 URL로 접근 가능하므로 사용이 간편하다.
   • 예: /fonts/PretendardVariable.woff2
2. 서버에 영향 없음: public 폴더에 넣으면 번들링되지 않으므로, 웹 서버에서 직접 요청하고 제공된다.

🔸 단점

1. 최적화 부족: public 폴더에 넣은 폰트 파일은 Next.js의 next/font 최적화 기능을 사용하지 않기 때문에, 로딩 성능이나 캐싱에서 최적화가 부족할 수 있다.
2. 외부 요청: 클라이언트가 폰트를 로드할 때, 외부에서 직접 요청해야 하므로, 추가적인 네트워크 요청이 발생한다. 특히 서버 사이드 렌더링(SSR)에서 성능에 영향을 미칠 수 있다.

📊 언제 사용해야 할까?

• 간단한 프로젝트: 프로젝트가 간단하고 성능 최적화가 크게 중요한 상황이 아닐 때.
• 외부 파일: 서버 측에서 폰트를 직접 제공하려는 경우.

📁 src/shared/fonts 폴더에 폰트 넣기 (추천)

🔹 장점

1. 폰트 최적화: next/font/local을 사용하면, Next.js의 빌드 최적화를 통해 폰트를 번들에 포함시킬 수 있고, 크로스 브라우징 최적화(font-display: swap)도 자동으로 처리된다.
   • 폰트는 번들로 묶여서 제공되며, 별도의 외부 요청 없이 로딩된다.
2. 전역 설정 관리: src/shared/fonts 폴더에 폰트를 넣으면, 프로젝트 내에서 폰트를 관리하는 것이 훨씬 깔끔하고 유지보수가 쉬워진다.
3. SSR 최적화: 서버 측에서 폰트를 최적화하여 로드하는 방식이므로, 렌더링 성능과 로딩 시간에서 장점이 있다.

🔸 단점

1. 경로 관리 필요: 상대 경로로 폰트를 불러와야 하므로, 경로 설정이 번거로울 수 있다.
2. 빌드 후 폰트 크기 증가: 폰트를 번들에 포함시키면, 번들 크기가 커질 수 있다는 점을 고려해야 한다.

📊 언제 사용해야 할까?

• 성능 최적화가 중요한 프로젝트: 폰트 로딩 성능, SSR, 사용자 경험을 최적화하고 싶은 경우.
• 더 나은 관리: 프로젝트 내에서 폰트를 관리하고 최적화하려는 경우.