FRONTEND - Speaker Deck

Slide 1

Slide 1 text

WEB FRONTEND BACKEND STUDY 2019. 12. 28 TEAM BACKEND yuniq

Slide 2

Slide 2 text

BACKEND STUDY | FRONTEND ਢ੄ ӝࠄ 2

Slide 3

Slide 3 text

BACKEND STUDY | FRONTEND HTML / CSS 3 - HyperText Markup Language - ਢಕ੉૑ܳ ӝࣿೞӝ ਤೠ ݃௼স ঱য - HTML5 - Cascading Style Sheets - ҳઑച ػ ޙࢲܳ ചݶী যڌѱ ۪؊݂ೡ Ѫੋ૑ܳ ੿੄ೞӝ ਤೠ ঱য - HTMLҗ CSSח п੗੄ ޙߨਸ ыח ߹ѐ੄ ঱য - HTML਷ CSSܳ ನೣೡ ࣻ ੓णפ׮. - HTMLহ੉ ױةਵ۽ ઓ੤ೞח CSSח ੄޷о হणפ׮. - SASS, SCSS, LESS - CSS-in-JS(jss, aphrodite, radium, styled-components, glamorous, emotion, styletron)

Slide 4

Slide 4 text

BACKEND STUDY | FRONTEND JAVASCRIPT 4 - ੿੸ੋ HTMLਸ ز੸ਵ۽ ಴അೞӝ ਤ೧ ҃۝੄ ೐۽Ӓې߁ ঱যܳ بੑೞӝ۽ Ѿ੿ - ؊Ӗۄझ ௼ۅನ٘, פ௒ۄझ ੗஠झ(ES LINT), ઓ ۨध, ࠳۪؍ ই੉௼ - Mocha -> LiveScript -> JavaScript - JScript৬ ௼۽झ ࠳ۄ਋૚ - ECMA ੋఠղ࣊օ੄ ੗߄झ௼݀౟੄ ಴ળച - ECMA-262ۄ ܻࠛח ಴ળചػ ੗߄झ௼݀౟ ୡ౸(ECMAScript 1)੄ ݺࣁ(speciﬁcation)’ - ࢚಴ӂ ޙઁ۽ ੗߄झ௼݀౟ח ECMAScript۽ ݺݺ - 2009֙ ୹दػ ECMAScript 5(ES5)ח HTML5৬ ೣԋ ୹അೠ ಴ળউ - 2015֙ ECMAScript 6(ECMAScript 2015)о ҕѐغ঻Ҋ ߧਊ ೐۽Ӓې߁ ঱য۽ࢲ ы୶যঠ ೡ ӝמٜਸ ؀Ѣ بੑ - ES6 ੉റ੄ ߡ੹স਷ ੘਷ ӝמ੄ ୶о ۨ߰۽ ݒ֙ ҕѐ

Slide 5

Slide 5 text

BACKEND STUDY | FRONTEND JAVASCRIPT2 5 - ਢ ಕ੉૑੄ ࠁઑ੸ੋ ӝמ - XMLHttpRequest - ؘ੉ఠ݅ਸ ੹࣠ ߉ই ߸҃੉ ೙ਃೠ ࠗ࠙݅ਸ ೠ੿੸ਵ۽ ۪؊݂ - Google Maps - jQuery - V8

Slide 6

Slide 6 text

BACKEND STUDY | FRONTEND JAVASCRIPT3 6 - ਢ - ݽ߄ੌ ೞ੉࠳ܻ٘ জ(PhoneGap, Ionic) - ݽ߄ੌ ೞ੉࠳ܻ٘ জ(NativeScript, React Native) - ࢲߡ ࢎ੉٘(NodeJS) - ؘझ௼఼(Electron) - ݠन ۞׬(TensorFlow.js) - ۽ࠁ౮झ(Johnny-Five)

Slide 7

Slide 7 text

BACKEND STUDY | FRONTEND - ਢ ࠳ۄ਋੷ীࢲ ز੘ೞח ਬੌೠ ೐۽Ӓې߁ ঱য - ੋఠ೐ܻఠ ঱য(Interpreter language) - ੋఠ೐ܻఠ੄ ױ੼ਸ ೧Ѿ - ݣ౭ ಁ۞׮੐ ೐۽Ӓې߁ ঱য׮. - ъ۱ೠ ё୓૑ೱ ೐۽Ӓې߁ מ۱ - ES6ীࢲ ௿ېझ بੑ - private ࠗ੤ - ௿ېझ ӝ߈ ё୓૑ೱ ঱যࠁ׮ ബਯ੸੉ݶࢲ ъ۱ೠ ೐۽షఋੑ ӝ߈੄   ё୓૑ೱ ঱য JAVASCRIPT4 7

Slide 8

Slide 8 text

BACKEND STUDY | FRONTEND JAVASCRIPT4 8

Slide 9

Slide 9 text

BACKEND STUDY | FRONTEND JAVASCRIPT4 9 - Javascript MV* ೐ۨ੐ਕ௼ - View ী׮о ࠭ ੉߮౟ ۽૒ਸ ׮ ୊ܻೡ ࣻ ੓ח ҳઑ - JSON ӝ߈੄ REST APIܳ ૑ਗ - ഛ੢੉ غѱ ಞೠ ഋక۽ ೐ۨ੐ਕ௼о ҳࢿ - HTTP Request ਃ୒ਸ ݽف ղࠗ੸ਵ۽ ୊ܻೞৈ Data Modelী ׸ই઱ӝ ٸޙী,  ࢲߡ ଃী ҙೠ ૑ध੉ হח ೐ۿ౟ূ٘ ੑޙ੗ٜ࠙ԋ ؊ ಞೣ - Woowahan JSܳ Backbone ӝ߈ਵ۽ ઁ੘

Slide 10

Slide 10 text

BACKEND STUDY | FRONTEND ਢ ೐ۿ౟ূ٘ 3؀੢ 10 Angular React Vue

Slide 11

Slide 11 text

BACKEND STUDY | FRONTEND Angular 11 - ҳӖ - Angular 1਷ AngularJS - Angular 2+ח Angular - RxJS - নߑೱ ؘ੉ఠ ߄ੋ٬ - Real DOM - TypeScript - Angular৬ AngularJS ഐജࢿ ޙઁ - Breaking Change(੉੹ ߡ੹җ ഐജࢿ੉ হח ߸҃) - ߡ੹ 5 ੉റ উ੿ച - ֫਷ ۞׬ ழ࠳

Slide 12

Slide 12 text

BACKEND STUDY | FRONTEND Vue 12 - Vueח Google੄ ੹ ѐߊ੗ Evan Youী ੄೧ 2014֙ ѐߊ - औѱ ੽Ӕ оמ - ױࣽ൤ CDN ী ੓ח ౵ੌਸ ۽٬ - HTML ਸ మ೒݁୊ۢ ࢎਊ - ҕध ۄ਋ఠ, ࢚కҙܻ ۄ੉࠳۞ܻ - vueۄח ഛ੢੗ ࢎਊ - নߑೱ ؘ੉ఠ ߄ੋ٬ ( ஹನք౟ р ాन੄ ӝࠄ ҎѺ਷ ױߑೱ ) - ࢚؀੸ਵ۽ оߺҊ ࡅܴ - 3.0੉ աয়ݶࢲ typescript ૑ਗ

Slide 13

Slide 13 text

BACKEND STUDY | FRONTEND React 13 - Facebook੉ ݅ٚ UI ஹನք౟ ۄ੉࠳۞ܻ - MVC ಁఢ ઺ Vܳ ׸׼ - ஹನք౟ ӝ߈ ইఃఫ୊ - ۄ੉࠳۞ܻ - JSX - Virtual DOM - ױߑೱ ؘ੉ఠ ൒ܴ ૑ೱ - Redux - ӝࠄ ӝמ੄ ࠗ੤

Slide 14

Slide 14 text

BACKEND STUDY | FRONTEND React2 14

Slide 15

Slide 15 text

BACKEND STUDY | FRONTEND ਃܻ 15 - Angularח ݽٚ Ѫ੉ ળ࠺ػ ઱ߑਵ۽  ਋ܻ੄ Web Appী ೙ਃೠ ݽٚ tools৬ ੤ܐٜਸ о૑Ҋ ੓׮.  ݅ড ࣻ ݆਷ ѐߊ੗ٜ੉ ੌೞח Ѣ؀ೠ ഥࢎۄݶ,  աח ݽٚ ѐߊ੗ٜ੉ زੌೠ ಁఢਵ۽ ੌਸ ೞח Angularܳ જইೠ׮. - Reactח oven (য়࠵) ੉׮.   ா੉௼ܳ Ҽח җ੿ীࢲ ࠙ݺ൤ ୶о੸ੋ toolsо ೙ਃೞ૑݅   ੉Ѫ਷ ೙ਃೠ Ѫਸ ݅٘ח җ੿ীࢲ toolsܳ ࢶఖೞח ਬোೣਸ ઴ ࣻ ੓׮.   ղо ӝࣿ੸ੋ ഥࢎীࢲ מ۱੓ח ݻݻ senior ѐߊ੗ٜҗ ೣԋ ੌਸ ೞҊ ੓׮ݶ Reactח જ਷ ࢶఖ੉׮. - Vueח औҊ ബਯ੸ੋ ߑߨਵ۽ ਃܻܳ ੿݈ ࡅܰѱ ٜ݅ ࣻ ੓׮.   ݅ড startup ഥࢎীࢲ ࢜۽ ࢤӟ ౱ীࢲ ষѺೠ deadlineਸ о૑Ҋ ੓׮ݶ աח VueJSܳ જইೡ Ѫ੉׮.