FRONTEND

프론트엔드를 모르는 사람에게 HTML부터 React 이후까지의 간단한 설명을 진행합니다.

Transcript

1. WEB FRONTEND BACKEND STUDY 2019. 12. 28 TEAM BACKEND yuniq
2. BACKEND STUDY | FRONTEND ਢ੄ ӝࠄ 2
3. 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)
4. BACKEND STUDY | FRONTEND JAVASCRIPT 4 - ੿੸ੋ HTMLਸ ز੸ਵ۽ ಴അೞӝ ਤ೧ ҃۝੄ ೐۽Ӓې߁ ঱যܳ بੑೞӝ۽ Ѿ੿ - ؊Ӗۄझ ௼ۅನ٘, פ௒ۄझ ੗஠झ(ES LINT), ઓ ۨध, ࠳۪؍ ই੉௼ - Mocha -> LiveScript -> JavaScript - JScript৬ ௼۽झ ࠳ۄ਋૚ - ECMA ੋఠղ࣊օ੄ ੗߄झ௼݀౟੄ ಴ળച - ECMA-262ۄ ܻࠛח ಴ળചػ ੗߄झ௼݀౟ ୡ౸(ECMAScript 1)੄ ݺࣁ(specification)’ - ࢚಴ӂ ޙઁ۽ ੗߄झ௼݀౟ח ECMAScript۽ ݺݺ - 2009֙ ୹दػ ECMAScript 5(ES5)ח HTML5৬ ೣԋ ୹അೠ ಴ળউ - 2015֙ ECMAScript 6(ECMAScript 2015)о ҕѐغ঻Ҋ ߧਊ ೐۽Ӓې߁ ঱য۽ࢲ ы୶যঠ ೡ ӝמٜਸ ؀Ѣ بੑ - ES6 ੉റ੄ ߡ੹স਷ ੘਷ ӝמ੄ ୶о ۨ߰۽ ݒ֙ ҕѐ
5. BACKEND STUDY | FRONTEND JAVASCRIPT2 5 - ਢ ಕ੉૑੄ ࠁઑ੸ੋ ӝמ - XMLHttpRequest - ؘ੉ఠ݅ਸ ੹࣠ ߉ই ߸҃੉ ೙ਃೠ ࠗ࠙݅ਸ ೠ੿੸ਵ۽ ۪؊݂ - Google Maps - jQuery - V8
6. BACKEND STUDY | FRONTEND JAVASCRIPT3 6 - ਢ - ݽ߄ੌ ೞ੉࠳ܻ٘ জ(PhoneGap, Ionic) - ݽ߄ੌ ೞ੉࠳ܻ٘ জ(NativeScript, React Native) - ࢲߡ ࢎ੉٘(NodeJS) - ؘझ௼఼(Electron) - ݠन ۞׬(TensorFlow.js) - ۽ࠁ౮झ(Johnny-Five)
7. BACKEND STUDY | FRONTEND - ਢ ࠳ۄ਋੷ীࢲ ز੘ೞח ਬੌೠ ೐۽Ӓې߁ ঱য - ੋఠ೐ܻఠ ঱য(Interpreter language) - ੋఠ೐ܻఠ੄ ױ੼ਸ ೧Ѿ - ݣ౭ ಁ۞׮੐ ೐۽Ӓې߁ ঱য׮. - ъ۱ೠ ё୓૑ೱ ೐۽Ӓې߁ מ۱ - ES6ীࢲ ௿ېझ بੑ - private ࠗ੤ - ௿ېझ ӝ߈ ё୓૑ೱ ঱যࠁ׮ ബਯ੸੉ݶࢲ ъ۱ೠ ೐۽షఋੑ ӝ߈੄ 
 ё୓૑ೱ ঱য JAVASCRIPT4 7
8. BACKEND STUDY | FRONTEND JAVASCRIPT4 8
9. BACKEND STUDY | FRONTEND JAVASCRIPT4 9 - Javascript MV* ೐ۨ੐ਕ௼ - View ী׮о ࠭ ੉߮౟ ۽૒ਸ ׮ ୊ܻೡ ࣻ ੓ח ҳઑ - JSON ӝ߈੄ REST APIܳ ૑ਗ - ഛ੢੉ غѱ ಞೠ ഋక۽ ೐ۨ੐ਕ௼о ҳࢿ - HTTP Request ਃ୒ਸ ݽف ղࠗ੸ਵ۽ ୊ܻೞৈ Data Modelী ׸ই઱ӝ ٸޙী,
 ࢲߡ ଃী ҙೠ ૑ध੉ হח ೐ۿ౟ূ٘ ੑޙ੗ٜ࠙ԋ ؊ ಞೣ - Woowahan JSܳ Backbone ӝ߈ਵ۽ ઁ੘
10. BACKEND STUDY | FRONTEND ਢ ೐ۿ౟ূ٘ 3؀੢ 10 Angular React Vue
11. BACKEND STUDY | FRONTEND Angular 11 - ҳӖ - Angular 1਷ AngularJS - Angular 2+ח Angular - RxJS - নߑೱ ؘ੉ఠ ߄ੋ٬ - Real DOM - TypeScript - Angular৬ AngularJS ഐജࢿ ޙઁ - Breaking Change(੉੹ ߡ੹җ ഐജࢿ੉ হח ߸҃) - ߡ੹ 5 ੉റ উ੿ച - ֫਷ ۞׬ ழ࠳
12. BACKEND STUDY | FRONTEND Vue 12 - Vueח Google੄ ੹ ѐߊ੗ Evan Youী ੄೧ 2014֙ ѐߊ - औѱ ੽Ӕ оמ - ױࣽ൤ CDN ী ੓ח ౵ੌਸ ۽٬ - HTML ਸ మ೒݁୊ۢ ࢎਊ - ҕध ۄ਋ఠ, ࢚కҙܻ ۄ੉࠳۞ܻ - vueۄח ഛ੢੗ ࢎਊ - নߑೱ ؘ੉ఠ ߄ੋ٬ ( ஹನք౟ р ాन੄ ӝࠄ ҎѺ਷ ױߑೱ ) - ࢚؀੸ਵ۽ оߺҊ ࡅܴ - 3.0੉ աয়ݶࢲ typescript ૑ਗ
13. BACKEND STUDY | FRONTEND React 13 - Facebook੉ ݅ٚ UI ஹನք౟ ۄ੉࠳۞ܻ - MVC ಁఢ ઺ Vܳ ׸׼ - ஹನք౟ ӝ߈ ইఃఫ୊ - ۄ੉࠳۞ܻ - JSX - Virtual DOM - ױߑೱ ؘ੉ఠ ൒ܴ ૑ೱ - Redux - ӝࠄ ӝמ੄ ࠗ੤
14. BACKEND STUDY | FRONTEND React2 14
15. BACKEND STUDY | FRONTEND ਃܻ 15 - Angularח ݽٚ Ѫ੉ ળ࠺ػ ઱ߑਵ۽
 ਋ܻ੄ Web Appী ೙ਃೠ ݽٚ tools৬ ੤ܐٜਸ о૑Ҋ ੓׮.
 ݅ড ࣻ ݆਷ ѐߊ੗ٜ੉ ੌೞח Ѣ؀ೠ ഥࢎۄݶ,
 աח ݽٚ ѐߊ੗ٜ੉ زੌೠ ಁఢਵ۽ ੌਸ ೞח Angularܳ જইೠ׮. - Reactח oven (য়࠵) ੉׮. 
 ா੉௼ܳ Ҽח җ੿ীࢲ ࠙ݺ൤ ୶о੸ੋ toolsо ೙ਃೞ૑݅ 
 ੉Ѫ਷ ೙ਃೠ Ѫਸ ݅٘ח җ੿ীࢲ toolsܳ ࢶఖೞח ਬোೣਸ ઴ ࣻ ੓׮. 
 ղо ӝࣿ੸ੋ ഥࢎীࢲ מ۱੓ח ݻݻ senior ѐߊ੗ٜҗ ೣԋ ੌਸ ೞҊ ੓׮ݶ Reactח જ਷ ࢶఖ੉׮. - Vueח औҊ ബਯ੸ੋ ߑߨਵ۽ ਃܻܳ ੿݈ ࡅܰѱ ٜ݅ ࣻ ੓׮. 
 ݅ড startup ഥࢎীࢲ ࢜۽ ࢤӟ ౱ীࢲ ষѺೠ deadlineਸ о૑Ҋ ੓׮ݶ աח VueJSܳ જইೡ Ѫ੉׮.
16. BACKEND STUDY | FRONTEND ਢ ѐߊਸ ೞ۰ݶ… 16
17. BACKEND STUDY | FRONTEND ETC 17
18. хࢎ೤פ׮ THANKS FOR WATCHING