[Javascript] replace와 array(배열) 활용해서 템플릿 만들기.

replace를 얼마나 활용하시나요?

 

replace 함수는 string요소의 원하는 패턴을 일부 또는 모든 부분을 교체할 수 있는 함수입니다!

그저 replace는 글자 바꾸기로만 사용했다면 오늘은 해당 함수를 이용해서 템플릿을 만들 때 활용할 수 있다는 점을 알고 가는게 어떨까요?

 

MDN에서 설명하는 replace

String.prototype.replace() - JavaScript | MDN

템플릿으로 활용하기

1. template 변수에 코드를 담아줍니다.
2. template 안에 있는 내용 중 replace를 해줄 문자열을 설정해줍니다.
3. 배열에 넣어둔 리스트항목을 replace를 통해서 설정한 리스트 텍스트{{__news_feed__}}에 join을 해줍니다.
4. 페이지의 경우도 마찬가지로 설정한 페이지 텍스트{{__prev_page__}}를 replace로 변경해줍니다.

 

let store = {
    currentPage : 1
}

function newsFeed(){
    const newsFeed = getDate(NEWS_URL);
    const newsList = [];
    let template = `
        <div class="container mx-auto p-4">
            <h1>BJJ news</h1>
            <ul>
                {{__news_feed__}}
            </ul>
            <div>
                <a href="#/page/{{__prev_page__}}">이전 페이지</a>
                <a href="#/page/{{__next_page__}}">다음 페이지</a>
            </div>
        </div>
    `
    for(let i = (store.currentPage - 1) * 10; i < store.currentPage * 10; i++){
        newsList.push(`
            <li>
                <a href="#/show/${newsFeed[i].id}">
                    ${newsFeed[i].title.rendered}
                </a>
            </li>
        `);
    }
    template = template.replace('{{__news_feed__}}', newsList.join(''));
    template = template.replace('{{__prev_page__}}', store.currentPage > 1 ? store.currentPage - 1 : 1);
    template = template.replace('{{__next_page__}}', store.currentPage + 1);

    container.innerHTML = template;
}