React 애플리케이션에 Favicon 추가
Webpack과 같은 모듈 번들러를 사용하면 이미지, 글꼴 및 스타일시트와 같은 중요한 프런트 엔드 자산을 하나의 출력 파일로 결합하여 최신 애플리케이션을 구축할 수 있습니다.
Favicon은 많은 웹 애플리케이션에서 사용되는 시각적 자산 중 하나입니다. 브라우저 탭에서 웹 페이지 제목 옆에 나타나는 아이콘입니다.
웹사이트에 브랜딩을 추가하고 경쟁업체와 구별하는 데 유용할 수 있습니다. 이 기사에서는 Webpack을 사용하여 React 애플리케이션에 파비콘을 추가하는 방법을 살펴봅니다.
react-favicon을 사용하여 애플리케이션 반응에 Favicon 추가
이것은 아마도 React 앱에 favicon을 추가하는 가장 쉬운 방법일 것입니다. 앱의 파비콘을 업데이트하려면 Favicon 구성 요소를 가져오고 url 속성을 파비콘으로 사용하려는 이미지의 URL과 동일하게 설정하기만 하면 됩니다.
예:
import Favicon from "react-favicon";
export default function App() {
return (
<div className="App">
<Favicon url="https://pbs.twimg.com/profile_images/1455185376876826625/s1AjSxph_400x400.jpg"></Favicon>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
우리의 전체 React 애플리케이션은 이 예제에서 하나의 App 구성 요소로 구성됩니다. 'react-favicon' 패키지에서 Favicon 구성 요소를 가져와 기본 <div> 컨테이너에 포함합니다.
구성 요소 트리의 어느 위치에나 구성 요소를 포함할 수 있으며 웹 사이트의 파비콘을 계속 업데이트합니다. 그런 다음 url 속성을 이미지(Google 로고)로 설정합니다.
이 라이브 데모를 열면 앱의 파비콘이 실제로 Google 로고로 설정되어 있는 것을 볼 수 있습니다.
html-webpack-plugin을 사용하여 애플리케이션 반응에 Favicon 추가
또는 html-webpack-plugin 도구를 설치하여 Webpack 모듈 번들을 웹사이트의 <head> 섹션에 포함하고 필요에 따라 사용할 수 있습니다.
설치가 완료되면 webpack.config.js를 편집해야 합니다. 일반적으로 배열인 플러그인 속성을 찾습니다.
해당 배열에 다음 값을 추가합니다.
new HtmlWebpackPlugin({favicon: './src/favicon.gif'})
이 솔루션이 작동하려면 favicon.gif 파일을 React 앱 프로젝트의 src 폴더에 추가해야 합니다.
이렇게 하면 빌드 폴더에서 favicon 파일을 사용할 수 있고 페이지의 최종 출력에서 사용할 수 있습니다.
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn