전체 글

웹사이트 성능 최적화하기 with LightHouse

웹 개발 에서는 특히 성능이 중요하다. 어떤 부분이 개발한 웹에서 부족한지, 보완할 점은 무엇인지를 알기 위해 성능 측정을 해보자. LightHouse 구글에서 개발한 웹 성능 측정기이다. 크롬의 개발자도구에 기본으로 내장되어 있어 F12 - LightHouse로 작동시킬 수 있다. 성능 측정 한창 프로젝트로 진행 중인 웹사이트를 측정해보았다. 성능과 접근성이 상당히 낮게 나온다. 아래쪽에서 원인과 해결 방법을 상세하게 알려준다. 따라서 한번 수정해보자. 성능 향상 Reduce unused JavaScript React는 기본적으로 SPA(Single Page Application)이다. 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 변경하며 표현하는 것이다. 이러한 동작을 위해 하나의..

[React] React.Lazy() (Code Splitting)

Code Splitting React는 기본적으로 SPA(Single Page Application)이다. SPA (Single Page Application) 웹 사이트의 전체 페이지를 하나의 JS 파일에 담아 액션에 따라 동적으로 화면을 변경하며 표현하는 방식이다. 과거에는 한 페이지마다 크기가 작았기에 페이지 변경 시 서버에서 하나의 페이지가 담긴 html 파일을 통째로 전달해주곤 했다. 하지만, 서버의 부하, 화면 blinking 등의 이슈로 Client Side Rendering인 SPA가 등장하게 되었다. SEO (검색 엔진 최적화)의 효율이 좋지 않아 최근에는 Server Side Rendering을 고려하는 경우가 많다. SPA의 가장 큰 문제점은 모든 페이지가 하나의 JS 파일에 담겨져 ..

[TS] TypeScript Object 다루기

//JAVASCRIPT let obj = {}; obj["name"] = "pitter"; 자바스크립트와 타입스크립트에서 쉽게 체감할 수 있는 눈에 띄는 차이점은 객체이다. 자바스크립트에서는 위와 같이 간단하게 객체를 선언하지만, 타입스크립트에서는 {}가 정확히 객체만을 의미하는 것이 아니라 사실 Non-nullable Any 타입정도로 생각할 수 있다. 타입스크립트에는 여러가지 객체 타입 선언 방법이 있으니 알아보자. object 타입 var object: object; //{}와 []가 할당 가능한 타입이다. object = { prop: 0 }; object = []; //아래 형태의 변수는 할당 불가능하다 object = 42; // Error object = "string"; // Error o..

[TS] Styled-Components에 TypeScript 적용하기

Styled-Components와 TypeScript를 함께 사용할 때 아래와 같은 에러가 발생한다. Property 'isSelected' does not exist on type 'Pick & { ...; } & ThemeProps' Styled-Components가 전달받은 프로퍼티에 타입이 지정되어 있지 않아 발생하는 에러이다. 크게 두 가지 해결법이 있다. 방법1 const SStyledBookmark = styled.div` color: ${({ isSelected, theme } : { isSelected : any, theme : any}) => ... 단순하게 프로퍼티에 타입을 명시해주면 된다. 하지만 중복되는 프로퍼티가 많다면 방법2를 사용하는 것이 좋다. 방법2 interface P..

[TS] React Typescript 변환하기

TypeScript TypeScript는 JavaScript의 변수에 형식을 지정한 파생 언어이다. 아래를 참고해 기본 구조를 먼저 익히자. TypeScript 가이드북 - TypeScript Guidebook 타입(Types)을 사용하면 JavaScript 애플리케이션을 개발할 때 정적 타입 검사 및 코드 리팩토링과 같은 생산성 높은 개발을 수행할 수 있습니다. 타입 설정이 필수는 아니지만, 설정할 경우 컴파일 yamoo9.gitbook.io 설치하기 npm install --save typescript @types/node @types/react @types/react-dom @types/jest # or yarn add typescript @types/node @types/react @types/r..