presentation after intern

1
[수습 과제 발표]
업무 & 생각 & 계획
2020. 05. 18
웹개발 2팀 문승현

2
Copyright © RSUPPORT Co., Ltd. ALL RIGHTS RESERVED. www.rsupport.com 2
I. 무엇을 했는가
II. 무슨 생각을 했는가
III. 앞으로 무엇을 할 것인가
Index
!!! RSUPPORT Confidential !!!

3
Copyright © RSUPPORT Co., Ltd. ALL RIGHTS RESERVED. www.rsupport.com 3!!! RSUPPORT Confidential !!!
1. 채팅앱 (수습 과제)
1. Lazy Loader Component (수습 과제)
1. 그밖의 작업들
무엇을 했는가

다른 유저의
타이핑 메시지
현재 어떤 유저들이 참여중인지 표시
입장, 퇴장시 이벤트 메시지
로그인
1. 채팅앱(수습과제) - 기능

1. 채팅앱(수습과제) - 시연

1. 채팅앱(수습과제) - 구조

1. Lazy Load Component(수습 과제) - 작업 대상
Remote Meeting - Lounge Page
https://st.remotemeeting.com/lounge/room-list

3. Lazy Load Component(수습 과제) - 기능
화
면
기존 방식
: Room 배경 이미지 99개를 한번에 로드
화면
달라진 방식
: 화면에 보이는 룸의 이미지들만 로드
화면
화면

3. Lazy Load Component(수습 과제) - 응용한 API
Intersection Observer API
교차 관찰자 API(Intersection Observer API)는 상위요소 또는 최상위 문서의 뷰포트
(viewport)와 대상 요소의 교차점에서 변화를 비동기적으로 관찰할 수 있는 방법을 제공
한다.

3. Lazy Load Component(수습 과제) - 시연

3. Lazy Load Component(수습 과제) - 설계

3. Lazy Load Component(수습 과제) - 목표
화
면 화
면
화
면
현재 목표

3. Lazy Load Component(수습 과제) - 목표

4. 그 밖의 작업들

15
퀄리티를 어떻게 높일까? … Lighthouse Reports
- Lazy Load
- JS 경량화
무엇을 생각했는가

1. 퀄리티를 어떻게 높일까? - Lighthouse란?
Lighthouse란?
Lighthouse는 웹 앱의 품질을 개선하는 오픈 소스 자동화 도구입니다.
Lighthouse는 Chrome 확장프로그램, 커맨드 라인에서, 노드 모듈에서
프로그램으로도 사용할 수 있습니다. Lighthouse에 확인할 URL을 지정
하고, 페이지에 대한 테스트를 실행한 다음, 페이지에 대한 보고서를 생
성합니다. 여기에서 실패한 테스트는 앱을 개선하기 위해 할 수 있는 것
에 대한 지표로 사용할 수 있습니다.
시연 샘플 : 링크

1. 퀄리티를 어떻게 높일까? - 활용 방식
시연 : https://github.com/Seunghyum/lighthouse-report-script

알림 방법
슬랙 채널 메시지 메일로 보고서 파일전송

주기적인 실행
- 배포 시기
- 2주마다(서비스에 문제없는지 체크
)
알림 방식
- 슬랙 메시지
- 담당자 메일로 보고서 전송

1. 퀄리티를 어떻게 높일까? - 실제 적용
RM 홈페이지 : https://www.remotemeeting.com/ko/home

1. 퀄리티를 어떻게 높일까? - 보고서 수정사항 반영해보기 (1)
Google Page Speed Insight 링크

RM 홈페이지 : https://www.remotemeeting.com/ko/home
Lazy Loading

Google Page Speed Insight 링크

Room 페이지
CSS, JS 파일 크기 : 2.3MB

1. 퀄리티를 어떻게 높일까?
렌더링 속도 높이기
: 에셋 용량 줄이기 by Webpack Bundle Analyzer
Moment.js
235.4KB(gzipped: 66.3KB)
Day.js
7.1KB(gzipped: 2.9KB)

Webpack Bundle Analyzer 시연
구글드라이브 링크

기대 효과 : 제품 퀄리티를 정량화
각 페이지마다 Lighthouse 보고서를 출력하는 스크립트를 만들고
업데이트 주기마다 돌리면 제품 퀄리티가 유지되고 있는지 확인할 수 있지 않을까.

28
앞으로 무엇을 할 것인가

3. 앞으로 무엇을 할 것인가
- jQuery → React 전환 (프론트 / 백엔드 분리작업)
- 주기적인 Lighthouse - AWS Lambda + CloudWatch

presentation after intern

Recommended

Recommended

More Related Content

Similar to presentation after intern

Similar to presentation after intern (8)

presentation after intern

Editor's Notes