예방이의 개발일기

분명 tsconfig.paths.json에 alias를 설정했는데경로가 상대경로로 잡힌다. "typescript.preferences.importModuleSpecifier": "relative",vscode setting.json에 저 값이 relative로 되어있어서 그랬다. "typescript.preferences.importModuleSpecifier": "non-relative",non-relative로 바꿔준다. settings에서 바꿔줘도 된다.

✏️ context context는 전역적으로 데이터를 관리할 수 있게 도와 줄 수 있는 리액트 Hook 부모 -> 자식 -> 손자 이런 구조로 되어있고, 부모에서 손자까지 데이터를 공유하고 싶은면 항상 차례대로 데이터를 전달해 줘야했는데 context를 사용하면 바로 부모 -> 손자로 넘겨줄 수 있다. 🔥 주의점 다양한 레벨에 네스팅된 많은 컴포넌트들에게 데이터를 전달하는 용도 context를 사용하면 컴포넌트를 재사용하기 어려워진다. context 또는 컴포넌트 합성 둘 중에 더 상황에 맞는 것을 이용하도록! 나는 작업할 때 context 폴더를 만들어서 context를 관리하는 편! 응집도는 높이고, 결합도는 낮추기 위해 context 관련 소스는 해당 폴더, 해당 파일 안에서 관리하는 것이 좋은 ..

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