yarn으로 패키지를 설치하니까 .yarn 파일이 엄청 많이 생겼다. 그것도 모르고 터미널로... git add . 해버렸더니... 깃헙 레파지토리에 올라가질 않는다...ㅎㅎㅎ ㅠㅠㅠ 그래서 그냥 프젝 다시 파서 하기로... 초기에 알아서 다행이다. 이 글을 참고했다. Am I meant to commit yarn's `.pnp.js` file? Yarn includes an optional "Plug'n'Play" feature which moves node_modules out of the project directory. In doing so it creates a .pnp.js file with references to various dependency paths on the hard ... st..

JSON 데이터를 빠르게 만들어주는 사이트들이다. 가 데이터 만들 때 사용하면 편하다. DB에서 데이터 가져오는 척 해줄 수 있는 사이트 이다. 초기 프론트엔드 프로젝트 작업할 때 유용하다. ✨ JSON Generator 1. JSON GUI JSON GUI A JSON Viewer and editor for visually editing JSON files. Supported file types for importing and exporting are CSV, YAML, XML etc. You are also able to generate JSON patches (RFC6902). json-gui.esstudio.site 2. Objgen ObjGen - Live Code Generation for t..

Netlify 배포시 Fail 해결방법 일단 잘 build 되고 배포될 줄 알았다... Deploy Settings 클릭 Build Command 부분을 수정해줄 것이다. CI= yarn build

yarn berry를 쓰면서 아래와 같은 에러가 났을 때 해결방법 1. 터미널에 아래 명령어 입력한다. yarn add -D eslint-config-react-app 2. 젤 상위 폴더에 .yarnrc.yml 파일을 생성한다. 3. 해당 파일에 아래 내용을 띄어쓰기 주의해서 작성해준다. (파일명만 바꾸면 됨 맨앞에 점 붙이기) packageExtensions: react-scripts@*: peerDependencies: eslint-config-react-app: '*' 4. 위에 과정 후 계속 에러가 난다면 터미널에 아래 명령어를 차례대로 입력해준다. yarn cache clean yarn install yarn start

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..