팀프로젝트 NOST 3일차

화면에 해상도 높은 이미지를 가져올 떄 걸리는 시간이 길어 흰 화면이 보임.

 

아래와 같이 url를 통해 가져왔었음.

 

backgroundImage: 'url("https://images.unsplash.com/photo-1491466424936-e304919aada7?q=80&w=1738&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")'

 

 

 

1. 사진을 다운받아 asset 폴더에 사진을 저장하고 불러오기

import winter from '../../shared/asset/image/winter.avif'

backgroundImage: `url(${winter})`,

 

 

2. 낮은 해상도의 이미지를 먼저 불러오고 높은 해상도의 이미지를 불러오기

 

다른 계절의 이미지와 비교하기 위해 우선 여름만 테스트 해봄

import spring from '../shared/asset/image/spring.avif'
import summer from '../shared/asset/image/summer.jpg'
import autumn from '../shared/asset/image/autumn.avif'
import winter from '../shared/asset/image/winter.avif'
import summerLow from '../shared/asset/image/summer_low.jpg'

  const seasonImage = {
    spring: spring,
    summer: summer,
    autumn: autumn,
    winter: winter
  };

  const seasonLowImage = {
    summer: summerLow,
  };
  
  
  {loading ? (
          <div className="loading-indicator">Loading...</div>
        ) : (
          <div className="image-container">
            <img src={seasonLowImage[currentSeason]} alt="Low Quality" className="low-quality" />
            <img src={seasonImage[currentSeason]} alt="High Quality" className={`high-quality ${loading ? 'loading' : 'loaded'}`} />
          </div>
        )}

 

 

해본 결과 지금까지 했었던 일 중에 가장 효율이 좋았음. Loading이 보였던 적이 없었음.

전체 코드

function App() {
  const { themes, setDarkMode, setThemeMode } = useThemeStore();
  const [currentSeason, setCurrentSeason] = useState('spring');
  const [loading, setLoading] = useState(true);

  const currentTheme = themes[currentSeason];

  const seasonImage = {
    spring: spring,
    summer: summer,
    autumn: autumn,
    winter: winter
  };

  const seasonLowImage = {

    summer: summerLow,
  };

  useEffect(() => {
    setLoading(true);
    const img = new Image();
    img.src = seasonImage[currentSeason];
    img.onload = () => setLoading(false);
  }, [currentSeason]);


  const handleSeasonChange = (season) => {
    setCurrentSeason(season);
    if (season === 'winter' || season === 'summer') {
      setDarkMode(true);
    } else {
      setDarkMode(false);
    }
    if (season === 'autumn' || season === 'winter') {
      setThemeMode(true);
    } else {
      setThemeMode(false);
    }
  };

  return (
    <div className="App" style={{ backgroundColor: currentTheme.primary, color: currentTheme.textColor }}>
      <div className="theme-toggles">
        <ThemeMode currentSeason={currentSeason} setSeason={handleSeasonChange} />
      </div>
      <div className="background">
        {loading ? (
          <div className="loading-indicator">Loading...</div>
        ) : (
          <div className="image-container">
            <img src={seasonLowImage[currentSeason]} alt="Low Quality" className="low-quality" />
            <img src={seasonImage[currentSeason]} alt="High Quality" className={`high-quality ${loading ? 'loading' : 'loaded'}`} />
          </div>
        )}
        <BrowserRouter>
          <AppRouter />
        </BrowserRouter>
      </div>
    </div>
  );
}

 

 

3. 웹페이지를 처음 열 때 보안 관련 페이지를 뛰우고 홈페이지에 LazyLoading을 사용하여 0.5초의 시간을 준 뒤 나머지 이미지들도 준비하려고 했었음. (2번에서 만족하여 나중에 시도할 예정)

 

이외에도 'react-loading-skeleton'도 알아봤었는데 이것은 데이터를 가져올 동안 틀을 미리 보여주는 것이었다.

아직은 사용할 일이 없을 것 같다.

 

 

 

4. 2번을 사용해도 흰화면이 가끔 보였음. 차라리 기존의 화면에 새로운 화면을 가져와 스택을 쌓는 형식으로 변경함.

그리고 스택이 많이 쌓였을 때 최신 이미지를 제외하고 다시 지움.

 

-> (변경) 스택형식은 비슷하지만 낮은 퀄리티와 높은 퀄리티로 나누어서 관리함. 계절을 변경할 때마다 이전 이미지들은 제거하고 최신의 이미지만 저장.

 

5. pictures 태크의 활용

 

정의 및 특징
<picture> 태그는 <img> 요소의 다중 이미지 리소스(multiple image resources)를 위한 컨테이너를 정의할 때 사용합니다.

<picture> 요소는 뷰포트(viewport)의 너비에 따라 커지거나 작아지는 하나의 이미지를 사용하는 대신 서로 다른 디스플레이나 기기에서 해당 뷰포트에 알맞게 채워질 수 있도록 여러 개의 이미지 중에서 적절한 이미지를 사용할 수 있도록 해줍니다. 이러한 <picture> 요소는 웹 개발자가 이미지의 리소스를 보다 유연하게 지정할 수 있도록 해주므로, 반응형 디자인(responsive design)에서 주로 사용합니다.

<picture> 요소는 0개 이상의 <source> 요소와 하나의 <img> 요소로 구성되며, 브라우저는 <source> 요소 중에서 해당 뷰포트와 가장 잘 어울리는 <source> 요소를 다음과 같은 방법을 사용하여 선택합니다.

브라우저는 <source> 요소들의 속성값을 각각 확인해 나가며 조건을 만족하는 첫 번째 <source> 요소를 사용하고, 나머지 <source> 요소들은 무시합니다. 이 때 <img> 요소는 <picture> 요소의 자식 요소 중에서 가장 마지막에 위치해야 합니다. 이러한 <img> 요소는 <picture> 요소를 지원하지 않는 브라우저를 위한 하위 호환성(backward compatibility)을 위해 사용되거나 명시된 <source> 요소가 모두 조건을 만족하지 못 할 경우 사용됩니다.

예제
<picture>
    <source media="(min-width: 700px)" srcset="/examples/images/people_960.jpg">
    <source media="(min-width: 400px)" srcset="/examples/images/people_575.jpg">
    <img src="/examples/images/people_200.jpg" alt="People">
</picture>