배찌의 개발자 블로그

회사에서 막대그래프 차트를 그리다가 해당 차트의 값에 대하여 yAxes에 데이터들의 Max값을 주기위한 방법을 찾다가 call, apply 함수를 발견하게되었다. 해결방법 Chart.js에서 yAxes 부분에 max: Math.max.apply(null, [${chartList.brsdCnt1}, ${chartList.brsdCnt2}, ${chartList.brsdCnt3}, ${chartList.brsdCnt4}]); 이 코드를 넣어주면 Max값을 뽑을 수 있음!! 자, 그러면 call() 과 apply()를 알아보자. const obj = { age = 20 } function myInfo(hobby){ console.log("나의 취미는 " + hobby + “이고, 내 나이는 ” + ${this..

ajax 통신은 많이 써봤지만 vanilla js 에서 ajax 통신은 안써본것같아서 공부해보려고 한다. 자바스크립트로 ajax통신을 할 때 흔히 jquery를 사용하지만, 순수 javascript를 통해 ajax 통신을 할때는 XMLHttpRequest 라는 API를 이용한다. XML은 원래 XML만을 전송하는 목적을 갖고 있었지만, JSON 이나 일반 텍스트는 물론 파일까지도 전송이 가능하다. AJAX라는 이름도 비동기 자바스크립트와 XML이다. (Asynchronous JavaScript And XML) POST방식은 GET방식과 거의 같지만, setRequestHeader()를 통해 헤더설정을 추가해야한다. 또한 전송할 데이터도 url이 아닌 .send()메소드 안에 넣어서 전송해야함.

JS에서 자주 사용되는 each문인데 $.each(functoin(index, item){ … } ); Index, item 이 가르키는것과 그 function 안에서 사용되는 $(this)의 개념이 잘 안잡혀있어서 정리하게 되었다. 요약하자면!! 두가지 표현이 있다. 1. jQuery 일반메서드인 $(“selector“).each(function(index, item){ … }); 2. jQuery 유틸리티 메서드인 $.each(object, function(index, item){ … }); 또는 $.each(arr, function(index, item){ … }); 1번부터 살펴보면, $(“selector“).each(function(index, item){ console.log( $(this) ..

회사에서 개발한 내용 정리하기!! 이슈사항 인증번호 전송에 대한 반복 호출 확인 - 1분 내 최대 5번만 호출되도록 수정 해결방법 js에서 제어하려고 함. 초기 인증번호 클릭 count = 0 으로 두고 setTimeout을 60초로 걸어서 60초 후에는 count 를 0으로 초기화 count가 5번이 넘어가면, alert창 띄우ㅕ return 시킴 "인증번호 전송은 1분간 최대 5번만 가능합니다."; 하지만..! 이렇게 되면 f12 개발자도구에서 count = 0;으로 넣어버리면 인증번호를 계속 받을 수 있게끔 조정할 수 있다.. 결론.... 인증번호 호출하는 서버단에서 count를 세어하는게 맞는 것 같다.. Js에서 제어하지 않고 Java단에서 제어하도록 수정!! 아래 코드는 js로 제어한것! (공..

해당 월에 해당하는 실 주유량, 추정주유량 을 종류별 주유량 (휘발유, 경유, LPG)으로 차트를 만들어야 했다. 참고 이미지!! 가장 힘들었던 부분.. 해당 월에 막대그래프가 2중으로 두개 그려져야하는 부분.. 툴팁으로 data를 막대그래프에 맞게 띄우는부분이 힘들었다. 구현해보기!! function setChart(){

1. npm i gh-pages 터미널에서 설치 - 결과물을 github pages에 업로드 할 수 있게 해주는 nice 한 패키지 - github에서 제공하는 무료 서비스!! - 파일을 올리면 웹사이트로 만들어서 무료로 배포해줌!! 2. package.json 파일의 맨아래에 추가해주기 "homepage": "https://{github username}.github.io/{github repository}" - github repository 가 없다면 깃허브에서 먼저 생성해주어야함. - git remote -v 실행하면 repository 이름을 확인할 수 있음. 3. package.json파일의 scripts에 추가해주기 "deploy" : "gh-pages -d build" "predeploy"..

API 데이터 제공 사이트 >> 공공데이터포털 data.go.kr data.jsp JSON Data List No 관할 경찰서 다발지역위치 경상자수 data.js $(document).ready(function(){ $.ajax({ //ajax 옵션 설정 url:"http://apis.data.go.kr/B552061/jaywalking/getRestJaywalking?serviceKey=발급받은key", type:"GET", dataType:"json", success:function(data){ let api_data=""; $.each(data.items.item, function(key, value){ api_data += ""; api_data += ""+key+""; api_data += ""..

test.htm 클릭하세요! OO 도서 이벤트의 댓글 참가자와 당첨자를 볼 수 있습니다. test.js window.onload = () => { document.getElementById( 'btn' ).addEventListener( 'click', function() { let json = { "book": [ { "isbn": "123-456-789", "author": { "name": "홍길동", "email": "hong@hongkildong.com" }, "editor": { "name": "이순신", "email": "lee@leesoonsin.com" }, "title": "대한민국의 정의는 죽었는가?", "category": [ "Non-Fiction", "IT", "Politics"..

[1] : JSON.parse( jsonText ) --> JSON 형식의 텍스트 --> 객체로 변환. let jsonText = '{ "name": "홍길동", "age": 20, "nationality": "대한민국" }'; console.log( "변환전 --> " + typeof jsonText ); // string const jsonObj = JSON.parse( jsonText ); console.log( "변환후 --> " + typeof jsonObj ); // object console.log( '--------------------------------------------------' ); console.log( jsonObj.name ); // 홍길동 console.log( jso..

Q. 한 권의 도서 정보를 갖고있는 JSON 데이터에서 해당 도서가 속해있는 카테고리를 출력하시오. [1] : 중첩 데이터 window.onload = () => { const book = { "isbn": "123-456-789", "author": { "name": "홍길동", "email": "hong@hongkildong.com" }, "editor": { "name": "이순신", "email": "lee@leesoonsin.com" }, "title": "대한민국의 정의는 죽었는가?", "category": [ "Non-Fiction", "IT", "Politics" ] } console.log( book["author"].name ); // 홍길동 console.log( book["edito..