8 Days A Week

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..

보호되어 있는 글입니다.

자바스크립트 코드에 타입스크립트를 적용할 때 주의해야 할 점 기능적인 변경 x 테스트 커버리지가 낮을 때는 함부로 타입스크립트 적용 x 처음부터 타입을 엄격하게 적용하지 x → 점진적으로 strict 레벨을 증가 JSDoc으로 점진적 타입 시스템 적용해보기 자바스크립트를 타입스크립트로 변환함에 있어서 코드량이 방대하여 많은 비용 소모가 예상될 때는 JSDoc을 이용한 점진적 타입 시스템 적용이 가능하다. // @ts-check 를 파일 맨 위에 추가하면 타입스크립트 런타임이 작동됨. 단축키: /** 하고 탭 또는 엔터 메서드 리턴 정보를 알기 위한 방법 중 하나로, 웹사이트에서 네트워크 - XHR 체크 - 새로고침 - 원하는 메서드 미리보기 확인 을 통해 파악할 수 있다. 이를 통해 간단히 타입을 JSD..

유틸리티 타입 유틸리티 타입은 이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 타입 문법이다. Pick 픽(Pick) 타입은 특정 타입에서 몇 개의 속성을 선택(pick)하여 타입을 정의할 수 있다. interface Product { id: number; name: string; price: number; brand: string; stock: number; // something: string; } // 상품 목록을 받아오기 위한 API 함수 function fetchProduct(): Promise { // .. } interface ProductDetail { id: number; name: string; price: number; } // 1. Product를 그대로 재활용할 수 없는 상태가 ..

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..