[Svelte] Svelte에서 Javascript 없이 검색어 하이라이트 구현

오늘은 svelte로 프로젝트를 진행중에

 

검색어 하이라이트 기능 구현이 필요해 javascript로 검색을 해보았지만 쉬이 답을 얻지 못하였고,

 

 

이것 저것 시도해보다 진짜 감동의 쓰나미가 폭풍처럼 휘몰아치듯 너무 감격받아서

 

포스팅을 안할 수가 없었다.

---

먼저 Svelte에 대해 간략하게 소개해 드리자면,

 

Rich Harris와 그 팀원들이 만든 Frontend Framework이며 "Not a monolithic Javascript library"

 

많은 분들이 하도 React, Vue에 익숙해져서 그런지.. 다 javascript 기반의 프레임워크라 생각하는 것 같다..

 

하지만, Svelte는 Svelte 언어 그 자체이다. Svelte.js 이런 표현은 맞지않다.

 

 

아무튼 지금부터 기록할 내용이 이해가 되지 않는다면,

 

첨부해드리는 아래의 문서를 우선 참고하시길 바란다.

 

 

ref. https://svelte.dev/docs

Docs • Svelte

---

이제 코드를 한 번 작성해보자.

 

먼저 더미 데이터를 아래와 같이 만들어준다.

<script>
    let search = '';

    const people = [
        {name: '홍길동'},
        {name: '강감찬'},
        {name: '이순신'},
        {name: '장영실'},
        {name: '세종대왕'},
        {name: '유관순'},
        {name: '안중근'},
        {name: '공손찬'},
        {name: '제갈량'},
        {name: '유비'},
        {name: '이이경'},
        {name: '아이유'},
    ]

    let result;
    $: result = [...people].filter(state => state.name.includes(search));
</script>

"$:" 설명은 위에 첨부드린 링크에서 확인바라며, svelte에서 쓰이는 동적 바인딩 방법중 하나이다.

 

이렇게 만들고 나면 html 코드를 짜준다.

<div class="text-column">
    <div>
        <input autocomplete="false" bind:value={search} placeholder="search" spellcheck="false" type="text"/>
        {#each result as person}
            <p>{@html !search ? person.name : person.name.replaceAll(search, `<strong>${search}</strong>`) }</p>
        {/each}
    </div>
</div>

이렇게만 보면 무슨 코드인지 도통 알 수가 없을 수도 있다.

 

이해가 어려워도 천천히 공부하고 나중에 다시 봐도 되니.

 

지금은 "아~ 이렇게 하면 되는구나" 정도로 넘어가면 될 듯하다.

---

아무튼 뭐 별로 적은건 없지만 결론이다. 🤣

 

보시면 아시겠지만,

 

<script> ~ </script>안에서는 어떠한 검색어 처리도 해주지 않았다.(함수 작성이라던가.. 등등)

 

보통 같았으면, 뭐.. function keyupHandler(e){ // do something } 해서 검색어에 대한 처리를 해주고

 

그 결과에 대한 리스트를 반환하는게 일반적이었는데,

 

그럴 필요가 없다.

 

 

코드에서 보이듯이 단 한줄이면 된다.

<p>{@html !search ? person.name : person.name.replaceAll(search, `<strong>${search}</strong>`) }</p>

search가 있니 ? 없으면 그냥 그대로 : 있으면 해당 검색어를 <strong>태그로 감싼 결과

 

 

이렇게 코드만 주구장창 써놓으면 의미가 없을듯 하니 결과를 봐야겠다.

먼저 검색 전이다.

 

잘 보이실지 모르겠는데.. "이"에 해당하는 검색어들이 모두 <strong>으로 강조처리 되어서 나온다.

 

몇 자를 검색해도 잘 된다.

 

지우면 다시 원래 처음 리스트로 돌아온다.

---

결론

이거 하나 할려고 jquery, javascript 관련 문서를 다 뒤졌고 정규표현식도 공부했지만,

 

다 필요없었다.

 

svelte 간지 뒤졌잖아.. 폼 미쳤다.

 

거의 뉴진스의 Hype body.

 

 

저랑 같이 Svelte 공부 하실 분은 Notion으로 오세용

 

ref. https://free-zni.notion.site/Svelte-ae8105ae85bd4886aa19e8397a552449

Svelte

 

외 2걸로 계발 않함 ? 🤔