코드 리뷰 중에 배운 간단한 것: 태그가 있는 템플릿

얼마 전에 코드를 검토하다가 다음 스니펫을 보고 어리둥절한 내 자신을 발견했습니다.

fixture `A bunch of tests`
    .page `http://myapp.github.io/example`;

물론 템플릿 리터럴을 보았고 매개변수를 전달한 다음 fluent interface 을 반환하는 함수라고 확신했지만 실제로 구문을 이해할 수 없었습니다. 나에게 유효한 JS 스크립트 코드와 유사하지 않았습니다.



UI에서 종단 간 테스트를 자동화하는 데 사용되는 테스트 프레임워크documentation를 확인했습니다. (과거에 우리는 Puppeteer을 몇 가지 아주 기본적인 것들에만 사용했고, 일부 프로젝트에서는 Cypress.io을 시도했습니다. 이 프로젝트의 경우 팀/개발자는 TestCafe´을 사용했습니다. 그래서 이 테스트 프레임워크는 저에게 새로운 것이었습니다. )

모든 것이 다음과 같이 보였습니다.

// To declare a test fixture, use the fixture function.
fixture( fixtureName )
fixture `fixtureName`

그래서 .. 그 구문을 허용하는 마법은 무엇입니까?
Google에 정확히 무엇을 입력했는지는 기억나지 않지만 메소드로서의 javascript 템플릿 리터럴과 같은 것이었고 그런 사소한 것으로 나를 밝히기에 충분했습니다.

태그가 지정된 템플릿

지금까지 나는 항상 매우 기본적이고 매우 유용한 기능을 위해 템플릿 리터럴을 사용했습니다.

문자열 보간

그것은 다음과 같이 쓸 수 있다는 것을 의미합니다.

console.log(`Hi ${name}! Today is ${new Date().toString()}.`)

대신에

console.log('Hi ' + (name) + '! Today is ' + new Date().toString() +'.');

여러 줄 문자열

각 행에 더하기 및 새 줄을 추가하지 않고도 여러 줄 텍스트를 작성할 수 있습니다.
잊어버리세요:

const twinkle = "Twinkle, twinkle, little star\n"+
"How I wonder what you are\n"+
"Up above the world so high\n"+
"Like a diamond in the sky\n"+
"Twinkle, twinkle little star\n"+
"How I wonder what you are"

이것을 만나다:

const twinkle = `Twinkle, twinkle, little star
How I wonder what you are
Up above the world so high
Like a diamond in the sky
Twinkle, twinkle little star
How I wonder what you are`

솔직히, 나는 Template Literals의 전체 문서를 읽는 데 시간을 투자하지 않았고 문서를 정확히 Tagged Templates ...에서 읽는 것을 너무 많이 중단했습니다.

Tags allow you to parse template literals with a function. The first argument of a tag function contains an array of string values. The remaining arguments are related to the expressions.

나에게 즉각적인 의미가 없었으며 실제 시나리오를 상상할 수 없었습니다.

이번에는 해당 테스트 사용 사례를 작성할 때 Tagged 템플릿을 사용하는 이유를 이해하려고 노력했습니다.

설명서의 예제를 다시 작성하려고 했습니다.

function myTag(strings, personExp, ageExp) {
  var str0 = strings[0]; // "That "
  var str1 = strings[1]; // " is a "

  // There is technically a string after
  // the final expression (in our example),
  // but it is empty (""), so disregard.
  // var str2 = strings[2];

  var ageStr;
  if (ageExp > 99){
    ageStr = 'centenarian';
  } else {
    ageStr = 'youngster';
  }

  // We can even return a string built using a template literal
  return `${str0}${personExp}${str1}${ageStr}`;
}
var person = 'Mike';
var age = 28;

console.log(myTag`That ${ person } is a ${ age }`)
 // "That Mike is a youngster"

좋아, 여기서 우리는 일부 교체가 포함된 문자열을 전달하고 있으며 함수는 해당 문자열을 인쇄/연결하기 전에 내부적으로 일부 조건 논리를 적용합니다.
템플릿 리터럴의 구문 없이 해당 메서드를 정상적으로 호출하려면 어떻게 해야 합니까?

내가 시도했을 때

console.log(myTag("That " + person + " is a " + age ))

내가 얻었다

Tundefinedhyoungster

동안

console.log(myTag("That ", person, " is a ", age ))

출력은

TMikehyoungster

좋아, 문서를 다시 읽어보자

The first argument of a tag function contains an array of string values.

The remaining arguments are related to the expressions

즉, 동일한 결과를 얻으려면 다음과 같이 호출해야 합니다.

console.log(myTag(["That ", " is a "], person, age ))

글쎄, 이것은 완벽하게 이해됩니다. 그리고 Tagged 기능은 즉시 매우 실용적으로 나타납니다!



또한 태그가 있는 함수는 반드시 문자열을 반환할 필요는 없지만 무엇이든 될 수 있습니다. 예제에서와 같이 변수/대체는 형식이 지정된 문자열을 반환하기 전에 일부 조작 및 조건 논리를 처리하는 데 사용할 수 있으며 아마도 테스트 프레임워크 소스 코드에서 문자열이 내부적으로 저장되고 TestSuite 인스턴스가 유창한 인터페이스로 반환됩니다.

단순한 내용일지라도 경험이 적은 동료가 작성한 코드를 검토하면서 새로운 것을 발견하게 되어 매우 기쁩니다.
너무 많은 숙련된 개발자가 코드 검토를 까다롭고 지나치게 비판적이며 오만하게 여기는 기회로 삼지만 절대 그렇게 해서는 안 됩니다.

Never miss a chance to learn something.
Never underestimate the learnings you can get from Code Reviews.

Always take a little bit of extra time to dig deeper into something that you don't know, don't' understand and tickles your curiosity.

다른 사람들이 코드를 검토하는 동안 Aha 순간이 있었습니까?


Sergi Viladesau on Unsplash의 표지 이미지