PWA를 활용한 Daily Check In - 주니어 프론트 개발자가 혼자 웹앱 만든 썰

[191025] 코멘토 개발팀 내부 세미나 발표자료

Transcript

1. PWAܳ ഝਊೠ Daily Check In ௏ݭష ਬࢿप ઁ1ഥ ௏ݭష ѐߊ౱ ղࠗ ࣁ޷ա ઱פয ೐ۿ౟ ѐߊ੗о ഒ੗ ਢজ ݅ٚ े
2. PWAܳ ഝਊೠ Daily Check In ௏ݭష ਬࢿप ઱פয ೐ۿ౟ ѐߊ੗о ഒ੗ ਢজ ݅ٚ े (೮ਵա, ই૒ ޷൚ೠ) ઁ1ഥ ௏ݭష ѐߊ౱ ղࠗ ࣁ޷ա
3. ⚠ ࠺ѐߊ੗ب ੉೧ೡ ࣻ ੓ب۾ ࣁࠗ੸ੋ ӝࣿ ղਊ਷ ୭ࣗച ೮णפ׮. ಞೞѱ ٜয઱ࣁਃ!
4. • ੋ੤৬ ӝস੄ Էਸ োѾೞח ޷࣌ਸ о૓ 4֙ର झఋ౟স • ড 30݅ ݺ ੉࢚੄ ݭ౭ • 1.3݅ݺ ੉࢚੄ ੋૐػ അ૒੗ ݭష
5. • ௏ݭష੄ ୐ ೐ۿ౟ূ٘ ѐߊ੗ • ௏ݭష੄ ୐ ৈࢿ ѐߊ੗ • ௏ݭషܳ ഒ੗ Vue۽ ܻಂష݂ೠ ѐߊ੗ • 1.6֙ର ઱פয ѐߊ੗ #
6. • ஸ୛ ٣੗ੋ ౱੢ש੄ ઑ૒ޙച प೷ • ௏ݭష ೨बо஖ L.E.D (Lean, Enjoy, Dream) • যڌѱ ೞݶ ੌ࢚ীࢲب ೨बо஖ܳ ҅ࣘ ࢤпೞҊ ೯زೡ ࣻ ੓ਸө? Daily Check In ௏ݭష੄ ઑ૒ޙച प೷ ੉ঠӝ : ೨बо஖ ؘੌܻ୓௼ੋ (https://bit.ly/2W8gIQx)
7. Daily Check In दझమ੄ ޙઁ੼ • ҳӖ ࢸޙ૑ܳ ઁ୹ೞݶ ࣻ੿੉ ൨ٝ • ಹदঌܿ হ਺ • ੌೞוۄ ؀ࠗ࠙ өݡ਺ • ؆Ӗ੉ ׳۰ب ഛੋ੉ য۰਑ ௏ݭష੄ ઑ૒ޙച प೷ ੉ঠӝ : ೨बо஖ ؘੌܻ୓௼ੋ (https://bit.ly/2W8gIQx)
8. Daily Check In दझమ੄ ޙઁ੼ • ҳӖ ࢸޙ૑ܳ ઁ୹ೞݶ ࣻ੿੉ ൨ٝ • ಹदঌܿ হ਺ • ੌೞוۄ ؀ࠗ࠙ өݡ਺ • ؆Ӗ੉ ׳۰ب ഛੋ੉ য۰਑ ௏ݭష੄ ઑ૒ޙച प೷ ੉ঠӝ : ೨बо஖ ؘੌܻ୓௼ੋ (https://bit.ly/2W8gIQx) ੷֘ 6द݃׮ ݫन੷ী ୹ށೞח ോݢbotٜ
9. ૒੽ ٜ݅য ࠁ੗!
10. ૒੽ ٜ݅য ࠁ੗!
11. Daily Check In ࢗ૕ӝ ௏ݭష ਬࢿप ઱פয ೐ۿ౟ ѐߊ੗о ࢗ૕೧ب ನӝೞ૑ ঋ਷ े ઁ1ഥ ௏ݭష ѐߊ౱ ղࠗ ࣁ޷ա
12. • Vue-Cli + Django + AWS • ೐ۿ౟ূ٘/ߔূ٘ ৮߷ ܻ࠙ # ⚙ ' ੉Ѫ੉ ૓੿ೠ ೐ۿ౟ূ٘૑! • ೞ૑݅, AWS ߓನী ઝ੺ೞҊ ನӝ (AWS Սח ߨب ށۄࢲ 5݅ਗ մ ൓৉ࢎ… ѐߊ౱੢ש хࢎ೤פ׮) ☝ର दب → ߔূ٘ ѐߊ੗ ߔOOש
13. • Nuxt.js + Firebase • ௏ݭషо ঱ઃо Ӗ۽ߥ ӝস੉ غ૑ ঋਸө? োणೡ ѿ Nuxt۽ SSRਸ ೧ࠁ੗! • ೞ૑݅, ੌ੉ ߄ࢄ + ୊਺ ೧ࠁח য۰਑ী ઝ੺ೞҊ ನӝ (੼੼ ߸ݺ੉ טযоח ו՝੸ੋ ו՝) ✌ର दب
14. 3ର दب݅ী ؘੌܻ୓௼ੋਸ ٜ݅ ٸ ൙ ੉ߣূ ަ۽ ٜ݅૑? ੌױ PWAܳ ઑӒ.. Firebaseܳ ӒਵਵƖযযর
15. ؘੌܻ୓௼ੋ दझమ ೙ࣻ ઑѤ (3ର दبܳ ѻਵݴ ੿೧૓ ೙ࣻ ઑѤ) • औҊ ࡅܰѱ! → Vue-Cli Vuetify Firebase PWA • ߔূ٘ب ա ഒ੗! → Firebase(Firestore, Hosting, Authentication) • ਢ+জ زद ૑ਗ! → PWA • ോݢ݈Ҋ ಹदঌܿ! → PWA(Notification) Firebase(Cloud Messaging ) • ഥࢎҳӖ҅੿ ࣗ࣍۽Ӓੋ!→ Firebase • ࣘبח ࢤݺ! → PWA(Web Caching, Offline Mode)
16. • औҊ ࡅܰѱ! → Vue-Cli, Vuetify, Firebase, PWA • ߔূ٘ب ա ഒ੗! → Firebase(Firestore, Hosting, Authentication) • ਢ+জ زद ૑ਗ! → PWA • ോݢ݈Ҋ ಹदঌܿ! → PWA(Notification), Firebase(Cloud Messaging ) • ഥࢎҳӖ҅੿ ࣗ࣍۽Ӓੋ!→ Firebase • ࣘبח ࢤݺ! → PWA(Web Caching, Offline Mode) ؘੌܻ୓௼ੋ दझమ ೙ࣻ ઑѤ (3ର दبܳ ѻਵݴ ੿೧૓ ೙ࣻ ઑѤ)
17. • ਢজ - জ ই੉௑, ക ചݶী ୶о, ࠳ۄ਋੷ ో߄ ઁѢ • ಹद ঌܿ - ਢ/জ ݽف оמ(iosח ࠛо) • ࡅܲ ࣘب - ੉޷૑, ௏٘ ౵ੌ, API ١ நय • য়೐ۄੋ ݽ٘ - நयٸޙী ֎౟ਕ௼ হ੉ب ੽Ӕ оמ (Progressive Web App)
18. ਢজ জ ই੉௑, ചݶ ߑೱ, ٣झ೒ۨ੉ झఋੌ ١ ૑੿ оמ
19. ਢজ • ੋ೐۠ PWA ੸ਊ ৔࢚ • കചݶী ୶о • জ ই੉௑ • ࠳ۄ਋੷ ో߄ ઁѢ
20. ਢ/জ ಹदঌܿ ૑ਗ
 (iosח ಹद ࠛо) ಹदঌܿ
21. ࡅܲ ࣘب וܽ ֎౟ਕ௼ীࢲب ֫਷ ࢎਊࢿ
22. য়೐ۄੋ ݽ٘ • ؘ੉ఠܳ ԁب ੽Ӕ оמ • API நयب оמ(୶റ ੘স ৘੿)
23. • ਄बਸ ߡܻ੗ ਄ब਷ ਄बਸ ࠗܰҊ.. ੋр਷ э਷ पࣻܳ ߈ࠂೠ׮ • Agileೞѱ ୭ࣗ ӝמ ױਤ۽ ѐߊೞ੗ ࢎਊ੗ٜ੉ ҍ ୭Ҋ੄ QAূ૑פয / ӝദ੗ ❤ • ࢎ੉٘ ೐۽ં౟ܳ ݆੉ ೧ࠁ੗ नӝࣿਸ ࢎਊೞݴ ب੹ ੿न੉ ӡ۞૗ ࢗ૕ ՘੄ ࡸ٠ೣ ߓ਍ ੼
24. • PWA द੘ೞӝ - ਢ ӝࣿ۽ জਸ ٜ݅੗ • PWA۽ ୹ృӔ ӝ۾ दझమ ѐߊೞӝ (2019 HTML5 Cong Seoul) • Enabling iOS Splash Screens for Progressive Web Apps • Modern PWA with Vue-CLI 3+Vuetify+Firestore+Workbox • Firebase য়೐ۄੋਵ۽ ؘ੉ఠ ঘࣁझ • ೐۽Ӓۨद࠳ ਢ জীࢲ Firebase ࢎਊ ଵҊ੗ܐ