TIL 88

React에서 Favicon 및 탭 이미지 설정하기

1. Favicon 설정 방법

React 프로젝트에서 Favicon을 설정하려면 public/index.html 파일에 <link> 태그를 추가해야 합니다.

<link rel="icon" href="%PUBLIC_URL%/book.png" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/book.png" />

• %PUBLIC_URL%의 의미 : React의 public 폴더 경로를 참조하기 위한 placeholder로, 빌드 후 정적 파일 경로를 자동으로 설정합니다.
• rel="apple-touch-icon" : iOS 기기에서 홈 화면에 아이콘으로 추가할 때 사용됩니다.

---

2. 발생한 문제

1. 탭 아이콘이 변경되지 않았습니다.
2. 아이콘 경로가 올바르게 설정되지 않았습니다.
3. 브라우저 캐시로 인해 이전 아이콘이 계속 표시됐습니다.

---

3. 문제 해결 방법

1. 경로 확인
   • public 폴더에 book.png 파일이 올바르게 위치했는지 확인했습니다.
   • 브라우저에서 /book.png로 접근해 파일이 표시되는지 테스트했습니다.
2. 브라우저 캐시 초기화
   • 캐시 비활성화 후 새로고침(개발자 도구 → 네트워크 → Disable cache)했습니다.
   • 또는 쿼리 문자열을 추가했습니다.

<link rel="icon" href="%PUBLIC_URL%/book.png?v=1" />

 

3. 파일 형식 및 크기 확인

• Favicon은 일반적으로 .ico, .png, 또는 .svg 형식을 사용하며, 권장 크기는 16x16, 32x32, 또는 64x64입니다.

---

4. JavaScript로 Favicon 동적으로 설정하기

React 컴포넌트에서 document.querySelector를 사용하여 아이콘을 동적으로 변경할 수도 있습니다.

import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    const favicon = document.querySelector("link[rel='icon']");
    if (favicon) {
      favicon.href = `${process.env.PUBLIC_URL}/book.png`;
    }
  }, []);

  return <div>React App</div>;
}

export default App;

---

5. 배운 점

• %PUBLIC_URL%는 public 폴더에 있는 정적 파일을 참조하기 위한 React의 편리한 방식입니다.
• 브라우저는 Favicon을 강하게 캐싱하므로 캐시 문제를 고려해야 합니다.
• JavaScript로 Favicon을 동적으로 설정하는 방법을 활용하면, 앱의 상태에 따라 아이콘을 유연하게 변경할 수 있습니다.

---

6. 앞으로 활용

React 프로젝트에서 사용자 경험을 향상시키기 위해 Favicon을 동적으로 설정하거나 다양한 기기에서 최적화된 아이콘을 제공하는 방법을 실습해볼 것입니다.

---

자동 스크롤 로직 구현

 

1. 목표

• popQuizMessage가 나타날 때, 스크롤 위치와 관계없이 자동으로 맨 아래로 이동하도록 설정했습니다.
• 스크롤이 이미 바닥 근처(150px 이하)에 있을 때만 자동으로 맨 아래로 이동하도록 제한했습니다.

---

2. 문제

• 초기 코드에서 스크롤이 어디에 있든 상관없이 자동 스크롤이 발생했습니다.
• 원하는 동작은 popQuizMessage가 나타날 때 또는 스크롤이 바닥에 가까울 때만 자동 스크롤이 작동하도록 하는 것이었습니다.

---

3. 해결 방법

• 스크롤 위치를 계산하여 조건을 추가했습니다.
  1. distanceFromBottom 계산 : 스크롤 컨테이너에서 바닥까지의 거리를 계산할 수 있습니다.
  2. 조건 확인 : distanceFromBottom <= 150인 경우, 즉 스크롤이 바닥 근처에 있을 때만 자동 스크롤이 되게 할 수 있습니다.
  3. popQuizMessage 확인 : popQuizMessage가 true일 때도 강제로 맨 아래로 이동시킬 수 있습니다.

useEffect(() => {
    const container = chatContainerRef.current;
    if (container) {
        // 스크롤이 바닥에서 얼마나 떨어져 있는지 계산
        const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
        console.log("distanceFromBottom:", distanceFromBottom);

        // 스크롤이 바닥에서 150px 이하일 때만 자동 스크롤
        const isAtBottom = distanceFromBottom <= 150;

        // popQuizMessage가 true일 때만, 또는 스크롤이 바닥에 가까운 경우만 스크롤을 맨 아래로
        if (popQuizMessage || isAtBottom) {
            container.scrollTop = container.scrollHeight;
        }
    }
}, [popQuizMessage, messages]);

---

5. 배운 점

• 스크롤 위치 계산 : scrollHeight - scrollTop - clientHeight를 사용해 스크롤 위치를 계산할 수 있었습니다.