JSConf Korea 2019 in 코엑스

1. 다마고치로 어쩌구

• Generator 제너레이터: 프로미스 보다 좋은거
• 중간에 멈추는 것이 가능하다
• 제너레이터 안에 제너레이터 가능
• 멈췄다가 재개하는 것은 외부에서만 가능
• 누가 제너레이터를 재개하는가, 그게 cooperatively
• 코루틴으로 운영
• 코드가 보기 깔끔하다
• yield*
• function*
• github/creighton/tamagotchi

2. Don’t block the event loop! 매끄러운 경험을 위한 자바스크립트 비동기 처리

• 사용자가 원하는 인터렉션이 제때 동작하지 않는다면 ux 에 안좋음
• 무엇이 느리게 하는 것인가
• 내부적으로 어떻게 동작하는가

run to completion

• 하나가 작업하면 끝날때까지 다른걸 하지 않음
• 무한루프로 인한 크롬 주금 ㅠㅠ

call stack

• 호출할 함수가 stack에 쌓고 하나씩 꺼내면서 호출
• 차례차례 처리하다가 갑자기 딜레이를 만드는 작업으로 지연이 발생한다면?
• 복잡한 동시성 이슈들은 어떻게 처리하고 있는가?
• ?? requestAnimationFrame

event loop

• 자바스크립트 구동이 아닌 구동환경에 속해있다.

• setTimeout 이 바로 실행되어야할것같지만 그렇지 않다. 왜냐

  • ?? microtasks : task 와는 다른것으로 es6
  • task 브라우저 환경에서 순서대로 호출되어야하는 작업
  • microtask: 바로 다음에 호출되어야하는 작업 우선순위가 높다 (promise)
  • 마이크로테스크가 없으면 테스크를 작업하다.
• 테스크 하나가 끝날때까지 다른 태스크는 작업할수없다
• 마이크로 테스크들이 모두 끝나야 테스가 실행된다
• 위 이유로 화면의 딜레이가 생겨 사용자 환경을 해칠수 있다
• 해결: 멀티쓰레드 활용, 무거운 테스크를 쪼개서…

자바스크립트 엔진구조, 이벤트 루프를 이해하여 사용자경험을 해치지 않도록
웹워커에 작업을 위임하거나 큰 테스크를 쪼개서 블락되지 않도록 한다.

3. codepen으로 만드는 쇼핑몰

arron.kr
자료

4. ai 를 이용한 인공지능

• ?? tensorFlow.js
• 자바스크립트로 머신러닝할수있도록하는 아이
• 이미있는 모델을 배울수도 있음
• 한국의 여러 병원에서 실제로 쓰나봐여

5. 백 투더 퓨처 오브 자바스크립트

• if / else : 까다롭게 느껴져
• switch statement:
• ternary expressiton 삼항 연산자

temp > 40  
 ? 1
 : temp > 30
 ? 2  
 : temp > 2
 ? 3  

• 4번째:

  • when clause
  • match pattern
  • match guard
  • match all
  • 패턴 매칭이 이제 표현식이 되었습니다.
  • pattern matching
• Ramda
• pipe
• pipeline operator : 일련의 함수들을 보기 쉽게 한다 : |>

  getCookedRice  
  |> (a => addFish(#, b))  
  |> await addToBento(#)  
  // 비동기함수에 위임할 수 있다  

• bare style, topic style
• F# proposal..
• smart popeline proposal

js cold start

• ship less js
• lazy load
• parsing time

binary AST 새로운 무선 형식

6. 함수형 자바스크립트 (Redux)

• combineReducer
• middleware
• reduce reducers: reducer 합성 라이브러리
• ?? ramda.js : 커링이랑 함성이 주특기인 함수형 라이브러리
• pipe
• curry , placeholder

7. 디자인 시스템

• what is TypeScript?
• interface
• intent follows impact