처음에는 기본적인 설정을 잘못해서 오류가 났다면, 점차 여러 기능들을 추가하면서 내가 의도하지 않은 대로 작동이 되거나(버그), 좀 더 복잡한 부분에서의 설정을 확인해야 하는 오류가 자주 뜨게 되었다. 이 경우 어디서 문제가 발생했는지 파악하기 위해 디버그를 하게 된다.

디버그(Debug) : 프로그래밍 과정중에 발생하는 오류나 비정상적인 연산, 즉 버그를 찾고 수정하는 것. 디버깅(Debugging)이라 하기도 한다.

디버깅 방법을 하나씩 기록해나가자

컨트롤러

디버깅을 할 때 어느 파일에서 디버깅을 하냐에 따라 명령어를 다르게 써야한다. php파일인 경우 주로 아래 3가지를 쓰게 된다.

dd()

dd()는 Laravel 프레임워크에서 제공하는 함수로, "Dump and Die"의 약자이다.

이 함수는 괄호 안의 변수를 출력하고 프로그램 실행을 중단시킨다. 따라서 dd() 이후의 코드는 실행되지 않는다.

디버그 결과는 웹 화면에서 확인할 수 있다.

$exampleArray = [1, 2, 3];
dd($exampleArray);
// 아래 코드는 실행되지 않음

var_dump()

var_dump() 함수는 변수의 데이터 타입과 값, 배열이나 객체의 구조 등을 자세하게 출력한다.

var_dump()는 데이터를 출력하지만 프로그램을 중단시키지 않는다. 따라서 var_dump() 이후의 코드는 계속 실행된다.

디버그 결과는 웹 화면에서 확인할 수 있다.

$exampleArray = [1, 2, 3];
var_dump($exampleArray);
// 아래 코드 실행됨

return

보통 return 문은 함수나 메서드에서 값을 반환할 때 사용되지만, 디버깅 목적으로도 사용된다.

주로 api 메소드에서 사용되며, 클라이언트 측에서 비동기적으로 서버에 요청을 보내고, 서버에서의 return 값을 클라이언트 측의 JavaScript 코드에서 해당 값을 받아와 출력한다.

이때는 컨트롤러 파일의 api 메소드에서는 dd()나 var_dump()함수는 사용할 수 없다. 메서드 중간에 return 문을 삽입하여 특정 지점까지 코드가 실행되었는지 확인할 수 있다.

function exampleFunction() {
    // some code
    
    // 디버깅을 위한 임시 return 문
    $data = ['key' => 'value'];
    return $data;
    
    // more code
}

뷰 파일에서는 JavaScript 코드에 서버의 return값을 받기 위해 아래 코드를 추가한다.

// jQuery를 사용한 Ajax 요청 예시
$.ajax({
    url: '/example-endpoint',
    method: 'GET',
    success: function(response) {
        // 서버에서의 return 값이 여기서 출력됨
        console.log(response); 
    },
    error: function(error) {
        console.error('Error:', error);
    }
});

디버그 결과는 브라우저의 개발자 도구에서 확인할 수 있다.

뷰

console.log

위에서 살펴봤듯이 브라우저의 개발자 도구에서 디버그 결과를 확인하기 위해 JavaScript 코드에 console.log()를 작성한다.

// jQuery를 사용한 Ajax 요청 예시
$.ajax({
    url: '/example-endpoint',
    method: 'GET',
    success: function(response) {
        // 서버에서의 return 값이 여기서 출력됨
        console.log(response); 
    },
    error: function(error) {
        console.error('Error:', error);
    }
});