내맘대로 개발일지

📱테스트 환경"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..

📱테스트 환경"react": "18.3.0","react-dom": "18.3.0"이번에 Antd RangePicker 연결하면서 Dayjs 을 사용하는 것을보고오랜만에 잊고있었던 Day.js 가 생각나면서 흔히 사용하는 Moment 대신 사용하는이유를 다시한번 상기하는 시간을 가지게 되면 좋을 것 같아 기록하게 되었다.Moment.js와 Day.js는 모두 날짜와 시간 작업을 위한 라이브러리이다.두 라이브러리 모두 시간 형식 지정, 날짜 조작, 타임존 지원 등의 기능을 제공한다.MomentDay.js날짜 형식 지정 및 변환Moment.js와 비슷한 API 제공날짜 간 차이 계산불변성 (immutable data structure) 지원날짜 조작 (더하기, 빼기 등)빠르고 가벼운 성능다양한 로케일 지원..

📱테스트 환경"react": "19.0.0-rc-02c0e824-20241028","react-dom": "19.0.0-rc-02c0e824-20241028","next": "15.0.2"이번에 React 가 19로 업데이트 되면서 바로 최신버전을 사용하려고했고 Antd 를 사용하여 스타일을 적용할 생각이였다.근데 React 가 19로 업데이트되면서 render 방식이 변경되었는데아직 최신 Antd 에서는 해당 반영이 안됐고편법으로 dynamic 를 사용해서 쓰려고 했는데도 당연히 안됐다.해당 방법을 수정할 방법이 있다면 좋겠지만일단 Antd 에서 업데이트가 될때까지는 어렵지 않을까 생각한다.나는 그래서 React 버전을 18.3.1 버전으로 다운그레이드 진행했다.그러니 에러는 고쳐졌지만 왠만하면다운그..

나는 지금까지 React 개발을 하면서 스타일은 항상 Styled-components 를 사용해왔다.이유는 딱히 없었다.  React 처음할때 사용한 css 가 저거였을 뿐.그이후로도 쭉 React 관련 프로젝트를 할때마다 사용했고 익숙하니까 속도도 나왔다.근데 타의로 최근 scss 를 사용하게 되었는데 익숙함에 오는 거부감인지 왠지 자꾸 단점만 찾게되고다른사람들이 바보같아보였다. 근데 나는 저게 왜 좋은지도 모르고 쓰는건데이번기회에 어떤점이 좋은건지. 왜 쓰는건지 알고 사용하고더 좋은게 있다면 바꿀 수 있도록 하기위해 Styled-components 의 정리를 하려고 한다.npm install styled-componentsimport styled from 'styled-components'const ..

📱테스트 환경"react": "18.2.0""react-dom": "18.2.0""typescript": "^4.9.5"Ant Design Table 을 가져다가 쓰려고 하는데 ..Warning: Each child in a list should have a unique "key" prop.에러가 발생했다.페이지가 멈춰버린다거나 안되는 건 따로 없었지만 불편했고나는 map 을 사용하지도 않았거니와 ..테이블에 dataSource 에 데이터를 전달했기때문에내가 따로 한게 없어서 왜나는지 이해할 수가 없었는데찾아보니까 rowKey 를 이용해서 해결 할 수 있다고 한다. { return row.user_id; }}/>Antd Table 에서 데이터소스를 map 돌리면서키를 설정해주지 않으니까 그..