늘 겸손하게

DOM이란? Document Object Model의 축약어로 브라우저에서 다룰 HTML을 파싱하여 이해하기 쉽게 트리 구조로 표현한 객체입니다. DOM은 웹 페이지의 객체 지향 표현이고, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있습니다. 기본적으로 자바스크립트에는 DOM을 조작할 수 있는 DOM API들을 제공합니다. Virtual DOM이란? 위의 DOM을 추상화한 객체입니다. DOM을 추상화한 가벼운 사본을 메모리에 만들어 놓은 것. DOM 추상화 이유 DOM을 반복적으로 직접 수정하면 수정이 일어날때마다 브라우저 렌더링이 일어나게되고, 변경점이 없는 부분까지 리렌더링되어 PC 자원을 낭비하게됩니다. 이 문제를 해결하기 위해 DOM을 추상화합니다. 작동원리 변경사항이 있을때 ..

다른 페이지로 리다이렉트하는 기능을 history.push로 구현해보겠습니다. 1. react-router-dom 설치 1 npm i react-router-dom cs 2. useHistory import 1 import { useHistory } from 'react-router-dom'; cs 3. 변수 생성 1 const history = useHistory(); cs 4. history.push에 이동할 경로 넣기 1 history.push('이동할 경로') cs history.push 메소드가 실행되면 현재 경로에 '이동할 경로'가 붙은 경로로 리다이렉션됩니다. + history.push 로 이동할 경로에 데이터 전달 state에 데이터를 담아서 이동할 경로에 데이터를 전달할 수 있습니다. e..

Accordian 스타일을 보면 주로 오른쪽에 접기/펼치기 버튼이 있는것을 볼 수 있다. MUI 라이브러리가 지원하는 아이콘으로 접기/펼치기 버튼을 구현해보자 우선 @mui/icons-material 라이브러리를 설치한다 npm i @mui/icons-material 위 라이브러리 내부의 /ExpandMore 에서 Icon을 화살표 모양의 아이콘을 불러올 수 있다. import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; 위 코드로 필요한 아이콘을 import하고 AccordianSummary 컴포넌트의 props로 전달한다. 완성

React MUI 라이브러리를 사용하려는 도중 ../Papers 모듈을 못 찾겠다는 에러가 무수히 출력되었습니다. 찾아보니 MUI icons package를 MUI component library보다 먼저 설치하여 발생하는 문제랍니다. 해결책 아래 코드로 필요한 패키지를 설치합니다 // with npm npm install @mui/material @emotion/react @emotion/styled // or if you prefer yarn yarn add @mui/material @emotion/react @emotion/styled