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

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 사용
참고자료