전체보기 125

chartJS(1) 데이터의 시각화를 시작하자 - 기본적인 막대차트

회사에서 판매하는 솔루션에 보고서 형식의 웹페이지가 필요하게 되었다. 내가 만들게 되었고, 무료로 사용할 수 있는 차트라이브러리 중 가장 깔끔한 chartJS를 사용해 만들어보게 되었다. 1. 기본적인 차트 만들기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 //document.getElementById를 통해 canvas의 ID를 가져오고, new Chart로 생성한..

[JAVASCRIPT] 윈도우 스크롤 위치

홈페이지를 만들 때, 길이 아래로 길어지게 된다면 아래 동영상처럼 내비게이션 바를 만들 때가 있다. 클릭을 해서 해당 contents로 이동이 가능해야 하고, 스크롤로 이동할 때도 현재 스크롤 위치에 맞춰서 바의 모양도 변경이 되어야 하는데, 이 때 필요한 것이 window.scroll() 이다. $(window).scroll(function () { var scrollValue = $(document).scrollTop(); console.log(scrollValue); }); 해당 함수를 소스에 적용하고 웹에서 개발자 도구를 연 후에 스크롤을 이동시켜보면 현재 스크롤의 위치가 console.log를 통해 보이게 된다. TEST1 TEST2 TEST3 TEST4 위와 같이 4개의 div가 있을 경우 해..

[JAVASCRIPT] ES5 -> ES6 바뀐 함수 사용법

[함수의 매개변수가 1개일 때] ES5 ES6 var one = function one(a) { return console.log(a); }; let one = a => console.log(a); [함수의 매개변수가 2개일 때] ES5 ES6 var two = function two(a, b) { return console.log(a, b); }; let two= (a, b) => console.log(a, b); [함수의 내용이 여러 개일 때] ES5 ES6 var three = function three(a, b) { console.log(a); console.log(b); }; let three = (a, b) => { console.log(a); console.log(b); } [함수의 매개변수..

주저리주저리

방장은 PHP/JAVASCRIPT 개발자이다. 원래는 네트워크 엔지니어로 2년간 근무했었다. 벤더사가 아닌 파트너사에서 근무했었는데, 문제가 생길 때 스스로 처리할 수 있는 부분이 거의 없다는 것에 대해 무력감을 느꼇다. 모든 솔루션은 완벽하지 않고, 버그가 존재하며 이를 해결하기 위해서는 결국 개발자의 개입이 필요했다. 결국 퇴사를 했고 이직을 한 회사에서 운이 좋게 막내 웹 개발자로 들어가게 되었다. 하지만 회사는 웹 백엔드 언어로 PHP를 사용하고 있고, JAVA가 대세인 우리나라에서 PHP개발자로서의 입지는 매우 좁다고 들었기 때문에 나는 주력을 JAVASCRIPT로 하기로 마음을 먹고 이 블로그를 운영하게 되었다. 주저리주저리