Html/Css 참고 이미지 최적화 애플리케이션에서 사용하는 이미지의 용량이 크거나 많을 경우, 이미지를 불러오는데 오랜 시간이 소요된다. 애플리케이션의 이미지가 보이지 않을 경우 사용자 경험을 악화시키고 이탈시키기 때문에 이미지 최적화 작업이 필요하다. 스트라이프 기법 사이트 참고 사이트 이미지 스트라이프는 여러 개의 이미...

Mui Mui Theming Mui Palette Mui DarkMode Mui Color Theme 설정하기 공식 문서에 나와있는대로 테마를 생성한다. 테마 안에는 mode,palette 등의 여러 값들이 있다. 테마 설정은 최상단의 파일에 작성하고, 테마가 light || dark 인지를 전역으로 설정해주어 Mui의 ThemePr...

Mui Mui Tabs & Tab Tab API Tabs 공식문서 import * as React from 'react'; import Box from '@mui/material/Box'; import Tabs from '@mui/material/Tabs'; import Tab from '@mui/material/Tab'; import T...

React 참고자료1 참고자료2 스크롤 이벤트 스크롤 여부에 따라 Nav bar의 스타일이 달라지는 경우가 있다. documnet의 스크롤 여부를 판단하는 것에 대한 예제 코드이다. const [scroll, setScroll] = useState < boolean > false; useEffect(() => { ...

React 참고자료1 참고자료2 드래그 구현하기 페이지를 만들다보니 drag 기능을 구현하고 싶어졌다. 어떤 방법으로 시도할지 찾아보며 다양한 라이브러리를 보았지만, 처음 작성하다보니 내가 직접 작성하여 구현하고 싶었다. 내가 클릭하고 드래그 하는 이벤트가 발생할 때, 좌표값을 저장해놓았다가, 이동한 만큼의 거리를 컴포넌트의 위치값으...

React 공식문서 Recoil 공식문서를 보며 다시 써보는 recoil

TypeScript 참고자료1 참고자료2 타입스크립트를 사용하다보니 객체에 담겨있는 key와 value를 가져와서 사용할 일이 생겼다. 인덱스 시그니처 타입을 사용하다보니 Record Type에 대해 알게 됐고, 더 찾아보기로 하였다. 인덱스 시그니처(index signature) 인덱스 시그니처 타입은 [Key:U]:T 형식의...

Mui 기존 MUI 4.ver MUI 5.ver 리액트를 기반으로 한 UI 라이브러리이다. 기존 material UI 라고 불리던 라이브러리, 5버전으로 바뀌며 MUI 라는 이름을 사용하기 시작했다. 4버전에서는 material의 컴포넌트와 jss 접목시켜 작동하는 구조였지만, 5버전에서는 emotion을 접목시켜 styled-comp...

React 리액트 쿼리 다시 배우기 (2)</br> 참고자료 1</br> 참고자료 2</br> React-Query 미니 프로젝트를 만들어보다가 useMutation을 사용하며 queryClient.invalidateQueries을 통해 쿼리 키를 초기화시켜, mutate를 통해 글을 작성했을 때 내가 작성한...

TypeScript useRef useRef 공식문서 React hook의 일종으로, 인자로 넘어온 초깃값을 useRef객체의 .current 프로퍼티에 저장한다. DOM객체를 직접 가리킬 때나, 값이 변경되어도 컴포넌트가 리렌링되지 않도록 하기 위해 값들을 저장할 때도 사용한다. .current를 변경시키는 것은 리렌더링을 발생시키...