일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 아타미
- vba
- PostgreSQL
- JenkinsFile
- PayPay
- 미츠이 스미토모
- 일본 신용카드 추천
- node.js
- terraform
- 三井住友カード
- 카마츠루
- 체코
- Python
- CSV
- javascript
- 산겐자야 맛집
- react.js
- 방콕
- pyenv
- 뮌헨
- 페이페이
- PayPayフリマ
- 프라하
- 熱海
- documentdb
- 메르페이
- 태국
- 釜つる
- Selenium
- typescript
- Today
- Total
목록react.js (4)
도쿄사는 외노자
대략 2년만에 리액트를 만지게 되었다. 이래저래 변한 것도 있긴 한데, 그래도 별 문제 없이 적응 중. 노트북 크기의 화면에 꽤 많은 데이터를 집어넣어야 했는데, 다른 팀원이 만든 화면 중에서 클라이언트의 모니터 크기에 맞지 않는 부분이 있었다. 원래대로라면 1줄로 표기해야 하는데, 아무리 줄여도 맞지 않더라. 그래서 동의를 얻어, 화면이 일정 수준 이상 작아졌을 때엔 2줄로 표기하는 식으로 해결을 보았다. 소스코드는 아래와 같다. // 브라우저 화면의 Width, Height를 보존할 State만들기 const [windowSize, setWindowSize] = useState({ width: undefined, height: undefined, }); // 브라우저 화면의 Width, Height ..
material-ui를 이용해 데이터테이블을 만드는 중이었다.이게 기본적으로 테이블 width를 100%로 잘라 버리는데,그러다 보니 브라우저가 작아지면 그만큼 각 요소의 길이도 찌그러지더라. 처음엔 그냥 이렇게 ellipsis로 땜빵하려고 했는데,123456tableHeaderColumn: { fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',},cs 슬프게도 textOverFlow가 header column에 안먹히더라...내가 개조하는 과정에서 뭔가 삽질을 한 모양이다. 여하튼 이걸 그대로 낼 수는 없으니,적어도 column label만큼은 제대로 표시하고 싶었다.데이터에는 ellipsis가 먹히기도..
그간 react에서 component를 만들면서, 12345MUIDataTables.propTypes = { data: PropTypes.object, cellClick: PropTypes.func, ...};cs 이와 같이 propTypes를 지정해 왔다.보통 이걸로 별 문제가 없었기에 다 이런 식으로 지정을 해 왔는데...어제 한 작업에서 developer tool에 warning이 뜨더라. react의 render에서 return시 div로 감싸면 별로 멋이 안나니까이런 식으로 Wrapper를 만들었는데... 123456789101112131415161718import React, { Component } from 'react'; class Wrapper extends Component { comp..
1. Data 준비 1234567891011121314151617181920212223242526const data = { buttonStatus: [ { name: 'CSV', type: 'csv', status: true }, ... ], csvFileName: 'export.csv', columns: [ { key: 'name', label: 'Dessert (100g serving)', tooltip: '英語', sortable: true, ... }, ... ], rows: [ { name: 'Frozen yogurt', jname: 'フローズンヨーグルト', kname: '프로즌 요구르트', ... }, ... ]}Colored by Color Scriptercs 2. CSV Download B..