jQuery 기반의 무료 차트 라이브러리 소개

웹 개발자라면 데이터 시각화가 얼마나 중요한지 잘 알고 계실 겁니다. 데이터를 시각적으로 표현하면 사용자에게 더 직관적이고 이해하기 쉬운 정보를 제공할 수 있습니다. 오늘은 jQuery 기반의 무료 차트 라이브러리 몇 가지를 소개해드리겠습니다.

1. Chart.js

Chart.js는 HTML5 기반의 차트 라이브러리로, 간단하고 명확한 API를 제공하여 다양한 차트를 쉽게 만들 수 있습니다. 라인 차트, 바 차트, 파이 차트 등 다양한 차트 유형을 지원하며, 커스터마이징이 용이합니다. Chart.js는 특히 초보자에게 추천할 만한 라이브러리입니다. 또한, Chart.js는 반응형 디자인을 지원하여 다양한 디바이스에서 차트를 아름답게 표시할 수 있습니다. Chart.js의 문서화가 잘 되어 있어, 사용자가 쉽게 시작할 수 있습니다.

라이선스: MIT 라이선스
GitHub: Chart.js
웹사이트: Chart.js

2. jqPlot

jqPlot은 jQuery 기반의 차트 플러그인으로, 다양한 차트 유형을 지원합니다. 라인 차트, 바 차트, 파이 차트 등 기본적인 차트 외에도 캔들스틱 차트와 같은 고급 차트도 구현할 수 있습니다. 또한, 플러그인 구조로 되어 있어 필요에 따라 기능을 확장할 수 있습니다. jqPlot은 다양한 플러그인과 함께 사용할 수 있어, 차트의 기능을 더욱 풍부하게 만들 수 있습니다. 또한, jqPlot은 다양한 브라우저와 호환되며, 모바일 디바이스에서도 원활하게 작동합니다.

라이선스: MIT 라이선스
GitHub: jqPlot
웹사이트: jqPlot

3. Flot

Flot은 jQuery 기반의 차트 라이브러리로, 인터랙티브한 차트를 쉽게 만들 수 있습니다. 플러그인 구조로 되어 있어 다양한 기능을 추가할 수 있으며, 성능이 뛰어나 대용량 데이터 처리에도 적합합니다. Flot은 특히 실시간 데이터 시각화에 강점을 가지고 있습니다. 또한, Flot은 다양한 브라우저와 호환되며, 모바일 디바이스에서도 원활하게 작동합니다. Flot의 문서화가 잘 되어 있어, 사용자가 쉽게 시작할 수 있습니다.

라이선스: MIT 라이선스
GitHub: Flot
웹사이트: Flot

4. Highcharts (무료 버전)

Highcharts는 강력한 기능을 제공하는 차트 라이브러리로, 상업용으로는 유료이지만 비상업용 프로젝트에서는 무료로 사용할 수 있습니다. 다양한 차트 유형을 지원하며, 커스터마이징이 용이하고, 문서화가 잘 되어 있어 사용하기 편리합니다. Highcharts는 다양한 데이터 소스와 통합할 수 있어, 복잡한 데이터 시각화에도 적합합니다. 또한, Highcharts는 반응형 디자인을 지원하여 다양한 디바이스에서 차트를 아름답게 표시할 수 있습니다.

라이선스: 비상업용 프로젝트에 한해 무료
GitHub: Highcharts
웹사이트: Highcharts

5. Morris.js

Morris.js는 간단하고 사용하기 쉬운 jQuery 기반의 차트 라이브러리로, 라인 차트, 바 차트, 도넛 차트 등을 지원합니다. Morris.js는 특히 데이터 시각화의 미적 요소에 중점을 두어, 아름답고 직관적인 차트를 만들 수 있습니다. 또한, Morris.js는 JSON 데이터를 쉽게 처리할 수 있어, 동적인 데이터 시각화에 적합합니다. Morris.js의 문서화가 잘 되어 있어, 사용자가 쉽게 시작할 수 있습니다.

라이선스: MIT 라이선스
GitHub: Morris.js
웹사이트: Morris.js

6. Billboard.js

Billboard.js는 네이버에서 개발한 jQuery 기반의 차트 라이브러리로, 다양한 차트 유형을 지원하며, 사용하기 쉽고 강력한 기능을 제공합니다. Billboard.js는 특히 반응형 디자인을 지원하여 다양한 디바이스에서 차트를 아름답게 표시할 수 있습니다. 그러나 최신 버전에서는 Internet Explorer(IE)를 지원하지 않으므로, 다른 브라우저를 사용하는 것이 좋습니다.

라이선스: MIT 라이선스
GitHub: Billboard.js
웹사이트: Billboard.js

7. Dygraphs

Dygraphs는 대용량 데이터 시각화에 적합한 jQuery 기반의 차트 라이브러리입니다. 실시간 데이터 업데이트와 줌 기능을 지원하여, 복잡한 데이터를 효과적으로 시각화할 수 있습니다. Dygraphs는 특히 금융 데이터 시각화에 강점을 가지고 있습니다.

라이선스: MIT 라이선스
GitHub: Dygraphs
웹사이트: Dygraphs

8. Sparklines

Sparklines는 작은 크기의 차트를 생성하는 데 특화된 jQuery 기반의 차트 라이브러리입니다. 주로 데이터 테이블이나 텍스트 내에 삽입하여 간단한 데이터 시각화를 제공하는 데 사용됩니다. Sparklines는 다양한 차트 유형을 지원하며, 사용하기 쉽고 가벼운 라이브러리입니다.

라이선스: MIT 라이선스
GitHub: Sparklines
웹사이트: Sparklines

결론

jQuery 기반의 무료 차트 라이브러리는 다양하게 존재하며, 각 라이브러리마다 장단점이 있습니다. 프로젝트의 요구사항에 맞는 라이브러리를 선택하여 데이터를 효과적으로 시각화해보세요. 위에서 소개한 라이브러리들은 모두 사용하기 쉽고 강력한 기능을 제공하므로, 여러분의 웹 개발 프로젝트에 큰 도움이 될 것입니다.

IE에서 사용가능한 배열에서 중복 제거하기 

	    this.removeDuplicates = function(arr) {
	        var uniqueArray = [];
	        var seen = {}; // 이미 본 값을 추적하는 객체

	        for (var i = 0; i < arr.length; i++) {
	            if (!seen[arr[i]]) { // 이미 본 값이 아니면
	                uniqueArray.push(arr[i]); // 배열에 추가
	                seen[arr[i]] = true; // 본 값을 추적
	            }
	        }
	        return uniqueArray;
	    }

JavaScript는 현재 가장 인기 있는 웹 프로그래밍 언어 중 하나입니다. JavaScript는 프론트엔드, 백엔드 및 모바일 개발에서 널리 사용됩니다. 따라서 JavaScript를 배우는 것은 웹 개발자로서 중요한 기술입니다.

JavaScript를 배우기 위해서는 TypeScript를 배우는 것이 좋습니다. TypeScript는 JavaScript의 상위 집합 언어로, JavaScript에 강력한 정적 타입 검사 기능을 추가합니다. TypeScript는 프로그래밍 언어를 배우는 초보자에게도 친숙하며, 코드를 작성하는 것을 더 쉽고 안전하게 만들어 줍니다.

따라서 TypeScript를 배우는 것은 JavaScript를 배우는 데 큰 도움이 됩니다. TypeScript를 배우기 위해서는 다음과 같은 자료들을 참고할 수 있습니다.

TypeScript 핸드북

TypeScript 공식 문서에서 제공하는 핸드북입니다. TypeScript를 처음 배우는 초보자부터 전문가까지 모두에게 유용한 정보를 제공합니다.

링크: https://www.typescriptlang.org/docs/handbook/intro.html

TypeScript Deep Dive

TypeScript를 깊이 이해하고 싶은 사람을 위한 서적입니다. 책은 TypeScript의 개념, 기능 및 사용 사례에 대해 자세히 설명합니다.
링크: https://basarat.gitbook.io/typescript/

Udemy - Typescript: The Complete Developer's Guide

Udemy에서 제공하는 TypeScript 온라인 강의입니다. 실제 프로젝트를 통해 TypeScript의 모든 기능과 사용 사례를 배울 수 있습니다.
링크: https://www.udemy.com/course/typescript-the-complete-developers-guide/

Coursera - Programming Languages, Part A

프린스턴 대학교에서 제공하는 컴퓨터 과학 강의 중 하나입니다. 이 강의는 TypeScript를 비롯한 다양한 프로그래밍 언어를 다루며, 함수형 프로그래밍 및 객체 지향 프로그래밍 등의 개념을 배울 수 있습니다.
링크: https://www.coursera.org/learn/programming-languages

이러한 자료들을 참고하여 TypeScript를 배우면 JavaScript 프로그래밍에 대한 깊은 이해를 얻을 수 있습니다. TypeScript를 배우는 것은 웹 개발자로서 취업에도 큰 도움이 될 것입니다.

Object.prototype.toString()

toString() 은 문자열을 반환하는 object의 대표적인 방법입니다.

obj.toString();

위와 같은 방법으로 많이 사용합니다.

객체가 텍스트 값으로 표시되거나 객체가 문자열이 예상되는 방식으로 참조 될 때 자동으로 호출되는 toString() 메서드가 있습니다. 기본적으로 toString() 메서드는 Object에서 비롯된 모든 객체에 상속됩니다.

이 메서드가 사용자 지정 개체에서 재정의되지 않으면 toString()은 "[object type]"을 반환합니다. 여기서 type은 object type입니다.

.... 까지는 대부분 알고 있고 사용하고 있는 기능입니다만.

toString() 편리한 기능이 있습니다. 

10진수의 값의 경우 toString(arg) 매개변수를 이용하여 다른 진수로 변경할 수 있습니다. 

let baseTenInt = 10;
console.log(baseTenInt.toString(2));   // 2진법으로 변환

let bigNum = BigInt(20);
console.log(bigNum.toString(2))    // 2진법으로 변환

예를 들자면 16진법으로 변경하여 랜덤 색상을 생성할 수 도 있습니다. 

'#' + Math.floor(Math.random() * 16777215).toString(16);

해당 코드는 16777215를 hex로 표현하면 ffffff가 되므로 해당 코드는 000000부터 ffffff 값을 반환합니다.

참고 Link https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/toString

Javascript의 map() 함수

자바스크립트 배열의 내장함수인 map을 활용하여 컴포넌트를 반복문처럼 렌더링할 수 있습니다. 

map 함수는 전달된 함수를 사용해서 배열 내에서 원하는 규칙에 따라 가공 후 새로운 배열을 생성할 수 있습니다.

[사용방법]

[예시 - 01 ] - 아래 내용을 개발자 도구에서 수행해 볼 수 있습니다.

var arr = [5, 4, 9, 7];

var result = arr.map(function(vv){
  return vv * vv;
});

//결과
result = [25, 16, 81, 49];

[예시 - 02 ] - ES6 문법으로 작성

const arr = [5, 4, 9, 7];
const result = arr.map(vv => vv * vv);

//결과
console.log(result);

방금 작성한 데이터 배열과 유사한 형태로 컴포넌트를 배열로 작성할 수 있습니다. 

component / IterPrc.js 파일을 생성합니다. 

export default function IterPrc(){


    const datas = ["1번","2번","3번","4번"];
    const dataList = datas.map((item,idx) => <li>{idx}{item}</li>);

    return (
        <>
            <ul>{dataList}</ul>
        </>
    );
}

state에 문자열이나 숫자값이 아닌 Object 형태의 값을 넣어서 컨트롤 해보겠습니다. 

StatePrc.js 파일을 component 폴더 하위에 생성합니다. 

import { useState } from "react";

export default function StatePrc(){

    

    const [msg, setMsg] = useState({"message" : "", "user" : ""});

    return (

        <>
            <div>
                <h1>Event Test</h1>
                <div>message : {msg.message}</div>
                <div>user : {msg.user}</div>
                <input type="text"
                    name="msg"
                    placeholder="입력칸"
                    value={msg.message}
                    onChange={(ev)=>{
                        setMsg({...msg, "message" : ev.target.value});
                    }}
                ></input>
                <input type="text"
                    name="user"
                    placeholder="입력칸"
                    value={msg.user}
                    onChange={(ev)=>{
                        setMsg({...msg, "user" : ev.target.value});
                    }}
                ></input>
                <button onClick={()=>{
                    alert(msg.message + "메세지를 초기화 합니다.");
                    setMsg({"message" : "", "user" : ""});
                }}>초기화</button>
            </div>
        </>
    );
}

App.js에  방금 작성한 StatePrc 컴포넌트가 출력되도록 추가합니다. 

왼쪽 input은 msg.message를 값을 참조하고 

오른쪽 input은 msg.user의 값을 참조하도록 코드를 작성하였습니다.

state의 값중 object의 값을 변경할 때에는 기존값을 spread 연산자라고 하는 ... 연산자를 이용하여 값을 변경합니다.

조건문을 사용하다 보면 조건이 많을 때가 있습니다. 

if( 조건 || 조건 || 조건 .....)

이런 조건이 너무 많으면 가독성이 떨어지게 되고 반복되는 코드로 코드가 늘어지게 됩니다. 

예를 들면 아래와 같은 코드가 있습니다. 

function checkName(arg) {
	let rtn = false;
    if (arg === 'A' || arg === 'B' || arg === 'C' || arg === 'D' || arg === 'E' || arg === 'F'){
    	rtn = true;
    }
    return rtn;
  }

function testCode(){
	console.log(checkName('A')); // true
	console.log(checkName('ZZ')); // false
}

좀더 코드의 낭비가 없도록 작성해봅시다. 

function checkName(arg) {
	const = compareValue = ['A','B','C','D','E','F'];
	return compareValue.includes(arg);
  }

function testCode(){
	console.log(checkName('A')); // true
	console.log(checkName('ZZ')); // false
}

지금까지 공부한 기능을 이용하여 복습의 시간을 위해 간단한 코드를 작성해 보겠습니다. 

onChange 이벤트를 이용하여 State에 값을 전달 한뒤 그 값이 화면에 잘 변경되어 출력되도록 하겠습니다. 

component 폴더 하위에 EventAndState.js 파일을 생성하고 아래와 같이 작성합니다. 

import { useState } from "react";

export default function EventAndState(){

    const [name, setName] = useState("");

    return(
        <div>
            <h1>event와 state의 연습</h1>
            <input type="text" 
                name="msg" 
                onChange={function(ev){
                    setName(ev.target.value);
                }}
            />
            <div> State에 전달된 값 : {name}</div>
        </div>
    );
}

1. useState를 이용하여 name과 setName이 담겨진 배열을 생성하였습니다.

2. input 에 onChange 이벤트를 작성하였습니다. 

3. State에 값이 잘 전달되었는지 확인을 위해 name값을 화면에 출력하였습니다. 

(ev.target.value는 ev라는 이벤트가 발생한 target의 value값을 가리킵니다.)

동일한 기능을 하지만 여러 형태로 작성하는 방법이 있습니다. 

import { useState } from "react";

export default function EventAndState(){

    const [name, setName] = useState("");

    function onChangeTest(ev){
        setName(ev.target.value)
    }
    const onChangeTest2 = ev => setName(ev.target.value);

    return(
        <div>
            <h1>event와 state의 연습</h1>
            <input type="text" 
                name="msg" 
                onChange={function(ev){
                    setName(ev.target.value);
                }}
            />
            <div> State에 전달된 값 : {name}</div>
            <h1>다른 형태의 코드 # 1</h1>
            <input type="text" 
                name="msg" 
                onChange={onChangeTest}
            />
            <h1>다른 형태의 코드 # 2</h1>
            <input type="text" 
                name="msg" 
                onChange={onChangeTest2}
            />
        </div>
    );
}

useState

useState는 가장 기본적인 Hook 이며 함수 컴포.넌트에서도 가변적인 상태를 가질 수 있도록 합니다. 

함수 컴포넌트에서 상태관리를 해야하는 경우 사용하게 됩니다. 

단순히 말씀드리자면 state는 컴포넌트가 가지고 있는 속성값입니다. (그래서 뭐? 라고 할 수 있지만)
이 속성값이 변하면 리엑트는 자동으로 UI를 다시 출력합니다.

즉, 이 state만 잘 다룬다면 화면을 다시 그려주는 작업은 react가 다 알아서 해준다는 거죠

일단, 버튼을 클릭하면 화면의 Text가 변경되는 기능을 만들어 보도록 하겠습니다. 

component 폴더 하위에 State.js파일을 생성합니다. 

State.js

export default function State(){

    let textValue = "AAAA";

    function ChangeTextValue(){
        if(textValue === "AAAA"){
            textValue = "BBBB";
        }else{
            textValue = "AAAA";
        }
        document.getElementById("text_str").innerHTML = textValue;
        console.log(textValue);
        
    }
    return(
        <div>
            <h1>State</h1>
            <h2 id="text_str">{textValue}</h2>
            <button onClick={ChangeTextValue}>Text Change</button>
        </div>
    );
}

생성된 component를 App.js에 추가합니다. 

App.js

import './App.css';
import Greeting from './component/Greeting';  //추가된 항목
import Welcome from './component/Welcome';  //추가된 항목
import Event from './component/Event';  //추가된 항목
import State from './component/State';
function App() {
  return (
    <div className="App">
      {/* <div className='test'>App component</div> */}
      {/* <Greeting />    */}
      {/* <Welcome /> */}
      {/* <Event/> */}
      <State />
    </div>
  );
}

export default App;

이렇게 작성된 State.js의 코드는 state를 사용한 코드가 아닌 변수의 값을 dom 객체에 직접 넣은 코드입니다. 

이 코드를 동일하게 state를 이용하여 구현해보도록 하겠습니다. 

State.js를 수정합니다.

import { useState } from "react";

export default function State(){

    let textValue = "AAAA";

    
    const [name, setName] = useState("AAAA"); 

    // function ChangeTextValue(){
    //     if(textValue === "AAAA"){
    //         textValue = "BBBB";
    //     }else{
    //         textValue = "AAAA";
    //     }
    //     document.getElementById("text_str").innerHTML = textValue;
    //     console.log(textValue);
        
    // }
    return(
        <div>
            <h1>State</h1>
            <h2 id="text_str">{name}</h2>
            {/* <button onClick={ChangeTextValue}>Text Change</button> */}
            <button onClick={function(){   
                setName(name === "AAAA" ? "BBBB" : "AAAA");

            }}> changeText </button>
        </div>
    );
}

state를 사용하기 위해서는 반드시 지켜야할 것 이 있습니다.

1. state사용시 import 해야한다. 

      const [name, setName] = useState("AAAA");

      useState 함수의 파라메터는 상태의 기본값을 넣어줍니다.  이 함수를 호출하게되면 return되는 값은 배열이며

      0번째 값은 상태 값, 1번째 값은 setter 함수가 담겨 있습니다. 

      즉, name에 "AAAA"를 넣었으며 name값을 수정하는 함수의 이름은 setName이라는 의미입니다. 

3. 상태값의 변경은 setter 함수를 이용하여 수행한다.

propTypes를 지정하지 않았을 때 warning을 발생시키는 작업을 수행하도록 하겠습니다.

방법은 propTypes 작성시 뒷부분에 isRequired를 추가로 작성해주면 해당 기능을 사용할 수 있습니다. 

Props.js를 수정합니다.

import PropTypes from 'prop-types';

export default function Props(props){

    return(
        <>
        <div>props를 사용해 볼께요.</div>
        <div>props의 이름은 {props.name} 입니다. </div>
        <hr/>
        <div>너는??? - {props.children}  </div>
        <hr/>
        <div>PropTypes Test : {props.typeTest}  </div>
        <hr/>
        <div>isRequire Test : {props.isRequireTest}  </div>
        </>
    );
}

Props.defaultProps = {
    name : "기본값"
    ,typeTest : "문자"
};

Props.propTypes = {
    typeTest : PropTypes.string
    , isRequireTest : PropTypes.string.isRequired
};

Apps.js를 수정하여 오류를 제거하도록 하겠습니다. 

import './App.css';
import Props from './component/Props';
function App() {
  return (
    <div className="App">
      <Props name="prop 테스트" typeTest="99" isRequireTest="필수값을 넣었습니다.">내가 children이다 </Props>
    </div>
  );
}

export default App;