[TIL] 프리온보딩 17일차 - 220519

오늘은 휴먼스케이프 기업 과제 프로젝트 첫 시작 날이다.

이전에 react query랑 redux toolkit을 공부하고 드디어 오늘부터 시작하게 됐다.

 

route 이동도 없고 기능이 많진 않아 나누기 애매하다고 느껴져서,

이전에 해강님이 추천해주신 Live Share라는 vscode extension을 활용하기로 했다.

Live Share는 vscode의 코드를 다같이 수정할 수 있기 때문에

초기 세팅 + UI + 검색바에 입력했을 때 아래 추천 검색어까지 띄우는건 다같이 작성하였다.

그리고 내일까지 각자 [추천 검색어 중 입력한 검색어와 일치한 부분 볼드 처리] + [키보드만으로 추천 검색어 이동] 기능을 개발하고 코드리뷰 하기로 하였다.

---

1️⃣ !!keyword

지금까지 !true 이런건 봤어도 !!keyword 이 문법은 처음 봤다.

이 문법은 keyword가 있으면 true, 없으면 false로 반환된다.

 

 

2️⃣ line-height

지금까지 li 간격 조정 할 때 css에 li + li로 하여 margin-top 주는 식으로 사용하였는데,

위와 같이 작성하면 li와 li 사이의 간격이 넓어지는 것이다.

내가 원하는 모습은 맞지만 만약 click 이벤트 등이 들어갔을 때 사용자가 list라고 생각하여 클릭했음에도 불구하고 클릭되지 않을 때가 있을 수 있다. 결론은.. 앞으로 li에 line-height를 조정하여 하자 !

 

 

3️⃣ dangerouslySetInnerHTML

볼드 처리를 위해 정규표현식으로 추천 검색어 중 입력한 검색어와 일치한걸 찾고,

HTML Tag로 감싸서 return하려는데 문자열로 return이 된다.

 

그래서 dangerouslySetInnerHTML이란걸 사용하여 다음과 같이 return하였다.

<div dangerouslySetInnerHTML={{__html: "<h1>예제</h1>"}}></div>

 

그런데 dangerouslySetInnerHTML는 사용자가 입력할 수 있는 HTML 태그 부분에 악의적인 스크립트가 포함된 코드를 삽입해서 사용자의 정보를 가져오는 XSS(Cross Site Scripting) 공격의 위험이 있기 때문에 사용하는걸 권하지 않는다고 한다.

 

불가피하게 사용해야 할 상황이 있다면 XSS 공격을 방지하는 dompurify 라이브러리를 함께 사용하는 것이 좋다.

사용하기 위해 우선 dompurify 라이브러리를 설치한다.

yarn add dompurify
yarn add @types/dompurify

 

 

아래와 같이 dompurify를 html 코드에 감싸준다.

const exHandler = (keyword) => {
    const sanitizer = dompurify.sanitize
    return <div dangerouslySetInnerHTML={{__html: sanitizer("<h1>예제</h1>")}}></div>
}

 

적용하여도 eslint에선 경고를 날리긴 한다.

이 부분에 대해선 내일 팀원들과 의논해봐야겠다..!

다른 좋은 방법이 있다면 다른 방법으로 적용해야겠다..