| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
- 광고 id
- react-native
- chrome
- NanoHttpd
- 티스토리챌린지
- it
- EC2
- 오블완
- 코테
- docker
- Express
- 파이썬
- nuxt
- spring boots
- React
- nginx
- JavaScript
- 백준
- 오퍼월
- 개발
- TypeScript
- toml
- kotlin
- Next
- 코딩테스트
- AWS
- Jenkins
- Android
- css
- python
- Today
- Total
목록Javascript/React (25)
내맘대로 개발일지
📱테스트 환경"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..