[Web] - 5편 React에서 fullpage.js 적용하기

fullpage.js는 스크롤 한번에 창을 한 단위로 내리는, 약간 PPT? 같은 느낌으로 웹 사이트가 동작하게 해준다.

https://alvarotrigo.com/react-fullpage/

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

이런느낌으로 마우스 스크롤 한칸(?)에 한페이지가 통으로 넘어가서 사이트 첫 메인페이지에 써보고자 한다.

 

다른 프로젝트를 하면서 landing page를 만들때 리액트 없이 생으로는 써봤는데, 이번 React 프로젝트에서 적용하면 괜찮겠다 싶어서 사용법을 알아봤다.

https://github.com/wq0212/MakeBSSGreatAgain-Webpage-LandingPage 무기한 연장된 프로젝트 ㅎ...

 

처음에 그냥 바닐라 JS에 썼던 방법을 적용하다가 1시간 삽질하고 구글이라는 좋은 기능을 알게되었다.

---

1. yarn 을 이용해서 이하 4개를 설치해준다.

$ sudo yarn add fullpage.js@2.9.6 jquery
$ sudo yarn add -D @types/jquery
$ sudo yarn add -D react-app-rewired
$ sudo yarn add iscroll

본디 jQuery 기반의 라이브러리이기에 jQuery와 fullpage.js를 설치해준다.

뒤에 두줄은 오류 방지용인데 3번째 줄은 원래 react에서 webpack 설정을 변경하기 위해서 eject 해주면, 설정파일이 지저분해지고, package.json의 가독성도 떨어지게 된다고 한다. 

4번째 줄은 스크롤 통제? 내부에 추가 스크롤 등을 사용할 때 쓰이는 듯한 라이브러리인데(정확히 모름) 암튼 오류 방지용으로 필요하다고 한다.

 

2. 이때 package.json을

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

 다음과 같이 수정해주고

 

3. 또한 config-overrides.js 라는 파일을 만들고, webpack 설정에 다음을 추가해준다.

new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', IScroll: 'iscroll' })

 

4. 이후 원하는 FullPage jsx 파일을 만들어주면 되는데

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() {
    $(() => {
        $('#fullpage').fullpage({
            scrollOverflow: true,
            sectionsColor: ['#ffffff', '#D6C7ED', '#9FD4EB'],
            navigation: true,
            navigationTooltips: ['Home', 'What', 'Who'],
            scrollingSpeed: 1000,
        });
    });
    return (
        <div id="fullpage">
            <div className="section">1 page</div>
            <div className="section">2 page</div>
            <div className="section">3 page</div>
        </div>
    );
}

다음과 같은 예시로 쓸수 있었다.

 

이후 yarn start로 실행하면 원하는 결과를 얻을 수 있었다.

이때 sectionsColor는 배경색 | navigation은 오른쪽에 네비게이션 | navigationTooltips은 오른쪽에 네비게이션 위에 마우스를 올리면 어떤 문구가 표시될지를 보여준다.