Front-end100 접속 기기 [모바일,태블릿,웹 등등] 체크 사이트를 접속한 기기가 컴퓨터(웹)인지 모바일(핸드폰,태블릿)인지~ 간단한 코드로 확인 가능하다. var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); or var isMobile = /Mobi/i.test(window.navigator.userAgent); isMobile 값은 TRUE / FALSE 로 나온다. if(isMobile){ location.href="../mobile/index.html"; } 첫 접속 화면이 모바일 일시, 모바일 반응형 페이지로 우회 2022. 8. 30. [React] image 마우스 wheel 로 zoom In/Out 하기 (라이브러리 사용) react-zoom-pan-pinch 라이브러리 사용하여 스크롤로 이미지를 확대/축소 하는 기능 https://www.npmjs.com/package/react-zoom-pan-pinch 리액트로 이미지를 확대 축소하는 많은 라이브러리들이 있지만 비교적 사용이 쉽고 최근(대략 8개월) 전에 업그레이드도 진행된 편 (다른라이브러리들은 3-4년전 이 마지막 업데이트 현 리액트버전과 맞지 않은 경우도 있었다) 😎install npm i react-zoom-pan-pinch 😎 import import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; 😎 code 이미지를 감싸주기만 하면 줌 인/아웃 가능 https://prc5.gith.. 2022. 8. 30. [react-chartjs-2] 누적 그래프 + 라인 그래프 합치기 리액트 차트를 만들면서 가장 오류/버그 적게 사용한 차트 라이브러리는 react-chartjs-2 react-chartjs-2 의 단점은 공식사이트의 정보가 다소 부족하고 ( 다른 라이브러리도 동일) 화려한 애니메이션이 기본으로 제공되지 않다. 그러나 충분히(많이 찾아보고) 커스텀 가능 하다 react-chartjs-2 라이브러리에선 누적 바 차트 / 라인 차트 가 분리되어 있지만 바 차트 + 라인차트 같이 출력하는 코드를 보고 누적 바 + 라인 차트를 커스텀해 만들어보았다. 출력되는 그래프 toolTip 도 커스텀 해서 출력 하였다 😁 npm install //기본 설치 npm i chart.js //차트제이에스 2를 사용하기 위한 설치 npm install react-chartjs-2 chart.js.. 2022. 7. 12. [JavaScript]소수점 반올림하는 방법 toFixed() 함수 toFixed() 함수 toFixed() 함수는 인수로 전달된 소수 자릿수로 반올림된 숫자를 문자열 타입으로 반환한다. 다음은 toFixed() 함수 사용 예제. (123.678).toFixed(); // 124 (123.678).toFixed(1); // 123.7 (123.678).toFixed(2); // 123.68 (123.678).toFixed(3); // 123.678 (123.678).toFixed(4); // 123.6780 typeof (123.678).toFixed(4); // string toFixed() 함수의 반환 결과를 숫자로 변환하기 위해 Number() 함수를 사용할 수 있다. 2022. 7. 4. [nivo chart] HeatMap chart 리액트 니보 차트 라이브러리 사용법 니보 공식사이트는 추가설명이 너무 불친절 해서 사용하기 어려웠다. 초반 어떤걸 다운 받고 어떤걸 임포트 해야하는지 정보제공이 매우 불친절.. 그럴꺼면 왜 공식사이트를 만든건지 개인적으로 평소 차트 라이브러리는 chart js 를 가장많이 사용한다. chart js는 아쉽게도 HeatMap 차트가 없다. https://nivo.rocks/ Home | nivo nivo.rocks 🍖완성 화면 🍕Install // npm install @nivo/core // 기본적으로 설치 // npm install @nivo/heatmap 🍔import import { ResponsiveHeatMap } from '@nivo/heatmap' 차트 라이브러리 는 대부분 2가지만 신경쓰면된다 data / option - 데.. 2022. 7. 4. 랜덤 숫자 출력 - 범위 지정 Math.random() 함수는 0이상~1미만의 난수를 생성한다. (예 : 0.579541) Math.random(); Math.floor() 함수는 해당숫자와 같거나 해당숫자 보다 더 작은 정수를 반환 한다. Math.floor(2.5); //결과 2 Math.floor(-2.5); //결과 -3 Math.random() 함수를 이용하여 범위지정을 할 수 있는 함수를 만든다. var min = 1//범위지정 최소값 var max = 10//범위지정 최대값 let randNum = Math.floor(Math.random()*(max-min+1)) + min; 2022. 6. 30. CSS 로 텍스트 줄바꿈 하는 간단한 방법 const text = "동해물과 백두산이\n 마르고 닳도록" JSX에서는 개행 문자(‘\n’)가 동작하지 않아 줄바꿈이 되지않고 출력된다. \n 개행문자를 치환하는 방법도있지만 CSS로 간단하게 설정 가능하다 white-space: pre-wrap; 2022. 6. 16. [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. moment.js 사용 방법 - JavaScript 날짜 라이브러리 😎 설치 npm install moment 😎 import import moment from "moment"; 😎 사용법 현재 날짜 및 시간 - moment() var now = moment(); now.format(); // 2021-10-09T00:01:13+09:00 moment() 함수를 사용해 현재 날짜와 시간 객체를 생성할 수 있습니다. 날짜 지정 생성 - moment() var date = moment("2021-10-09"); date.format();// 2021-10-09T00:00:00+09:00 var date = moment("2021.10.09", "YYYY.MM.DD"); date.format();// 2021-10-09T00:00:00+09:00 var date = momen.. 2022. 4. 26. 이전 1 ··· 3 4 5 6 7 8 9 ··· 12 다음 728x90 반응형
