boyon99/js-library

javascript library 실습 레포

library

Gsap

GSAP(The GreenSock Animation Platform)은 자바스크립트로 제어하는 타임라인 기반의 애니메이션 라이브러리이다.

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>

Lodash

Lodash는 다양한 유틸리티 기능을 제공하는 자바스크립트 라이브러리로 array, object, 문자, 숫자 자료를 다루기 편하게 해주는 기본함수들을 제공한다. Lodash API에서 더 많은 정보를 확인할 수 있다.

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>

npm i --save lodash

Swiper

Swiper는 하드웨어 가속 전환과 여러 기본 동작을 갖춘 현대적인 슬라이드 라이브러리이다. Swiper API를 확인할 수 있다.

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.5/swiper-bundle.min.js"
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.5/swiper-bundle.css"
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

ScrollMagic

ScrollMagic은 스크롤과 요소의 상호 작용을 위한 자바스크립트 라이브러리로 ScrollMagic API에서 더 자세한 사항을 확인할 수 있다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>

Animate On Scroll

AOS는 스크롤 이벤트 시 나타나는 애니메이션을 만들 때 사용하는 라이브러리로 aos site에서 더 자세한 사항을 확인할 수 있다.

<!--css, js cdn 파일 삽입 후 -->
<script>
  AOS.init();
</script>

JQuery

Jquery는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다. api에서 더 자세한 사항을 확인할 수 있다.

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>

Chart.js

chart.js는 차트를 만들 수 있는 라이브러리이다. chart에서 더 자세한 사항을 확인할 수 있다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.0/chart.min.js"></script>

moomnet.js

momentjs는 JavaScript에서 날짜 및 시간을 조작하고 작업하는데 도움이 되는 JavaScript 라이브러리이다.

npm i moment

TensorFlow.js

TensorFlow.js는 자바스크립트 머신러닝 라이브러리이다.

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>

npm install @tensorflow/tfjs

p5.js

p5.js는 크리에이티브 코딩을 위한 자바스크립트 라이브러리로, 예술가, 디자이너, 교육자, 입문자, 그리고 모두에게 접근성 높고 포용적인 언어를 지향한다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>

api

Youtube API

IFrame Player API를 통해 YouTube 동영상을 제어할 수 있다. 플레이어 매개변수(playerVars)를 통해 더 알아볼 수 있다.

<!-- in HEAD -->
<script defer src="./js/youtube.js"></script>

<!-- in BODY -->
<div id="player"></div>

// Youtube IFrame API를 비동기로 로드합니다.
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubePlayerAPIReady() {
  // <div id="player"></div>
  new YT.Player("player", {
    videoId: "", // 재생할 유튜브 영상 ID
    playerVars: {
      autoplay: true, // 자동 재생 유무
      loop: true, // 반복 재생 유무
      playlist: "", // 반복 재생할 유튜브 영상 ID 목록
    },
    events: {
      // 영상이 준비되었을 때,
      onReady: function (event) {
        event.target.mute(); // 음소거
      },
    },
  });
}