[TIL - 20221107] `백틱 안에서 array loop 처리하기` (feat. array 메소드)

토이프로젝트를 진행하면서 가장 어려웠던 부분은 JavaScript 내에서 html 테그를 생성할 때, 루프를 돌며 찍어주어야 하는 상황이었다.

 

우리는 네이버 여행 사이트에서 스크래핑을 통해 아래와 같이, 각 여행지별로 관광지/식당/쇼핑몰 등의 목록과 이미지를 array로 저장하여 db를 구축했다.

 

그리고 이후, 스크립트에서는 사용자가 검색한 키워드와 여행지별 키워드가 2개 이상 같을 때, 해당 여행지의 정보를 보여주는 html을 추가해주는 방식으로 코드를 짰다.

let rows = response
                    for (let i = 0; i < rows.length; i++) {
                        let city_kor = rows[i]['city_kor']
                        let city_eng = rows[i]['city_eng']
                        let country = rows[i]['country']
                        let desc = rows[i]['desc']
                        let image = rows[i]['img_url']
                        let tag = rows[i]['tag']

                        let difference = tag.filter(x => tag_list.includes(x))

                        if (difference.length >= 2) {
                            temp_html = `<div class="card">
                                            <div class="card-body">
                                               <a onclick="go()" href="/${city_kor}" alt="${city_kor}" id="gogo">
                                               <h3 class="card-name">${city_kor}</h3>
                                               <h5 class="card-name"><a href="/${city_kor}">${city_eng}</h5></a>
                                                        <h5 class="card-nations">${country}</h5>
                                                <i class="card-desc">${desc}</i>
                                                <div class="card-kewords-group">
                                                    <span class="card-keyword" id="tag-box">#${tag[0]}</span>
                                                    <span class="card-keyword" id="tag-box">#${tag[1]}</span>
                                                    <span class="card-keyword" id="tag-box">#${tag[2]}</span>
                                                    <span class="card-keyword" id="tag-box">#${tag[3]}</span>
                                                    <span class="card-keyword" id="tag-box">#${tag[4]}</span>
                                                </div>
                                            </div>
                                            <div class="card-images">
                                                <div class="column">
                                                    <img src="${imag[0]}"alt="snow" style="width:100%">
                                                    <img src="${imag[1]}"alt="snow" style="width:100%">
                                                    <img src="${imag[2]}"alt="snow" style="width:100%">
                                                </div>
                                            </div>
                                        </div>`

                            $('#card-box').append(temp_html)

 

그런데, 문제는, class = "card-keyword" 와 같이, 특정 여행지 db 속 array에 있는 정보를 모두 찍어줘야 하는 데서 발생했다. 

여행지별로 tag(검색어 테그)의 개수가 달랐는데, 위와같이 구현을 하면, 검색어가 5개 미만인 여행지는 무조건 undefined가 같이 뜨게 되었다. 

 

백틱 안에서는 for문을 단독으로 쓸 수 없을 뿐 아니라, function 등으로 감싸 준다고 하더라도, 조건문 속에서 원하는 return 값을 반환할 수 없다는 것이었다. 

`${for (i=0; i < tag.length; i++) {return tag[i]}}` 
// Uncaught SyntaxError: Unexpected token 'for'

`${function a (){
  for(i=0; i<tag.length; i++){
    return tag[i]
  }
  a() // 이 경우, tag array의 첫번째 값만 반환한다...
}}`

 

오늘 항해99 0주차를 시작하고, 새로운 팀원들을 만나서 아이스 브레이킹겸 코드리뷰를 요청했다.

그리고 두 분의 팀원이 map을 사용하는 방법을 알려주셨다.

${tag.map((e) => { return `<span class="card-keyword" id="tag-box">#${e}</span>` })}

 

이후에, img 부분은 내가 처리해 보았다. img의 경우, array 안의 모든 요소를 출력하는 것이 아니라, index 2번까지만 출력을 해야 했기 때문에, slice 메소드를 같이 사용해 보았다.

${image.slice(0, 3).map((e) => { return `<img src="${e}"alt="snow" style="width:100%">` })}

또, map을 사용하면서, forEach로 치환해서도 사용해 보았는데, 왜인지는 모르겠으나, forEach를 사용할 경우, 제대로 출력되지 않았다. 해당 내용은 추후에 더 연구해 볼만한 것 같다.

 

=> forEach는 map처럼 결과값을 return을 하지 않는다.

[20221112] 콜백함수를 활용한 Array 내장 함수들 : forEach(), map(), filter()