React fullpage 에러 해결하기

 

Fullpage 란?

요즈음, 스크롤을 한 번 슥슥 내릴 때마다 화면 전체가 슬라이드처럼 내려가는 효과를  입힌 웹사이트를 여러 곳에서 발견할 수 있다. 최근에 개인적으로 가장 인상깊었던 사이트는 티맵모빌리티 웹사이트인데, 동영상과 fullpage를 적절히 잘 사용했다고 생각했다.

 

 

리액트 fullpage 에러

모듈 '@fullpage/react-fullpage'에 대한 선언 파일을 찾을 수 없습니다. '[프로젝트명]/node_modules/@fullpage/react-fullpage/dist/react-fullpage.js'에는 암시적으로 'any' 형식이 포함됩니다. 해당 항목이 있는 경우 'npm i --save-dev @types/fullpage__react-fullpage'을(를) 시도하거나, 'declare module '@fullpage/react-fullpage';'을(를) 포함하는 새 선언(.d.ts) 파일 추가 ts(7016)

Could not find a declaration file for module '@fullpage/react-fullpage'. '/Users/1111594/Documents/Projects/diaas/d211020/diaas-frontend/node_modules/@fullpage/react-fullpage/dist/react-fullpage.js' implicitly has an 'any' type. Try `npm i --save-dev @types/fullpage__react-fullpage` if it exists or add a new declaration (.d.ts) file containing `declare module '@fullpage/react-fullpage';` TS7016

 

에러 해결

react fullpage가 type declare가 안되서라는데 아래의 코드를 복사해서 index.d.ts에 담아서 @fullpage/react-fullpage 위치에 넣어주니 문제가 해결되었다.

declare module '@fullpage/react-fullpage' {
    export interface fullpageOptions {
        anchors?: string[]
        animateAnchor?: boolean
        autoScrolling?: boolean
        bigSectionsDestination?: any //top, bottom, null
        continuousHorizontal?: boolean
        continuousVertical?: boolean
        controlArrowColor?: string
        controlArrows?: boolean
        css3?: boolean
        dragAndMove?: any //true, false, ‘horizontal’, ‘fingersonly’
        easing?: string
        easingcss3?: string
        fadingEffect?: any //true, false, ‘sections’, ‘slides’
        fitToSection?: boolean
        fitToSectionDelay?: number
        fixedElements?: string // ‘#header, .footer’
        hybrid?: boolean
        interlockedSlides?: any // true, false, [1, 3, 5]
        keyboardScrolling?: boolean
        lazyLoading?: boolean
        licenseKey?: string
        lockAnchors?: boolean
        loopBottom?: boolean
        loopHorizontal?: boolean
        loopTop?: boolean
        menu?: string
        navigation?: boolean
        navigationPosition?: string
        navigationTooltips?: string[] // [‘firstSlide’, ‘secondSlide’]
        normalScrollElementTouchThreshold?: number
        normalScrollElements?: string // ‘#element1, .element2’,
        offsetSections?: boolean
        paddingBottom?: string
        paddingTop?: string
        parallax?: any // true, false, ‘sections’, ‘slides’
        parallaxOptions?: {
            percentage?: number
            property?: string
            type?: string
        }
        recordHistory?: boolean
        resetSliders?: boolean
        responsive?: number
        responsiveHeight?: number
        responsiveSlides?: boolean
        responsiveWidth?: number
        scrollBar?: boolean
        scrollHorizontally?: boolean
        scrollOverflow?: boolean
        scrollOverflowHandler?: any
        scrollOverflowOptions?: any
        scrollOverflowReset?: boolean
        scrollingSpeed?: number
        sectionSelector?: string
        sectionsColor?: string[]
        showActiveTooltip?: boolean
        slideSelector?: string
        slidesNavPosition?: string
        slidesNavigation?: boolean
        touchSensitivity?: number
        v2compatible?: boolean
        verticalCentered?: boolean
        /* callback and events */
        afterLoad?(origin?: any, destination?: any, direction?: any): void
        afterRender?(): void
        afterResize?(width: number, height: number): void
        afterReBuild?(): void
        afterResponsive?(isResponsive?: any): void
        afterSlideLoad?(section?: any, origin?: any, destination?: any, direction?: any): void
        onLeave?(origin?: any, destination?: any, direction?: any): void
        onSlideLeave?(section?: any, origin?: any, destination?: any, direction?: any): void
        /* keys for extensions */
        fadingEffectKey?: string
        responsiveSlidesKey?: string
        continuousHorizontalKey?: string
        interlockedSlidesKey?: string
        scrollHorizontallyKey?: string
        resetSlidersKey?: string
        offsetSectionsKey?: string
        dragAndMoveKey?: string
        parallaxKey?: string
        /* end key sections */
    }
    export interface fullpageApi {
        continuousHorizontal: any
        dragAndMove: any
        fadingEffect: any
        interlockedSlides: any
        offsetSections: any
        parallax: any
        resetSliders: any
        responsiveSlides: any
        scrollHorizontally: any
        scrollOverflowReset: any
        version: string
        destroy(n?: any): void
        fitToSection(): void
        getActiveSection(): any
        getActiveSlide(): any
        getFullpageData(): any
        landscapeScroll(e?: any, t?: any, n?: any): void
        moveSectionDown(): void
        moveSectionUp(): void
        moveSlideLeft(e?: any): void
        moveSlideRight(e?: any): void
        moveTo(e?: any, t?: any): void
        reBuild(t?: any): void
        setAllowScrolling(e?: any, t?: any): void
        setAutoScrolling(e?: any, t?: any): void
        setFitToSection(e?: any, t?: any): void
        setKeyboardScrolling(e?: any, t?: any): void
        setLockAnchors(e?: any): void
        setMouseWheelScrolling(n?: any): void
        setRecordHistory(e?: any, t?: any): void
        setResponsive(e?: any): void
        setScrollingSpeed(e?: any, t?: any): void
        silentMoveTo(e?: any, t?: any): void
        shared: {
            afterRenderActions(): void
        }
        test: {
            left: number[]
            top: string
            translate3d: string
            translate3dH: string[]
            setAutoScrolling(e?: any, t?: any): void
            options: fullpageOptions
        }
    }
    interface FullPageProps extends fullpageOptions {
        licenseKey?: string
        render: (comp: { state: any; fullpageApi: fullpageApi }) => React.ReactElement | void
        debug?: boolean
        pluginWrapper?: () => void
    }
    class ReactFullpage extends React.Component<FullPageProps> {}
    interface WrapperProps {
        children: React.ReactNode
    }
    namespace ReactFullpage {
        function Wrapper(props: WrapperProps): React.ReactElement
    }
    export default ReactFullpage
}