UI
-
MUI를 사용하는 방법MUI 2022. 7. 6. 00:52
한국말로는 MUI 사용하는 방법이 많이 나와있지는 않아 내가 사용한 코드와 커스텀하는 방법들에 대해서 글을 남기려 한다. MUI는 React의 UI 라이브러리이다. 사용방법은 생각보다 간단하다. 그걸 커스텀하는게 생각보다 쉽지 않을 뿐 사용방법 (컴포넌트 Autocomplete를 예시로 설명하겠다.) mui를 설치한다. mui는 emotion 과 styled-component 둘 다 사용가능하다. // npm npm install @mui/material @emotion/react @emotion/styled //yarn yarn add @mui/material @emotion/react @emotion/styled 2. 페이지의 좌측에 있는 메뉴 중에 components을 클릭하여 나의 웹 사이트에 적..
-
상수 데이터JavaScript 2022. 4. 24. 15:50
개발을 할 때, UI 구성에 필요한 데이터가 정적이라면 데이터를 서버에서 가져오지 않고 프론트 단에서 직접 구성합니다. 서버에서 받아야 하는 값이고, 아직 백엔드에서 넘겨줄 데이터를 완성하지 않았다면 서버에서 받을 값을 예상해서 개발을 진행할 수 있어야 한다. 이 때, UI를 표시하기 위한 상수 데이터 와 백엔드의 데이터를 모방하기 위한 mock data 를 사용해보자. 상수 데이터 UI 구성에 필요하지만 동적으로 변하지 않아 백엔드 API 등을 통해 가져올 필요가 없는 정적인 데이터 => 상수 데이터로! 상수 데이터를 사용하는 이유? 반복되는 UI를 유지보수하기 쉽고, 가독성을 높이기 위해. 반복되는 UI = 상수 데이터 + Array.map() 를 이용해서 간결하게 표현 수정 필요시, 상수 데이터의 ..