kasumil의 코딩 공작소

차트 js를 사용하다보면 차트 내에서 해당 값이 어떤지 표시할 필요가 있다. 시안성 측면에서 매우 유리하니까. 그런데, 이게 기능구현이 매우 어려웠다. 왜 안되나 했더니 이게 확장 라이브러리로 지원하는 기능이었네? 사용방법은 3번째 링크를 참조하자. 대충 공식문서를 보면 plugins 코드 안에 설정하고, data 객체에도 따로 넣어주면 된다. 하지만 3번째 링크보면 더 자세히 설명되어 있다. Chart.defaults.set('plugins.datalabels', { color: '#FE777B' }); var chart = new Chart(ctx, { options: { plugins: { // Change options for ALL labels of THIS CHART datalabels: { ..

출처 ttps://stackoverflow.com/questions/56237161/how-can-i-use-node-js-buffer-library-in-client-side-javascript How can I use node.js buffer library in client side javascript I would like to use buffer library (in order handle binary data) in my website. here is my use case: const privateKey = Buffer.from('

여러모로 해봤는데, 버그가 너무 많습니다. 기본적으로 깔려야하는 게 없어서... 그냥 npx create-react-app으로 하나의 폴더를 만들고 써야할 lib가 적힌 package.json을 ci4\package.json과 npx로 만든 react.js와 동일하게 세팅해주세요. npm i 하여 node_modules를 만듭니다. 그렇게 다운로드한 폴더를 해당 폴더를 이전 글에 적어두었던 위치로 node_modules 파일을 대체합니다. 그리고 명령어 쳐서 재빌드! webpack --config webpack.config.js --stats-error-details test는 리액트 폴더에서 하고 완성된 것을 그냥 ci4폴더로 이동 시키는게 제일 오류가 적어요.

php를 쓰면 보통 php는 서버단 세션을 사용할 것이다. 왜냐면 진짜 안전하니까... 서버가 관리하니 외부 노출이 안되서 너무 좋다. 이번에는 js 라이브러리의 모듈에서 특정 값을 추출해 이를 서버로 던져줘야 해서 해당 값을 가져와야 했는데, 처음에 손쉽게 쿠키를 사용했다. 아니면 방법이 없어서.... 이게 나중에 발견된 문제였는데, 다중 접속시 쿠키값이 공유가 되어 덮어 쓰는 문제가 생겼다. 이걸 어떻게 해결하나 싶었는데, 고민하다가 front-end단의 세션스토리지가 있더라. 이름이 같아서 생각하지 못 한 부분이었다. 찾아보니 프론트엔드단의 세션스토리지도 서버의 세션처럼 한개의 탭이나 창을 열면 그때마다 새로 세션스토리지를 생성한다. 그로 인해 덮어쓰기가 진행되지 않아 모든 값을 여기로 던져버렸다 ..

https://www.chartjs.org/docs/latest/getting-started/ Getting Started | Chart.js Getting Started Let's get started using Chart.js! First, we need to have a canvas in our page. It's recommended to give the chart its own container for responsiveness. Now that we have a canvas we can use, we need to include Chart.js in our page. Now, we c www.chartjs.org 차트 작성법은 뭐 대충 이렇고 레이다 차트의 속성이 중요하다. const rada..

원래는 이분 코드를 썼으나 나에게 맞지 않아서 수정하였다. https://wooncloud.tistory.com/26#comment21335878 [자바스크립트] Date Range Picker : 기간 날짜 라이브러리 웹 개발을 하면서 날짜를 선택하여 사용자로부터 기간을 받고 싶을 때, 여러분들은 어떻게 하나요? 기본적으로 input 태그에 type을 date로 하여 2개의 input 필드를 만들 겁니다. See the Pen basic-date by w wooncloud.tistory.com $(function () { $('#dates').daterangepicker({ "locale": { "format": "YYYY-MM-DD", "separator": " ~ ", "applyLabel": "확..

https://marketplace.visualstudio.com/items?itemName=jundat95.react-native-snippet React Native Snippet - Visual Studio Marketplace Extension for Visual Studio Code - React Native, Typescript React Native, StyleSheet, Redux Snippet marketplace.visualstudio.com 원래는 스니펫을 일일히 설정해줘야하는데, 귀-찮. 누가 이걸 vscode 확장 프로그램으로 만들어놨다. 이것이 누군가에게는 쓸모없을지라도여러 개의 반복되는 것을 치는 것은 매우 귀찮다. Console clg→ console.log(object) c..

Styled-component import React from 'react'; import styled from 'styled-components'; import Button from './components/Button'; const AppBlock = styled.div` width: 512px; margin: 0 auto; margin-top: 4rem; border: 1px solid black; padding: 1rem; `; function App() { return ( BUTTON ); } SCSS import React from 'react'; import './Button.scss'; function Button({ children }) { return {children}; } expor..

1 2 3 4 5 6 7 8 9 // id 체크 정규식 : 숫자, 영문만 입력 가능 var regExpId = /^[0-9a-z]+$/; // 비밀번호 규칙 정규식 // : 숫자, 특문 각 1회 이상, 영문은 2개 이상 사용하여 8자리 이상 입력 var regExpPw = /(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/; // 이메일주소 형식 체크 정규식 var regExpEm = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i; 흔하게 보는 비밀번호 정규식이다. 8글자 이상 kisa가 지키라고 권고한 8글자 이상 비밀번호 정규식이다...

function getTimeRemaining(endtime) { var t, seconds, minutes, hours, days; t = Date.parse(endtime) - Date.parse(new Date()); seconds = Math.floor((t / 1000) % 60); minutes = Math.floor((t / 1000 / 60) % 60); hours = Math.floor((t / (1000 * 60 * 60)) % 24); days = Math.floor(t / (1000 * 60 * 60 * 24)); return { 'total': t, 'days': days, 'hours': hours, 'minutes': minutes, 'seconds': seconds }; } ..