[리액트 React] fullPage 사용하기 / 100vh 스크롤 이벤트 / 100vh scroll / Type annotations can only be used in TypeScript files. / IScroll is not defined.

* 2022.10.09 내용 추가 : anchorLink 인자를 사용하는 방법을 추가했습니다.

 

 

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅은

제가 회사에서 너무너무너무너어어어무 고생하다가 찾아낸 리액트 fullPage 스크롤 이벤트에 대해 공유하려 합니다.

해보니까 그리 어려운 건 아니었는데.. 저는 코린이라 한참 헤맸네요^_ㅠ

 

완성화면을 gif로 보여드리고 싶으나,

회사의 저작권이 있기 때문에 말로 간략하게 설명해드리자면

'스크롤 내릴 때 화면이 하나씩 보여지는 것'인데요.

글로 봤을 떄 이해가 안 되신다면 해당 홈페이지를 들어가서 확인해 보세요.

react-fullpage.js - Official React.js component for fullPage.js

 

fullPage 사용법

  1. 터미널 열어서 명령어 입력

yarn add fullpage.js@2.9.6 jquery
yarn add -D @types/jquery

 

 

  2. import 및 코드 입력

import React from 'react';
import 'fullpage.js/vendors/scrolloverflow';
import 'fullpage.js';
import 'fullpage.js/dist/jquery.fullpage.min.css';
import $ from 'jquery';

export default function FullPageLanding(): JSX.Element {
  $((): void => { // 여기서 에러 발생할 수 있음. 해결방법 하단에 적어놨음.
    $('#fullpage').fullpage({
        scrollOverflow: true,
        navigation: true,
        scrollHorizontally: true,
        showActiveTooltip: true,
        scrollingSpeed: 800,
        fitToSection: true,
        fitToSectionDelay: 1200,
         // 화면별 전환
        afterLoad: function (index, anchorLink) {
          if (anchorLink === 1) {
			// 화면별 넣고 싶은 이벤트
          } else if (anchorLink === 2) {
			// 화면별 넣고 싶은 이벤트
          } else if (anchorLink === 3) {
			// 화면별 넣고 싶은 이벤트
          }
        },
    });
  });
  
  return (
    <div id="fullpage">
      <div className="section">first page</div>
      <div className="section">second page</div>
      <div className="section">third page</div>
    </div>
  );
}

 

 

  3. 에러 발생 및 해결 (에러 발생하지 않았다면 넘어가셔도 됩니다.)

Type annotations can only be used in TypeScript files.

라는 에러가 떴습니다.

 

코드를 봐볼게요.

여기서 사용한 state들은 무시해 주세요.

에러 

 void에 빨간색 밑줄이 보입니다.

해당 에러는 유형 주석은 TypeScript파일에서만 사용할 수 있습니다. 라는 뜻입니다.

저는 아래 이미지처럼 그냥 ': void' 내용을 삭제해서 에러를 해결했습니다.

 

  4. 또 에러발생 및 해결 (에러 발생하지 않았다면 넘어가셔도 됩니다.)

ReferenceError: IScroll is not defined.

IScroll을 찾을 수 없다...라는 에러가 발생했는데요.

 

해결 방법은

먼저, 터미널에 해당 명령어를 입력해 줍니다.

yarn add -D react-app-rewired
yarn add iscroll

 

그리고 프로젝트 경로에 config-overrides.js 라는 파일을 생성해 주세요.

해당 파일을 열어 아래 코드를 입력합니다.

const webpack = require('webpack');

module.exports = {
  webpack: function(config, env) {
    config.plugins.push(new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      IScroll: 'iscroll',
    }));
    return config;
  },
};

 

그 다음, package.json을 열어주세요.

react-scripts 대신에 react-app-rewired를 사용해야 하는데요.

react-scripts 부분을 찾아 아래 코드처럼 변경해 주세요.

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "eject": "react-app-rewired eject",
  "test": "react-app-rewired test"
}

 

 

  5. 완료

yarn start를 해서 화면을 확인하세요!

 

 

+) fullPage 라이브러리 적용 후, TOP버튼 추가해서 맨 상단으로 이동하는 방법

[리액트 React] fullPage 사용 시 상단으로 이동하기 / 100vh 스크롤 이벤트 / 100vh scroll / How to get to the top