전체 글 썸네일형 리스트형 [올림픽 통계 서비스] 웹 성능 최적화까지 해보자-6 이번에는 올림픽 통계 서비스를 최적화해 볼 것이다. 해당 서비스는 리우 올림픽과 런던 올림픽 정보와 사진을 비교해서 보여 주고, 하단에는 그에 대한 설문조사 결과를 보여준다. 설문조사 결과는 막대 그래프로 나타내는데, 항목을 클릭하면 해당 항목에 대해 필터링돼서 그래프가 애니메이션과 함께 변한다. 이 장에서 학습할 최적화 기법은 다음과 같다. CSS 애니메이션 최적화 컴포넌트 지연 로딩 컴포넌트 사전 로딩 이미지 사전 로딩 컴포넌트 지연 로딩 이 서비스에서는 페이지 코드 자체를 분할하는 대신 단일 컴포넌트를 분할해서 컴포넌트가 쓰이는 순간에 불러오도록 만들 것이다. 컴포넌트 사전 로딩 컴포넌트 코드를 분할해서 지연 로딩을 적용하면 첫 화면 진입 시 분할된 코드 중 당장 필요한 코드만 다운로드하기 때문에 .. 더보기 [블로그 텍스트 압축] 웹 성능 최적화까지 해보자-5 텍스트 압축 production 환경과 development 환경 지금까지 이미지 사이즈 최적화, 병목 코드 최적화, 코드 분할 기법을 사용해서 서비스 성능을 향상해 보았다. 하지만, 지금 블로그 서비스가 실행되고 있는 환경은 production 환경이 아니라 development 환경이라는 점을 간과하면 안 된다. cra의 경우 production 환경과 development 환경에 차이가 있다. production 환경일 때는 webpack에서 경량화라든지 난독화 같은 추가적인 최적화 작업을 한다. 하지만 development에서는 이런 최적화 작업이 없이 서비스를 실행한다. 그래서 최종 서비스의 성능을 측정할 때는 실제 사용자에게 제공되는 production 환경으로 빌드된 서비스의 성능을 측정해야.. 더보기 [블로그 코드 분할 & 지연 로딩] 웹 성능 최적화까지 해보자-4 번들 파일 분석 이번에는 webpack을 통해 번들링된 파일을 분석하고 최적화해보자. 이전에 Performance 패널 분석할 때 0.chunk.js 파일이 다운로드도 오래 걸렸었다. 화면을 그리는데 필요한 리소스인 리액트 코드의 다운로드가 늦어지면 다운로드가 완료된 후에나 화면을 그릴 수 있어 다운로드가 오래 걸린 만큼 화면도 늦게 뜬다. 그래서 이 자바스크립트 파일을 최적화해야 한다. 그 전에 해당 자바스크립트 파일이 어떤 코드로 이루어져 있는지 알아야 한다. 이 구성을 상세히 보기 위해서 Webpack Bundle Analyzer라는 툴을 이용해보자. 이 툴은 webpack을 통해 번들링된 번들 파일이 어떤 코드로 이루어져 있는지 트리맵으로 시각화해서 보여준다. 하지만 이 툴을 사용하려면 webpa.. 더보기 [블로그 병목 코드 최적화] 웹 성능 최적화까지 해보자-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.. 더보기 이전 1 ··· 8 9 10 11 12 13 다음
