Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 CSS가 어려운 이유 — 프로젝트 중심 실전 CSS 강의 소개 2023-04-13
📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

jQuery.log(msg) 플러그인을 만들어 봤다

IE7이 없는 지금 시대엔 필요 없는 플러그인이다. IE7까지 신경쓰며 코딩을 해야 했던 예전을 떠올리는 용도로 쓰면 되겠다.

자바스크립트 디버깅을 할 때 가장 많이 사용하는 것은 alert() 이다. 그러나 alert() 은 확인을 눌러야 하는 번거로움이 있다. 확인을 누르고 나면 내용이 사라져서 여러 개의 alert이 뜰 때는 비효율적인 경우도 있다.

그냥 로그를 뿌려 주는 함수가 있으면 좋을 것 같다는 생각을 하고 검색을 해 봤다. 역시나 나왔다.

jQuery.log(), Logging plugin for jQuery 라는 글[지금은 사라졌다 2012-06-30]에는 어떻게 log 함수를 만드는지 친절하게 설명돼 있다. (저 영어 글에 있는 로그 함수를 갖다 쓰면, $.log.log(msg), $.log.info(msg) 형식으로 써야 한다.)

그런데 위 글에서 재밌는 함수를 발견했다. console.log(msg) 함수다. 크롬에서 해 보니까 크롬의 자바스크립트 콘솔(Ctrl+Shift+J)에 msg가 찍히는 걸 확인할 수 있었다. 이럴 수가. log 함수를 굳이 만들 필요가 없었던 건가;;

여튼 이 글을 참고해서 내가 플러그인을 만들어 봤다.

/* jquery.log.mytory.js ver 1.0 */
(function($) {
  $.log = function(message) {
    if( debug == true )
    {
      //if('console' in window && 'log' in window.console)
      if (typeof window.console != 'undefined' && typeof window.console.log != 'undefined') {
        console.log(message);
      }

      var messageHTML =
        '<pre class="jquery-log-mytory" style="background-color:#000; color:#00ff00; padding:10px; font-size:16px; font-family: 나눔고딕코딩">'
        + '<span class="jquery-log-mytory-number" style="margin-right: 10px;">1</span>'
        + message
        + '</pre>';

      $logDiv = $('.jquery-log-mytory');

      if( $logDiv.length > 0 )
      {
        var number = parseInt( $('.jquery-log-mytory-number:last').text() ) + 1;
        $logDiv.append("\n" + '<span class="jquery-log-mytory-number" style="margin-right: 10px;">' + number + '</span>' + message);
      }
      else
      {
        $('body').prepend(messageHTML);
      }
    }
  }
})(jQuery);

기능은 단순하다. 일단 자바스크립트 콘솔이 있는 경우에는 콘솔에도 메세지를 뿌려 준다. 그리고 HTML 페이지의 맨 위에 까만 바탕에 초록색 글자로 로그를 찍어 준다. 각 로그에는 번호가 붙어 있다. 끝이다.

코드가 가장 깔끔한 건 아닌데 뭐 성능이 엄청 필요하고 그런 플러그인이 아니니까 별 상관 없다고 생각한다. 쓰면서 개선하면 되겠지.

console.log() 를 사용할 때 주의점

내가 소개한 영어 글을 보면 console.log 를 사용할 때 아래처럼 조건문으로 감싸져 있다.

if (typeof window.console != 'undefined' && typeof window.console.log != 'undefined') {
  console.log(message);
}

이유가 있다. 몰랐는데 양파 님이 댓글로 말해 줘서 알았다.

참고로 console 객체는 IE8 이상, 크롬, 파이어폭스, 사파리 모두 지원합니다. 파이어버그나 크롬개발자도구, IE개발자도구(F12) 등등

console.log() 이외에 dir(), info(), error() 등 여러 내장메소드가 존재해서 디버깅시에 유용합니다.

다만 console 객체 사용시 IE에서는 개발자도구를 켜지 않은 상태에서 console 객체를 사용하거나 IE7 이하에서 사용하게 되면 스크립트 에러가 나오니 주의해서 사용해야 합니다.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

댓글 (2개)

  • 로그 플러그인 좋네요.

    참고로 console 객체는 IE8 이상, 크롬, 파이어폭스, 사파리 모두 지원합니다. 파이어버그나 크롬개발자도구, IE개발자도구(F12) 등등

    console.log() 이외에 dir(), info(), error() 등 여러 내장메소드가 존재해서 디버깅시에 유용합니다.

    다만 console 객체 사용시 IE에서는 개발자도구를 켜지 않은 상태에서 console 객체를 사용하거나 IE7 이하에서 사용하게 되면 스크립트 에러가 나오니 주의해서 사용해야 합니다.

    • 아하! 제가 소개한 영어 글에 보면

      if (typeof window.console != 'undefined' && typeof window.console.log != 'undefined') {
        console.log(message);
      }

      이렇게 console 함수가 조건문으로 감싸져 있는데 그런 이유 때문이었군요! 본문에 반영하도록 하겠습니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다