Front-end/React53 [React] 화폐 단위 , 표시 예를 들어 1000000을 화면에 표현시, 가독성이 떨어진다. 1,000,00 처럼 화폐단위로 출력 Number(price).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") 받아올 숫자 (ex.13000).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') price 가 String 값으면 Number함수 사용하여 숫자화 시켜준다. 2022. 6. 3. [Chart JS] 도넛 그래프 굵기 변경 _ "react-chartjs-2" chart js 로 도넛 그래프 생성하는 예제입니다. 주목하실점은 저의 경우 import { Doughnut } from 'react-chartjs-2'; 를 임포트 하였습니다. 구글링과 정식 페이지에선 도넛의 굵기 조절을 option에서 cutoutPercentage / percentageInnerCutout 를 사용해서 조절하지만 문제는 안먹혔습니다. 찾고 찾고 또 같아서 option이 아닌 data에 설정 해주는걸 찾았습니다 const data = { plugins: [ChartDataLabels], // 라인 이나 막대에 data 값 출력 labels:labelData, datasets: [ { label: 'pieData', data: pieData, backgroundColor :objColo.. 2022. 4. 22. [Chart.js] options 설정 - bar 두께 조절 및 다양한 옵션 코드내에 주석으로 각 옵션에 대한 설명을 추가했다 공식사이트에 설명이 불친절 했기에 라이브러리 사용시 도움이 되길 바란다. const options = { spanGaps: true, // line 타입의 경우 중간에 누락된 데이터가 있을 경우 이어그릴지 여부를 정합니다! maxBarThickness: 10, // bar 타입의 경우 막대의 최대 굵기를 정합니다! grouped: true, // x축 값이 같은 애들끼리 그룹화할지를 정하는데요, // true 설정 시 해당 x축 값내에서 서로 공간을 나누면서 나란히 보여지게 되고, // false 설정 시 각 포인트가 해당 x축 정중앙에 그려지게 되어서 x축 값이 같은 애들끼리 서로 겹쳐지게 됩니다. interaction: { mode: 'index', .. 2022. 4. 21. [React] apexcharts 를 이용한 도넛 그래프 예제 저는 실제 데이터를 받아와서 출력했습니다. (아래 코드는 임의 데이터 넣은것) 퍼센테이지로 출력되며 hover시, 데이터라벨명과 값이 tooltip으로 출력됩니다. 도넛 가운데 total 카운트 도 출력되는 예제입니다. 리액트 그래프 라이브러리중 간결하며 사용하기 좋은 라이브러리 입니다. 라이브러리 사용하여, 도넛 그래프 출력 😎npm install / import import ReactApexChart from "react-apexcharts"; //npm install react-apexcharts apexcharts 😎script 코드 //도넛 차트 데이터 및 옵션 const donutData = { series: [50,40,30,10,0], options: { chart: { type: 'don.. 2022. 4. 8. [React] 스페이스바 안먹히는 오류 - 개인적 기록 프로젝트를 앞단은 React로 진행하게되었다. input 박스에 스페이스(공백) 이 안먹히는 오류가 생겨서 아무리 구글링을 해도 찾을 수가 없었다. 공백이 안먹히길래 아마 리액트 언어의 문제일꺼라고 생각했다 ( 말도안되지만 이런 생각을 하게된것이..스페이스바가 안먹힐 이유가없었다) 리액트를 사용하면서도 가끔 제이쿼리를 쓰기도 한다. 첫 페이지가 로그인 페이지로 되어있는데 아이디와 패스워드에 공백이 포함되만 안됨으로, 이렇게 keyCode를 받아서 방지처리를 해주었다. 리액트는 한페이지내에서 컴포넌트들을 호출하는 언어이다. 로그인할떄 저 코드하나로 모든 페이지에서 스페이스 바가 안먹혔던 것이다. 가끔 스페이스바 가 가능 할때도 있엇는데 그땐 새로고침 하여 로그인 로직이 아닌 자동로그인 로직을 타고 들어왔을.. 2022. 4. 1. [React] history.push()로 props 데이터 넘겨주기 부모-자식 component 관계가 아닌, routing으로 특정 페이지에서 다른 페이지로 이동 할때도 props를 넘겨 줄 수 있는 아주 간단한 방법이 있다. ( Function Component 기준 ) 1. 일반적인 history.push() 사용법 'Prev' 컴포넌트 에서 'Next' 컴포넌트로 이동 {history.push("/Next")}} /> 2. history.push()로 props 활용하기 2-1. history.push()로 props를 넘겨주는 방법 Prev 의 'displays' state를 Next 로 이동시 props로 넘겨주기 import { useHistory } from "react-router"; const history = useHistory(); {history... 2022. 3. 3. create-react-app 명령어 입력시 에러 해결법 : 'create-react-app'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. create-react-app 명령어를 통해 프로젝트를 생성할 때 아래와 같은 에러가 날때가 있다. create-react-app '프로젝트명' 'create-react-app'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 이럴때에는 yarn 또는 npm 을 통해 글로벌한 설정으로 설치해주면 된다. $ yarn global add create-react-app # yarn 으로 인스톨 해도 안될 시에는 npm 을 이용하여 설치한다. $ npm install -g create-react-app 2022. 1. 13. browserslist / browserslistrc 사용법 react등 프론트 개발시 허용하는 브라우져 구조 설정이 필요한 경우가 있습니다. 가벼운 프로젝트의 경우 설정을 package.json에 하는 경우가 대부분이지만, 브라이져 설정이 나눠져 따로 관리를 하는 경우가 많습니다. 언젠가부터 브라우저스리스트(browserslist)라는 것이 자주 눈에 띄더니 지금은 FE 개발 환경에서 뺄 수 없는 도구가 되었어요. 아마도 바벨(Babel)이라는 FE 계의 걸출한 스타 프로젝트에서 도입했기 때문일 거라고 생각합니다. 😎 Browserslist가 뭘까 소개는 짧게 할게요. 브라우저스리스트는 브라우저를 선택하는 옵션 기능만 따로 뽑아 놓은 도구라고 생각하시면 돼요. 어떤 프로그램이 브라우저에 대응해 내부에서 처리해야 할 작업이 다르다면 옵션으로 지원 브라우저 환경을 .. 2022. 1. 5. 리액트 익스플로러(IE11) 연동하기 react-app-polyfill 리액트 익스플로러(IE11) 연동하기 해당글은 익스플로러 가 돌아가시전에 사용했습니다. 추억으로 사라져버린 익스플로러를 기억하며.. rip.. 리액트 프로젝트(CRA)는 JavaScript의 최신버전인 ES6이상의 문법을 사용합니다. 하지만, 역시 기대를 져버리지않는 IE는 ES6문법을 지원하지않기 때문에.. 우리는 익스플로러에서도 ES6이상의 문법을 해독할 수 있게끔 처리를 해줘야 정상적으로 화면이 출력이 됩니다. www.caniuse.com - ES6 Template Strings 리액트 프로젝트(CRA) 익스플로러-IE11 실행시 화면 해당 이슈를 Polyfill을 적용하여 해결할 수 있습니다. 1. react-app-polyfill 모듈 설치 - npm사용시 : npm install react-a.. 2022. 1. 4. 이전 1 2 3 4 5 6 다음 728x90 반응형
