DEVFEST with Chrome Dev Summit Extended 후기

DEVFEST with Chrome Dev Summit Extended 후기

장소: 삼성역 구글스타트업센터

일시: 11월 23일 (토)

주관: GDG Korea WebTech

 

 

타임테이블

 

---

GDG에 대해서

Google Developers Group (구글기술에 관심이 있는 개발자 모임)

 

 

 

1. VisBug와 함께하는 오픈소스 기여이야기

연사자: 안도형 (스튜디오씨드코리아 FE개발자) https://github.com/adhrinae

---

프로토파이 클라우드 서비스 프론트엔드 개발자

리액트만 다룬지 몇년 돼

 

1) VisBug 소개 및 활용 방법 공유

작년 Chrome Dev Summit 에서 발표

크롬웹스토어에만 이용할 수 있다.

Firefox 확장 및 npm 패키지로 임포트해서 사용

 

* 웹컴포넌트

webcomponent.org 에서 사용해볼 수 있다.

- custom Element

- Shodow DOM

- 엘리먼트 스타일과 마크업 캡슐화

- 전역으로 적용된다는 문제 해결

 

* 웹표준기술로 컴포넌트 만들 수 있다.

- 웹컴포넌트와 기능 함수의 조합으로 이루어짐

- PostCSS, Constructable SS 활용

- Ava + Puppeteer

 

CSS Object 모델로 만들어서 주입

특정 스타일을 공유하고 싶을때

 

* Puppeteer 사용

- github 리포지터리에서 찾아보기 

 

* VisBug 사용

https://github.com/GoogleChromeLabs/ProjectVisBug

GoogleChromeLabs/ProjectVisBug

- 가이드 기능이 완전 훌륭

- 디자이너, QA 엔지니어에게 알려주고 협업할 때 좋음

 

 

 

2) 오픈소스 생태계에 기여하는 법, 경험 공유

오픈소스를 통해서 다른 개발자와 커뮤니티를 도울 수 있다.

오픈소스로 공개된 언어와 루비

 

프로젝트 홍보

- 블로그 포스팅

- 유튜브, 발표

 

문서화에 기여

- 프로젝트의 부족한 부분을 채우는 내용을 작성

- 기존의 문서를 한글로 번역 (무조건 빼어난 수준의 번역을 할 필요가 없다!!!)

 

프로젝트를 잘알고 있다면

- 질문에 답변

- 채팅방에서 대답해주기

- Github Issue 등에서 문제 해결을 돕기

- 페어 프로그래밍

 

아니면 후원으로 기여하기

 

어떤 프로젝트에 기여를 해야하나?

- 내가 하고 있는 일과 연관이 있는 프로젝트

- 내가 관심을 가지고 있는 프로젝트

- 내가 재미를 느끼는 프로젝트

 

1. 우선 시작하자

 

2. 테스트 작성해보기

- UI 테스트 작성하는 것은 어렵다.

- 코드리뷰 때 테스트를 작성해보라는 권유 받음

 

3. 적극적으로 소통하자

- 친근하게, 하지만 매너있게

 

4. 질문 잘하는 법

- 되는 데까지 하자

- 구글링을 최대한 한다

- 시도, 검색의 과정을 모두 기록한다.

- 그 모든 내용을 종합하여 질문한다. 

예) XX를 하려는데 YY까지 해봤는데 ZZ정도 됐다. 지금단계에서 XX를 하려면 어떻게 하면 좋을까?

 

3) 총 정리

VisBug는 웹컴포넌트 기반으로 이루어진 프로젝트

테스트를 작성해보자

오픈소스에 즐겁게 잘 나에게 도움되게 기여하자

 

 

 

 

 

2. The main thread is a bad place to run your code

연사자: 도창욱 (Riot Games) https://github.com/cwdoh

---

오늘의 주제

- Chrome Dev Summit 2019의 후기 세션

 

Main Thread가 과용되고 있다.

 

Thread는?

어떠한 프로세스 안에서 실행되는 흐름의 단위

App 시작시 렌더링, 이벤트 등을 처리하는 기본스레드 생성

 

Main Thread === UI Thread

화면에 렌더링하는 역할, 프로그램 흐름 처리 등 다 한다.

메인스레드는 하나다.

 

무엇이 문제일까?

Q1) Javascript는 싱글스레드일까?

Javascript는 싱글스레드 이벤트 루프로 동작

콜스택, 이벤트루프

 

 

렌더링 최적화에 대해 좀더 알고 싶으면 -> 웹펀디멘탈 기고 찾아보기

https://developers.google.com/web/fundamentals/performance/rendering

 

브라우저 렌더링에 대해

- 페이지가 렌더링되기 까지 동작 표시

 

Chrome 브라우저의 경우 60FPS의 렌더링 성능을 추구한다.

초당 60프레임

16.67ms/frame 안에 모든 동작이 끝나기 위해..!

 

자바스크립트는 분명히 렌더링 성능에 영향을 준다.

최적화가 잘된 코드가 있어도 컨트롤 불가한 상황이 있다. -> 사용자의 디바이스에 따라 다르기 때문에

 

자바스크립트 실행은 UI Thread에서..

 

 

어떻게 해야할까?

- 최적화

- 기능이라고 우기기

- 백그라운드 실행

 

Web Workers

- 우리는 지금도 이런 기능을 사용하고 있다.

W3C 에서 말하는 Web Worker

  - 메인페이지와 병렬로 스크립트를 실행하는 백그라운드 워커를 생성하느 API

  - 메세지 전송 기반으로 Thread 처럼 동작

  - 백그라운드 실행을 가능하게 한다.

 

UI스레드에서 분리되어 실행되어야 한다.

 

- DOM에 직접 접근/조작불가

- 자체적인 글로벌 스코프

- 일부 속성과 API만 허가

 

 

종류는?

- Service Worker

- Shared Worker: 다수의 브라우징 컨텍스트에 접근할 수 있는 워커

- Dedicate Worker: 

 

 

ComLink

https://github.com/GoogleChromeLabs/comlink

 

 

총 정리

자바스크립트 부하는 자바스크립트 때문만이 아니다.

UI와는 관련이 없지만 부하가 큰 기능을 구현해야 한다면 Worker를 고민해야한다.

 

 

 

 

 

 

3. HTTP/3 시대의 웹성능 최적화 기술 이해하기

연사자: 강상진 (빈스마트 Mobile R&D Center)

---

베트남에서 개발자로 일하시고 계심

Faster and Securer

HTTP/3 시대

구글 빼고는 아직 사용하지 않는다.

 

최적화 - 최고의 성능을 만들 수 이쓴ㄴ 최적의 조건을 갖추는것

 

한국외 국가를 고민해보자 -> 인터넷 환경이 훨씬 열악한 곳에서 서비스를 배포한다면?

그래서 한국에서 네이버 말고는 고민하는데가 별로 없다 어차피 한국에선 다 빠르게 되니까

 

최적화의 기술?

- 백엔드 최적화

- 프론트 최적화

- 프로토콜 최적화 <- 오늘의 주제

 

실제로 웹사이트 워터폴 차트 보면 최적화에 영향을 미치는 부분이  FE가 차지하는 부분이 꽤 크다.

FE부분을 잘 최적화하면 효과가 제일 크다.

 

BE최적화

- 하는법 PPT 참조하기

 

FE 최적화

- 실제 사용자 환경에 최적화

 

프로토컬 최적화

HTTP 좀더 Web을 빠르게 요청하고 빠르게 응답할수 있는 프로토콜

 

HTTP의 발전

흐름 따오기

개발자 도구로 -> 무슨헤더, 무슨바디

 

HTTP/2 돌아보기

HTTP1.0

파이프라이닝

 

 

멀티플렉싱

헤더 인덱싱과 압축

서버푸시

 

요청응답 요청응답

 

 

 

4. Modern WebAssembly

연사자: 지미문 (Google Developer Expert)

---

프로토파이 개발자

Next.js 컨트리뷰터

 

Web Assembly?

WASM 와즘

- 웹에서 동작하는 새로운 언어

- 다른 언어로 부터 컴파일

- 최적화되고 일관성 있는 성능

- 자바스크립트를 대체하지 않음

 

모든 브라우저 벤더에서 채택하였다.

 

wasm explorer

 

WASM

stack 베이스 언어

잘깔린 철도같이 비교적 완전하고 균일한 

5초이내에 예측가능하고 속도도 빠르고 안정적인 성능을 보인다.

 

Rust

https://rinthel.github.io/rust-lang-book-ko/ch00-00-introduction.html

 

 

JS와 WASM은 뗄래야 뗄 수 없는 관계

컴파일 언어기 때문에 환경설정을 해주어야한다.

 

WASM Studio 온라인 서비스가 있다.

https://webassembly.studio/

 

참고)

https://blog.sessionstack.com/how-javascript-works-a-comparison-with-webassembly-why-in-certain-cases-its-better-to-use-it-d80945172d79

 

SIMD

OpenCV

Native LLVM Backend

Asyncify

 

이제 시스템 인터페이스를 갖게 되었다. WASI

바이트코드 얼라이언스

Interface Types 글루코드

 

 

원래는 이 다음 세션 웹기술로 만드는 동영상 편집기가 있었는데 선약이 있어서 들을 수 없었다 ㅠㅠ