React 성능 최적화 (Cache Busting) 🔎 웹 캐시 (브라우저 캐시) 웹 페이지는 많은 파일들과 이미지들로 구성되어 있다. 당장 네이버 를 들어가서 관리자 모드(F12) 를 눌러서 Network 를 확인해보면 수많은 파일들을 읽어오고 있는 것을 볼 수 있다. 하지만 저 수많은 파일들 중 하루에 한번이라도 수정이 일어나지 않는 파일이 얼마나 될까? 자신있게 거의 대부분이라고 말할 수 있을 것 같다. 그렇다면 매번 페이지를 새로고침할 때마다 저 파일들을 읽어온다면 시간이 낭비될 것이다. 하지만 다행히 웹 브라우저는 캐시를 가지고 있다. 이미지나 js, css 파일들을 읽어 올 때 respone header 에 설정한 cache-control 데이터를 활용하여 cache 에 남겨놓고 다음번 호출 ..
React 렌더링 최적화 심화 🔎 렌더링 최적화 React 에서 렌더링을 최적화 하는 방식은 여러가지가 있다. useMemo, useCallback, 컴포넌트 분리 등... 인터넷에 자료를 찾아보면 많이 나온다. 개인 프로젝트를 개발할 때 나 또한 이러한 방식을 찾아서 최대한 최적화를 하며 진행하였다. 아래는 내가 참고한 렌더링 최적화 방식을 설명한 블로그이다. [React] 렌더링 성능 최적화하는 7가지 방법 (Hooks 기준) 오늘은 그동안 React를 공부하고 알아왔던, class기반이 아닌 hooks 기반의 성능 최적화에 대한 방법들을 포스팅 하고자 한다.먼저 컴포넌트의 리렌더링 되는 조건은 아래와 같다.부모에서 전달받은 velog.io 하지만... 렌더링 최적화가 원하는만큼 잘 이루어지지는 않았..
React React - CRA 없이 React 환경 설정 🔎 ESLint 설치 ESLint 란 ES(EcmaScript - 표준 JavaScript) 와 Lint의 합성어로 JavaScript 코드에 에러가 있는 부분에 표시를 달아주는 모듈을 말한다. 기본적인 문법 뿐만 아니라 코딩 스타일도 설정 가능하기 때문에 협업에 매우 유용하다. npm install -D eslint eslint 모듈을 설치한 후 .eslintrc.json (eslint 설정파일)을 만들어야하는데 npx 명령어를 통해 설치도 가능하고 직접 파일을 생성해도 된다. 이번에는 npx 명령어를 통해 생성해보았다. npx eslint --init You can also run this command directly using 'npm i..
React React - CRA 없이 React 환경 설정 🔎 npm init 우선 프로젝트를 진행할 폴더를 생성한 후 터미널에서 npm init 명령어를 통해 package.json 을 생성한다. npm init -y // package.json { "name": "demo-project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", // 따로 추가한 부분 "type": "module" // module 사용하는 방식 "module"..
