[React] 불필요한 재 렌더링을 막으려면 memo, useMemo
리액트에서 컴포넌트가 재 랜더링되면 안에 있는 자식 컴포넌트도 항상 함께 재랜더링된다. 이것은 리액트의 특징인데, 만약 자식컴포넌트의 랜더링 시간이 무거운 컴포넌트라면, memo 함수를 통해 재랜더링을 막아줄 수 있다. memo() import { memo, useEffect, useMemo, useState } from 'react'; let...
aluvy
[React] lazy import 코드분할과 Suspense
리액트에서 빌드를 하게되면 html, js 파일이 1개만 생성된다. 그 안에 지금까지 만든 컴포넌트 내용들이 들어있어 파일 사이즈가 크다. 그래서 리액트 사이트들은 첫 페이지 로딩속도가 매우 느릴 수 있는데, 이 현상을 해결하려면 JS파일을 잘게 쪼개면 된다. 쪼개는 방법은 import 문법을 약간 수정하면 된다 // App.js import...
[React] 실시간 데이터가 중요하다면 react-query
react-query? react-query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러 핸들링 등 비동기 과정을 더욱 편하게 하는데 사용된다. 여러가지 장점이 있지만 주로 아래와 같이 프론트 개발자가 구현하기 귀찮은 일들을 수행한다. 몇초마다 자동으로 데이터를 다시 가져온다. 요청 실패시 몇초 간격으로 재시도할 때 ...
[CSS] 방법론
현재 CSS 방법론이라고 사람들이 말하는 것은 크게 3가지로 구분됩니다. 해당 방법론이 무엇이고 어떠한 장점과 단점을 가지고 있는지 알아봅니다. 3가지 방법론 중 무엇 하나 정답이라고 말할 수 없으며 공부를 하다 보면 자신에게 맞는 방법론이 보이게 됩니다. 그 방법론을 프로젝트에 맞게 또 공통 가이드화 하여 협업이 용이하게 사용하는게 더 중요합니다...
google webFont loader
google web font loader CSS가 로드되기 전에 폰트가 로드되길 원하고, 스타일되지 않은 텍스트가 번쩍거리지 않게 하려면 웹 폰트 로더를 사용하라. 웹 폰트 로더는 사이트가 로드되기 전에 로드되고, 스타일되지 않은 텍스트가 번쩍이는 것을 확실하게 방지한다. 비동기 스크립트도 사용할 수 있지만, 폰트가 먼저 로드되는 것을 확실하...
SVG 도넛차트
도넛 모양의 차트를 구현한 일이 있었는데, 디자인 상의 그라데이션과 100% 채워졌을때의 디자인이 일반 SVG 도넛차트와 달라서 여러 방법으로 테스트를 하던 중, 비슷한 라이브러리를 찾아 구현할 수 있었다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset...
마우스 커서 변경하기
이미지를 마우스 커서로 사용하기 CSS 커서 속성을 이용해 이미지 파일을 마우스 커서로 설정해서 사용할 수 있다. cursor: url(‘주소’), 속성값; 커서 속성 값url 중 마지막에 “auto” 속성 값은 비트맵 이미지 커서를 가져올 수 없는 경우 최종적으로 적용하는 커서 속성값이다. 커서 속성값은 쉼표로 구분해서 여러 개를 나열할...
[React] React에서 자주 쓰는 if문 작성패턴 5가지
1. component 안에서 쓰는 if else component에서 JSX를 조건부로 보여주고 싶으면 이렇게 쓴다. function Compoenent(){ if ( true ){ return <div>참이면 보여줄 HTML</div> } return null; } 2. JSX안에서 쓰는 3항 연산자 te...
[CSS] 모바일 환경에서의 vh
프로젝트 진행 중 전체화면을 만들기 위해 100vh를 사용했다. PC환경에서 테스트 할 때에는 문제가 없었지만, 실제 모바일 기기에서 브라우저로 접속 후 확인했더니 세로 스크롤이 생기는 버그가 있었다. vh는 viewport height에 해당하는 단위로, 해당 브라우저의 높이에 따라 상대적으로 적용되는 단위다. 예를 들어, 화면의 높이가 ...
[GSAP] gsap sample
gsap sample gsap.zip