문제출처: freecodecamp.org
문제
Use template literal syntax with backticks to display each entry of the result object's failure array. Each entry should be wrapped inside an li element with the class attribute text-warning, and listed within the resultDisplayArray.
Use an iterator method (any kind of loop) to get the desired output (shown below).
//<보기>
[
'<li class="text-warning">no-var</li>',
'<li class="text-warning">var-on-top</li>',
'<li class="text-warning">linebreak</li>'
]
----------------------------------------------------------
//<기본세팅>
const result = {
success: ["max-length", "no-amd", "prefer-arrow-functions"],
failure: ["no-var", "var-on-top", "linebreak"],
skipped: ["id-blacklist", "no-dup-keys"]
};
function makeList(arr) {
"use strict";
// Only change code below this line
const resultDisplayArray = null;
// Only change code above this line
return resultDisplayArray;
}
const resultDisplayArray = makeList(result.failure);⇨ 즉, backticks(``)과 template literal(${}) 문법을 사용해 result객체 failure배열의 요소들을 반환하는 문제. 각 요소들은 li태그로 감싸야하며 text-warning이라는 클래스 속성을 가지고 있어야한다. 반환된 요소들은 resultDisplayArray라는 배열 안에 리스트되어야 하며 반복문을 사용해 보기와 같은 결과를 반환해야한다.
풀이과정
얼마전에 이벤트 추가할 때 class속성도 추가하고 createElement로 태그도 추가해봤었지!!
이렇게 과제를 떠올리면서 제출해본 첫 답변:
function makeList(arr) {
"use strict";
// Only change code below this line
const resultDisplayArray = [];
for (let i = 0; i < result.failure.length; i++) {
const list = result.failure.createElement('li');
list.classlist.add("text-warning");
list.textContent = `${result.failure[i]}`
console.log(list);
resultDisplayArray.push(list);
}
// Only change code above this line
return resultDisplayArray;
}
const resultDisplayArray = makeList(result.failure);결과는 ....
result.failure.createElement가 함수가 아니라니....🤭 🥺
list에 뭐가 담기는 지 console을 찍어볼까?
for문을 실행시킬 수 있어야 list에 담기는 값도 볼 수가 있는데 makeList() 를 실행시키니 여기도
result.failure.createElement가 함수가 아니라는 메세지를 준다 😂
어떤 게 왜 문제인걸까.........?
그래, 답변 딱 10초만 보자!! 그리고 안보고 처음부터 다시 써보면 되지!!!! (자기위안)
답변 한번 슥~ 본 다음
오 매개변수 arr가 있었지 참.
li태그랑 class="text-warning"도 template literal 안에 통째로 넣을 수 있구나.
다시 한번 처음부터 쓴 답을 제출한다.
function makeList(arr) {
"use strict";
// Only change code below this line
const resultDisplayArray = [];
for (let i = 0; i < arr.length; i++) {
resultDisplayArray.push(`<li class="text-warning">${arr[i]}</li>`);
}
// Only change code above this line
console.log(resultDisplayArray);
return resultDisplayArray;
}
const resultDisplayArray = makeList(result.failure);
console.log(resultDisplayArray);
/* [
'<li class="text-warning">no-var</li>',
'<li class="text-warning">var-on-top</li>',
'<li class="text-warning">linebreak</li>'
] */
예쓰!! 통과!! ⭕️
아무래도 template literal로 어디까지 표기가 가능한지 추가적인 이해가 필요하다는 생각이 든다.
ES6 템플릿 리터럴은 일반적인 문자열과 달리 여러 줄에 걸쳐 문자열을 작성할 수 있으며 템플릿 리터럴 내의 모든 white-space(공백)는 있는 그대로 적용된다.
const template = `<ul class="nav-items"> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul>`;
-poiemaweb.com
오늘의 Lesson
- 템플릿 리터럴은 + 연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을 삽입할 수 있는 기능을 제공한다. 이를 문자열 인터폴레이션(String Interpolation) 혹은 플레이스 홀더(Place Holder)라 한다.문자열 인터폴레이션은
${ … }으로 표현식을 감싼다. 문자열 인터폴레이션 내의 표현식과 텍스트는 함께 함수로 전달되며, 문자열로 강제 타입 변환된다. - 처음 접근했던 방식은 DOM(Document Object Model)을 추가하는 방식으로 HTML 요소를 자바스크립트로 컨트롤함으로써 동적인 이벤트를 구현하는 방법이다. 또한
.createElement()메서드는 HTML의 요소를 만들어서 반환하는 메서드로 오답에서 기재한result.failure.createElement('li')의result.failure.는document.가 되어야 한다. - 위 문제의
<li class="text-warning">는 HTML의 요소가 아닌, string으로 보는 것이 맞다. 공통으로 추가되는 부분은backtick(``)안에, 그리고 추가되는 요소마다 달라져야 하는 부분은 실행될 수 있는 표현식을 문자열 인터폴레이션${}안에 기재하는 방식으로 표현하는 것이 적절하다.
