작성일자

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/

작성일자

알아두면 편리한 정규표현식 모음 (계속 수정 예정)

정규 표현식은 참 손에 안잡히는 주제중 하나죠. 이걸 꿰차면 상당히 프로그래밍 할때 막히는 부분이 줄어들겠지만 쉽게 이해 되지 않는 것도 사실입니다. 그래서 각 경우에 따른 표현식 모음을 작성하기로 해봤는데요. 앞으로도 작업하다가 마주치는 정규 표현식을 적어둘 예정입니다.

1. 주소에서 맨 끝에 괄호 추가정보 제거하기

네이버지도 API가 이전 및 유료화 되면서 대안으로 다음 지도 API 를 사용하면서 생긴 문제입니다.
현재 주소를 저장할 때 1차, 2차로 나눠서 1차는 도로명주소로 저장하는데요. 정식 도로명 주소가 아직은 익숙하지 않기 때문에 맨뒤에 괄호'(…)’로 구분에 동이름이나 건물명등을 넣어 보완하고 있습니다.

이렇게 저장한 1차 주소를 이용해 카카오지도로 연결하면 문제가 발생하는 경우가 있습니다. 웹버전의 카카오지도에서는 크게 문제 없이 바로 지도가 나오는데요. 모바일 카카오지도앱의 경우 정식 도로명주소 뒤에 추가정보가 붙으면 그냥 지도를 보여주지 않고 주소 선택하는 페이지가 먼저 뜹니다. 이게 은근히 불편하더라고요. 그래서 바로 지도를 보여줄 수 있도록 하기 위해서 맨뒤에 괄호 추가 정보를 제거하는 정규 표현식 입니다.

// 예제 주소 문자열 : "제주특별자치도 제주시 첨단로 242 (영평동)"
// 예상 결과 : "제주특별자치도 제주시 첨단로"

// Javascript
"제주특별자치도 제주시 첨단로 242 (영평동)".replace(/\s+\(.+\)$/g, '')

// 주소 맨끝에 빈칸으로 구분한 괄호만을 찾기 위해 : \s+ 
// 빈칸을 \s 로 표현했다. 뒤에 + 는 앞의 문자가 1개나 그이상 오는 것을 표현한다. 사실 이부분은 그다지 필요없는 부분이다.
// 괄호 및 괄호내 내용 : \(.+\)
// 괄호는 이스케이프 문자로 표현하고 괄호 안의 내용은 .+ 로 표현했다. 점(.)은 모든 문자 하나를 표현하고 + 는 앞 문자의 1개나 그이상의 문자를 표현한다.
// 주소 맨끝의 괄호내용만 찾기위한 $
// 문자열 전체 적용을 위한 플래그 g

테스트하기 : https://regex101.com/r/9G7rLQ/3

정규 표현식 관련 알기 쉽게 설명이 나온 글입니다 참조하시기 바랍니다 : https://medium.com/@originerd/정규표현식-좀-더-깊이-알아보기-5bd16027e1e0

정규표현식 테스트 및 분석하기 좋은 사이트 : https://regex101.com/

작성일자

몽고디비 서버가 구동되지 않는 오류 해결하기

개발중인 프로젝트에 도커를 도입하려고 하는데 몽고디비까지 추가해보려고 하다가 원래대로 되돌리려는 중 오류가 발생했습니다.

몽고디비를 아래과 같이 시작해보면 아무런 반응이 없네요.

$ sudo systemctl start mongod

현재 서비스 상태를 확인해 봅니다.

$ sudo systemctl status mongod
● mongod.service - MongoDB Database Server
   Loaded: loaded (/lib/systemd/system/mongod.service; enabled; vendor preset: enabled)
   Active: failed (Result: exit-code) since Fri 2019-04-19 14:00:59 KST; 3min 45s ago
     Docs: https://docs.mongodb.org/manual
  Process: 7925 ExecStart=/usr/bin/mongod --config /etc/mongod.conf (code=exited, status=100)
 Main PID: 7925 (code=exited, status=100)
      CPU: 21ms

 4월 19 14:00:59 doogle-ubuntu systemd[1]: Started MongoDB Database Server.
 4월 19 14:00:59 doogle-ubuntu systemd[1]: mongod.service: Main process exited, code=exited, status=100/n/a
 4월 19 14:00:59 doogle-ubuntu systemd[1]: mongod.service: Unit entered failed state.
 4월 19 14:00:59 doogle-ubuntu systemd[1]: mongod.service: Failed with result 'exit-code'.

서비스가 실패상태입니다. 당연히 몽고디비 서버는 떠있지 않네요.

로그 기록을 확인해 보면…

$ sudo tail mongod.log 
2019-04-19T14:00:59.937+0900 I CONTROL  [initandlisten] build environment:
2019-04-19T14:00:59.937+0900 I CONTROL  [initandlisten]     distmod: ubuntu1604
2019-04-19T14:00:59.937+0900 I CONTROL  [initandlisten]     distarch: x86_64
2019-04-19T14:00:59.937+0900 I CONTROL  [initandlisten]     target_arch: x86_64
2019-04-19T14:00:59.937+0900 I CONTROL  [initandlisten] options: { config: "/etc/mongod.conf", net: { bindIp: "127.0.0.1", port: 27017 }, processManagement: { timeZoneInfo: "/usr/share/zoneinfo" }, storage: { dbPath: "/var/lib/mongodb", journal: { enabled: true } }, systemLog: { destination: "file", logAppend: true, path: "/var/log/mongodb/mongod.log" } }
2019-04-19T14:00:59.937+0900 I STORAGE  [initandlisten] exception in initAndListen: IllegalOperation: Attempted to create a lock file on a read-only directory: /var/lib/mongodb, terminating
2019-04-19T14:00:59.937+0900 I NETWORK  [initandlisten] shutdown: going to close listening sockets...
2019-04-19T14:00:59.937+0900 I NETWORK  [initandlisten] removing socket file: /tmp/mongodb-27017.sock
2019-04-19T14:00:59.937+0900 I CONTROL  [initandlisten] now exiting
2019-04-19T14:00:59.937+0900 I CONTROL  [initandlisten] shutting down with code:100

밑에서 5번째 줄을 보면 원인을 확인 할 수 있습니다.

Attempted to create a lock file on a read-only directory: /var/lib/mongodb, terminating

/var/lib/mongodb 디렉토리가 읽기만 가능해서 lock 파일을 생성할 수 없는거 같네요.

경로 권한을 확인해 봅니다.

$ sudo ls -al
... (중략)...
drwxr-xr-x  4           999 mongodb       32768  4월 19 13:34 mongodb/
... (중략)...

보시는 바와 같이 디렉토리 및 하위 파일들 포함 모두 사용자가 바뀌었습니다. 아무래도 도커버전의 몽고디비가 한 짓(?)인거 같네요.

다음과 같이 권한을 복구해 줍니다.

$ sudo chown -R mongodb:mongodb mongodb

이제 다시 서비스를 시작하면 되겠습니다.

$ sudo systemctl start mongod

서비스 상태를 봐보면 정상적으로 구동중이라는 것을 확인할 수 있습니다.

$ sudo systemctl status mongod
● mongod.service - MongoDB Database Server
   Loaded: loaded (/lib/systemd/system/mongod.service; enabled; vendor preset: enabled)
   Active: active (running) since Fri 2019-04-19 14:20:36 KST; 13s ago
     Docs: https://docs.mongodb.org/manual
 Main PID: 9963 (mongod)
    Tasks: 27
   Memory: 148.4M
      CPU: 926ms
   CGroup: /system.slice/mongod.service
           └─9963 /usr/bin/mongod --config /etc/mongod.conf

 4월 19 14:20:36 doogle-ubuntu systemd[1]: Started MongoDB Database Server.

리눅스에서는 항상 파일 권한 문제가 생길 수 있습니다. 주의하시기 바랍니다.