본문 바로가기
반응형

[IT] Javascript4

[Javascript] 오픈소스 차트 및 그래프 생성 - ECharts 소개 및 예제 안녕하세요, 웹 페이지에 동적으로 여러 차트를 생성하고자 할 때 유용하게 쓸 수 있는 자바스크립트 오픈소스 툴인 Apache ECharts에 대해 알아보겠습니다. EChart 공식 페이지의 Demo 페이지(https://echarts.apache.org/examples/en/index.html)에서 확인 할 수 있듯이, 선 그래프, 막대그래프, 파이 차트, Map, Tree, 게이지 바 등등 정말 다양한 차트를 Javascript를 통해 HTML 페이지에서 동적으로 생성이 가능합니다. 우선, 무료 오픈소스이고 Canvas 태그를 활용해서 구현이 되어 있어서 정말 다양한 곳에서 쉽게 사용이 가능할 것 같습니다. Demo들이 너무 많아서 하나하나 자세히 아직 못 봤지만.. 여러 예제들을 보면 애니메이션 기능.. 2022. 6. 9.
[Javascript][Node.js] Map 자료 구조 정의, 사용법, 문법 및 반복문 활용 Key, Value로 이루어진 데이터 집합인 Map 자료구조를 Javascript 및 Node.js에서 어떻게 정의하고 사용하는지 Map 객체 내장 메서드와 문법을 정리해보도록 하겠습니다. Map 객체 정의 및 데이터 삽입 Map은 아래와 같이, new Map()으로 정의를 할 수 있습니다. 데이터를 삽입하는 방법은 2가지인데, map.set( key, value )를 통해 데이터를 저장하거나, 최초 정의 시 new Map([ [ key, value] ])와 같이 Map 생성 및 데이터 삽입을 동시에 할 수 있습니다. var map1 = new Map(); map1.set('key1','value1'); map1.set('key2','value2'); var map2 = new Map([ ['key3',.. 2022. 3. 4.
바닐라 자바스크립트(Javascript) + 타임리프(Thymeleaf) 이용 AJAX 구현 예제 안녕하세요, 오늘은 스프링 부트(Spring Boot)의 대표 템플릿 엔진인 타임리프(Thymeleaf)와 바닐라(순수) Javascript를 활용하여 Ajax를 구현해보는 예제를 작성해보도록 하겠습니다. 바닐라 자바스크립트를 활용하여 Ajax를 구현하는 방법은 아래 포스팅을 참고해주세요~! 2021.12.10 - [[IT] Javascript] - 순수 (바닐라) JavaScript로 AJAX Get/Post 구현 (JSON 응답/요청) 먼저 타임리프(Thymeleaf)에 대해 간단히 설명을 하면, 스프링 부트(Spring Boot)의 대표 템플릿 엔진입니다. 템플릿 엔진이란 Html Markup + 데이터를 결합하여 동적인 화면을 구현할 수 있도록 하는 도구입니다. 기존에는 JSP를 활용하여 구현을 .. 2021. 12. 17.
순수 (바닐라) JavaScript로 AJAX Get/Post 구현 (JSON 응답/요청) 안녕하세요, 오늘은 순수 자바스크립트(Javascript)만으로 ajax를 구현하는 법을 작성하도록 하겠습니다. jQuery 같은 다른 라이브러리를 사용하지 않고, 오직 Javascript만 사용하여 구현하는 것을 바닐라(vanilla) Javascript 혹은 퓨어(Pure) 자바스크립트라고 하는데, jQuery가 너무도 많이 쓰이고 강력한 라이브러리이지만 최근 여러 이유로 탈제이쿼리를 하는 프로젝트들이 많아지고 있는 추세입니다. 그래서 jquery의 $.ajax 기능을 바닐라 Javasxcript를 이용하여 간단히 구현하도록 하겠습니다. 1. ajax - GET 방식 구현 (JSON 응답 및 요청) 구현할 기능은 간단합니다. html 페이지에서 name을 입력받고, 서버에 ajax 요청을 하여 해당 .. 2021. 12. 10.
반응형