웹개발에 자주 쓰는 자바스크립트 라이브러리들

자바스크립트로 UI를 직접 만들 필요는 없습니다.

최상의 퍼포먼스를 위해선 당연히 UI를 직접 만들어야하겠지만 

요즘의 개발 메타는 '개발자가 편한 개발'입니다. 

어떤 도구를 쓰든간에 개발자가 코딩이 쉬워지고 관리가 쉬워지면 장땡이라는 겁니다. 

 

 

여러분이 지금까지 공부했던 슬라이더, 모달창, nav 메뉴 등의 웹 UI들은 이미 수많은 사람들이 만들어보았던 UI들입니다.

그래서 착한 사람들이 자주사용하는 웹UI를 다른사람들도 매우 쓰기 쉽게 '라이브러리'화를 해놓았는데

라이브러리를 설치해서 이용하면 매우 쉽게 복붙식으로 웹 UI를 개발하실 수 있습니다. 

 

자바스크립트 라이브러리 사용법 요약 : 

0. 각 라이브러리 소개 홈페이지에 들어가 Get started 메뉴를 잘 살펴본다 

1. 설명대로 js파일이나 CSS 파일을 설치한다 

2. Get started 부분에 있는 예제코드를 눈치껏 잘 복붙한다

3. 그럼 UI 개발 끝입니다. 

 

 

주의점 : 

정확한 사용법은 각 라이브러리 홈페이지를 참고해주세요

 

 

 

 

 

 

 

1. 슬라이드되는 이미지 (일명 Carousel)

 

가장 유명한 Slick - https://kenwheeler.github.io/slick/

 

 

설치 

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

Slick 자바스크립트, Slick CSS파일, jQuery파일 첨부가 필요합니다.

(jQuery 까먹지마세요)

홈페이지에서 다운받거나 위처럼 CDN 방식으로 첨부하시면 되겠습니다. 

 

 

 

사용법

▼ HTML을 이런 식으로 만들어줍니다. 

부모 div박스의 클래스 명은 자유롭게 지정합니다. 

<div class="your-class">
  <div>내용1</div>
  <div>내용2</div>
  <div>내용3</div>
</div>

 

▼그 다음 jQuery를 이용해서 이런 식으로 부모 클래스를 찾아서 .slick이라는 함수를 붙여줍니다. 

 <script>
    $(document).ready(function(){
      $('.your-class').slick();
    });
  </script>

그럼 슬라이더가 완성됩니다. 끝!

 

이제 slick() 함수 내부에 {} 이런 자료형을 하나 추가할 수 있는데 

중괄호 내에 여러가지 코드를 추가하면 기능 세부조정이 가능합니다. 

 

$('.your-class').slick({
  infinite: true,
  slidesToShow: 3,
});

▲ 위의 예시는 한번에 몇개의 슬라이드를 보여줄지,

그리고 무한히 보여줄지를 셋팅한 부분입니다. 

더욱 자세한 커스터마이징예시들은 홈페이지를 참고하시면 되겠습니다. 

다른 Carousel UI들도 매우 비슷합니다. 

 

 

 

 

 

2. HTML Chart 

특수한 페이지들이 아니면 차트는 일반적으로 사용할 일이 별로 없는데 

간지나는 템플릿 제작용이나 포트폴리오 용으로 많이 사용하는 것 같습니다. 

가장 유명한 chart.js - https://www.chartjs.org/docs/latest/getting-started/

 

 

설치법 

Getting started 메뉴에 나오는 설치법 그대로 따라하시면 됩니다. 

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

▲ 자바스크립트 파일을 다운받거나 CDN 방식으로 첨부합니다. 

 

 

 

 

사용법

<canvas id="myChart"></canvas>

▲ 차트를 생성하고 싶은 div 내에 이 canvas라는 태그를 넣고 id를 주시면 됩니다.

canvas 태그는 자바스크립트로 뭔가 그림그리고 싶을 때 사용하는 태그입니다. 

 

 

 

<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    //차트설정
    type: 'line',

    //차트데이터
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },
    options: {}
});
</script>

▲ 위의 스크립트 태그를 하단에 첨부하면 차트가 하나 생깁니다. 끝! 

잘 붙여넣었다면 맨 처음에 붙여넣은 <canvas>라는 태그 내에 차트가 뾰로롱 하고 생성이 됩니다. 

 

▼커스터마이징 하려면 

홈페이지에 나온 내용대로 자바스크립트 코드를 바꾸면 되겠습니다. 

type: 'line',

이라고 되어있는 부분을 bar, pie, doughnut 등으로 바꾸면 각각 바, 파이, 도넛차트를 만들 수 있고 

 

 

datasets: [{
  label: 'My First dataset',
  backgroundColor: 'rgb(255, 99, 132)',
  borderColor: 'rgb(255, 99, 132)',
  data: [0, 10, 5, 2, 20, 30, 45]
}]

이 부분을 조작하시면 차트 아이템의 제목, 배경색, 테두리색, 데이터값을 각각 수정하실 수 있습니다.

몇개 건드려보시면 값이 바뀌는걸 바로바로 확인할 수 있기 때문에

직접 해보시면 되겠습니다. 

 

 

 

 

 

3. Navbar 메뉴

이것도 직접 만들 수는 있지만 아주 다양한 디자인의 Navbar를 모아놓은 사이트가 하나 있습니다. 

navnav.co

 

 

 

사용법

그냥 원하는 샘플을 하나 골라서

상세페이지에 뜨는 HTML CSS JS 코드들을 여러분 파일에 복사 붙여넣기 하시면 개발 끝입니다. 

 

 

 

 

주의점 

1. 자바스크립트 코드에 $ 표시가 보인다면 jQuery문법으로 개발된 UI이기 때문에 jQuery가 잘 설치되어있는지 확인하셔야합니다. 

2. CSS코드에 $표시가 있거나 듣도보도 못한 이상한 문법이 있다면 그것은 보통 CSS 전처리엔진 코드입니다. 전처리 CSS말고 일반 CSS코드를 찾아서 복사붙여넣기하세요.  

3. 포트폴리오에 사용해도 복붙한 티가 100% 나기 때문에 여러분의 실력을 어필한다기보다는 복붙실력을 어필할 수 있습니다. 

 

 

 

 

 

 

 

4. Scroll Reveal 

 

스크롤바를 내렸을 때 등장하는 애니메이션을 주고 싶은 경우 사용하면 좋은 라이브러리들입니다. 

Scroll Reveal - https://scrollrevealjs.org/

Animate On Scroll - https://michalsnik.github.io/aos/

가장 유명한 Scroll reveal 이라는 라이브러리를 사용해봅시다. 

 

 

설치법 

역시 홈페이지에서 자바스크립트 파일을 구해서 여러분 HTML에 첨부하시면 되겠습니다. 

 <script src="https://unpkg.com/scrollreveal"></script>

▲ CDN 방식으로 제공하긴 합니다. 

 

 

 

 

사용법 

▼ 애니메이션 주고싶은 요소에 클래스명이나 아이디를 달아줍니다.  

<h1 class="headline">
    안녕하세요
</h1>

▼ 그 다음에 자바스크립트 이거 한줄만 적어주시면 끝입니다. 

<script>
  ScrollReveal().reveal('.headline');
</script>

그럼 여러분이 안녕하세요라는 글자까지 스크롤바를 내렸을 때 글자가 서서히 등장합니다. 

reveal 이라는 함수안에 여러분이 애니메이션 주고싶은 요소를 jQuery 셀렉터처럼 찾으시면 되겠습니다. 

그리고 API 메뉴를 눌러보시면 어디서 등장할지, 어떻게 등장할지를 커스터마이징할 수 있는 옵션들을 찾아 사용하실 수 있습니다. 

 

 

 

 

 

 

5. FullPage 전체화면 스크롤 사이트   

자유로운 스크롤을 막고 페이지를 PPT처럼 한번에 한 페이지만 보여주는 라이브러리입니다. 

어떤건지는 예시 페이지를 들어가보시면 알 수 있겠습니다. (https://alvarotrigo.com/fullPage/)

처음 보는사람들은 우와 할 수 있겠으나 

지금은 이런 사이트들이 유행이 지났기 때문에 어디서 외주요청 받았다 이런 경우가 아니면 잘 사용하진 않습니다. 

요즘은 FullPage 형식보다 자유로운 스크롤 + 애니메이션이 대세입니다. 

그리고 스크린 사이즈에 따라 CSS 반응형으로 짜는게 가장 어렵습니다. (투입 시간대비 가성비가 안좋음)

FullPage.js - https://github.com/alvarotrigo/fullpage.js

 

 

 

설치법 

fullpage.js 자바스크립트 파일과 fullpage.css 파일이 필요합니다. 홈페이지 들어가셔서 구해오시면 되겠습니다. 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/fullpage.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/fullpage.js"></script>

▲ CDN 방식도 제공합니다. 여러분 HTML에 잘 붙여넣도록 합시다. 

 

 

 

 

사용법

▼ HTML을 만들어줍니다. 부모에게 id를 잘부여해주도록 합시다. 

<div id="fullpage">
    <div class="section">One</div>
    <div class="section">
        <div class="slide" data-anchor="slide1">Two 1</div>
        <div class="slide" data-anchor="slide2">Two 2</div>
    </div>
    <div class="section">Three</div>
    <div class="section">Four</div>
</div>

 

▼ 자바스크립트를 하단에 입력해주시면 되겠습니다. 

<script>
  new fullpage('#fullpage', {
	//하단은 옵션
      autoScrolling:true,
      scrollHorizontally: true,
      sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
  });
</script>

new fullpage() 이 함수만 쓰면 되는데

함수 안의 첫째 파라미터엔 여러분이 fullpage로 만들 div의 아이디를 적어주시면 되고 

두번째 파라미터는 옵션을 집어넣어주시면 됩니다. 

옵션 사용법은 홈페이지에 자세히 나와있습니다. 

참고로 두번째 div박스를 보시면... slide라는 클래스를 가진 div를 만드시면 자동으로 이미지 슬라이더 UI화 됩니다. 

 

 

 

 

 

 

기타 유용한 라이브러리 : 

Font Awesome (500종 이상의 무료 vector 웹 아이콘)

Velocity.js (jQuery Animate 함수처럼 이용가능한데 훨씬 더 매끄러움)

GSAP (매우 매끄러운 자바스크립트 애니메이션, TweenMax 함수 이용가능) https://greensock.com/get-started/