예방이의 개발일기

react-range-slider-input 라이브러리를 사용해서 range bar를 만들어 봤다. (툴팁이 있는 버전으로) react-range-slider-input는 별도로 툴팁나오는 옵션이 없어서 ul태그를 이용해서 만들어줬다. https://www.npmjs.com/package/react-range-slider-input react-range-slider-input React component wrapper for range-slider-input. Latest version: 3.0.7, last published: 4 months ago. Start using react-range-slider-input in your project by running `npm i react-range-sl..

참고 문서 https://www.chartjs.org/docs/latest/samples/legend/html.html HTML Legend | Chart.js HTML Legend This example shows how to create a custom HTML legend using a plugin and connect it to the chart in lieu of the default on-canvas legend. const getOrCreateLegendList = (chart, id) => { const legendContainer = document.getElementById(id); let li www.chartjs.org https://www.chartjs.org/docs/latest..

chart.js tooltip custom 하기 기본 공식문서 https://react-chartjs-2.js.org/ react-chartjs-2 | react-chartjs-2 React components for Chart.js react-chartjs-2.js.org https://www.chartjs.org/ Chart.js Simple yet flexible JavaScript charting library for the modern web www.chartjs.org 참고한 공식문서 부분 발췌 https://www.chartjs.org/docs/latest/configuration/tooltip.html#external-custom-tooltips Tooltip | Chart.js Names..

loop : 자동 순환되게 설정을 했는데 처음 페이지 진입하면 마지막 페이지 부터 보여줌 구글 검색해 봤는데... 약간 Swiper 에러 같음 가뜩이나 pagination을 fraction타입으로 설정해놔서 3/3 -> 1/3 이런식으로 작동한다. initialSlide={1} 이라고 선언하니까 정상작동함 api 문서 설명에는 Index number of initial slide. 이렇게 작성되어있어서 0이라고 작성했는데 작동을 안함 알고보니 마지막 페이지가 swiper-duplicate? 라고 class가 주어져있고 젤 상단에 있어서 그랬던 것이였음 그래서 그 바로 뒤 index인 1을 주니까 1페이지부터 잘보여줬다.

공식문서에 보면 get started 에서 css import하는 방식을 // import Swiper and modules styles import 'swiper/css'; import 'swiper/css/navigation'; import 'swiper/css/pagination'; 위와 같이 작성하면 된다고 적혀있는데 이상하게 위와 같이 import하면 안된다? 이유는 나도 모르겠다... 해결방법은 import "swiper/swiper-bundle.css"; 이렇게 import하면 잘된다!! 공식문서 get started https://swiperjs.com/get-started Getting Started With Swiper Swiper is the most modern free mobile..

* 참고 문서 https://swiperjs.com/swiper-api#autoplay Swiper API Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com Autoplay를 모듈에 작성해준다. - disableOnInteraction -> 내가 만약 임의로 페이지를 넘겼을 때 (기본값이 true) true : 자동 재생이 멈춤 (재생버튼이 있으면 재생버튼을 눌러줘야지 다시 autoplay가 된다) false : 내가 임의로 넘긴 페이지부터 자동재생이 계속된다. 자동 재생 버튼 컴포넌트 만들기 아래 stackoverflow..

리액트에서 Swiper 모듈 사용하기 * 일단 Swiper를 npm install 했다는 전제하에 1. swiper를 import 해준다. import React, { useRef, useState } from 'react'; import { Swiper, SwiperSlide } from 'swiper/react'; import SwiperCore, { Autoplay, FreeMode, Pagination, Navigation, A11y, } from 'swiper'; 2. swiper 컴포넌트 사용하기 swiper props로 공식문서를 확인하면서 필요한 것을 추가하면된다. https://swiperjs.com/swiper-api Swiper API Swiper is the most modern f..

JQuery에서 attr() vs .prop() 차이점 ✅ attr() .attr()은 HTML 요소의 속성 값을 가져오거나 설정하는 데 사용 이미지의 src 속성값을 가져오거나 설정할 때 사용 ✅ prop() .prop()은 HTML 요소의 프로퍼티 값을 가져오거나 설정하는 데 사용 요소의 checked 프로퍼티 값을 가져오거나 설정할 때 사용 💡 대부분의 경우 두 메소드 중 어느 것을 사용해도 상관 없음, 그러나 .prop()을 사용하는 것이 더 안정적 속성값과 프로퍼티 값의 차이점 1. 속성값은 HTML 문서에서 태그에 지정된 속성 예를 들어, http://example.com"> 에서 href는 속성 -> 이 속성은 HTML 문서에 명시되어 있으며, HTML 요소가 DOM에 로드될 때 속성 값이 ..

JavaScript에서 전략 패턴(Strategy Pattern)은 알고리즘의 집합을 정의하는 인터페이스와 그 인터페이스를 구현하는 클래스로 구성됩니다. 클래스는 인터페이스를 상속받아 구현합니다. 이 알고리즘은 런타임에 쉽게 변경할 수 있습니다. 전략 패턴은 알고리즘을 구조적으로 분리하여 각각의 알고리즘을 독립적으로 변경할 수 있도록 하는 디자인 패턴입니다. 이 패턴을 사용하면 각각의 알고리즘을 쉽게 교체할 수 있어 개발 및 유지보수의 효율성이 높아집니다. 전략 패턴은 프로그램의 구조를 변경하지 않으면서 알고리즘을 변경할 수 있는 기능을 제공합니다. 이 패턴을 사용하면 높은 유연성을 가진 알고리즘을 쉽게 구현할 수 있습니다. - 알고리즘의 집합을 정의하는 인터페이스?? "알고리즘"이란, 특정 문제를 해결..