8 Days A Week

애니메이션 최적화 ... const BarGraph = styled.div` position: absolute; left: 0; top: 0; width: ${({width}) => width}%; transition: width 1.5s ease; height: 100%; background: ${({isSelected}) => isSelected ? 'rgba(126, 198, 81, 0.7)' : 'rgb(198, 198, 198)'}; z-index: 1; ` 해당 컴포넌트에 대해 transform을 적용시켜보자 const BarGraph = styled.div` position: absolute; left: 0; top: 0; width: 100%; transform: scaleX(${({wid..

실습내용 애니메이션 최적화(Reflow, Repaint) → 렌더링 성능 최적화 컴포넌트 Lazy Loading (Code Splitting) 컴포넌트 Preloading 이미지 Preloading → 로딩 성능 최적화 애니메이션 분석(Reflow와 Repaint 이론) 애니메이션 쟁크를 자세히 확인하고 싶다면 performance에서 CPU 쓰로틀링 설정을 할 수 있다. 쟁크(애니메이션이 버벅이는 증상)은 예를들어 초당 60 Frame(60FPS)을 표현하는 모니터에서 브라우저가 그보다 못한 프레임으로 애니메이션을 출력할 경우 발생한다. 브라우저 렌더링 과정 DOM + CSSOM → Render Tree → Layout → Paint → Composite Reflow width, height(위치나 크..

bottleneck 코드 최적화 article 함수에서 리소스를 많이 사용하고 있는 부분의 실제 코드를 보면, 특수문자를 제거해주는 기능을 하는 메서드가 비효율적인 2중 반복문으로 작성된 것을 볼 수 있다. bottleneck 해결방안 특수 문자를 효율적으로 제거하기 replace 함수와 정규식 사용 마크다운의 특수문자를 지워주는 라이브러리 사용(remove-markdown) 작업하는 양 줄이기 let _str = str.substring(0, 300); _str.replace(/[\\#\\_\\*\\~\\&\\;\\[\\]\\`\\n\\=\\-]/g, ""); 위와 같이 대체해준다. 결과 bundle 파일 분석(bundle-analyzer) webpack-bundle-analyzer cra-bundle..

Webpack Dev Server 웹팩 데브 서버는 웹 애플리케이션을 개발하는 과정에서 유용하게 쓰이는 도구이다. 웹팩 빌드 대상이 변경되었을 때 매번 웹팩 명령어를 실행하지 않아도 코드만 변경하고 저장하면 웹팩으로 빌드한 후 브라우저를 새로고침 해준다. 새로고침하는 시간 뿐만 아니라 웹팩 빌드 시간 또한 줄여준다. 명령어 "scripts": { "dev": "webpack serve", "build": "webpack" } 특징 변경점이 있을 때 자동으로 브라우저를 새로고침 해준다. 웹팩 데브 서버를 실행하여 웹팩 빌드를 하는 경우에는 빌드한 결과물이 파일 탐색기나 프로젝트 폴더에서 보이지 않는다 (메모리에 저장되고 파일로는 생성하지 않는다). → 웹팩 데브 서버는 개발할 때만 사용하다가 개발이 완료되..

실습 내용 이미지 사이즈 최적화 Code Split 텍스트 압축 → 로딩 성능 최적화 Bottlneck 코드 최적화 → 렌더링 성능 최적화 분석 툴 크롬 Network 탭 크롬 Performance 탭 크롬 Audit 탭 (Light House) webpack-bundle-analyzer LightHouse를 이용한 페이지 검사 devtools의 lighthouse 기능 원하는 바에 따라 설정 후 실행 결과 화면 1. 성능에 대한 전체 점수 및 측정 항목 별 안내 결과 화면 2. 추천 및 진단 내용 이미지 사이즈 최적화 단축 대상 이미지와 효과 추정치를 볼 수 있다. 120px 크기를 렌더링하기 위해 1200px 이미지를 로딩하고 있다. 얼마로 바꾸어야 효율적인가? → 120px X → 레티나 디스플레이..

웹팩의 주요 속성 4가지 entry output loader plugin Entry entry 속성은 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이자 자바스크립트 파일 경로이다. // webpack.config.js module.exports = { entry: './src/index.js' } → src 폴더 밑의 index.js를 대상으로 웹팩이 빌드를 수행 Dependency Graph : 모듈 간의 의존 관계가 생기는 구조 Entry Point를 분리하는 경우 entry: { login: './src/LoginView.js', main: './src/MainView.js' } MPA에 적합 Output output 속성은 웹팩을 돌리고 난 결과물의 파일 경로를 의미한다. // webpac..

웹팩으로 빌드해보기 빌드를 통해 리퀘스트 파일이 줄어들고, 성능(시간)이 향상된 것을 볼 수 있다. 웹팩 소개 영상 웹팩은 자바스크립트 뿐만 아니라 웹 페이지를 구성하는 모든 자원과 관계되어 있다. 기존 파일 테스크 매니저들과는 달리, 단일 자바스크립트 파일로의 압축을 통해 간결하게 관리가 가능하며, 서버와 통신하는 파일 수가 줄어들어 성능이 향상된다. 웹팩 소개 웹팩에서의 모듈 웹팩에서 지칭하는 모듈이라는 개념은 위와 같이 자바스크립트 모듈에만 국한되지 않고 웹 어플리케이션을 구성하는 모든 자원을 의미한다. 웹팩의 등장 배경 웹 개발 작업 자동화 도구 HTML, CSS, JS 압축 이미지 압축 CSS 전처리기 변환 이러한 일들을 자동화 해주는 도구들이 필요 → Grunt, Gulp 등의 도구가 등장 웹..

언제까지 create-react-app만 할 수 없는 노릇… 웹팩, 번들링 프로세스에 대해 이 기회에 잘 정리해보자. NPM npm init -y -y 옵션을 통해 설정 생략 가능 장점 의존성과 버전 관리가 쉬움 install로 설치를 했을 때 해당 프로젝트 위치에 라이브러리가 설치되어 모듈처럼 사용 가능 NPM 명령어 install (= i) install —global: 전역설치 NPM 전역 설치 경로 // window %USERPROFILE%\\AppData\\Roaming\\npm\\node_modules // mac /usr/local/lib/node_modules 지역 설치 옵션 2가지 npm install jquery --save-prod npm install jquery --save-dev..

프로젝트를 하던 도중 백엔드에서 처리돼 db에 저장된 정보를 실시간으로 불러오는 기능 구현이 필요하게 됐다. socket 방식으로 가능하겠지만 데이터 규모가 크지도 않고 주 기능이 아니라서 다른 방법이 없을까 검색해보던 도중 swr에 대해 알게 됐다. Next js를 만드는 팀에서 진행중인 프로젝트, 데이터를 가져오는데 사용하는 리액트 hooks. 데이터를 불러오는데 캐시된 데이터를 바탕으로 변경사항이 없으면 불필요한 랜더링이 일어나지 않는 등등 유용한 기능이 많다. 더 자세히 알아보기: https://velog.io/@soryeongk/SWRBasic 와닿은 응용 사례 중에 지도 웹사이트에서 실시간 버스 위치를 제공하는데 이 swr을 사용한 경우를 봤는데, 페이지 포커싱 시에 데이터를 불러오거나 옵션 ..