국비수업/JavaScript
[Javascript] 라이브러리 활용
chanCo
2022. 4. 1. 00:22
#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,
},
});