크롬 웹데브서밋 2019

Open source에 기여하는 방법

• css object 가능

• webcomponent

• project visbug

• 오픈소스화를 통해 빠른 확산과 발전을 이끌어낼 수 있다
• 다른 개발자나 커뮤니티를 돕고
• 또 내 능력을 키울수도 있겠지

• 기술적으로 어려우면 문서화에 기여해도 좋다
• 번역같은 것 말이지
• 빼어난 수준의 번역을 할 필요는 없다는 것

• SO나 Issues에서 문제 해결을 도와도 되고

• 어떤 프로젝트에 기여할 수 있을까?
• 하고 있는 일과 연관이 있음
• 관심이 있음
• 재미있다고 느낌

• CONTRIBUTE.md
• 컨트리뷰트를 위한 방법

• Issues
• good first issues

본격적으로 시작하기 전에...

• 코드 분석하는 가장 빠른 방법은 로컬에서 건드려보는 것
• 또는 그냥 코드에 대해 분석해도 좋을 것 같고
• 단, 이 경우 다른 사람이 이슈를 해결버릴 수도 있겠지

• 테스트 작성하며 진행해보기
• UI 테스팅은 puppyteer? 이거 사용해서 할 수가 있다고도 한다

• 적극적으로 소통하기
• 질문 잘 하는 방법
• 되는데까지 시도해보기
• 검색할 수 있는데까지 검색해보기
• 시도/검색의 과정 모두 기록하기
⇒ 이 모든 내용을 종합하여 질문

코드랩; ES 7~10

Async / ES8

• 반환으로 Promise
• (async () => { })() :: Promise

Object.entries, Object.values

• entries는 Object를 [key, value] 형태로 묶고

• values는 Object의 values를 [value] 형태로 묶고

Object.entries({ a: 1, b: 2, c: 3 }); // [['a', 1], ['b', 2], ['c', 3]]
Object.values({ a: 1, b: 2, c: 3}); // [1, 2, 3]

Object rest & spread / ES9

const { a, b, ...r } = {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
};

console.log(a, b, r); // 1, 2, {c: 3, d: 4}

Promise / ES9

• ES9에서 then, catch 말고도 finally 가 추가되었다

• Promise.all([ ... ]) 은 배열 내 모든 Promise 를 대기

Array flat, flatMap / ES10

• flat은 lodash의 flatten
• depth를 지정할 수가 있다

• flatMap은 return에 대해 flat depth-1을 적용하는 것

['a', 'b', ['c', ['d']]].flat(); // ['a', 'b', 'c', ['d']]
['a', 'b', ['c', ['d']]].flat(1); // ['a', 'b', 'c', ['d']]
['a', 'b', ['c', ['d']]].flat(2); // ['a', 'b', 'c', 'd']

['a', 'b', 'c', 'd'].flatMap(v => [v + '-flatted'])
// ["a-flatted", "b-flatted", "c-flatted", "d-flatted"]

Object.fromEntries() / ES10

• 앞서 Object.entries() 를 이용해 object를 [key, value] 로 만들었던 것을

• 다시 {key: value} 로 만들어주는 함수

String trim[left|right|start|end] / ES10

• left = start

• right = end

Omit-able catch binding / ES10

• catch 사용할 때, 반드시 Error 객체를 받아야 했는데

• ES10부터는 반드시 받을 필요는 없다

try {
	/* ... */
} catch { // without error object binding !!!
	/* ... */
}

NAVER

• TypeScript

• React

• GraphQL

HTTP/3 그리고 웹 최적화

• Optimization = Performance + Condition

• HTTP/3 에서의 웹 최적화란 프토로콜 최적화 를 의미한다
• 프론트와 프로토콜 최적화가 속도에 가장 큰 영향을 미친다

최적화

• 로드밸러서도 라운드로빈을 사용하곤 한다
• AWS ELB 내에 여러 알고리즘이 있으니 이걸 사용하고

• 브라우저 캐싱을 종종 간과한다고 한다
• 절대 바뀌지 않을 것들은 캐싱하도록 하자
• 특히 이미지같은 것들

• modern browser는 자원가져올 때 병렬적으로 가져오기에
• 도메인을 분리하곤 한다 (Domain Sharding)
• 단, DNS 조회가 늘어나기에 DNS Server가 충분한 퍼포먼스가 보인다는 가정 하에 진행

HTTP/2

• 멀티플렉싱을 이용

• 헤더압축

• 서버푸싱
• HTML, CSS 파싱하며 필요자원 곧바로 불러오는거
• Priority를 이욯 (개발자도구-Network탭)

• 이 세 개는 HTTP/3에서도 그대로 적용

프로토콜 최적화 (HTTP/3)

• 그럼 UDP는 신뢰할 수 없는데 어떻게 해야하나?
• Reliability Layer를 사용
• 패킷 재전송, 혼잡 제어, 손실 회복 이런 TCP 기능들을 부여

• QPACK

• 단 이게 만능은 아니고
• 많은 도구가 없다 (기껏해봤자 NGINX 이정도? Apache 이런건 없고)
• 아직 많은 버그, 취약점이 있고

WEB ASSEMBLY

왜 쓰나요?

• 웹에서 동작하는 새로운 언어
• JS와는 다른점: WA는 Stack-based
• 실제 물리적 메모리와는 좀 다르긴 한데, 비슷한 구조를 갖고 있음
• native-like C, CPP, ...

• 다른 언어로부터 compiled 된다
• 타 언어를 wat, wasm 으로 뽑아냄
• 이를 웹에서 실행하는 것

• 최적화되고 일관성 있는 성능
• 왜 JS대신 WA를 사용하고자 하는걸까? (무조건 빠른것도 아닌데말야)
• JS는 자칫 성능이슈를 발생시킬 수 있지만
• WA는 좀 더 안전하고 일관성있는 성능을 뽑아낼 수 있다
• WA는 더 간결한 과정을 거침
• Liftoff라는 컴파일러로 바로 실행됨
• JS는 한 번 변환을 거쳐야 함
• 단순계산에 매우 강하다는 특징
• 이미지 픽셀 하나하나 도는 계산 이런거

• 그렇다고 JS를 대체하는 건 아님
• Compiler, Async 작업 처리를 하는 경우 타 언어에서는 이게 까다로울 수가 있음

• caching도 된다
• start-up time을 획기적으로 낮출 수 있게 됨

• Threading 된다, SIMD도 된다
• 실제로는 WW를 사용한다 생각하면 됨
• Threading network는 SahredArrayBuffer라는 걸 사용
• 사용은 뭐 쓰던 pthread 쓰면 되구
• WASM Threading + SIMD 쓰면 거의 Native Computing에 가깝게 퍼포먼스를 뽑을 수 있다

• Native LLVM과 함께 사용할 수가 있다
• clang target=wasm32

• WASI
• out of browser WASM

코드랩

DevFest WebTech CodeLab