반응형

javascript 8

[Chart.js] stacked bar chart 만드는 법 ( customizing )

1. 완성 이미지 나의 경우에는 내가 진행하고 있는 개인 프로젝트에서 아무것도 없이 그래프만 나타나는 버전을 원했기에 chart.js 를 활용하여 customize 를 했다. 많이 참고자료가 없어서 오랜시간동안 API 와 구글링을 하였다. 2. 코드 설명 1) DATASET //chart.js 옵션 setting var data = { labels : ['a'], datasets : [ { label : 'a', data : [42], backgroundColor : '#4169e1' }, { label : 'b', data : [83], backgroundColor : '#87ceeb' }, { label : 'c', data : [31], backgroundColor : '#b0e0e6' }, ] }..

기타 Develop 2021.11.02

[Node.js] 사용 패키지 정리 2 - body-parser module

1. body-parser 란? 노드에서 쓰이는 모듈로 클라이언트 POST request data 의 body 로 부터 파라미터를 편리하게 추출한다. 모든 모듈을 컨트롤하는 app.js 에서만 쓰는 것이 아니라 viewer 를 연결하는 router.js 에서도 쓸 수 있다 처음에 app.js 에서만 사용하는 줄 알았지만 viewer 를 연결하는 router.js 에서도 사용해야 body-parser 가 데이터를 제대로 전달 할수 있다. 그렇지 않으면 undifined 가 뜨면서 데이터가 전달되지 않는다. 2. 사용법 - 설치 $ npm install body-parser - API 사용 var bodyParser = require('body-parser') The bodyParser object expo..

Back End/Node.js 2021.10.21

[JavaScript Error] ENOENT: no such file or directory, open

1. 에러 원인 This is probably because you are trying to write to root of file system instead of your app directory --> 앱 디렉토리(경로)가 아닌 root 경로에 쓰려고 해서 발생하는 것입니다 스트림에 대해서 공부하던 중 'createWriteStream' 에 대해서 공부하다가 나타난 에러이였다 2. 해결방법 const ws = fs.createWriteStream('src/big-file') 기존의 local 경로에서 src 아래의 경로로 수정해서 파일을 만들어 주었다 local 경로를 root경로로 인식하여 에러가 떴던것 같다. 3. 참고 링크 https://stackoverflow.com/questions/3481..

자바스크립트 기초 이론 - 패캠 node.js 바탕 기본 이론

1. 자바스크립트와 event loop - node 를 잘 이해하기 위해서는 자바스크립트의 동시성 모델에 대해 잘 이해해야 한다 - 자바 스크립트의 실행 모델은 event loop, call stack, callback queue 개념으로 이뤄진다 1) event loop, main thread 이벤트 루프 모델은 여러 스레드 사용 우리가 작성한 js 코드가 실행되는 스레드를 메인 스레드라 부름 한 node.js 프로세스에서 메인 스레드는 하나이며, 한 순간에 한줄씩만 실행 그외 일(file i/o, network..) 을 하는 워커 스레드는 여럿이 있을 수 있다. 2) call stack 지금 시점까지 불린 함수들의 스텍, 함수가 호출될 때 쌓이고, 리털할 때 빠짐 3) Run to completion..

언어/Java Script 2021.07.22

[Java Script Error] Chart Js Cannot read property 'length' of undefined

우선 chart.js 를 실행할 때, function( ) 을 사용하지 않아 위 에러가 발생했었지만, 다른 함수를 만들어 사용할 때도, 비슷한 에러를 몇번 발견한 적이 있었기 때문에.. 앞으로 함수를 만들어서 사용할 때는 꼭 function( ) 으로 감싸주고 사용해야 겠다. 원인 - The problem is that when your code executes, the canvas has not been created yet - 코드 실행시 가 아직 만들어지지 않았기 때문에 해당 문제가 발생 해결 - You should wrap your code inside a function and assign that function to window.onload event. - 코드를 function( ) 으로 ..

[Java Script] input 입력 값 자동으로 더하는 법

현재 참여하고 있는 프로젝트에서 input 값을 자동으로 더하는 법을 구현해야되어야 했고, 이 내용을 참고하여 추후에 다시 사용하기 위해서 기록했다. 전체적인 내용은 '잡다한 몽상백서' 블로그에서 발췌했다. 정보가 오래되어서 삭제될 가능성이 있었기에 전체적으로 가져와서 저장했다. 이를 응용한 다른 방법을 써보았으나, 아직 지식이 얕아..적용이 되지를 않아 아래 방법을 그대로 사용했다. 하기 링크를 발췌했다. 참고 링크 jobdahan.net/scriptstudy/1599950

언어/Java Script 2020.12.10

[JAVA Script] console.log( ) 와 document.write( ) 차이점

document.write() 메소드 document.write() 메소드는 웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력한다. 따라서 document.write() 메소드는 대부분 테스트나 디버깅을 위해 사용된다 아래 이미지와 같이 웹에 바로 뜬다. console.log() 메소드 console.log() 메소드는 웹 브라우저의 콘솔을 통해 데이터를 출력한다. 대부분의 주요 웹 브라우저에서는 F12를 누른 후, 메뉴에서 콘솔을 클릭하면 콘솔 화면을 사용할 수 있으며, 이러한 콘솔 화면을 통한 데이터의 출력은 좀 더 자세한 사항까지 출력되므로, 디버깅하는데 많은 도움을 준다. 아래 이미지와 같이 콘솔창에 바로 뜬다 둘다 디버그를 하거나 테스르를 할 때 쓰인다는 공통점이 있지만, ..

언어/Java Script 2020.11.26

[JavaScript] 자바스크립트 select 박스 동적으로 년도 넣기

자바 스크립트를 통해 처음으로 년도를 동적으로 집어넣어 보았다. 다른 방여러가지 방법들이 있지만, 그 중 한가지 방법으로 시도를 해보았다. 1. html 공간 만들기 span class="select"> 년도 우선, html 에 공간을 하나 만들어 주었다. 2. 자바 스크립트로 프로세스 만들기 $collectyears.ui ={ //날짜 옵션 설정 setDateBox : function(){ var dt = new Date(); var com_year = dt.getFullYear(); //올해 기준으로 -20년부터 +1년을 합쳐준다 years = ""; for(var i = (com_year - 20); i

언어/Java Script 2020.08.20
반응형