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"..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 JavaScript 심화 4. Server Side Rendering (SSR) SSR은 서버측에서 렌더링 하는 방식을 말하며 사용자가 웹 어플리케이션에 접근 시 서버에 페이지에 대한 요청을 하고 서버에서는 HTML, JS 와 같은 리소스들을 렌더링하여 반환한다. 장점 SEO(검색엔진 최적화)에 유리하다. 요청한 페이지의 html을 다운로드 하기 때문에 CSR에 배해 초기 로딩이 빠르다. 각각 페이지에 대한 정보를 입력하기 쉽다. 단점 매번 새로운 html을 받아오기 때문에 사용자 경험이 좋지 않다. (화면 깜빡임) Header, Footer 같은 중복된 내용도 매번 렌더링 하여 다운..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 JavaScript 심화 2. JavaScript Framework https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/ Front-end Framework들의 사용률에 대한 순위를 나타낸 그래프를 보면 React, Angular, Vue, Svelte 순으로 인기가 있는것으로 보이는데 어떤 특징들이 있고 어떤 장단점이 있는지 차례로 알아보자. . 🔎 React 페이스북에서 만든 라이브러리. 프레임워크인지 라이브러리인지 갑론을박이 있었지만, 최근에는 라이브러리라는 것으로 의견이 모여지고 있으며 공식문서에서도 라이브러리라고 ..
