Frontend 썸네일형 리스트형 [블로그 병목 코드 최적화] 웹 성능 최적화까지 해보자-3 병목 코드 최적화 이번에는 Diagnostics 섹션의 Reduce JavaScript execution time 항목을 살펴보자. 0.chunk.js 파일에서 1163ms동안 자바스크립트가 실행되었음을 알 수 있다. Performance 패널을 활용해서 느린 작업이 무엇인지 확인해보자. Lighthouse 결과 페이지에서 ‘View Original Trace’ 버튼을 눌러서 Performance 패널로 이동해보자. 그러면 Lighthouse를 통해 분석한 내용을 Performance 패널로 가져가서 보여준다. 먼저 CPU 차트, Network 차트, 스크린샷을 살펴보자. CPU 차트는 시간에 따라 CPU가 어떤 작업에 리소스를 사용하고 있는지 비율로 보여준다. 이 차트를 통해서 어느 타이밍에 어떤 작업.. 더보기 [블로그 이미지 사이즈 최적화] 웹 성능 최적화까지 해보자-2 이미지 사이즈 최적화 비효율적인 이미지를 분석해보자. Opportunities 섹션의 첫 번째 항목인 ‘Properly size images’ 부분을 보면 해당 이미지를 적절한 사이즈로 사용하도록 제안한다. 해당 방법을 따르게 되면 용량을 이미지당 대략 200KiB 정도 줄일 수 있고 이미지 로드에 소용되는 시간을 대략 1.65초 정도 단축할 수 있다고 한다. 문제가 있는 이미지에 대해서 자세히 살펴보자. 실제 이미지 사이즈는 1200 x 1200 px인데, 화면에 그려지는 이미지의 사이즈는 120 x 120 px이라고 한다. 그래서 이미지 사이즈를 변경해주어야 하는데, 너비 기준으로 두 배 정도 큰 이미지를 사용하면 적당하다. 따라서 240 x 240 px 사이즈로 사용하면 된다. 그런데, 해당 이미지.. 더보기 웹 성능 최적화까지 해보자-1 이 글은 웹 개발 스킬을 한 단계 높여 주는 프론트엔드 성능 최적화 가이드라는 책 기반으로 작성되었다. 웹 성능 최적화에 대해 배워보게 된 이유? 최근 프로젝트에서 프론트엔드 파트를 맡아 개발하다보니, 점점 기능이 많아지고, 코드를 작성할 일이 늘어나게 되었다. 그래서, 내가 작성하고 있는 코드가 올바른 방향으로 가는 코드인지, 아니면 그저 기능 구현을 위한 코드인지 궁금해지기 시작했다. 그래서, 성능 최적화에 대해서 알아보다가 이 책을 알게 되었다. 해당 책을 읽고 성능 최적화에 대해 배워서 프로젝트에도 꼭 적용해보면 좋은 경험이 될 것 같다. 웹 성능 최적화가 뭐야? 웹 성능을 최적화하면 서비스 사용자에게 더 나은 사용자 경험(UX)를 제공할 수 있고 이로 인해 가입률과 전환율은 높이고 이탈률은 낮춰.. 더보기 조건부 타입과 유틸리티 타입 조건부 타입 조건부 타입은 삼항 연산자를 사용해서 타입을 정의하는 타입이다. /** * 조건부 타입 */ type A = number extends string ? string : number; // number 타입 type ObjA = { a: number; } type ObjB = { a: number; b: number; } type B = ObjB extends ObjA ? number : string; // number 타입 /** * 제네릭과 조건부 타입 */ type StringNumberSwitch = T extends number ? string : number; let varA: StringNumberSwitch; // string 타입 let varB: StringNumberSwit.. 더보기 타입 조작하기 타입 조작하기 타입 조작하기는 기본 타입이나 별칭 또는 인터페이스로 만든 원래 존재하던 여러 가지 타입들을 타입스크립트의 특수한 문법을 이용해서 상황에 따라 다른 타입으로 변환하는 기능이다. 제네릭도 그런 관점에서 타입 조작하기에 속한다. 이제부터 타입 조작하기에 속하는 것들을 자세히 알아보자. 인덱스드 액세스 타입 인덱스드 액세스 타입은 객체, 배열, 튜플 타입에서 특정 프로퍼티/요소의 타입을 추출하는 타입인데, 아래 코드에서 세 경우를 모두 확인해볼 수 있다. /** * 인덱스드 액세스 타입 */ interface Post { title: string; content: string; author: { id: number; name: string; } } function printAuthorInfo(a.. 더보기 제네릭 제네릭 /** * 제네릭 */ // 제네릭 함수 function func(value: T): T { return value; } let num = func(2); let bool = func(true); let str = func('string'); let arr = func([1, 2, 3]); // 튜플 위 함수에서 반환값의 타입은 함수 호출 시 결정된다. 튜플 타입을 넣어주고 싶은 경우, 타입 단언을 사용하는 것보다 위와 같이 나타내는 것이 더 좋다. 타입 변수 응용하기 /** * 첫 번째 사례 */ function swap(a: T, b: U): [U, T] { return [b, a]; } const [a, b] = swap('1', 2); /** * 두 번째 사례 */ function retu.. 더보기 인터페이스와 클래스 인터페이스 인터페이스는 타입 별칭과 구분할 수 있는데, 아직 타입 별칭에 대해서는 다루지 않았기 때문에 타입 별칭 부분에서 비교해보도록 하자. /** * 인터페이스 */ interface Person { readonly name: string; age?: number; sayHi(): void; sayHi(a: number, b: number): void; } const person: Person = { name: '이정환', sayHi: function () { console.log('Hi'); } } 인터페이스를 사용해서 타입을 정의하려면 위와 같이 사용하면 된다. 위 코드만 보면 타입 별칭과 특별히 차이가 없는 것처럼 느낄 수 있지만, 인터페이스에는 타입 별칭과 다른 특징이 있다, 그 부분은 아래에.. 더보기 함수와 타입 함수 타입 아래 코드에는 함수 선언식, 화살표 함수에 타입을 정의하는 방법, 그리고 함수의 매개변수에 타입을 정의하는 방법이 나와있다. 특히, 함수의 매개변수에 rest parameter를 사용하는 예도 있으니 참고하면 좋을 것 같다. /** * 함수 타입 정의 */ // 함수를 설명하는 가장 좋은 방법 // 어떤 타입의 매개변수를 받고, 어떤 타입의 결과값을 반환하는지 설명 function func(a: number, b: number): number { return a + b; } /** * 화살표 함수의 타입을 정의하는 방법 */ const add = (a: number, b: number): number => a + b; /** * 함수의 매개변수 */ function introduce(name .. 더보기 이전 1 2 3 4 5 다음
