React 성능 최적화 (Cache Busting) 🔎 웹 캐시 (브라우저 캐시) 웹 페이지는 많은 파일들과 이미지들로 구성되어 있다. 당장 네이버 를 들어가서 관리자 모드(F12) 를 눌러서 Network 를 확인해보면 수많은 파일들을 읽어오고 있는 것을 볼 수 있다. 하지만 저 수많은 파일들 중 하루에 한번이라도 수정이 일어나지 않는 파일이 얼마나 될까? 자신있게 거의 대부분이라고 말할 수 있을 것 같다. 그렇다면 매번 페이지를 새로고침할 때마다 저 파일들을 읽어온다면 시간이 낭비될 것이다. 하지만 다행히 웹 브라우저는 캐시를 가지고 있다. 이미지나 js, css 파일들을 읽어 올 때 respone header 에 설정한 cache-control 데이터를 활용하여 cache 에 남겨놓고 다음번 호출 ..
React 렌더링 최적화 심화 🔎 렌더링 최적화 React 에서 렌더링을 최적화 하는 방식은 여러가지가 있다. useMemo, useCallback, 컴포넌트 분리 등... 인터넷에 자료를 찾아보면 많이 나온다. 개인 프로젝트를 개발할 때 나 또한 이러한 방식을 찾아서 최대한 최적화를 하며 진행하였다. 아래는 내가 참고한 렌더링 최적화 방식을 설명한 블로그이다. [React] 렌더링 성능 최적화하는 7가지 방법 (Hooks 기준) 오늘은 그동안 React를 공부하고 알아왔던, class기반이 아닌 hooks 기반의 성능 최적화에 대한 방법들을 포스팅 하고자 한다.먼저 컴포넌트의 리렌더링 되는 조건은 아래와 같다.부모에서 전달받은 velog.io 하지만... 렌더링 최적화가 원하는만큼 잘 이루어지지는 않았..
Prettier .prettierrc 설정하기 🔎 .prettierrc 란 Prettier 설정파일로 프로젝트 상단에 .prettierrc 의 옵션값을 확인하여 코드 포맷팅을 진행한다. 🔎 printWidth 기본값은 80으로 코드 한줄의 갯수를 설정한다. 🔎 tabWidth 기본값은 2로 들여쓰기(tab) 의 너비수를 설정한다. 🔎 useTabs 기본값은 false 로 탭을 사용할 지 스페이스바로 간격을 조정할 지 설정한다. 🔎 semi 기본값은 true 로 코드 마지막에 ;(세미콜론)을 붙일지 설정한다. 🔎 singleQuote 기본값은 false 로 큰따옴표 대신 작은따옴표를 사용할 지를 설정한다. 🔎 quoteProps 기본값은 'as-needed' 로 개체의 속성이 인용될 때 변경한다. as-n..
ESLint .eslintrc 설정하기 🔎 .eslintrc 란 ESLint 설정파일로 JSON, YAML, JavaScript 형식을 지원한다. 항상 이름은 .eslintrc 이어야하고 각 파일 형식에 맞춰 확장자를 사용하면 된다. (ex. .eslintrc.json) 🔎 root Monorepo 와 같이 하나의 repository 에서 여러개의 프로젝트를 관리하는 경우 여러개의 설정파일을 같이 사용할 수 있는데 이럴 때 유용한 옵션이 root 옵션이다. 해당 프로젝트에 .eslintrc 가 없다면 그 상위 폴더를 거슬러 올라가면서 root 가 true 로 설정된 .eslintrc 를 탐색하고 있다면 해당 설정파일로 ESLint 를 적용한다. 🔎 plugins ESLint 에서 기본적으로 제공하는 규칙..
Webpack webpack.conifg.js 설정하기 🔎 webpack.conifg.js란 webpack 4버전 이후로는 따로 설정파일이 없더라도 webpack 이 src.index.js 파일을 dist/main.js 로 번들링 해주기 때문에 설정파일이 필수라고는 할 수 없다. 하지만 모든 프로젝트가 동일한 설정으로 번들링 된다는 것은 불가능하기 때문에 각 프로젝트에 맞는 설정값을 셋팅하는 것이 좋다. 이럴 때 webpack.config.js 파일에 설정값을 셋팅하면 webpack 은 해당 파일을 자동으로 읽고 설정에 맞게 번들링 해준다. 🔎 Entry webpack 이 어떤 파일을 기준으로 번들링 할 지 그 시작점을 나타낸다. 기본값은 아래와 같이 src/index.js 이다. module.expor..
TypeScript tsconfig.json 설정하기 🔎 tsconfig.json 란 tsconfig.json 란 타입스크립트(ts) 파일을 자바스크립트(js) 파일로 변환하는 컴파일 설정 정의해놓은 파일이다. tsc --init 해당 명령어를 통해 tsconfig.json 파일을 자동으로 생성할 수도 있고 직접 tsconfig.json 파일을 만들어도 동일하게 동작한다. 위 명령어로 tsconfig.json 을 생성하면 모든 속성들이 나열되어 있고 주석으로 설명도 적혀있다.(영어) 이 후부터는 자주 사용되는 속성들에 대해 알아보자. 🔎 files 프로젝트에서 타입스크립트를 컴파일할 파일들의 목록들을 나타낸다. 이 아래에 include 와 exclude 속성이 나오는데 files 는 이 2개 속성보다 우..
Node.js package.json 설정하기 🔎 package.json 란 package.json 란 npm(또는 yarn, pnpm) 으로 관리되는 node.js 기반의 프로젝으에 대한 상세 이자 해당 프로젝트에서 관리하는 module 의 의존성에 대한 상세를 모아놓은 파일이다. 즉, 해당 프로젝트에 대한 전반적인 상세를 기술해 놓은 파일이라 할 수 있다. package.json 은 파일명에서도 알 수 있지만 json 형식의 파일이고 필수적인 항목으로 name, version 이 있으며, 그 외에도 다양한 항목이 있다. 이 후부터는 package.json 의 여러 항목에 대해 알아보도록 하자. 🔎 name name 이란 단어에서 알 수 있듯이 프로젝트의 고유한 이름을 나타낸다. 위에서 언급한 내용처럼..
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"..
정규표현식(Regular Expression) 1. 정규표현식 문법 🔎 정규표현식 형식 /패턴/플래그 패턴 : 찾고자하는 문자열 플래그 : 정규표현식에서 사용되는 옵션 🔎 정규표현식 매칭 패턴 패턴 의미 a-zA-z 영어알파벳(-으로 범위 지정) ㄱ-ㅎ가-힣 한글 문자(-으로 범위 지정) 0-9 숫자(-으로 범위 지정) . 모든 문자열(숫자, 한글, 영어, 특수기호, 공백 모두 포함. 단, 줄바꿈 제외) \d 숫자 \D 숫자가 아닌 문자열 \w 영어 알파벳, 숫자, 언더스코어(_) \W \w 가 아닌 문자열 \s space (공백 문자열) \S \s 가 아닌 문자열 \특수기호 특수기호 🔎 정규표현식 검색 패턴 기호 의미 | OR [] 괄호안의 문자열들 중 하나 [^문자] 괄호안의 문자를 제외한 문자열 ^..
