gumpcha / good-reads-clone Goto Github PK

• 업로드한 책
• 평점한 책
• 후기남긴 책

모든 메시지에 대한 처리를 하나의 모듈단위에서 해결

이슈

• vue mixin을 써서 모든 하위 컴포넌트에 메시지 전달 메소드를 구현하려 하였으나 하위 컴포넌트에서 해당 메서드를 호출할 경우 undefined 호출됨
• mixin은 공통된 기능을 필요로하는 각기 다른 컴포넌트에 넣어주기 위한 기능임
• vue 공식문서에서는 전역메서드를 쓰기위한 방법으로 plugin을 추천
• cream project에서와는 다르게 우리 프로젝트에서는 Vue를 하위컴포넌트에서 인식하지 못함
  • 파일내에 명시적으로 선언되지 않아서 eslint error가 발생하는듯함

모듈 필요

반복되는 코드, 추가시 번거로움

• element ui
• font awesome

연관항목

• #27

효과

• 기본적으로 화면에 렌더링되기 전에 element-ui로 인하여 render blocking이 발생하므로 제거 필요
• 최소 15%의 성능향상 효과 기대

제거대상

• 아이콘이 들어가는 element-ui를 font-awesome아이콘 으로 대체

변경 후

성능점수 90대로 상향됨

• 회원 가입
• 기본 로그인(email/password)
• 소셜 로그인(facebook)

User API

• PST /v1/user
• GET /v1/user
• PST /v1/user/session
• DEL /v1/user/session
• GET /v1/auth/facebook
• GET /v1/auth/facebook/callback

Book API

• PST /v1/books
• GET /v1/books?q=xxx
• GET /v1/books/:id
• PST /v1/books/:id/rate
• PST /v1/books/:id/review
• PST /v1/books/:id/wishlist

• router가드 내부에서 리다이렉트 시킬 때 에러발생
  • 2.2.0 버전이후로 선택적으로 router.push 또는 router.replace에 두번째와 세번째 전달인자로 onComplete와 onAbort 콜백을 제공합니다. 이 콜백은 탐색이 성공적으로 완료되거나(모든 비동기 훅이 해결된 후) 또는 중단(현재 탐색이 완료되기 전에 동일한 경로로 이동하거나 다른 경로 이동)될 때 호출 됩니다.

this.$router.push({ name: 'profile' });
this.$router.push({ name: 'profile' }, () => {});

• 어떤 이벤트(로그인이 필요하다는 메시지) 발생 후 특정페이지로 리다이렉트 시킬 필요

퍼포먼스 저해 요소

• Preload key requests
• Ensure text remains visible during webfont load

대안

• font-family: element-icons가 기본값으로 font-display: auto로 되어있어 변경이 안됨

로그인 후 더미 데이터 검색이 되지 않음

• 평점(5점 만점)
• 후기

Tables

• User
• Book
• Rate
• Review
• Wishlist

• 읽고 싶은 책

• postgresql 적용(#16 수정)

개요

무료나 최소한의 과금으로 사용할 frontend/backend Architecture 결정하기

Frontend hosting

• Zeit
• GitHub Pages
• Netlify
• Firebase hosting(경험 있음)
• AWS S3(과금 필요, 경험 있음)

API 서버

• Zeit
• Heroku
• Google Cloud Run
• DigitalOcean
• AWS Beanstalk or EC2, EKS(과금 필요)

DB

• Firestore(api 서버에서만 접근)
• Heroku Postgres - 10,000 레코드 무료
• JawsDB Maria - Storage 5M 무료
• JawsDB MySQL - Storage 5M 무료
• ClearDB MySQL - Storage 5M 무료
• mLab MongoDB - Storage 500M 무료

배포

• GitHub Actions

에러

• html-webpack-plugin, preload-webpack-plugin으로 빌드시 에러발생
  • Couldn't parse bundle asset "/Users/kisstest/Desktop/kisstest/MyTasks/good-reads-clone/dist/js/addBook.js". Analyzer will use module sizes from stats file.

• 책 이미지
• 책 이름
• 저자 이름
• 요약

회원가입 후 일정시간이 지난 후 같은 이메일과 패스워드로 로그인 시도시 유효하지 않은 정보라며 에러 표시

기기별 퍼포먼스가 차이

• 모바일에서는 데이터 속도저하로 인한 퍼포먼스 스코어 낮음(70)
• test site
• pagespeed

개선 여지

• FCM
  • preload element icon(font)
  • unused code
  • sign-in, sign-up page repaint
• Reduce initial server response time

이전 최적화 코드는 모든 항목을 별개의 파일로 나눠서 파일 요청이 그만큼 많아지게 되어 성능 저하의 요인이 됨

수정필요한 사항

• 초기 화면 렌더링시 사용자의 액션이나 상황에 따라 필요한 컴포넌트 import
  • 당장 필요하지 않는 css, js파일이 import되는 것 방지

code splinting

단일 파일들과 하나로 번들링 되어야 하는 파일등 상황에 맞는 최적화 필요

• 요청 파일 수 최소화
• 페이지 구성에 필수적인 컴포넌트만 추가(element-ui)
• css파일을 필요한 컴포넌트만 따로 분리하여 뷰파일 내부에서 lasy load할 경우 첫 로딩이 빨라지기는 하지만 필요한 element-ui컴포넌트가 모두 분리되어 다운되어 사이트 테스트에서 LCP의 성능이 다운되어 나타남
  • webpack설정을 조정하여 css파일을 하나로 합칠 필요
  • LCP
  • 사용자의 인터렉티브가 필요한 요소는 해당 이벤트 후 동적 로딩

remove unused css

• purgecss
• element ui의 스타일이 적용되지 않음, 로컬에서는 제대로 작동
  • defaultExtractor의 문제로 보임

이슈

• production모드일 때 아래 코드 에러 발생
  • error: 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',

해결방안

• 'no-console': 'off',
• 참고

chrome devtools coverage 결과 현재 필요없는 사용되지 않는 element의 컴포넌트들이 초기 렌더링시 호출되고 잇음

list

• font awesome(600kb~)
• element ui(400kb~)

이슈

• 플러그인에서 element ui를 호출할 때 현재 쓰고 있는 컴포넌트만 단일로 호출, 하지만 DevTools Lighthouse, webpack-bundle-analyzer에서 별다른 변화가 없음

참고

• element ui
• 트리 쉐이킹으로 자바스크립트 페이로드 줄이기
• 예외사항

font-awesome

1. orginal
   report.html.zip

2. tree shaking main.js에서 현재 쓰고있는 아이콘만 선택적으로 improt

• index.es.js파일 680kb => 73kb까지 줄어듬
  report.html.zip

3. 매번 컴포넌트에서 사용된(혹은 사용될) 아이콘을 체크하여 라이브러리에 추가 할수는 없다

• 참고
• font-awesome아이콘이 사용될 컴포넌트에 자동으로 import해줄 코드(모듈)이 필요...
• 현재는 main.js에서 필요한 아이콘을 추가하던 코드를 아이콘이 필요한 컴포넌트에 추가

4. element-ui
   reduce-element-ui.html.zip

• element-ui는 es6가 아닌 CommonJS module을 사용하고 있으므로 동적 임포트를 바로 할 수 없다. 따라서 tree-shaking을 할수 없으므로 babel이 element-ui를 es5로 transpile하지 않게 변경해야됨.
• 컴포넌트마다 element-ui를 동적 임포트하는 코드를 모듈화 필요
  • 해당 컴포넌트에 필요한 엘리먼트의 css를 임포트하고 vue components에 dynamic import를 할 수 있는 모듈
  • 엘리먼트의 이름만 있으면 뷰 컴포넌트에서 자동으로 임포트

Chrome Lighthouse(Device mobile)

1. before dynamic import
   
   127.0.0.1_8887-20200620T184210.html.zip

2. [font-awesome, element-ui] after dynamic import
   
   127.0.0.1_8887-20200620T183319.html.zip

prepare

• https://vercel.com 가입

deploy

• zeit now

hosting

• visit

error

• #22
• eslint
  • no-console error

performance

• go to page
• devtools
  • last performace 14 score
  • run lighthouse
    

• 책 이름
• 저자 이름
• 키워드

• 전체 책 목록 with 썸네일 이미지

• 뷰 내부 메소드에 유효성검사를 진행하여 Element ui의 내부 텍스트를 트리거
• 이메일, 비밀번호가 없을 경우 로그인 진행시 에러발생
  • 이메일 유효성이 통과되지 않아도 발생

사전 준비

• heroku 무료 계정 생성
• Install heroku-cli
• Install nvm

express app 배포하기

1. mkdir good-reads-clone-heroku && cd $_
2. nvm install 12
3. npm install -g npm@latest
4. npx express-generator --git
5. heroku login
6. heroku create
7. git init
8. git add .
9. git commit -m 'initial commit'
10. git push heroku master
11. heroku open

• 책 이미지
• 책 이름
• 저자 이름
• 요약
• 평점
• 후기

• https://good-reads-clone-api-express.herokuapp.com
  • 가입: PST /user
    • email
    • password
  • 탈퇴: DEL /user
    • Authorization: Bearer
  • 조회: GET /user
    • Authorization: Bearer
  • 로그인: PST /user/session
    • email
    • password
  • 로그아웃: DEL /user/session
    • Authorization: Bearer