Frontend/React
-
tailwind theme에 색상을 지정해줬는데 적용이 안될 때 해결하는 방법 text-어떤색상 이렇게 적용하고 싶었는데 화면에 적용이 안된다. tailwind.config.js에 추가 설정을 해주어야한다.safelist: [ { pattern: /^text-|^bg-|^border-/, // You can display all the colors that you need }, ],
tailwind custom color가 적용이 안될때tailwind theme에 색상을 지정해줬는데 적용이 안될 때 해결하는 방법 text-어떤색상 이렇게 적용하고 싶었는데 화면에 적용이 안된다. tailwind.config.js에 추가 설정을 해주어야한다.safelist: [ { pattern: /^text-|^bg-|^border-/, // You can display all the colors that you need }, ],
2024.05.13 -
Vite로 리액트 프로젝트를 진행하다가 빨간 줄이 거슬려서 해결 방법을 찾아 봤다. eslint에서 나는 에러이다..eslintrc.json 또는 .eslintrc.cjs 페이지 중 한곳rules에 "react/prop-types": "off" 이 조건을 추가해주면 된다. rules : { "react/prop-types": "off"}
[eslint] react/prop-types, missing in props validationVite로 리액트 프로젝트를 진행하다가 빨간 줄이 거슬려서 해결 방법을 찾아 봤다. eslint에서 나는 에러이다..eslintrc.json 또는 .eslintrc.cjs 페이지 중 한곳rules에 "react/prop-types": "off" 이 조건을 추가해주면 된다. rules : { "react/prop-types": "off"}
2024.05.13 -
네이버 스마트 에디터가 생각보다 좋아서 리액트에 적용하고 싶은데... 네이버 스마트 에디터는 npm으로 설치가 불가한 것 같다. 그래서 생각해 낸 방법이 public 폴더에 에디터 html 을 만들고 그 html 파일을 컴포넌트 iframe에 넣어서 가져오는 방식이다!! 해봤더니 잘돼서 공유한다. https://github.com/naver/smarteditor2/releases Releases · naver/smarteditor2 Javascript WYSIWYG HTML editor. Contribute to naver/smarteditor2 development by creating an account on GitHub. github.com smarteditor2를 받아준다. 나는 표시한 파일을 받..
React에 네이버 SmartEditor2 적용하기네이버 스마트 에디터가 생각보다 좋아서 리액트에 적용하고 싶은데... 네이버 스마트 에디터는 npm으로 설치가 불가한 것 같다. 그래서 생각해 낸 방법이 public 폴더에 에디터 html 을 만들고 그 html 파일을 컴포넌트 iframe에 넣어서 가져오는 방식이다!! 해봤더니 잘돼서 공유한다. https://github.com/naver/smarteditor2/releases Releases · naver/smarteditor2 Javascript WYSIWYG HTML editor. Contribute to naver/smarteditor2 development by creating an account on GitHub. github.com smarteditor2를 받아준다. 나는 표시한 파일을 받..
2024.03.16 -
React에 CKEditor5을 적용하는데 설명이 너무 없는 것 같다... (내가 문서를 잘 이해 못하는 것일수도...) npm으로 CKEditor를 설치하게 되면 안깔린 플러그인들은 또 별도로 설치해줘야하는데 그렇게 하면 중복? 되었다는 에러가 계속난다... 그래서 찾은 방법이 CKEditor 홈페이지에 내가 필요한 플러그인들을 넣고 파일을 다운로드해서 프로젝트에 적용하는 것이다. 에디터 타입은 클래식으로 선택했다. UI 보고 원하는 것 선택하면 될듯!!! 필요한 플러그인들을 ADD 해준다. PREMIUM 뱃지가 붙은건 넣지말자! 아래 처럼 나중에 돈든다고 나온다... 30일만 사용가능하게된다. 나는 왠만한 플러그인들을 다 넣어줄 것이다!! 내가 추가한 플러그인들이다! 툴바에 보여졌으면 하는 플러그인들..
React에 CKEditor5 적용하기 (Online Builder)React에 CKEditor5을 적용하는데 설명이 너무 없는 것 같다... (내가 문서를 잘 이해 못하는 것일수도...) npm으로 CKEditor를 설치하게 되면 안깔린 플러그인들은 또 별도로 설치해줘야하는데 그렇게 하면 중복? 되었다는 에러가 계속난다... 그래서 찾은 방법이 CKEditor 홈페이지에 내가 필요한 플러그인들을 넣고 파일을 다운로드해서 프로젝트에 적용하는 것이다. 에디터 타입은 클래식으로 선택했다. UI 보고 원하는 것 선택하면 될듯!!! 필요한 플러그인들을 ADD 해준다. PREMIUM 뱃지가 붙은건 넣지말자! 아래 처럼 나중에 돈든다고 나온다... 30일만 사용가능하게된다. 나는 왠만한 플러그인들을 다 넣어줄 것이다!! 내가 추가한 플러그인들이다! 툴바에 보여졌으면 하는 플러그인들..
2024.03.15 -
분명 tsconfig.paths.json에 alias를 설정했는데 경로가 상대경로로 잡힌다. "typescript.preferences.importModuleSpecifier": "relative", vscode setting.json에 저 값이 relative로 되어있어서 그랬다. "typescript.preferences.importModuleSpecifier": "non-relative", non-relative로 바꿔준다. settings에서 바꿔줘도 된다.
react에서 alias가 상대경로로 지정 될 경우분명 tsconfig.paths.json에 alias를 설정했는데 경로가 상대경로로 잡힌다. "typescript.preferences.importModuleSpecifier": "relative", vscode setting.json에 저 값이 relative로 되어있어서 그랬다. "typescript.preferences.importModuleSpecifier": "non-relative", non-relative로 바꿔준다. settings에서 바꿔줘도 된다.
2024.01.15 -
✏️ context context는 전역적으로 데이터를 관리할 수 있게 도와 줄 수 있는 리액트 Hook 부모 -> 자식 -> 손자 이런 구조로 되어있고, 부모에서 손자까지 데이터를 공유하고 싶은면 항상 차례대로 데이터를 전달해 줘야했는데 context를 사용하면 바로 부모 -> 손자로 넘겨줄 수 있다. 🔥 주의점 다양한 레벨에 네스팅된 많은 컴포넌트들에게 데이터를 전달하는 용도 context를 사용하면 컴포넌트를 재사용하기 어려워진다. context 또는 컴포넌트 합성 둘 중에 더 상황에 맞는 것을 이용하도록! 나는 작업할 때 context 폴더를 만들어서 context를 관리하는 편! 응집도는 높이고, 결합도는 낮추기 위해 context 관련 소스는 해당 폴더, 해당 파일 안에서 관리하는 것이 좋은 ..
리액트 context 사용하는 방법✏️ context context는 전역적으로 데이터를 관리할 수 있게 도와 줄 수 있는 리액트 Hook 부모 -> 자식 -> 손자 이런 구조로 되어있고, 부모에서 손자까지 데이터를 공유하고 싶은면 항상 차례대로 데이터를 전달해 줘야했는데 context를 사용하면 바로 부모 -> 손자로 넘겨줄 수 있다. 🔥 주의점 다양한 레벨에 네스팅된 많은 컴포넌트들에게 데이터를 전달하는 용도 context를 사용하면 컴포넌트를 재사용하기 어려워진다. context 또는 컴포넌트 합성 둘 중에 더 상황에 맞는 것을 이용하도록! 나는 작업할 때 context 폴더를 만들어서 context를 관리하는 편! 응집도는 높이고, 결합도는 낮추기 위해 context 관련 소스는 해당 폴더, 해당 파일 안에서 관리하는 것이 좋은 ..
2024.01.06 -
Netlify 배포시 Fail 해결방법 일단 잘 build 되고 배포될 줄 알았다... Deploy Settings 클릭 Build Command 부분을 수정해줄 것이다. CI= yarn build
[Deploy] Netlify 배포 Failed 해결방법Netlify 배포시 Fail 해결방법 일단 잘 build 되고 배포될 줄 알았다... Deploy Settings 클릭 Build Command 부분을 수정해줄 것이다. CI= yarn build
2023.05.30 -
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
[Yarn] react에서 yarn berry (pnp) 에러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
2023.05.04 -
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..
[React] 리액트 range slider 라이브러리 사용해서 range bar 만들기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..
2023.04.26 -
참고 문서 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..
[React Chart] 리액트 chartjs legend custom 하기참고 문서 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..
2023.04.24 -
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..
[React Chart] 리액트 chart.js tooltip custom 하기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..
2023.04.24 -
loop : 자동 순환되게 설정을 했는데 처음 페이지 진입하면 마지막 페이지 부터 보여줌 구글 검색해 봤는데... 약간 Swiper 에러 같음 가뜩이나 pagination을 fraction타입으로 설정해놔서 3/3 -> 1/3 이런식으로 작동한다. initialSlide={1} 이라고 선언하니까 정상작동함 api 문서 설명에는 Index number of initial slide. 이렇게 작성되어있어서 0이라고 작성했는데 작동을 안함 알고보니 마지막 페이지가 swiper-duplicate? 라고 class가 주어져있고 젤 상단에 있어서 그랬던 것이였음 그래서 그 바로 뒤 index인 1을 주니까 1페이지부터 잘보여줬다.
[React Swiper] loop={true} 마지막 페이지 먼저보이는 에러loop : 자동 순환되게 설정을 했는데 처음 페이지 진입하면 마지막 페이지 부터 보여줌 구글 검색해 봤는데... 약간 Swiper 에러 같음 가뜩이나 pagination을 fraction타입으로 설정해놔서 3/3 -> 1/3 이런식으로 작동한다. initialSlide={1} 이라고 선언하니까 정상작동함 api 문서 설명에는 Index number of initial slide. 이렇게 작성되어있어서 0이라고 작성했는데 작동을 안함 알고보니 마지막 페이지가 swiper-duplicate? 라고 class가 주어져있고 젤 상단에 있어서 그랬던 것이였음 그래서 그 바로 뒤 index인 1을 주니까 1페이지부터 잘보여줬다.
2023.04.13