[링크] Vue 및 Nuxt 사용시 성능향상을 위해 읽어볼 만한 글들

  1. How we got a 100% Lighthouse performance score for our Vue.js app

라이트하우스는 사이트의 전체적인 성능을 확인해주는 툴중 하나인데요. 크롬 확장으로 설치헤서 테스트를 원하는 페이지에서 바로 성능 및 기타 SEO 친화도등을 검사해 볼 수 있습니다.

이런 라이트하우스 100% 나오는 뷰앱이라니.. 흥미가 생기네요.

https://vuejsdevelopers.com/2017/07/03/vue-js-code-splitting-webpack/

1번에 내용에 보다보면 코드분할에 대한 내용이 나오면서 위 글을 추천하네요. 이것도 읽어보면 도움이 될 거 같습니다.

[링크] FCM 으로 구현하는 채팅 웹앱 예제

구글링하다 찾았는데요. 잊어버릴까봐 링크로 올려둡니다.

안드로이드 모바일앱에서 많이 사용하던 GCM 을 뒤로하고 앞으로 모바일앱만이 아닌 웹브라우저 등 여러 기기에서 범용적으로 사용할 수 있게 만든 FCM (Firebase Cloud Messaging) 을 이용해 채팅 웹앱을 만들어보는 멋진 강좌입니다.

https://cionman.tistory.com/51

TinyMCE 5.x 이상부터 모바일 UI 가 바뀌는 문제 해결하기

TinyMCE 를 5.x 로 업그레이드하고 나서 생기는 문제입니다. 버전 5 부터는 디자인도 좀 더 세련되게 바뀌고 전체적으로 UI 가 깔끔해졌는데요. 예기치 못한 복병이 있었네요.

PC 상에서는 큰 문제가 없는데 모바일에서 보면 바로 편집할 수 있는 창이 뜨지않고 아래와 같이 덩그러니 아이콘 하나만 나옵니다.

더 보기 “TinyMCE 5.x 이상부터 모바일 UI 가 바뀌는 문제 해결하기”

경고 해결 – [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check https://xhr.spec.whatwg.org/.

jQuery 자바스크립트 작업을 하다보면 다음과 같은 경고를 만나는 경우가 있다.

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

위 경고는 아래의 코드를 실행했을때 생겼다.

jQuery(function() {
  for (var i = 0; i < 10; ++i) {
    $.ajax({
      url: 'test-url',
      async: false,
      success: function(data) {
        ...
      }
    })
  }
})

경고가 발생하는 것은 jQuery 가 1.8 버전부터 async 옵션이 폐기(deprecation)되었다. 대신에 jqXHR.done(), jqXHR.fail(), jqXHR.always() 을 사용할 수 있다.

jQuery 로 페이지 로딩시 ajax 처리를 하는데 동기적으로 처리해야 되는 상황에서 발생했다.

위와 같은 문제가 발생하는 가장 근본적인 원인은 ajax 를 반복문으로 호출하기 때문이다. 따라서 가장 좋은 해결방법은 ajax 를 한번만 호출하도록 변경하는게 최선이다.

하지만 서버측을 변경할 수 없는 환경에서는 사용할 수 없는 방법이다. 차선책으로 이를 해결하기 위해서는 Promise 기법을 사용해야 한다.

jQuery(function() {
  function loadAjax(i, limit) {
    $.ajax({
      url: 'test-url'
    })
    .done(function(data) {
      // success 옵션의 함수와 동일
        ... 
      if (i < limit) {
        loadAjax(i + 1, limit)
      }
    })
    .fail(function(){
      // ajax 호출이 실패하는 경우
    })
  }

  loadAjax(0, 10) // 재귀호출시작!
})

코드는 그럭저럭이지만 재귀적 호출이 되버려서 사실상 콜백지옥인 상황은 동일하다 ㅡ.ㅡ; limit 이 얼마 안된다면 상관없지만 매우 큰수라면 사용하기 힘들것이다.

jQuery.ajax() 공식문서 바로가기 : https://api.jquery.com/jquery.ajax/