Performance 2

[Next.js] styled-components를 Client side 렌더링 이전에 적용시키기 (덜그덕 방지, Typescript)

styled-components를 이용하여 스타일링하고 Next.js 앱을 켜면 처음에 CSS가 완전히 로딩되지 않은 듯한 모습이 보이게 되는데, 흉한 맨얼굴이 그대로 드러나니 사용자 경험이 꽤 나쁘다. 이것은 스타일이 Client side에서 적용되고 있기 때문이다. 이를 해결하기 위해서는 커스텀 Document를 만들고, ServerStyleSheet를 이용해서 컴포넌트의 모든 스타일을 서버 사이드에서 적용될 수 있도록 바꾸어야한다. babel-plugin-styled-components 설치 먼저 babel-plugin-styled-components를 설치한다. yarn add babel-plugin-styled-components .babelrc에서 SSR를 사용하도록 설정 .babelrc에는 ..

안드로이드 앱 성능을 최적화 하는 방법 - (1) Render

다음은 Udacity의 Android Performance 강의를 듣고 정리한 내용이다.안드로이드 앱 성능은 가장 중요하다! 유저들은 앱이 느리거나 1초라도 버벅되면 당장 앱을 삭제할 수도 있다.그건 그 사람들의 인내심이 없기 때문이아니라 앱을 애초에 잘못만든 탓이다.나는 내 앱의 성능을 최적화하고 유저들에게 원활한 사용 경험을 제공하기 위해 강의를 수강했다. 첫번째 섹션은 Render 부분이다.안드로이드 기기의 CPU는 그려야 할 것들을 GPU로 보내GPU에게 이러 이러한 것들을 그리라고 명령한다.GPU는 drawable에 있는 파일들을 래스터화 시켜 그림을 그린다. Overdraw이럴때 발생할 수 있는 성능 낭비는 Overdraw가 있다.글자 그대로, 과잉으로 그림을 그린 것이다.태극기의 태극 문양을..