MUI
-
[MUI Table 커스텀하기] React, Styled-Componet, Material-UI, TypeScript에서 테이블 커스텀하기프론트엔드 개발자가 될거야./react 2023. 2. 4. 14:31
위 사진은 가상화폐 거래소 코빗에 있는 테이블이다. 회사에서 프로젝트를 하면서 이런식으로 테이블을 그려내야했는데 테이블을 내가 원하는 레이아웃으로 커스텀하기에 꽤 복잡했기에.. 그 부분에 대해 블로깅을 해보려고 한다. 우선 나는 css는 Styled-Componet로 스타일을 주고 있고 css라이브러리로는 material ui를 쓴다. Styled-Componet는 material ui를 쉽게 overloading 할 수 있어서 내가 좋아하는 조합이다 : ) https://mui.com/ MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of React co..
-
[기업협업 회고] 기능 구현에 대한 회고 - 실시간 CCTV 영상을 활용한 공정 모니터링 시스템회고록 2022. 9. 12. 00:02
드디어 위코드에서의 3개월이 끝났다. 쉼 없이 달려온 3개월... 주말에는 쉬어도 되는데 노트북이 내 옆에 없으면 불안해서 항상 가지고 다녔다.. 그 정도로 정말 열과 성을 다하여 3개월을 임했던 것 같다. 이번에는 위코드에서의 마지막 프로젝트! 3개월 차 프로젝트에 대한 회고를 작성해보려고 한다. 위코드는 3개월 차에 기업협업을 나간다. 나는 백엔드2명, 프론트2명(나 포함) 총 4명이 함께 기업협업을 나갔는데 '무스마'라는 회사에 가게 됐다. '무스마'는 건설산업의 안전과 생산성, 효율성 향상을 목표로 industrial IoT 분야에서 다수의 대기업, 중소기업 고객을 확보하고 있는 IoT Solution 회사이다. 이에 내가 맡은 업무는 실시간 CCTV 영상을 활용한 공정 모니터링 시스템 이었다. ..
-
[MUI Table Custom] 내가 원하는 테이블로 커스텀하기, 앞으로 자주보자 MUI Table!!!!프론트엔드 개발자가 될거야./react 2022. 8. 26. 20:25
위의 테이블은 완성본이다. 라이브러리를 가져와서 쓰는 거는 너무 편리하고 좋지만 레이아웃 커스텀하기 너무 복잡하다!! 테이블에 border, border-radious, width, height 등 내가 원하는 모양으로 바꾸는데 시간이 꽤 걸렸다.. 기능 구현하는 것 보다 더 많은 시간을 할애했다.. 먼저 makeStyles를 install 해주어야한다. const useStyles = makeStyles({ tableContainer: { border: '1px solid #D5DDE4', borderRadius: '4px', borderBottom: 0, }, tableRow: { height: 40, background: '#EFF2F5', }, tableCell: { width: '25%', '&..