[전공자들 5] 개발 3일차 - 검색결과에서 검색단어를 파란색으로 표시해보자

풀스택 웹개발 프로젝트를 할 때 나는 처음에 퍼블리싱 - 백엔드 - 프론트 순서로 작업을 하곤 했다. (화면을 이쁘게 만들어 놔야 보기가 좋아서.. ?)

한 번 해보고 나서 비효율적인 부분을 발견했는데 게시판 목록같은 기능이 그랬다.

 

 

예를 들어서, 화면을 이렇게 설계했다면 처음에 똑같은 디자인을 만들기 위해 각 게시글들을 모두 하드코딩해서 박았었다. (줄간격 설정이나 크기 설정 등,,)

그러니까 나중에 백엔드 기능을 완성하고 그걸 프론트로 받아와서 보여주는 작업을 할 때 다시 수정을 했어야 했다

 

왼쪽 하드코딩된 게시판을 오른쪽 프론트작업으로 변경해야해서 두 번 일을 함

 

그래서 이번 프로젝트땐 백엔드부터 완성하고 여유롭게 프론트를 해볼까 싶었는데 아무래도 db도 처음써보고 다른 어려운 기능도 새롭게 도전하는게 많아서 엄두가 안났다.. ㅋㅋ,, 

 

그래서 만만한 퍼블부터 시작하되 더미데이터를 하나 만들어서 프론트작업을 어느정도 같이 병행했다. 

나중에 최대한 편하게 데이터만 받아오면 연결하기 쉽도록..!

 

chat gpt한테 더미데이터좀 만들어달라구 했음,,

 

그래서 그런지 예상보다 프론트 작업이 늦어지고 있다! 퍼블작업만 하는거였으면 어제까지 끝낼 수 있었는데,, ㅠㅠ

적어도 내일 안에는 프론트를 끝내야지,,

---

 

검색결과에 검색어 파란색 표시하기

결과물. 피그마 아님

 

 const HighlightText=(cn,text)=>{
    //문자열 전체에서, 공백을 포함해, word와 일치하는 문자를 찾음
    const regex = new RegExp(`(${word.replace(/ /g, '\\s*')})`, 'gi');
    // $1은 정규표현식에서 매치된 첫 번째 그룹을 가리키는데, 여기서는 괄호로 묶인 패턴을 의미
    return  <div className={cn} dangerouslySetInnerHTML={{ __html: text.replace(regex, '<span class="highlight">$1</span>') }}></div>
  }

 

 

HighlightText(text) 라는 함수를 만들고, text라는 문자열을 인자로 받음.

정규표현식을 사용해서 문자열(여기서는 각 게시글의 제목과 내용) 안에 들어있는 word를 찾고,

미리 정의해 놓은 highlight 라는 글자를 파란색으로 표시하는 css를 적용시킨 <span>태그 문자열을 만든다.

그리고 dangerouslySetInnerHTML을 사용해 문자열을 html로 변환해 <div>로 return해줬다.

 

 

여기서 문제가 한가지 생겼었는데,

처음 코드에서는  HighlightText() 함수가 word를 포함하고 있는지 비교할 텍스트만을 인자로 가져갔다. 

 

 

게시글의 구조가 원래 아래와 같은 3개의 div구조로 되어있었다면

 

여기서 주황색 선이 title 이라는 className을 가지고 있었음

 

여기서 HighlightText()가 새로운 div를 리턴하게 되면서 구조가 이렇게 바뀌었다.

 

 

그러면서 지 맘대로 줄바꿈이 생겨버렸던 것임!! ㅂㄷㅂㄷ

 

요지경

 

그래서 결국 함수를 호출할 때 display:inline을 적용시키는 클래스명을 함께 보내서 

 

 

그리고 기존에 title에 적용시켜놓았던 css가 망가져서 HighlightText()함수에 새로운 파라미터로 클래스이름을 따로 붙여줬다.

 

근데 지금 블로그 글을 작성하다가 깨달은 건데, 애초에 return을 할 때 <div> 가 아니라 <span>으로 내보내면 되는거 아닌가 하는 생각이 들었고, 결론적으로는 이 생각이 맞았다. 그래서 클래스 이름을 굳이 붙일 필요 없어서 다 지웠다. 코드는 좀 더 깔끔해졌고 클래스이름을 붙이는 방법을 하나 알게 된걸로 만족하자!