네이버 스마트 에디터가 생각보다 좋아서 리액트에 적용하고 싶은데...네이버 스마트 에디터는 npm으로 설치가 불가한 것 같다. 그래서 생각해 낸 방법이 public 폴더에 에디터 html 을 만들고 그 html 파일을 컴포넌트 iframe에 넣어서 가져오는 방식이다!!해봤더니 잘돼서 공유한다. https://github.com/naver/smarteditor2/releases Releases · naver/smarteditor2Javascript WYSIWYG HTML editor. Contribute to naver/smarteditor2 development by creating an account on GitHub.github.comsmarteditor2를 받아준다.  나는 표시한 파일을 받아줬다...

React에 CKEditor5을 적용하는데 설명이 너무 없는 것 같다... (내가 문서를 잘 이해 못하는 것일수도...) npm으로 CKEditor를 설치하게 되면 안깔린 플러그인들은 또 별도로 설치해줘야하는데 그렇게 하면 중복? 되었다는 에러가 계속난다... 그래서 찾은 방법이 CKEditor 홈페이지에 내가 필요한 플러그인들을 넣고 파일을 다운로드해서 프로젝트에 적용하는 것이다. 에디터 타입은 클래식으로 선택했다. UI 보고 원하는 것 선택하면 될듯!!! 필요한 플러그인들을 ADD 해준다. PREMIUM 뱃지가 붙은건 넣지말자! 아래 처럼 나중에 돈든다고 나온다... 30일만 사용가능하게된다. 나는 왠만한 플러그인들을 다 넣어줄 것이다!! 내가 추가한 플러그인들이다! 툴바에 보여졌으면 하는 플러그인들..

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