[내일배움캠프] 24.08.23 TIL

 

 

오늘은 구현하고 싶었던 기능을 하나 구현 해보고,

지저분한 코드를 깔끔하게 정리하는 시간을 가져보았다.

 

 

상당히(?) 개선된 메인 화면

어제 예상보다 오래걸렸던 setTimeout.. 이녀석을 좀 더 활용해 보기로 했다.

 

 

4. 지름길 개척에 성공할 경우 출력되는 화면이다.

figlet 모듈을 사용하여 간단하게 문자열을 표현하는 코드인데,

 

시작 화면에서 출력되던 HIKING 의 그것이다

 

이 figlet 출력에 딜레이를 줘 보자.

일종의 연출효과를 얻을 수 있고, 코드에 대한 학습도 될테니 일석 이조 !

 

크게 어려운 부분은 없었다.

delay 함수는 이미 전역에 뿌려두었고, 어제 했던것 처럼, 호출부에 await 를 걸어주고

async를 함수선언 앞에 달아준 뒤 await delay를 적당히 써 주면 된다.

 

문자 출력 부분은, for 문을 통해 구현했고,

주어진 문자열을 0인덱스부터 하나씩 추가하며

console.clear 와 출력을 반복하면 된다 . 

 

 

 

만들고 보니 꽤 그럴싸한듯 !

 

 

그래서, 패배시 game-over 의 표현이나,

엔딩에도 적용하면 좋을것 같다는 생각이 들었다.

 

하드코딩 결과물을 다시 함수로.. 만들어보자.

변동이 필요한 부분만 인자로 받게 만들면 끝이겠죠? 

 

 

// TEST 문자 출력
async function TestText (text, setDelay, color) {
  let TestTextMes = ""
  for (let i = 0; i < text.length ; i++){
    console.clear()
    TestTextMes += text[i]
    console.log(chalk.red(('='.repeat(75))));
    console.log(chalk.red(figlet.textSync(TestTextMes)));
    console.log(chalk.red(('='.repeat(75))));

await delay(setDelay);
}
await delay(0.5);
}

 

뭔가... 뭔가 부족하다 !

 

위에 보이는 것 처럼, color 또한 임의로 지정할 수 있었으면 좋겠는데...

 

불이 꺼지는 매개변수 color .. 

매개변수 : 아 되겠냐고 ㅋㅋ

 

어떻게 이해해야 하는 부분일까?

 

쉬울줄 알았는데...

콜백함수 쓰면..? 아니면..메서드를 통쨰로? 아니면.. 

되긴 해?

 

 

결국 검색과 고민 끝에, 튜터님에게 질문하기로 했다 !

 

chalk.color 를 통째로 인자로 받아오면 가능하다는 것이다 !!

 

저 위의 되겠냐고의 방법은,

변수chalk와 실행() 사이에 매개변수가 들어가서 뭐 어쩌라는건지 모르겠는 상황이 되지만, 

 

chalk.color 를 받아넣으면 함수() 와 같은 방식으로 실행처리가 가능해지기 때문에, 

정상적으로 기능을 한다는 것이었다 !!

 

 

이것은 고차 함수의 작동에 해당하는 방법으로 

내 머리로 이해할 수 있는 부분은

매개변수가 함수명을 인자로 받아오면

본문에서 매개변수() 를 통해  그 함수를 실행시킬 수 있다고 이해가 되어진다.

 

 

맞..나?

 

 

결론

 

JS의 펑션.. 당신은 대체...

이해가 다 안되는데도 놀라운 힘이야 !

(솔직히 이것도 의도한 기능인지 의심됨)

 

 

추가로, 조심해야 할 부분이 있다면,

모듈의 함수마다 바인딩하는 대상이 다를 수 있다고 하셨는데, 

그럴 땐 바인드까지 해버려서 인자로 넣어버리면 green이 집을 찾는것을 도와줄 수 있다고 하셨다 !

 

위 과정으로 만든 함수로, 게임 오버 출력과, 게임 클리어 출력까지 해먹으면 될 듯 하다.

 

음.. 초기 시작 화면 (오프닝) 까지 날로 먹으면 좋을것 같다 !