본문 바로가기

메모같은기록14

[React] html-react-parser dangerouslySetInnerHTML를 사용하다가 보안상의 이슈로 html-react-parser 라이브러리를 사용하게 되었다dangerouslySetInnerHTML는 HTML 마크업을 컴포넌트에 직접 삽입할 때 사용한다리액트는 XSS(Cross-Site Scripting) 공격을 방지하기 위해HTML이나 JavaScript 코드가 컴포넌트에 삽입되는 것을 제한하는데dangerouslySetInnerHTML를 사용하면 이 제한을 무시하고 직접 삽입말그대로 dangerous 해진다dangerouslySetInnerHTML 사용const App = () => {const htmlString = `!! 나는 위험한 속성이다 !!`; return ( );};export default App.. 2024. 9. 20.
[React] clsx 라이브러리 클래스 이름을 조건부로 병합하거나 동적으로 관리할때 사용 clsxA tiny (239B) utility for constructing className strings conditionally.. Latest version: 2.1.1, last published: 5 months ago. Start using clsx in your project by running `npm i clsx`. There are 10443 other projects in the npm registry using clsx.www.npmjs.com라이브러리 installnpm install clsxyarn add clsx import clsx from 'clsx';function Button({ isPrimary, isDisab.. 2024. 9. 19.
[React] useOutletContext로 props 전달 useOutletContext는 컴포넌트에 내장된 Hook으로 자식 컴포넌트에게 props를 전달할때 사용한다라우터 설정import { createBrowserRouter } from 'react-router-dom';export default createBrowserRouter([ { path: '', element: [], errorElement: , children: [ { path: '/home', element: , }, { path: '/work', element: , children: [ { path: '', element: }, { path: .. 2024. 8. 30.
[Flutter] iOS 에뮬레이터에서 가상 키보드 보이도록 설정 2024. 6. 4.
내가 쓰기 좋았던 목업 사이트 웹 포토샵 Photopea | Online Photo Editor ✕ Photopea: advanced photo editor Free online photo editor supporting PSD, XCF, Sketch, XD and CDR formats. (Adobe Photoshop, GIMP, Sketch App, Adobe XD and CorelDRAW). Create a new image or open existing files from your computer. Save your work as PSD ( www.photopea.com 목업 1. shots.so - 디바이스 목업 그림자 & 배경 색을 넣어주고 고를 수 있다 Create Amazing Mockups Create Amazing M.. 2024. 3. 13.
[React] Cypress로 E2E 테스트 E2E 테스트 ( End-to-End ) 사용자의 관점에서 애플리케이션을 테스트 애플리케이션의 모든 부분이 의도한 대로 작동하는지 확인하는 데 중점을 둔다 cypress Cypress is a next generation front end testing tool built for the modern web. Latest version: 13.5.0, last published: 5 days ago. Start using cypress in your project by running `npm i cypress`. There are 521 other projects in the npm registry using cypress www.npmjs.com 라이브러리 install npm install --dev .. 2023. 11. 14.
[React] react-csv 사용 데이터 csv 파일 다운로드 React-csv react-csv Build CSV files on the fly basing on Array/literal object of data . Latest version: 2.2.2, last published: 2 years ago. Start using react-csv in your project by running `npm i react-csv`. There are 268 other projects in the npm registry using react-csv. www.npmjs.com React-csv 라이브러리 다운로드 npm install react-csv npm install @types/react-csv or yarn add react-csv yarn add @types/.. 2023. 11. 7.
[React] exceljs 사용 데이터 엑셀 다운로드 기존엔 react-csv를 사용했는데 한국어 입력시 오류가 나서다른 라이브러리를 찾아보았다아쉽게도 2개의 라이브러리가 필요 (이거맞아?)exceljs와 file-saver 라이브러리인데exceljs만으로는 아쉽게도 client쪽에서 엑셀 다운로드가 지원되지 않는다고 한다exceljs - JavaScript 환경에서 엑셀 파일을 생성, 수정, 읽기, 쓰기 기능을 하는 라이브러리 exceljsExcel Workbook Manager - Read and Write xlsx and csv Files.. Latest version: 4.4.0, last published: a year ago. Start using exceljs in your project by running `npm i exceljs`. The.. 2023. 11. 7.
[React] React.memo & useMemo React.memo는 컴포넌트 자체의 렌더링을 최적화하는 데 사용 useMemo는 특정 값이나 변수의 계산된 값을 저장하여 재계산을 방지하는 데 사용 export default React.memo(Component); 컴포넌트의 렌더링 최적화를 위해 React.memo를 사용하는 것만으로 충분할 수 있다. useMemo는 특정 변수에 대한 성능 최적화를 위해 추가적으로 사용될 수 있다. 2023. 11. 6.

티스토리툴바