외부라이브러리 - WOW (typescript)

 

Wow.Js

GNU GPL 라이센스 V3 (제약 : 소스 공개 필요)

 

 

공식 홈페이지

https://mattboldt.github.io/typed.js/

 

 

설치 및 import 방법

# 3) wowjs : GNU GPL 라이선스 V3 (제약 : 소스 공개 필요)
npm i wowjs

# 3-1) wowjs import 방법
import { WOW } from "wowjs";
# 3-2) App.js 에 import
import "wowjs/css/libs/animate.css"

 

만약 typescript 를 사용하다

이러한 것이 뜨면

현재 2023-10-30일 경으로 아직 wow에는 typescript  타입이 없다

따라서

 

 

< 외부 라이브러리 타입이 없을때 대처 방법 >

# 공통) 외부 lib 타입이 없을때 대처하는 방법
# 1) tsconfig.json 파일 - compilerOptions 속성에 아래 추가 : 프로젝트시작위치/types - 이 위치에 타입을 인식하게 하는 경로 설정
"typeRoots": ["./types", "./node_modules/@types"], // 보통 types 폴더를 만들어 타입 정의
# 2) types/외부라이브러리명/index.d.ts 파일 생성 후 아래 추가
declare module '외부라이브러리명';

 

첫번째

node_modules/@types 폴더 생성

compilerOptions에 위의 글을 넣으면 자동 생성됩니다.

 

두번째

types/wowjs/index.d.ts 폴더,파일을 생성해줍니다.

외부라이브러리 wowjs 를 가져와 줍니다.

 

세번째 (공통)

App.tsx 에 import

 

 

간단한 wow 사용

src/assets/initMain.ts

// initMain.ts
import { WOW } from "wowjs";

export default function initMain() {
    // TODO : WowJs
    // 사용법 : new WOW().init()
    new WOW().init();
}

 

 

컴포넌트

// WowCom.tsx : rfce
import React, { useEffect } from "react";
import initMain from "../assets/js/initMain";

function WowCom() {

  useEffect(()=>{
    // 여기
    initMain();
  },[]);

  return (
    // 여기
    <div className="container-xxl py-6" id="about">
      <div className="container">
        <div className="row g-5">
          {/* 1st wow 시작 */}
          {/* 사용법 : wow bounceInUp data-wow-delay="0.1s" */}
          <div className="col-lg-3 wow bounceInUp" data-wow-delay="0.1s">
            <p className="mb-4">
              맛보기 강의자료와 유/무료 강의자료로 어려운 IT 기술을 쉽게 취득할
              수 있도록 도움을 드립니다.
            </p>
          </div>
          {/* 1st wow 끝 */}

          {/* 2nd wow 시작 */}
          {/* 사용법 : wow slideInLeft data-wow-delay="0.1s" */}
          <div className="col-lg-3 wow slideInLeft" data-wow-delay="0.5s">
            <p className="mb-4">
              이 때까지 온라인 강의 및 피드백을 들은 고객들에게 진심으로
              감사드립니다.
            </p>
          </div>
          {/* 2nd wow 끝 */}

          {/* 3rd wow 시작 */}
          {/* 사용법 : wow fadeInUp data-wow-delay="0.1s" */}
          <div className="col-lg-3 wow fadeInUp" data-wow-delay="0.5s">
            <p className="mb-4">
              이 때까지 온라인 강의 및 피드백을 들은 고객들에게 진심으로
              감사드립니다.
            </p>
          </div>
          {/* 3rd wow 끝 */}

          {/* 4th wow 시작 */}
          {/* 사용법 : wow flipInX data-wow-delay="0.1s" */}
          <div className="col-lg-3 wow flipInX" data-wow-delay="0.5s">
            <p className="mb-4">
              이 때까지 온라인 강의 및 피드백을 들은 고객들에게 진심으로
              감사드립니다.
            </p>
          </div>
          {/* 4th wow 끝 */}
        </div>
      </div>
    </div>
  );
}

export default WowCom;