SCSS 활용 팁 12. @debug, @warn, @error로 디버깅하기

예상치 못한 스타일링 오류를 해결하고, 코드의 정확성과 효율성을 보장하기 위해 SCSS에도 디버깅이 필요합니다. 디버깅은 단순히 오류를 수정하는 것을 넘어 문제를 명확하게 정의하고 해결하며, 코드를 최적화하여 효율적인 개발 프로세스를 유지하는 데 중요한 역할을 합니다. 

@debug

@debug는 SCSS의 변수, 값, 계산결과 등 작업자가 확인하고 싶은 정보를 출력합니다. 컴파일중 로그 형태로 출력되며, CSS로 출력된 결과물에 영향을 미치지 않습니다. 

$primary-color: #3498db;
$font-size: 16px + 4px;

// 값 출력
@debug $primary-color;
@debug $font-size;

$primary-color와 $font-size값을 확인하는 코드를 작성했습니다. 디버깅 요청한 정보는 터미널과 콘솔에 출력됩니다.

src/styles/main.scss:3 DEBUG: #3498db
src/styles/main.scss:4 DEBUG: 20px

@warn

@warn은 코드를 정상적으로 컴파일시키지만, 경고 메세지를 통해 잠재적인 문제를 알릴 때 사용합니다. 

$font-size: 12px;

// 경고 출력 (권장 크기보다 작으면 알림)
@if $font-size < 14px {
  @warn "Font size is smaller than the recommended size!";
}

조건문을 사용하여, 폰트 사이즈가 14px 미만일때 폰트사이즈가 작다는 경고 메세지를 출력하도록 하였습니다. 해당 경고문 역시 터미널과 콘솔에 출력됩니다.

WARNING: Font size is smaller than the recommended size!
         src/styles/main.scss:3

@error

문제가 치명적이며 계속 진행할 수 없을경우 @error를 사용합니다. @error는 컴파일에는 영향을 주지 않는 @debug나 @warn과는 달리 컴파일을 즉시 중단시킵니다. 값이 반드시 특정 조건을 충족해야하는 상황에서 사용합니다.

$theme-color: null;

// 오류 발생 (필수 값이 없으면 컴파일 중단)
@if $theme-color == null {
  @error "Theme color must be defined!";
}

$theme-color의 값이 정의되지 않으면 오류 문구를 출력하도록 코드를 작성했습니다. 이를 출력하면 터미널에 다음과 같은 요류가 출력되며 컴파일이 중단됩니다.

Error: Theme color must be defined!
       src/styles/main.scss:3

상황에 따라 적절한 디버깅도구를 사용하면 문제를 빠르게 파악하여 해결하고, 코드 품질을 향상시킬 수 있을 것입니다.