[190316 콘샐러드] 미리 맛보는 Modern JS

뱅크샐러드 컨퍼런스 제 3회 콘샐러드에서 발표한 자료입니다.
TC39 Proposals에 대한 이야기를 담고 있습니다.

#뱅크샐러드 #con-salad #Javascript #ECMAScript

Transcript

1. 미리 맛보는 Modern 미리 알아두면 좋을 TC39 Proposals들 이동근
2. 이동근 발표자 소개 LEE DONG GEUN 뱅크샐러드 Web Frontend Developer
3. 이동근 발표자 소개 LEE DONG GEUN 뱅크샐러드 100일 샌애긔 Web Frontend Developer 입사100일 샌애긔
4. 이동근 발표자 소개 LEE DONG GEUN 뱅크샐러드 100일 샌애긔 Web Frontend Developer 입사100일 샌애긔
5. 금융 조언 연금 진단 뱅크샐러드에서 이런 것을 만들고 있어요.
6. Index TC39? Proposals? ECMAScript! 01 Proposals 왜 알아야 하죠? 02 함께 맛봐요
 Propsals 03
7. ECMAScript! 01 TC39? Proposals?
8. TC39? Proposals? ECMAScript! Javascript는 동적 움직임을 위해 만들어 졌어요
9. TC39? Proposals? ECMAScript! 그 후 브라우저 별로 자체적인 스크립트가 만들어 졌어요
10. 각각 다른 브라우저 각각 다른 스크립트 각각 다른 개발방법
11. 각각 다른 브라우저 각각 다른 스크립트 각각 다른 개발방법
12. 다들 감당하기 쉽지 않았나 봅니다.
14. TC39? Proposals? ECMAScript! ECMA International이
 Javascript 표준을 정해
 ECMAScript를 발표하기 시작했어요
15. TC39? Proposals? ECMAScript! 아래와 같은
 Proposal단계를 거쳐 매년 6월 ES가 발표됩니다. Stage 0: strawman Stage 1: proposal Stage 2: draft Stage 3: candidate Stage 4: finished
16. TC39? Proposals? ECMAScript!
17. TC39? Proposals? ECMAScript! Proposal단계는 모두 공개되어 누구나 확인하고 사용해 볼 수 있어요
18. 그런데 아직 표준으로 정해지지 않은 것을 굳이 왜 보는거죠?
19. ղо Proposalsܳ ࠁח ੉ਬ 02 Proposals ৵ ঌইঠೞભ?
20. 나에게 주어진 Task
21. ղо Proposalsܳ ࠁח ੉ਬ 유저가 가지고 있는 금융정보 중
22. ղо Proposalsܳ ࠁח ੉ਬ 유저가 가지고 있는 금융정보 중 연금의
23. ղо Proposalsܳ ࠁח ੉ਬ 유저가 가지고 있는 금융정보 중 연금의 현재까지 납부한 Data에서
24. ղо Proposalsܳ ࠁח ੉ਬ 유저가 가지고 있는 금융정보 중 연금의 현재까지 납부한 Data에서 금액을 보여주세요
25. ղо Proposalsܳ ࠁח ੉ਬ 유저가 가지고 있는 금융정보 중 연금의 현재까지 납부한 Data에서 금액을 보여주세요 끝?
26. ղо Proposalsܳ ࠁח ੉ਬ 유저가 가지고 있는 금융정보 중 연금의 현재까지 납부한 Data에서 금액을 보여주세요 그런데
27. ղо Proposalsܳ ࠁח ੉ਬ 유저가 가지고 있는 금융정보가 있을 수도 없을 수도 있어요
28. ղо Proposalsܳ ࠁח ੉ਬ 유저가 가지고 있는 금융정보가 있을 수도 없을 수도 있어요 연금이 있을 수도 없을 수도 있어요
29. ղо Proposalsܳ ࠁח ੉ਬ 유저가 가지고 있는 금융정보가 있을 수도 없을 수도 있어요 연금이 있을 수도 없을 수도 있어요 연금 중 일부는 현재까지 납부한 Data가 없을수도 있어요~
30. ղо Proposalsܳ ࠁח ੉ਬ 유저가 가지고 있는 금융정보가 있을 수도 없을 수도 있어요 연금이 있을 수도 없을 수도 있어요 연금 중 일부는 현재까지 납부한 Data가 없을수도 있어요~ 있으면 금액을 보여주세요
32. 그러다 알게된
 Optional Chaining
33. 그러다 찾게된
 Optional Chaining in JS
35. ղо Proposalsܳ ࠁח ੉ਬ Optional Chaining을 이용하면 간편하게 Null check가 가능합니다. Optional Chaining은 TC39 Proposals Stage 1단계 입니다. @babel/plugin-proposal-optional-chaining 을 추가하면 사용할 수 있습니다.
36. ղо Proposalsܳ ࠁח ੉ਬ Optional Chaining을 이용하면 간편하게 Null check가 가능합니다. Optional Chaining은 TC39 Proposals Stage 1단계 입니다. @babel/plugin-proposal-optional-chaining 을 추가하면 사용할 수 있습니다.
37. ղо Proposalsܳ ࠁח ੉ਬ Optional Chaining을 이용하면 간편하게 Null check가 가능합니다. Optional Chaining은 TC39 Proposals Stage 1단계 입니다. @babel/plugin-proposal-optional-chaining 을 추가하면 사용할 수 있습니다.
39. ղо Proposalsܳ ࠁח ੉ਬ Optional Chaining을 이용하면 간편하게 Null check가 가능합니다. Optional Chaining은 TC39 Proposals Stage 1단계 입니다. @babel/plugin-proposal-optional-chaining 을 추가하면 사용할 수 있습니다.
44. ೣԋ ݍࠊਃ Proposals 03
45. React Class 컴포넌트를 간소화 할 수 없을까?
46. 현재 Stage3 단계이며
 Typescript에 이미 적용되어있습니다.
 (JS는 babel7 또는 Chrome 72 에서) ೣԋ ݍࠊਃ Proposals Class fields를 이용하면 클래스 컴포넌트를 간편하게 사용할 수 있어요! Class fields에는 클래스 컴포넌트 간소화 외에 private도 할 수 있어요
51. 모듈을 필요할 때에 불러올 수는 없을까? sentry는 에러가 안나면 필요 없는데..
52. Webpack을 이용하면 바로 이용할 수 있어요 올해 6월 ES10 에 포함될 예정입니다. ೣԋ ݍࠊਃ Proposals Dynamic import를 이용하면 실제 코드가 사용될 때 불러올 수 있어요! Dynamic import를 사용하면 웹페이지 로딩 시간을 조금 더 줄일 수 있어요.
55. ECMA Script 2019의 주요 내용들
56. 1. Array.Flat() & Array.FlatMap() Array.Flat()과 Array.FlatMap()을 이용하면 쉽게 Array 중첩을 해결할 수 있어요
58. 2. Optional Catch binding 이제는
 Try Catch에
 Error를 생략 할 수 있어요.
59. Ӓ ৻ String.trimStart() String.trimEnd() trimLeft와 trimRight의 이름 변경, 앞 뒤의 공백을 자르는 기능 Object.fromEntries() key : value 목록들을 객체로 바꾸는 기능 Function.toString() 함수의 소스 코드를 나타내는 문자열로 return 하는 기능
66. TC39 Proposals Javascript의 표준화 작업은 꾸준히 이루어 지고 있습니다. Proposals을 사용해 깔끔하고 효율적인 코드를 만들어보는 것은 어떨까요? :)
 
 꼭 사용 안해도 다른 사람들이 JS로 인한 고민과 해결방법을 보는 것도 좋답니다~ ݃஖ݴ
67. Thank You