개발일지 (12월 3주차 회고)

 

 

Overview

 

산업기능요원 전직 대기기간 14일을 사용할 수 있게 되면서, 오래간만에 출근하지 않고, 백수의 생활을 했었던 것 같다. 밀린 프로젝트들을 정리하고, 새로운 회사에서 조금씩 공부하게 될 Django API Server, Next.js SSR framework, React Class Component(하도 Functional Component만 사용하다 보니 Class Component가 생소하게 느껴질 정도였다.)를 정리하는데 시간을 주로 할애했다.

 

 

추가적으로, 이직을 준비하면서부터 좋은 개발자란 무엇인가에 대한 고민을 계속 했었던 것 같다. 툴을 능숙하게 다루는 개발자에서 한 걸음 나아가서 툴을 이루는 근본이 되는 컴퓨터 공학. 이를 테면 Javascript 본연의 특징 및 메모리 관리, 가비지 컬렉션, Prototype 및 여러 Syntax Sugar의 기저에는 어떤 원리가 깔려있는가? 에 대해서 조금씩 고민을 했다.

 

 

웹 개발자로 커리어를 시작하게 되면서, 단순히 Tutorial을 따라가고, Official Docs를 읽는데 그치는 개발이 어느 수준에 이르러서는 한계점에 다다를 수 있다는 사실을 어렴풋이 깨달았다. 이를 조금이라도 보완하기 위해 Run-time Environment, 즉 브라우저가 동작하는 방식 및 브라우저의 역사를 공부하고, 브라우저의 성질에 맞는 최적화 방법들에 대해서 조금씩 고민해야 할 필요성을 느끼게 되었다.

 

 

또한 개발자는 결국 '가치를 만드는' 사람이라고 정의하게 되면서, Computer Science관련된 분야가 아닌 디자인, UI/UX, 인문학, 정치/경제학 등의 다양한 분야에서 넓은 스펙트럼을 가질 필요성을 느끼게 되었다. 마침 넷플릭스에서 디자인 미학이나, 건축 등 평소에 관심 있었던 분야들에 대해서 여러 다큐멘터리 시리즈들을 연재하고 있었기 때문에, 머리가 굳은 것 같은 날이면 이런 다큐멘터리를 보면서 시간을 보냈었던 것 같다.

 

참고한 넷플릭스 다큐멘터리는 다음과 같다

www.netflix.com/kr/title/80057883

앱스트랙트: 디자인의 미학 | Netflix 공식 사이트

 

www.netflix.com/kr/title/80213025

세계에서 가장 경이로운 집 | Netflix 공식 사이트

 

 

Front End Optimization

초기 구동시간

 

최신 브라우저는 대체로 도메인 당 6개의 접속을 동시 처리한다. 따라서 하나의 도메인에서 다운로드할 파일의 개수가 6개 이상이면 다운로드가 지연될 수 있다. 따라서 한 번에 다운로드해야 할 파일들이 많다면 이를 별도의 여러 도메인과 CDN 등으로 분산하는 것도 하나의 방법이다.

 

이미지의 경우 최신 포맷을 사용할 경우 용량을 절약해서 전송 속도를 높일 수 있다. WebP의 경우 JPEG보다 70% 정도의 용량을 차지한다. (이미 레진코믹스의 경우 WebP포맷을 지원하고 있다.)

 

웹 폰트의 경우 WOFF2는 WOFF, TTF보다 30%가량 용량이 적다.

구글 폰트는 웬만해서는 최적화가 잘 되어 있어서 큰 문제없이 구글에서 제공하는 폰트를 사용해도 된다.

한국어의 경우 영어와 다르게, 수많은 자음 + 모음의 조합이 있기 때문에, 필요한 글자들만 골라서 글꼴을 만드는 것도 용량을 줄이는 하나의 방법이 될 수 있다.

 

필수 콘텐츠가 아니라면(image, iframe, script 등) 비동기 로딩을 고려해 보는 것도 하나의 방법이 될 수 있다. (Lazy Loading) 이러한 설정들은 webpack 번들러 설정을 통해 바꾸어둘 수 있다. 특히 콘텐츠를 가져오는 데 시간이 오래 걸린다면, placeholder(Skeleton)을 사용해서 사용자에게 무언가가 로딩되고 있다는 피드백을 주는 것이 좋다.

 

계산

 

자바스크립트는 기본적으로 싱글 스레드에서 동작하지만, Web Worker를 통해 멀티스레드처럼 동작하게 할 수 있다. 백그라운드에서 복잡한 연산을 처리해야 하는 경우, web worker를 사용하는 것을 권장한다.

 

반응 시간

 

시스템의 응답이 400ms보다 느리면 주의력 분산, 생산성 하락이 발생한다. 사용자는 UI가 100ms이하로 반응해야 자신이 UI를 다루고 있다고 느낀다. 애니메이션의 경우 60 FPS정도의 성능을 지원해야 버벅거림이 발생하지 않는 자연스러운 동작처럼 보인다.

 

애니메이션을 작성하기 위해서 Javascript를 사용하거나, CSS Transform속성을 사용할 수 있는데, Javascript의 경우 Call Stack에 들어가게 되므로, CPU를 잡아먹게 된다. 꼭 필요한 경우가 아니라면 CSS Transform속성을 사용하는 것이 좋다. (CSS Transform은 GPU에서 GPU 가속을 통해 처리해준다.) 

 

브라우저가 렌더링 하는 프로세스 중에 Layout, Paint 과정이 있는데 이 과정들은 비용이 많이 든다. 따라서 이러한 과정을 최소화하는 것이 좋으며, setTimeout대신 requestAnimationFrame, webAnimations 등의 API를 사용하는 것이 좋다.