Development/React

2022 디자인 시스템 라이브러리 11개 찍먹 후기

안녕하시렵니까? 서론 회사에서 대시보드를 만들 일이 생겼는데, 최대한 디자인에 노력을 들이지 않고 스타일을 입힐 수 있으면 좋겠다는 요구사항이 있었다. 그래서 유명한 디자인 시스템과 유명한 회사들의 디자인 시스템을 사용해 직접 간단한 대시보드를 꾸며보고, 후기를 적어보았다. React 18을 지원하지 않거나, install 과정부터 험난한 라이브러리들은 공식문서만 읽고 사용해보지 않았다. 스크린샷이 없는 라이브러리는 모두 직접 사용해보지 않은 라이브러리라고 생각하면 된다. 1. Material-UI MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of Re..

shouldComponentUpdate()와 React.PureComponent

shouldComponentUpdate()와 React.PureComponent 바뀌어야 하는 부분만 다시 렌더링하도록 해주는 성능 최적화 Lifecycle API다. props 또는 state가 새로운 값으로 갱신되어 렌더링이 발생하기 직전에 호출된다. shouldComponentUpdate에서 false를 반환할 경우 render()와 componentDidUpdate()는 호출되지 않는다. 공식문서 1 - React.Component: https://ko.reactjs.org/docs/react-component.html#shouldcomponentupdate 공식문서 2 - 성능 최적화: https://ko.reactjs.org/docs/optimizing-performance.html 왜 sho..

[2020 여름 효창공원 스터디]Rendering

Rendering(Templating) 🦋 참고한 문서 HTML 기초 - 3 (렌더링이란?) https://velog.io/@ru_bryunak/%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%B4%EB%9E%80 브라우저 렌더링이 이루어지는 과정 https://tuhbm.github.io/2017/08/10/rendering1/ 브라우저는 어떻게 동작하는가? https://d2.naver.com/helloworld/59361 CSS 애니메이션 성능 개선 방법(reflow 최소화, will-change 사용) https://wit.nts-corp.com/2017/06/05/4571 MDN web docs - will-change https://developer.mozilla.org/ko/do..