조각조각 - react-full-page

eocode·2023년 4월 6일

fullPage.js 조각조각

리액트 조각조각

목록 보기

5/11

react-full-page

진행중인 개인 프로젝트에서 랜딩 페이지를 만들기 위해 react-full-page를 사용하였습니다. react-full-page의 사용법과 사용중 맞이한 에러와 대처법 대해 정리해 보겠습니다.

react-full-page 사용

아래 쉘 명령어를 통해 react-full-page를 설치합니다.

npm i react-full-page

이후 아래 기본 코드로 full-page 컴포넌트를 추가합니다.

import React from "react";
import { FullPage, Slide } from "react-full-page";

const FullScreen = () => {
  return (
    <FullPage>
      <Slide>
        <h1>Inner slide content</h1>
      </Slide>
      <Slide>
        <h1>Another slide content</h1>
      </Slide>
      <Slide>
        <h1>Another slide content</h1>
      </Slide>
    </FullPage>
  );
};

export default FullScreen;

기본 예제 코드를 붙여넣기만 했는데 에러가 발생합니다... :(
무슨 에러인지 살펴보겠습니다.

implicitly has an 'any' type 에러 발생

Could not find a declaration file for module 'react-full-page'. '/Users/euno/Desktop/seoa/front/node_modules/react-full-page/lib/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/react-full-page if it exists or add a new declaration (.d.ts) file containing declare module 'react-full-page';ts(7016)
react-full-page에서 any타입을 사용하기 때문에 에러가 발생하고 있습니다.

현재 코드가 작성된 프로젝트의 경우 타입스크립트를 사용하며 any 타입을 사용하지 못하도록 eslint 설정이 되어있습니다. 따라서 사용되는 모든 변수의 타입을 지정해주어야합니다. 즉 사용하는 라이브러리 코드의 변수도 타입이 지정되어야 합니다.

npm i --save-dev @types/react-full-page

라이브러리 자체에서 타입이 이미 지정되어있다면 위 같은 명령어를 통해 타입 설정이 가능합니다. 하지만 react-full-page 라이브러리의 경우 타입지정이 되어있지 않아 위 명령어를 실행해서 에러가 해결되지 않았습니다.

any type 에러 해결법 - 1

🔗 I Learn || typescript를 지원하지 않는 라이브러리를 사용해야 할 때
구글링을 통해 같은 문제의 해결법을 정리해주신 좋은 블로그글을 찾았습니다. ㅎㅎㅎ 모듈 내 index.d.ts파일을 만들고 타입을 지정해주면 문제가 해결된다고 나와있습니다.

//index.d.ts
declare module "react-full-page" {
  type ControlComponentsProps = {
    getCurrentSlideIndex: () => number;
    onNext: () => void;
    onPrev: () => void;
    scrollToSlide: (n: number) => void;
    slidesCount: number;
    children: React.ReactNode;
  };

  type FullPageProps = {
    initialSlide?: number;
    duration?: number;
    controls?: boolean | React.FC<ControlComponentsProps>;
    controlProps?: any;
    beforeChange?: () => void;
    afterChange?: () => void;
    scrollMode?: "full-page" | "normal";
    children: React.ReactNode;
  };

  type SlideProps = {
    children: React.ReactNode;
    style?: { maxHeight: string };
  };

  export const FullPage: React.FC<FullPageProps>;

  export const Slide: React.FC<SlideProps>;
}

any type 에러 해결법 - 2

하지만 여기서 의문이 듭니다. 프로젝트에서 노드모듈은 gitignore 처리되어있습니다. 따라서 노드모듈 내 파일인 index.d.ts 협업하고 다른 곳에서 코드를 내려 받아 사용할때마다 위 코드를 일일히 추가해주어야 합니다.

일일히 코드를 추가하는 방법 대신 저 부분에서만 eslint를 무시하는 방법이 있을까 검색을 해보았습니다. 아래 두줄의 코드를 사용하여 라이브러리에서 eslint가 동작하지 않도록 설정 가능합니다.

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore

수정 코드

import React from "react";
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { FullPage, Slide } from "react-full-page";

const FullScreen = () => {
  return (
    <FullPage>
      <Slide>
        <h1>Inner slide content</h1>
      </Slide>
      <Slide>
        <h1>Another slide content</h1>
      </Slide>
      <Slide>
        <h1>Another slide content</h1>
      </Slide>
    </FullPage>
  );
};

export default FullScreen;

정리

하지만 두번째 방법은 라이브러리에서 eslint 적용하지 않는 방식이기 때문에 예상치 못한 오류가 발생할 수 있습니다.(올바르게 타입스크립트를 사용하는 방식도 아닌거 같고...) 따라서 타입을 지정해주는 방식이 안전하다 생각됩니다. 일단 이번 프로젝트는 이렇게 진행하지만 추후 타입스크립트를 지원하는 다른 라이브러리를 사용하든 다른 안전한 방식을 찾아봐야 할듯 싶습니다.