내가 안다고 생각했던 것 배우기: 파이프 함수

Sooooo, 나는 정직하게 내가 무엇을 하고 있는지 몰랐기 때문에 NestJs Jest 테스트에서 간단한 테스트에 사로잡혔습니다. 내가 가장 좋아하는 개발 전략은 무차별 대입입니다. 스택 오버플로와 크고 무서운 인터넷의 나머지 부분에 대한 답을 찾기 전에 내가 아는 모든 것을 시도하는 조명 과정이라는 것을 깨달았기 때문에 이 방법에 아무런 문제가 없습니다.

내가 이것을 어떻게 망쳤는지 이해하기 위해 테스트하려는 기능을 더 작은 조각으로 나누기로 결정했습니다.

하지만 나에 대해선 충분해.....지금은.

서비스

제가 테스트한 서비스는 이렇게 생겼습니다 👇🏿
this.service.lookup(reqUrl).pipe(map((res)=>res.map(.)));
조회 함수가 RxJs Observable에 래핑된 배열을 반환한 곳.

서비스는 엔드포인트를 호출하여 일부 데이터를 검색합니다. 기본적인 것들은 맞습니다. 음, 이것을 테스트하려는 나로부터 Jane(일명 Eleven)이 없는 거꾸로 된 내부에 갇힌 것처럼 느껴졌습니다.

내가 받은 첫 번째 오류는 .map is not a function이었습니다. 이것은 컴파일러가 말하는 방식입니다.

Array.map(): Array의 프로토타입

'Yoooo, dude, this is not an Array, map won't work here.'

Observable.map(): Rxjs에서 가져옴

'Yoooo, dude, this is not an Observable, map won't work here.'

배열 대 Observarble 파이프

What are the differences between Array map and rxjs map

반환되는 데이터가 배열이라고 생각했기 때문에 오류가 혼란스러웠습니다. 본질적으로 이것이 주요 문제는 아니었지만 나는 1.5시간 동안 토끼 굴로 이끌려 이 기사를 작성하게 되었습니다.

내 친구 Toma가 고친 후 하하, 고마워 형 ✊🏿

이제 헛된 꿈을 꿀 시간

서비스 호출이 어떻게 호출되고 데이터를 반환하는지 알 수 있으므로 .pipe이 무엇을 하는지 이해하지 못했습니다.

간단히 말해서 .pipe은 반환되는 값을 가져오고 반환된 값을 체인의 다음 함수로 전달합니다.

func(args In): funcRes {} <-- our starter function
pipe( <- passes its response into the pipe function
func1(funcRes), <- func1 use it and returns a func1Res
func2(func1Res) <- func2 uses func1Res and returns func2Res
); = func2Res <- out comes our baby func2Res

이 문제를 해결하는 또 다른 방법은 사용자 지정 파이프 함수를 만드는 것입니다. TypeOfNan은 .pipe가 무엇을 하는지 보여주는 간단한 예를 만들었습니다.

// Input string = "Stranger Things Season 4 Episode 7"
// Custom Pipe
const pipe = (...args) => args.reduce((acc, el) => el(acc));

// Create our 3 functions transfer
const titleFunc1 = '10 Weird Facts About Dogs';
const toLowerCaseFunc2 = (str1) => str1.toLowerCase();
const addHyphensFunc3 = (str2) => str2.replace(/\s/g, '-');

const slug = pipe(titleFunc1, toLowerCaseFunc2, addHyphensFunc3);

console.log(slug); 
// Return string = Stranger-things-season-4-episode-7

이제 파이프 함수가 전달된 함수의 반환 값으로 '뜨거운 감자' 역할을 한다는 것을 알고 있으므로 다음 작은 부분에 집중할 수 있습니다. 읽어 주셔서 감사합니다. 도움이 되었기를 바랍니다.

참조

MDN 웹 문서 - Array.prototype.map()

Rxjs - Pipe

스택 오버플로 - What are the differences between Array map and rxjs map?

TypeOfNan - How to use pipe, the pipeline operator in javascript