[FE] CopyWebpackPlugin을 사용하여 favicon 적용 문제 해결

[Yoonkyoungme]

관련 이슈

• resolves: [FE] 배포된 사이트에서 favicon이 안 보이는 문제가 발생했어요 :( #347

작업 내용

문제 상황

Webpack은 기본적으로 src 디렉토리의 파일만 처리하므로, public 디렉토리에 있는 favicon 파일들은 처리 대상에서 제외됩니다.
그 결과, 빌드된 HTML 파일에서 favicon 파일의 경로가 올바르지 않게 설정되어 해당 파일을 불러올 수 없는 오류가 발생합니다.
아래 사진처럼 배포된 사이트에서 favicon이 적용되지 않는 문제가 발생하였습니다.

해결 방법

CopyWebpackPlugin 사용

여러 favicon 파일을 처리해야 하므로, CopyWebpackPlugin을 사용하여 모든 favicon 파일을 빌드 디렉토리로 복사하도록 설정했습니다.

npm install copy-webpack-plugin --save-dev

const CopyWebpackPlugin = require('copy-webpack-plugin');

// plugins 배열에 추가
new CopyWebpackPlugin({
  patterns: [
    { from: 'public/assets/favicons', to: 'assets/favicons' }
  ],
})

결과

build 디렉토리의 파일을 S3에 수동으로 배포하여 테스트해보았습니다.
배포된 사이트에서 아래의 이미지와 같이 favicon이 잘 표시되는 것을 확인하였습니다.👏

참고 자료

자세한 내용은 작업 현황 정리 노션을 참고해 주세요. :)

특이 사항

리뷰 요구사항 (선택)

[github-actions]

Test Results

5 tests   5 ✅  3s ⏱️
1 suites  0 💤
1 files    0 ❌

Results for commit 6383e98.

[Largopie]

군더더기 없이 설명이랑 왜 문제가 되었는지도 깔끔하게 작성해주셨네요! 👍 Approve는 드리지만, 질문 하나 남겨두었으니 확인 후 답변 부탁드립니다요~ 🔮 고생하셨어요!

[Largopie]

[Q]

궁금한 점이 있어서 여기 남겨봅니다!

기본적으로 src 하위에서 번들링을 진행하기 때문에 favicon은 번들 대상에 제외된다고 작성해주셨습니다! 그렇다면 src 하위로 favicon을 배치하면 함께 번들링이 되나요?

[Yoonkyoungme]

네 맞습니다! favicon 파일들을 src 디렉토리로 이동하면 웹팩의 기본 처리 대상에 포함될 수 있습니다.

만약 src 디렉토리로 favicon 관련 파일들을 이동하려면 몇 가지 추가 작업이 필요합니다.

1. 파일 처리 규칙 추가
   현재 webpack.common.js 파일에는 ico, webmanifest, xml 파일을 처리하는 규칙이 없으므로, 이를 설정해줘야 합니다.

2. CopyWebpackPlugin 제거
   favicon 관련 파일들을 src 디렉토리로 이동하고 위의 설정을 적용하면 CopyWebpackPlugin을 사용할 필요가 없어집니다.

여기까지 읽으면 “src에 넣는 것이 더 간편하지 않을까?” 라는 의문이 생길 수 있을 것 같아요.
하지만 favicon을 src가 아닌 public에 위치시킨 이유는 두 가지가 있었습니다.

1. 일반적인 관례
   일반적으로 favicon은 웹사이트의 루트에 위치합니다. Create React App(CRA)이나 Vite와 같은 주요 프레임워크들도 public 디렉토리에 favicon을 위치시키고 있습니다.
2. src와의 구분
   src 디렉토리는 주로 애플리케이션의 소스 코드와 컴포넌트에서 직접 import하여 사용하는 자원들을 위한 것입니다. 반면, favicon은 HTML에서 직접 참조되므로, src와 구분하여 public에 관리하는 것이 더 명확하다고 생각했습니다.

@hwinkr @Largopie 혹시 틀린 내용이 있거나 좀 더 논의하고 싶은 부분이 있다면 편하게 코멘트 남겨주세요 :)

[Largopie]

빙봉GPT 친절한 답변 감사드립니다~!

public 하위 폴더에는 정적 폴더를 위치시키는 것이 거의 정형화가 되어있기 때문에 public 하위 폴더로 배치하는 것은 문제가 되지 않으나, src 하위에 있더라도 Tree Shaking에 의해서 번들링에서 제외가 되지 않을까 싶어서 남긴 코멘트였습니다!

저번에 미션을 진행하면서 말했지만, 폰트같은 경우에는 번들에서 제외가 되는 현상이 있었어서 혹시나 싶은 마음에 남겼습니다요~!

[hwinkr]

favicon은 HTML에서 직접 참조되므로, src와 구분하여 public에 관리하는 것이 더 명확하다고 생각했습니다.

이 의견이 상당히 공감됩니다! 고생하셨어요~

[hwinkr]

👍 Approve는 드리지만

왜 저는 approve 안줘요... @Largopie

[hwinkr]

저도 낙타의 의견을 보니 같은 궁금증이 생기네요~

작업 고생하셨습니다 빙봉! 🔮