Gdg 수원을 다녀오고 느낌점 및 요약정리

이번 2018.11.13에 수원에서 진행하는 gdg수원 devFest를 다녀오고 느낀점이 많아 적은 것을 공유하려한다. ###키노트 이번 데브 페스트의 주제는 digital well-being이였다.

###플러터 현재 모바일 앱 시장은 점차 커지고 있다. 웹이 앱보다 사용시간이 더 길고 더 선호한다 디자인이 심플하고 깔끔한 것을 선호함 즉 모바일 웹보다는 네이티브 앱을 더 오랜시간 사용하고 그 중에서 심플한 것을 더 선호한다.

모바일 앱은 꾸준히 성장하지만 실제로 시장에 살아남는 앱은 3퍼센트이다. 현재 모바일 앱은 개발하기 쉽지만 결과물이 좋지 않은 것과 개발은 어렵지만 결과물이 좋은것이 딜레마다. 그래서 크로스 플랫폼과 이 문제를 플러터는 해결해 줄 수 있다.

####플러터의 장점

1. 핫리로드로 빠른 속도로 개발가능
2. 개발자들이 익숙한 IDE로 개발 가능
3. 마테리얼 디자인과 IOS향 쿠퍼티노 위젯 제공 즉 풍부하고 아름다운 UI제공
4. 네이티브 성능을 제공(다트를 사용)
5. 브릿지가 필요하지 않음(리액트 네이티브보다 우월한점 - 더 성능이 좋음)

####안드로이드 관점 뷰 대신 위젯 위젯들로 이루어진다 위젯이 그만큼 중요하기 때문에 다양한 위젯이 제공 된다. 스테이트풀과 스테이트리스로 이루어짐(리액트의 프레젠테이션 컴포넌트와 컨테이너 컴포넌트와 비슷) 스테이트리스는 빌드만 있으면 됨 스테이트풀은 크리에이트스테이트와 같이 쓰이고 이닛스테이트 이후 셋스테이트로 다시 그려주게 된다 플러터는 XML이 없다, 리액트 inline styling과 비슷한 면모를 보인다.

####라이브 코딩 메인에서 한 위젯을 불러서 다른 위젯을 부르는 형식 리액트 앱과 비슷 플러터 닥터란 것이 있어서 ios 및 안드로이드가 제대로 깔렸는지 그 문제들을 진단해준다 axios나 볼리 레트로핏 대신에 http모듈이 강력해 http모듈을 사용함 다트 파일만 가지고 실행가능함 퓨처라고 지원해주는것이 있는데 await하고 비슷함 대신 퓨처는 리슨이라는 것으로 받아야함

###웹 성능 향상 오픈소스에서 배우는 웹개발

성능이란 무엇인가 성능은 추상적인 개념이고 유저가 어떻게 받아들이냐에 따라 다르다 이런것에 있어서도 어떻게 UX를 제공하는 것이 핵심

####성능을 측정하는 방법 (RAIL) 유저의 사용성을 재는 가장 좋은 방법이다. 이 방법은 크게 4가지의 키워드로 설명이 가능하다.

1. 응답
2. 애니메이션
3. 아이들
4. 로드 이 중에서도 유저한테 집중한다 이 때 더 나은 사용성을 제공할 수 있다
   

응답은 50 ms 이내, 애니메이션은 10ms 이내, 유휴 시간을 최대한 유지, 로드는 5초이내에

##만약에 당신이 문제를 모른다면 문제를 알 수 없다.

이때 문제를 해결하기 위한 방법

Chrome DevTools LightHouse PageSpeed Insight

####라이트 하우스란?? 오픈 소스이며 어떤 웹사이트에서도 사용가능함, Audits에 lighthouse가 있음 문제가 뭔지 여기서 문제를 어떻게 해결 할 수 있을까 까지 알려줌

Critical rendering path - 중요한 렌더링 단계 ###Optimized Critical Redering - 즉 컨텐츠 우선순위를 어떻게 둘 것인가.

바이트를 캐릭터로 캐릭터를 토큰으로 토큰을 노드로 노드를 돔으로 스타트 태크와 엔드태그로 자식을 알 수 있음 이 과정을 => parseHTML 이라고 함

스타일도 비슷하게 진행됨 돔과 cssom을 합쳐 렌더트리가 만들어짐

그리고 어떻게 계산하는 것들을 하고 레이아웃단계가 됨(화면에 게산)

레이아웃(위치) -> 페인트(그리기) -> 컴포지트(합성) 이중에서도 레이아웃이 가장 많이 시간이 걸림 CPU가 사용되고 나머지는 GPU가 사용됨

그리고 이 모든 단계가 16ms안에 끝나야함 (자바스크립트 => 스타일 => 레이아웃 => 페인트 => 컴포지트) 이게 만약 16ms가 넘으면 성능 저하가 일어남

css도 렌더린을 막음 css먹지않은화면(FOUC) 유저가 FOUC를 본다면 안되기 때문에 css가 렌더링을 막음

즉 중요한 리소스는 우선 로딩하고 나머지는 비동기로 로딩하는 것이 성능에 도움을 줌

###Offscreen Image 이미지 중에서 첫눈에 바로 보이지는 않지만 웹페이지가 보이기전에 안나오는 것들이 있다. 이때 나중에 받게하고 이것을 Lazy Loading이라고 한다. 이 Lazy Loading은 인터렉션 옵저버를 사용하여 진행한다. 이렇게 쓰면 더 빨리 페이지가 로딩 될 수 있다.

###Optimize Image ImageMin을 사용하면 좋음 Squeez 라는 것도 좋음 이미지를 얼마나 낮출것인가를 보면서 할 수 있음

Web.dev/fast에 많은 것이 나와있음

QnA GDE는 오픈소스 커밋이 연결해줌

###구글 섬머 오브 코드

섬머오브코드란 학부 및 석박사 과정 학생만이 참여가능 오픈소스 프로젝트임

유명 오픈소스 커미터로 부터 코드리뷰도 받을 수 있는 기회 구글에서 제공하는 여러가지 Benefit

###발표자료 밑에 발표자료를 나중에 추가로 구하여 게시해 놓았다 누르면 들어가지니 필요하면 들어가보면 좋을것 같다.

1. Keynote
2. Flutter
3. Improve Web Performance
4. GSoC