console.log(x): 탈출구

로깅은 개발자가 언어에 관계없이 코드 문제와 버그를 추적하는 데 필요한 중요한 기술입니다. 로그는 플랫 파일(텍스트), 데이터베이스 테이블, IDE/웹 브라우저 콘솔 등에 기록할 수 있습니다.

웹 개발자는 항상 JavaScript 코드에 사용된 console.log(x) 정리를 잊는 방법을 찾을 것입니다. 나에게 이것은 어수선한 냄새가 난다. 디버그 데이터를 대중의 눈에 맡기는 것은 전문가에게 깨끗하지 않다(의도적으로 남겨둔 경우).

2년 전에 저는 JavaScript 코드의 모든 부분에서 로그 제거를 무시할 수 있는 기술을 생각해 냈습니다. 모든 언어에 대해 동일하게 구현할 수 있습니다. 이는 사용자 지정 로그 클래스 및 메서드를 생성하여 수행됩니다. console.log(x)를 호출하는 대신 logger.log(x)를 수행할 수 있습니다. 로거 클래스에는 'is_active =true'라는 부울 변수가 있습니다. 프로덕션 환경에서 이 값은 is_active =false로 설정되며 모든 로그 라인이 무시되어 콘솔에 인쇄되지 않습니다.

View code on Github Repository

스니펫은 아래와 같습니다. 과부하는 무시할 수 있습니다.

logger.js

let is_active = true;

const logtype = {
    "default": 1,
    "info": 2,
    "warning": 3,
    "error": 4,
    "exception": 5,
    "debug": 6,
    "table": 7
};

function log(data, type = logtype.default) {
    if (!is_active) return;

    try {
        switch (type) {
            case logtype.default:
                return console.log(data);
            case logtype.info:
                return console.info(data);
            case logtype.warning:
                return console.warn(data);
            case logtype.error:
                return console.error(data);
            case logtype.exception:
                return console.exception(data);
            case logtype.debug:
                return console.debug(data);
            case logtype.table:
                return console.table(data);
        }
    } catch (ex) {
        console.log(data);
    }
}

function info(data) {
    if (is_active) console.info(data);
}

function warning(data) {
    if (is_active) console.warn(data);
}

function error(data) {
    if (is_active) console.error(data);
}

function exception(data) {
    if (is_active) console.exception(data);
}

function debug(data) {
    if (is_active) console.debug(data);
}

function table(data) {
    if (is_active) console.table(data);
}

구현

<script>
    window.onload = function () {
    log('hello world..');
    log('I have an information', logtype.info);
    log('But i must warn you', logtype.warn);
    log('About the errors you have made', logtype.error);
    log('Well, exceptions are not the end of the world', logtype.exception);
    log('And that calls for more debugging', logtype.debug);

var array = [
    {
        name: 'James',
        age: 21,
        location: 'Nigeria',
        role: 'Backend'
    }, {
        name: 'Mike',
        age: 19,
        location: 'Los Angeles',
        role: 'Frontend'
    }, {
        name: 'Parker',
        age: 26,
        location: 'London',
        role: 'Tester'
    }];

log(array, logtype.table);

</script>

웹 브라우저 콘솔의 결과는 아래와 같습니다.



변수 'is_active=false'를 변경하면 모든 로그 활동이 중지됩니다.

추신: 코드에서 로그를 정리하면 안 된다는 의미는 아닙니다.