8 Days A Week

캐시 최적화 cache policy에 대한 알림이 있다. 캐시 최적화가 제대로 적용되어 있지 않음. 네트워크 탭에서도 캐시에 대한 설정이 딱히 돼있지 않다. 캐시 메모리 캐시(RAM) 디스크 캐시 Cache-Control Cache-Control을 통해 캐시 설정을 할 수 있다. no-cache: 캐시를 사용하기 전에 서버에 검사 후, 사용 결정 (max-age = 0 과 같음) no-store: 캐시 사용 안함 public: 모든 환경에서 캐시 사용 가능 private: 브라우저 환경에서만 캐시 사용, 외부 캐시 서버에서는 사용 불가 max-age: 캐시의 유효시간 캐시가 만료돼도 브라우저가 서버에 Etag를 기반으로 만료된 데이터인지 여부를 확인한다. 수정사항이 없는 경우 그대로 사용한다. // se..

동영상 사이즈 최적화 동영상을 압축하는 작업을 통해 최적화를 진행한다. 만약 동영상이 주요 서비스인 경우에는 추천하지 않는 작업이다. 예시 사이트 비디오 압축기 | 온라인 비디오 파일 크기 줄이기 webp와 비슷하게 구글에서 만든 webm이라는 확장자가 있다. 압축 완료 적용해보기 비디오도 이미지와 마찬가지로 확장자 우선순위를 지정해준다. // 예시 Sorry, your browser doesn't support embedded videos. 폰트 최적화 웹 폰트의 문제점 FOUT(Flash of Unstyled Text) 기본 폰트로 텍스트 로딩 후 폰트 로딩 완료 시 적용 IE, Edge FOIT(Flash of Invisible Text) 폰트 로딩 이후에 적용된 텍스트 표시 Chrome, Safa..

보호되어 있는 글입니다.

strict 옵션 tsconfig.json compileOptions에 "strict": true 추가 TSConfig Reference - Docs on every TSConfig option { "strictNullChecks": true, "strictFunctionTypes": true, "strictBindCallApply": true, "strictPropertyInitialization": true, "noImplicitThis": true, "alwaysStrict": true, } 즉 strict를 설정하면 위와 같은 설정들이 true로 설정된다. null 타입 오류 및 함수 타입 오류 해결 1. 'Event' 형식에 'MouseEvent' 형식의 altKey, button, button..

실습내용 이미지 레이지(lazy) 로딩 이미지 사이즈 최적화 동영상 최적화 폰트 최적화 캐시 최적화 불필요한 CSS 제거 → 로딩 성능 최적화 이미지 지연(lazy) 로딩 (intersection observer) 네트워크 탭에서 속도 제한 걸어주기 문제점 홈페이지의 주요 컨텐츠인 동영상 로딩이 초기에 Pending된다. 해결책 이미지를 빠르게 다운로드 나중에 이미지를 다운로드 하도록 해서 동영상을 먼저 로드 → 2번이 적합하다 생각된다. 이미지는 스크롤 위치에 따라 lazy loading하면 적합하다. → 스크롤에 따라 함수를 주면 함수 호출이 너무 자주 발생 → intersection observer 활용 Intersection Observer API - Web API | MDN 사용예시 functi..

Definitely typed 타입 definition 라이브러리와 패키지 타입 검색기 https://github.com/DefinitelyTyped/DefinitelyTyped Search for typed packages 타입 선언 라이브러리가 제공되지 않는 외부 라이브러리 대처 방법 tsconfig.json에 typeRoots 추가 따로 지정해주지 않은 때는 typeRoots가 기본적으로 node_modules/@types 를 가르킴 { "compilerOptions": { "allowJs": true, "target": "ES5", "outDir": "./built", "moduleResolution": "Node", "lib": ["ES2015", "DOM", "DOM.Iterable"], "n..

애니메이션 최적화 ... 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(위치나 크..

bisect를 통해 이진탐색을 쉽게 구현할 수 있고 관련 기능을 사용할 수 있다. (그래도 이진탐색 코드 정도는 숙지하고 있도록 하자) bisect - Array bisection algorithm - Python 3.10.5 documentation from bisect import * li = [1, 2, 2, 3, 3, 4] print(bisect_left(li, 2)) # 1 print(bisect_right(li, 2)) # 3 print(bisect_left(li, 4)) # 5 print(bisect_right(li, 4)) # 6 insort(li, 2) print(li) # [1, 2, 2, 2, 3, 3, 4] bisect_left()는 찾고자 하는 값의 맨 처음 인덱스를 반환한다. b..

자바스크립트 프로젝트에 타입스크립트 적용하는 절차 1. 타입스크립트 프로젝트 환경 구성 프로젝트 생성 후 NPM 초기화 명령어로 package.json 파일을 생성 프로젝트 폴더에서 npm i typescript -D 로 타입스크립트 라이브러리를 설치한다. 타입스크립트 설정 파일 tsconfig.json 을 생성하고 기본 값을 추가한다. 서비스 코드가 포함된 JS 파일을 TS 파일로 변환한다. tsc 로 TS 파일을 JS 파일로 변환한다. 2. 엄격하지 않은 타입 환경(loose type)에서 프로젝트 돌려보기 프로젝트에 테스트 코드가 있다면 테스트 코드가 통과하는지 먼저 확인 js 파일을 모두 ts 파일로 변경 타입스크립트 컴파일 에러가 나는 것 위주로 에러가 나지 않게 수정 기능 사소하게라도 변경 x..