내맘대로 개발일지

📱테스트 환경"react": "18.3.0","react-dom": "18.3.0"map 을 사용하다보면Warning: Each child in a list should have a unique "key" prop.이런 경고 에러메시지를 볼 수 있다.해당 코드를 보면 {category && category[2] && category[2].map((v, i) => ( setSelected(prev => (prev === v.no ? null : v.no)) }> {v.name} {i !== category[2].length - 1 && } ..

📱테스트 환경"react": "18.3.0","react-dom": "18.3.0"Antd DatePicker 를 사용하면 영어로 나온다.이를 위해서 locale 을 한글로 바꿔주는 작업을 해야하는데문서에 나와있는대로 바꾸면 반쪽짜리가 되는 이슈가 있을 것 이다.import {ConfigProvider} from "antd";import ko_KR from "antd/lib/locale/ko_KR"; 이 뿐만 아니라 dayjs locale 도 한글로 바꿔줘야한다.다른 블로그나 다른 곳에서 보면 moment 를 쓰라는 곳도 있지만왠만하면 dayjs 를 사용할 수 있도록 하자.이유는 여기서 보면 된다. [React] Moment 대신 Day.js📱테스트 환경"react": "18.3.0","react-..

📱테스트 환경"react": "18.3.0","react-dom": "18.3.0"드래그 앤 드랍 기능을 만들기 위해서여러 라이브러리를 살펴봤지만 폴더구조까지 가진 라이브러리가딱히 보이지도않았고 맘에 드는게 없었다.그러다가 react-complex-tree 를 딱 봤는데 react-complex-treeUnopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop. Latest version: 2.4.6, last published: a month ago. Start using react-complex-tree in your project by running `npm i react-complex-tree`. There are 2..

📱테스트 환경"react": "18.3.0","react-dom": "18.3.0"props 로 Element 를 넘길때가 있어서 기존에 사용하던JSX.Element 를 타입으로 줬다.내 코드는 다음과 같다.export const CardHeader = ({ label, info, onClick = () => { }, buttonText, buttonWidth, ..

📱테스트 환경"react": "18.3.0","react-dom": "18.3.0"React 에서 엑셀을 다운받는 기능을 추가하려고 한다.처음에는 xlsx 를 이용했는데 넘 못생겨서 스타일을 추가하려고 하니xlsx-js-style 라이브러리를 이용하면 된다고 해서 사용했다.예제만 따라해도 쉽게 사용할 수 있어서 금방 적용할 수 있었다.내 코드는 다음과 같다.import * as XLSX from "xlsx-js-style";export const excelDownLoad = (data: any) => { const worksheet = XLSX.utils.json_to_sheet(data); const headerStyle = { font: {bold: true, color: {..

📱테스트 환경"react": "18.3.0","react-dom": "18.3.0"나는 React 에서 Styled-Components 를 사용하는데전부 커스텀가능하게 만들고 사용한다.예를 들어서export const Flex = styled.div.` display: flex; align-items: ${(props) => props.alignItems || "center"}; justify-content: ${(props) => props.justifyContent || "center"}; gap: ${(props) => (props.gap ? `${pixelToRem(props.gap)}` : 0)}; flex-direction: ${(props) => props.fle..