FLYNNLABAboutMeCodingActivityStudy 2024초등수학
angular universal with meteor
meteor, angular, universal

거의 5일 이상 시간을 쏟아 부었다ㅠㅜ

서버렌더링이 필요한가?

  • 데스크탑에서는 괜찮을 수 있다.
  • 비컨텐츠 서비스에서는 괜찮을 수 있다.

하지만 모바일에서 답답한 로딩 화면을 보고 있어야 하고...
컨텐츠 서비스에서 컨텐츠 하나 본다고 클라이언트 렌더링을 기다리는 것도 쩝...

어쨌든 서버 렌더링은 많은 장점을 갖고 있다.

Meteor는 서버 렌더링이 가능한가?

결론 부터 얘기 하면 가능하다.
어차피 내부적으로 connect 모듈로 웹페이지를 서빙하고 있다.
connect 모듈의 res.write 부분을 감싸서 임의의 데이터를 추가 할 수 있다.

적용기

  • meteor 서버 렌더링 방법 찾기
  • angular2-universal 이해하기
  • angular2-universal 로딩 부분 webpack을 이용해서 번들링 만들기
  • 번들링 파일에 meteor 의존성 파일 주입하기
  • child_process.fork를 이용해서 universal renderer 데몬 띄우기

얻은점

  • webpack 이해도 상승
    • externals 사용법
    • multi bundling
    • ts_node를 이용해서 ts로 작성 가능
  • meteor 이해도 상승
    • server rendering 이해
    • 의존성 우회해서 mocking 하능 방법
  • angular2 이해도 상승
    • universal 주의점 이해
  • nodejs 이해도 상승
    • node_modules 로딩 방법
    • child_process 사용법

초기 로딩 속도가 드라마틱하게 빨라졌다.

남은 이슈

  • 렌더링 못하는 이슈
    • window, document 를 직접 쓰는 모듈은 익셉션 발생
      • 랩핑하는 작업을 해야함
  • 데이터 싱크
    • 화면만 렌더링하는게 아니라 데이터까지 바인딩된 상태로 렌더링 되도록 함
  • 레이지 로딩 모듈도 되도록 도전