자바스크립트

billboard.js Playground

billboard.js 관한 이전 포스트 wooncloud.tistory.com/35 오픈소스 차트 라이브러리 billboard.js 코로나가 터지면서 많은 개발자들이 코로나 현황과 정보를 실시간으로 보여주기 위해 사이트를 개발했습니다. 코로나 현황을 보여주다보면 전일대비 얼마나 확진자가 증가했는지 등 한눈에 파 wooncloud.tistory.com billboard.js 링크 naver.github.io/billboard.js/ billboard.js billboard.js, the "chart" library The name "billboard" comes from the famous "billboard chart" which everybody knows. billboard.js provides t..

자바스크립트 날짜 포맷 설정하기 - moment.js 라이브러리

원래 직접 날짜 변환 코드를 만들어서 포스팅하려고 했다가.. 관련 코드 참고하려고 검색했더니 더 좋은 라이브러리를 발견해서 또 라이브러리 소개 포스팅을 하게 되었네요. 이번에 가져온 라이브러리는 날짜 포맷을 쉽게 설정하는 라이브러리입니다. moment.js 라이브러리 1. 홈페이지 momentjs.com/ Moment.js | Home Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); Relative Time moment("20111031", "YYYY..

웹에서 그래프를 만들자! - 오픈소스 차트 라이브러리 billboard.js

코로나가 터지면서 많은 개발자들이 코로나 현황과 정보를 실시간으로 보여주기 위해 사이트를 개발했습니다. 코로나 현황을 보여주다보면 전일대비 얼마나 확진자가 증가했는지 등 한눈에 파악하게 알려주기 위해선 차트 사용이 필수적입니다. billboard.js 를 사용하면 데이터들을 차트로 쉽게 구현할 수 있습니다. billboard.js 란? billboard.js는 C3.js를 변형한 라이브러리 입니다. MIT 라이센스인 C3.js 를 네이버에서 변형하여 불편한 부분을 편리하게 만들어서 오픈소스로 배포하고 있습니다. c3js.org/ C3.js | D3-based reusable chart library Comfortable C3 makes it easy to generate D3-based charts by..

[자바스크립트] Date Range Picker : 기간 날짜 라이브러리

웹 개발을 하면서 날짜를 선택하여 사용자로부터 기간을 받고 싶을 때, 여러분들은 어떻게 하나요? 기본적으로 input 태그에 type을 date로 하여 2개의 input 필드를 만들 겁니다. See the Pen basic-date by wooncloud (@lomeiskk) on CodePen. 하지만 위의 방법은 첫 날짜가 마지막 날짜보다 이후의 날짜가 될 수 없고, 여러 가지 유효성 검사를 해야 하며, 직관적이지 않고 불편한 부분이 많습니다. 물론 제이쿼리 UI에서 제공하는 Date Picker를 보면 아래와 같이 기간을 설정할 수 있는 기능이 있습니다. 하지만 제 눈엔 예뻐 보이지 않네요. 여러분은 어떤가요? 이 디자인이 예쁘다면 사용하면 되겠지만, 그렇지 않으면 CSS를 싹 바꿔야 할지도 모릅니..

[자바스크립트] 날짜 형식 yyyy-MM-dd로 변환

function formatDate(date) { var d = new Date(date), month = '' + (d.getMonth() + 1), day = '' + d.getDate(), year = d.getFullYear(); if (month.length < 2) month = '0' + month; if (day.length < 2) day = '0' + day; return [year, month, day].join('-'); } 출처 : stackoverflow.com/questions/23593052/format-javascript-date-as-yyyy-mm-dd Format JavaScript date as yyyy-mm-dd I have a date with the format ..

[웹디자인] 로딩 오버레이 Loading.js

웹사이트를 제작하다 보면 사용자의 요청을 처리하는 동안 사람들의 조작을 잠시 막아둘 필요가 있을 때가 종종 찾아옵니다. 그럴 때 페이지마다 오버레이용 CSS를 만들어두거나 각 컨트롤러에 readonly를 걸어두는 등 복잡한 일을 하죠. 이번에 소개해드릴 loading.js는 로딩 중이라는 표시를 보여주고, 특정 공간의 사용자 조작을 막을 수 있는 플러그인입니다. 1. loading.js 웹사이트 carlosbonetti.github.io/jquery-loading/ jquery-loading Themes and default styles You must include the dist/jquery.loading.css file in your page if you want to use the default ..

[자바스크립트] 날짜에 일수 더하기

자바스크립트 AddDays 문자열로 이루어진 날짜에 더하고 싶은 일 수를 넣으면 그 날만큼 지난 날짜로 반환 매개변수 - date : 예시, '2020-10-15' 매개변수 - days : date에서 더하고 싶은 날짜 (음수 가능) 반환 : date에서 days만큼 더한 날짜 출력 function AddDays(date, days) { // date는 문자열로 받는다 ex, '2020-10-15' var result = new Date(date); result.setDate(result.getDate() + days); return result; }

[자바스크립트] 변수에 빈값인지 체크하기

자바스크립트 IsNullOrWhiteSpace 매개변수에 들어온 값이 undefined나 null인지 빈 string ("")인지 체크합니다 매개변수 : 빈값을 체크하고 싶은 내용 반환 : undefined 이거나 null 이거나 빈 string ("") 이면 true / 내용이 있으면 false // input값이 공백이거나 빈값이 있는지 없는지 체크 function IsNullOrWhiteSpace(input) { if (typeof input === 'undefined' || input === null) return true; return input.replace(/\s/g, '').length < 1; }