문제 정의

비교적 오래된 외부 라이브러리(예: nipple.js)를 임포트하여 사용해야 했습니다. use client 를 컴포넌트 상단에 추가했음에도 불구하고, Next.js는 여전히 서버 측에서도 해당 라이브러리를 한번 실행하려 했습니다. 이로 인해 서버 사이드 렌더링 시 window is undefined 등의 오류가 발생하여 애플리케이션이 정상적으로 동작하지 않는 문제가 발생했습니다.

해결 과정

이 문제를 해결하기 위해 Next.js에서 제공하는 동적 임포트(Dynamic Import) 기능을 활용하여 클라이언트 사이드에서만 라이브러리를 로드하도록 설정했습니다. 초기 시도에서 dynamic() 함수를 사용하여 동적 로드하는 방식으로 접근했으나, nipple.js와 같은 일반 라이브러리는 JSX 컴포넌트가 아니기 때문에 제대로 로드되지 않는 문제가 있었습니다. 따라서, 일반 라이브러리에 적합한 동적 임포트 방식을 사용해야 했습니다.

1. dynamic() 함수

• dynamic() 함수는 JSX 컴포넌트를 로드하는 함수였습니다.
• 일반 JavaScript 라이브러리(예: nipple.js, fuse.js 등)를 로드할 때는 dynamic() 함수 대신 import() 함수를 직접 사용해야 함을 인식했습니다.

2. 동적 임포트(import())를 활용한 해결 방법 도입

• import() 함수를 사용하여 클라이언트 사이드에서만 라이브러리를 로드하도록 설정했습니다.
• 이를 통해 서버 사이드 렌더링 시 라이브러리가 실행되지 않도록 방지하고, window is undefined 오류를 해결했습니다.

예시 코드:

// components/MapComponent.tsx
'use client';

import React, { useEffect } from 'react';

const MapComponent = () => {
  useEffect(() => {
    const loadNipple = async () => {
      if (typeof window !== 'undefined') {
        const nipple = (await import('nipplejs')).default;
        // nipple.js 초기화 로직
        nipple.create({
          zone: document.getElementById('joystick-zone'),
          mode: 'static',
          position: { left: '50%', top: '50%' },
          color: 'red',
        });
      }
    };

    loadNipple();
  }, []);

  return <div id="joystick-zone" style={{ width: '200px', height: '200px' }}></div>;
};

export default MapComponent;

3. 일반 라이브러리의 동적 임포트 구현

• dynamic() 함수를 사용하지 않고, import() 함수를 직접 호출하여 라이브러리를 로드했습니다.
• 이를 통해 클라이언트 사이드에서만 라이브러리가 로드되고 실행되도록 보장했습니다.

// components/FuseSearch.tsx
'use client';

import React, { useEffect, useState } from 'react';

const FuseSearch = () => {
  const [Fuse, setFuse] = useState(null);
  const [searchResults, setSearchResults] = useState([]);

  useEffect(() => {
    const loadFuse = async () => {
      const fuseModule = await import('fuse.js');
      setFuse(fuseModule.default);
    };

    loadFuse();
  }, []);

  const handleSearch = (query) => {
    if (Fuse) {
      const fuse = new Fuse(data, options);
      const results = fuse.search(query);
      setSearchResults(results);
    }
  };

  return (
    <div>
      <input type="text" onChange={(e) => handleSearch(e.target.value)} />
      <ul>
        {searchResults.map((result, index) => (
          <li key={index}>{result.item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default FuseSearch;

결과

동적 임포트 방식을 적용한 후 다음과 같은 개선 효과를 얻었습니다:

• 서버 사이드 에러 해결: 외부 라이브러리를 클라이언트 사이드에서만 로드하도록 설정하여 window is undefined 오류를 완전히 해결할 수 있었습니다.
• 성능 최적화: 필요할 때만 라이브러리를 로드하여 초기 로딩 시간을 단축하고, 불필요한 리소스 로드를 방지했습니다.
• 안정성 강화: 서버 사이드 렌더링 시 발생할 수 있는 오류를 사전에 방지하여 애플리케이션의 안정성을 크게 향상시켰습니다.

배운 점 (인사이트)

• 동적 임포트의 유연성: Next.js의 import() 함수를 활용하여 클라이언트 사이드 전용 라이브러리를 동적으로 로드할 수 있다는 점을 배웠습니다. 이는 서버 사이드 렌더링 환경에서 발생할 수 있는 다양한 문제를 효과적으로 해결할 수 있게 해줍니다.
• dynamic() 함수의 한계 이해: dynamic() 함수는 주로 JSX 컴포넌트를 동적으로 로드하는 데 최적화되어 있으며, 일반 라이브러리에는 적합하지 않다는 점을 인식하게 되었습니다.
• 조건부 라이브러리 로딩: 클라이언트 사이드에서만 필요한 라이브러리를 조건부로 로드함으로써, 성능을 최적화하고 불필요한 리소스 사용을 줄일 수 있음을 깨달았습니다.
• Next.js의 클라이언트 컴포넌트 지시자 이해: 'use client' 의 역할과 한계를 이해하고, 클라이언트 사이드 전용 코드 작성을 보다 효과적으로 관리할 수 있게 되었습니다.