크롬 웹데브서밋 2019
📄

크롬 웹데브서밋 2019

Created
Nov 23, 2019 04:28 AM
Tags
web
chrome
javascript

Open source에 기여하는 방법

  • css object 가능
  • webcomponent
 
  • 오픈소스화를 통해 빠른 확산과 발전을 이끌어낼 수 있다
    • 다른 개발자나 커뮤니티를 돕고
    • 또 내 능력을 키울수도 있겠지
 
  • 기술적으로 어려우면 문서화에 기여해도 좋다
    • 번역같은 것 말이지
    • 빼어난 수준의 번역을 할 필요는 없다는 것
 
  • 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

trim을 어디서부터 시작할지를 의미
 
  • 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)

TCP 말고 UDP 사용하기 (Avoid TCP HOLB) ⇒ QUIC (TLS 1.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 CodeLabDevFest WebTech CodeLab

Loading Comments...