프론트엔드 개발

Webpack과 Bundle.js Webpack은 css,js,file 등을 하나의 파일로 만드는 만큼 용량이 클 수 밖에 없습니다. 어떻게 이 용량을 줄일 수 있는 지 알아보겠습니다. 성능 측정 PageSpeed Insights 측정 도구 Tool: @next/bundle-analyzer cmd yarn add @next/bundle-analyzer next.config.js const withPlugins = require('next-compose-plugins') const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true', }) module.exports = withPlugin..

웹 폰트를 무작정 가지고 올 때는 CDN을 이용하여 폰트를 가져오고 있었습니다. 매번 폰트를 가져오기 위해서 CDN 네트워크 통신을 하게 되는 점과, 웹 폰트를 가져올 때의 UX를 개선시킬 수 있을까 하는 고민을 했습니다. 이용하는 cdn 서버가 가깝지 않다면? 처음 웹에 들어갔을 때 폰트가 없어졌다가 생기는 것과같이 불편하게 보여진다면? cdn 서버가 멀게 되면 폰트를 직접 다운로드하여서 사용하면 네트워크 비용을 줄일 수 있지 않을까?라는 생각을 했고, 브라우저에서 렌더링 차단 처리 방식을 이해하여 웹 폰트 최적화하는 방법을 알고 적용시키고자 합니다. 웹 폰트의 사용 방법 naver D2의 글에서는, 웹폰트의 기본 사용방법을 설명합니다. CSS의 @font-face 규칙 font-family: 사용할 ..