테스트 구동 마크 업의 주요

소개

이 기사에서는 Heydon Pickering(헤이든 피커링)이 제안한 개발 기법인 테스트 구동 마크업에 대한 설명과 운영 모범 사례를 소개합니다. 이번 샘플 코드는 GitHub에서 공개하고 있습니다.

2019/12/29 추가

새로운 모듈 시스템 meta.load-css()을 사용하여 테스트 구동 마크 업용 스타일 시트를로드하는 방법을 변경했습니다.

테스트 구동 마크업이란?

프로그램의 테스트는 기능의 구현 후에 작성하는 것이 일반적입니다. 반대로 프로그램을 구현하기 전에 테스트를 작성하는 기법이 테스트 구동 개발(Test Driven Development; TDD)입니다. CSS에 테스트 기반 개발을 적용하면 HTML 마크업 구조의 정확성을 테스트할 수 있습니다.

CSS 로직

CSS 선택기는 HTML 구조와 일치하는 조건식입니다. 예를 들어, disabled 속성이 없는 button 요소에 스타일을 맞추는 경우, 다음과 같이 씁니다.

button:not(:disabled) {
  /* disabled 属性がない button 要素にあたるスタイル */
}

일반적으로 CSS는 HTML 요소를 정규화하는 방법을 알려주기 위해 선언을 작성합니다. 그러나 잘못된 패턴을 대상으로 오류 스타일을 적용하여 문제를 시각화할 수 있습니다.

test.css

img:not([alt]) {
  outline: 5px solid red;
}

그리고는, 그 요소가 어떠한 문제가 있는지를 에러 메세지로 전하도록 하면 됩니다.

ERROR 속성

문제가 있는 요소에 오류 메시지를 알리려면 ERROR 속성을 사용합니다. 아시다시피 CSS에는 ERROR 속성이 없습니다. 잘못된 CSS 속성은 무시됩니다.

test.css

img:not([alt]) {
  outline: 5px solid red;
  ERROR: img 要素には、alt 属性が必須です。;
}

이 오류 메시지는 각 브라우저의 개발 도구에서 확인할 수 있습니다. Chrome 개발자 도구에서 오류 메시지를 확인한 경우 다음과 같이 경고 표시를 제공합니다.

운영 모범 사례

테스트 구동 마크업은 gulp + Sass의 운용으로 개발 모드로 테스트 구동 마크업을 제어할 수 있습니다. Node.js 환경 변수를 Sass 변수에 전달하려면 gulp-sass-variables을 사용하십시오. gulp 버전은 최신 버전 4.0입니다. (2019/04/21 현재)

gulpfile.js

const gulp = require('gulp');
const sassVariables = require('gulp-sass-variables');
const sass = require('gulp-sass');
sass.compiler = require('sass');
process.env.NODE_ENV = process.env.NODE_ENV || 'development';

function styles() {
  return gulp.src('src/sass/**/*.scss')
    .pipe(sassVariables({
      $mode: process.env.NODE_ENV
    }))
    .pipe(sass())
    .pipe(gulp.dest('dist/'));
}

exports.styles = styles;

또한 package.json에 환경 변수를 전달하는 npm-scripts를 등록합니다.

package.json

  "scripts": {
    "dev": "NODE_ENV=development gulp styles",
    "build": "NODE_ENV=production gulp styles"
  }

Sass의 내장 모듈 meta.load-css()에서 동적으로 테스트 구동 마크 업 스타일 시트를로드하십시오.

main.scss

@use "sass:meta";

:root {
  @if $mode == "development" {
    @include meta.load-css("test");
  }
}

이제 Node.js의 환경 변수가 development이면 테스트 기반 마크 업 스타일 시트를 읽습니다.

사이고에게

테스트 기반 마크업은 HTML 마크업 구조의 정확성뿐만 아니라 아이디어에 따라 프로젝트 규칙에 따라 소스 코드를 담보할 수 있습니다. 예를 들어 YouTube 동영상 퍼가기에서 관련 동영상을 동일한 채널로 제어하는 ​​경우가 있습니다.

iframe[src^="https://www.youtube.com/embed/"]:not([src*="rel=0"]) {
  outline: 5px solid red;
  ERROR: YouTube の関連動画を同じチャンネル内に制御されてまいせん。;
}

우선, 테스트 구동 마크업의 활용 사례로서 REVENGE.CSS 을 힌트로 작성해 봅시다!

참고문헌

포괄적 인 HTML + CSS & JavaScript 다양한 사용자 요구를 충족시키는 프런트 엔드 디자인 패턴
htps : // 아마존. jp/dp/4862463878/