[Javascript] 라이브러리 활용

---

#1. 라이브러리 활용

1. 용어 정리

1) 모듈

• 소스코드를 파일 형태로 분리해서 재사용 가능하게 만든 단위를 뜻한다.
• 형태에 상관없이 조립 가능한 프로그램 조각이라는 의미.
• 한 개의 파일에서 하나의 기능을 제공한다.

 

2) 패키지

• 소프트웨어를 설치 가능한 형태로 묶어서 배포하는 것.
• 라이브러리가 모여있는 형태거나 여러개의 모듈을 한 개의 폴더에 묶어서 기능을 제공한다.

 

3) 라이브러리

• 효율적인 프로그램 개발을 위해 필요한 함수나 변수들을 미리 만들어 놓은 형태이다.
• 모듈 중에서 함수나 클래스 단위로 구성된 형태들의 모임이다.
• 필요할 때 찾아서 쓸 수 있도록 모듈화 되어 제공되는 프로그램을 말한다.
  • 모듈과 라이브러리는 비슷한 개념이다.
• 코드를 재사용하기 쉽고, 코드의 내용을 숨겨 기술 유출을 방지할 수 있다.
• 이미 구현되어 있는 기능들을 가져다 쓸 수 있어 개발 시간을 단축시킬 수 있다.

 

4) 오픈소스

• 사전적으로는 자유 소프트웨어라는 의미.
• 인터넷에 누구나 사용할 수 있도록 공개되어 있는 소프트웨어 혹은 소스코드이다. (무료)
• 무료인 대신 원작자를 표기하고, 수정한 사항에 대해 원작자에게 알려줘야 한다.
• 영리, 비영리 목적으로 사용 가능 여부에 따라 라이센스 모델이 변경된다.

 

2. 라이브러리 종류

1) 표준 라이브러리

• 프로그래밍 언어에 기본적으로 포함되어 있는 라이브러리
• 여러 종류의 모듈과 패키지를 가지며, 표준 라이브러리를 이용하면 별도의 파일 설치 없이 다양한 기능을 이용할 수 있다.

 

2) 외부 라이브러리

• 별도의 파일을 설치해야 사용 가능하다.
• 누구나 개발하여 설치 할 수 있으며, 공유도 가능하다.

 

3. CDN (Content Delivery Network)

1) CDN이란 ?

• CDN이란 콘텐츠를 효율적으로 전달하기 위해 분산된 서버에 데이터를 저장해 사용자에게 전달하는 시스템이다.
• 같은 데이터를 가진 서버를 여러 장소에 분산시키고, 데이터 요청이 왔을 때 요청 위치로 부터 가장 가까운 서버에서 데이터를 전송해주는 방식이다.
• 이를 통해 데이터를 효율적으로 제공할 수 있으며, 한번에 많은 사용자가 몰림으로 인한 병목현상도 방지할 수 있다.

 

2) cdnjs 사용하기

• cdnjs라는 오픈소스 CDN 서비스를 사용하는것이다.
• cloudflare의 서버를 사용하며, 전 세계에 약 160개의 서버를 가지고 있다.
• 해당하는 코드를 사용하면 가장 가까운 서버에서 가져온다.

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

※ chart.js 라는 라이브러리를 불러온다.

 

4. 라이브러리 활용

• HTML 작성

<h1>Chart.js</h1>
<hr />
<div class="subplot">
  <h2>기본 선 그래프</h2>
  <div class="subplot-item">
    <canvas id="mychart1"></canvas>
  </div>
</div>

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

• 자바스크립트 작성

const dataset = [
  { 이름: "철수", 학년: 1, 성별: "남자", 국어: 98, 영어: 82, 수학: 88, 과학: 64 },
  { 이름: "영희", 학년: 2, 성별: "여자", 국어: 88, 영어: 90, 수학: 62, 과학: 72 },
  { 이름: "민수", 학년: 1, 성별: "남자", 국어: 92, 영어: 70, 수학: 71, 과학: 87 },
  { 이름: "수현", 학년: 3, 성별: "여자", 국어: 63, 영어: 60, 수학: 31, 과학: 70 },
  { 이름: "호영", 학년: 4, 성별: "남자", 국어: 120, 영어: 50, 수학: 84, 과학: 88 }
];

// 각 항목을 분할하여 저장하기 위한 배열
const names = [];
const kor = [];
const eng = [];
const math = [];

// 항목 분할
for(let i = 0; i < dataset.length; i++) {
  names[i] = dataset[i].이름;
  kor[i] = dataset[i].국어;
  eng[i] = dataset[i].영어;
  math[i] = dataset[i].수학;
}

// 그래프가 표시될 캔버스 영역
const mychart1 = document.getElementById("mychart1");

• 라이브러리를 활용한 자바스크립트 작성

// --- 기본 선 그래프 그리기 --- //
new Chart(mychart1, {
  // 그래프 종류 : line, bar, pie, polarArea, doughnut, scatter
  type: "line",

  // 데이터 영역
  data: {
    // x축 항목
    labels: names,
    // 데이터 구성
    datasets: [
      // 1번 데이터
      {
        label: "국어",  // 데이터 이름
        data: kor,  // 데이터 배열
        borderWidth: 1,
        borderColor: "#f60",
      },

      // 2번 데이터
      {
        label: "영어",
        data: eng,
        borderWidth: 3,
        borderColor: "#f0f",
      },
    ],
  },

  // 그래프 옵션
  options: {
    // 그래프의 가로, 세로 비율 유지(기본값 = true) -> 부모 div의 넓이에만 맞추고 높이는 무시한다
    // false로 설정할 경우 부모의 width, height에 크기를 맞춤
    maintainAspectRatio: false,
  },
});

chart.js 라이브러리를 활용해 만든 차트