[기술블로그] 2월 3주 주간 기술블로그 Follow Up

금주(2/12~2/18)에 포스팅 된 주요 기술 블로그의 포스팅을 요약하여 공유합니다.

F/U 하는 기술 블로그 목록은 이 링크를, 지난주 포스팅은 이 링크를 참고하세요.

금주 업로드 된 포스팅 개수 : 15 개

요약한 포스팅 수 : 2개

LINE Engineering

간편하게 서버 데이터를 로딩하는 Fetcher, Swift로 구현하기

포스팅 요약 보기

게시일 : 2022.02.18

게시글 분류 : 라이브러리 소개, 모바일 개발, 모듈화

주요 기술 : Google Android Fetcher, Swift

개요

목표 : Google Andoird Fetcher 소개 및 적용기 공유
이유 : Google Android의 공식 문서인 앱 아키텍처 가이드의 설명이 어렵고 양이 많음
배경지식 : -

내용

Fetcher

Client side에서 서버의 데이터를 조회하는 모듈 원격 저장소의 데이터를 로컬 스토리지에 저장하고, View와 로컬 스토리지를 바인딩

장점 : 한 번 로딩한 컨텐츠는 네트워크 연결 없이 표시. 데이터 로딩 시 이전 컨텐츠를 미리 보여주기 가능

동작 방식

로컬 스토리지에 데이터 있는지 확인 → 있다면 View 반환 / 원격 데이터 로딩 동시 진행
로딩한 데이터를 로컬 스토리지(DB, 전역변수 등)에 적재
로컬 스토리지를 View에 바인딩
클라이언트는 바인딩 되어있는 View를 구독하고 있기 때문에 자동으로 업데이트

2. Swift로 Fetcher 사용하기

fetcher 생성
fetcher에 remote storage(REST server)와 local storage(Observable 객체) 설정
fetcher 실행 및 데이터 상태 구독

3. Fetcher 객체화 및 성능 개선 전략

View가 현재 화면에 띄워진 경우에만 구독하면 리소스 절약 가능
제네릭을 통해 다양한 데이터를 다룰 수 있도록 객체화

결론

반복되는 기능 패턴을 모듈화 하면 소스코드 파악 난이도가 쉬워지고, 모듈 단위 테스트가 용이
Fetcher 적용을 통해 사용자 경험을 높일 수 있고, 네트워크 사용이 어려운 상황에서도 기존의 데이터에 대해 검색 등을 지원할 수 있음
모듈화된 소스 적용으로 반복 소스코드를 제거해 유지보수 비용 절감

2022년 웹 개발에서 고려해야 할 환경

포스팅 요약 보기

게시일 : 2022.02.15

게시글 분류 : 표준 준수, 성능 개선, 사용성 개선, 테스트 도구, 성능 평가 데이터 분석

주요 기술 : WPT, CWV, javascript, html

개요

목표 : 오늘날 웹 개발에서 고려해야 하는 환경을 성능, 사용성, 사용 언어 측면에서 분석
이유 : JavaScript에 너무 의존하는 웹 개발 풍조
배경지식 : 2021년에 IE 사용 종료

내용

1. 브라우저 점유율

1-1. 필요성 : 호환해야 하는 브라우저 엔진을 파악해야 함

1-2. 결과 : chrome > safari > edge > firefox (statcount. 2021.11.)

1-3. 참고) 브라우저별 엔진

브라우저	브라우저 엔진
Chrome, Edge	chromium
Firefox	Gecko
Safari	Webkit

2. 모바일 OS 점유율

2-1. 필요성 : OS 점유율은 하드웨어 성능과 연관되기 때문에(iOS 기기 성능이 더 좋음) 파악 필요

2-2. 결과 : Android : iOS = 7 : 3 (statcount. 2021.11.)

2-3. 모바일 기기 성능 : Android 하위 기종의 CPU 성능은 아이폰 6 정도 (infrequently noted. 2021.3.)

3. 웹 표준 준수율 (WPT 실패율)

WPT : Web Platform Tests. 다른 두 개의 브라우저에서 구현된 기능 중 구현하지 못한 기능의 수

3-1. 필요성 : 웹 개발 시 브라우저들은 웹 표준을 다르게 구현했지만, 우리가 개발한 프로그램은 같게 동작 해야 함

3-2. 결과 : Safari < Firefox < Chrome (WPT failures. 2021.12.)

4. iOS 내 점유율

4-1. 필요성 : 기기에 대한 iOS 업데이트 지원 종료 시 Safari 의 업데이트도 지원 종료되기 때문

4-2. 결과 : 최신 2개의 Major 버전이 시장의 90% 이상을 점유 (statcount. 2019 1분기 ~ 2021 4분기)

5. 모바일 네트워크

5-1. 필요성 : 속도와 연관되어 사용자 경험에 큰 영향

5-2. 결과 : 4G 가용성 86.8%(글로벌) / 5G 가용성 29.1%(한국) (Opensignal. 2021.11.)

6. Web Almanac 2021 자료 분석

Web Almanac : 매년 8.2M개의 웹사이트, 39.5TB 데이터를 24개의 챕터로 분석하는 리포트

6-1. 소스코드 파일 크기 (Web Almanac 2021. Page Weight)

확장자	성능 상 추천 크기	실제 파일 크기 중앙값
html	100KB	27KB
css	100KB	66KB
js	350KB	450KB

6-2. 시맨틱 웹 사용율 (main 엘리먼트 사용율) : 27.9%

시맨틱 웹 : 정보와 자원 사이의 관계-의미 정보를 온톨로지 형태로 표현하는 웹 표준

6-3. 최신 CSS 기능 사용율 (Flex, Grid 채택율) : Flex 71%, Grid 8%

이 결과는 IE에서 오래전 사양의 Grid만 지원했기 때문으로 보임

6-4. CWV : 절반 이상의 페이지(60%)가 나쁜 점수 획득

CWV : Core Web Vitals. 구글에서 지정 웹사이트 UX에 중요한 세 개의 메트릭스.

6-4-1. CWV의 메트릭스 소개

LCP(Largest Contentful Pain) : 모든 HTML 요소가 브라우저에 렌더링 완료될 때 까지의 시간
FID(First Input Delay) : 사용자가 웹페이지와 상호작용 했을 때 다음 액션이 가능해지기 까지의 시간
CLS(Cumulative Layout Shift) : 레이아웃이 변화하는 횟수. 광고가 갑자기 나타난다거나 이러면 불이익

6-4-2. CWV 평가 결과가 나쁜 이유 : 웹 페이지의 JS 크기가 너무 크기 때문

7. JS 라이브러리와 프레임워크

7-1. 최고 사용

분류	이름	사용율
JS 라이브러리	jQuery	84%
프레임워크	React	8%

7-2. 프레임워크 성능 비교

파일 크기 : jQuery < Vue.js < React < Angular

응답 시간 : jQuery > Vue.js > Angular > React

7-3. 정적 웹사이트에서의 프레임워크 성능 비교

파일 크기 : Jekyll < Hugo < Gatsby < Nuxt.js < Next.js

CWV 점수 : Jekyll > Hugo > Gatsby > Next.js > Nuxt.js

7-4. 프레임워크 별 성능 차이 이유

IE를 지원 여부 : React의 Virtual DOM, synthetic event와 같이 느린 시스템 도입이 필요해짐

결론

2022년 베이스라인

Category	Base Line	Reason
웹 표준	Safari	WPT 점수 최하위
성능	Android 하위 기종	iPhone 6정도의 성능
모바일 네트워크	4G	가용성 86.8%

정리

JS 대신 html, css 사용하기 : 최신 Html과 css는 일부 js 기능을 대체할 수 있고, 성능도 좋다
정적 페이지 라이브러리 사용하기 : 프레임워크는 개발에 사용하는 코드 수는 얼마 안 되더라도, 클라이언트에 내려받아지는 소스코드가 많다. Jekyll, Hugo 등 SSG의 성능이 충분히 높아져서 대체할 수 있다.
IE지원 중단하기 : ES2015 → ES2017로 설정하면 번들의 크기를 20%까지 줄일 수 있다