Fuzzy String Matching

• 근접 문자열 매칭: 유사한 문자열을 찾는 기술

• 특정 문자(문자열)과 정확히 일치하지 않더라도 비슷한 문자열을 찾아주는 방법

• 두 문자열의 유사도 척도

  • 문자 중복
  • 편집 거리
    • 한 문자열이 다른 문자열이 되기 위해 필요한 편집 연산 수

SCSS

@mixin

• @mixin: 재사용할 그룹을 선언(정의)하는 것
• @include: 정의된 @mixin을 사용

@mixin headline {
	text-align: center;
    span {
    	color: red;
    }
    // ...
}

.header {
	@include headline
}

@mixin 매개변수 사용

@mixin borderStyle($width, $style, $color) {
	border: $width $style $color;
}

.buttons {
	@include border-style(2px, solid, red);
}

extend 선택자

• 해당 선택자의 속성을 모두 가져옴

.btn {
	width: 200px;
    border: none;
    colore: red;
}

.order {
	@extend .btn;
}

% Placeholder 선택자

%btn {
	width: 200px;
    border: none;
    colore: red;
}

.order {
	@extend %btn;
}

• %를 사용하지 않은 컴파일된 CSS 파일
  • .btn을 사용하지 않아도 추가됨.

.btn, .order {
	width: 200px;
    border: none;
    colore: red;
}

• % 사용

.order {
	width: 200px;
    border: none;
    colore: red;
}

다중 변수 선언

• 내장 함수 map-get

$color: (
	font-primary: #2d3447;
    font-secondary: #64e231;
    font-focues: #0985e2;
);

body {
	background-color: map-get(font-primary);
}

React

String to HTML Element

• 마크 태그를 넣는 과정에서 string으로 배열에 저장했는데 다시 HTML 태그로 render 하는데 어려움이 있었다.

• 방법1: dangerouslySetInnerHTML 속성

  • 브라우저 DOM에서 innerHTML을 사용하기 위한 리액트의 대체 방법
  • 일반적으로 코드에서 HTML을 설정하는 것은 cross-site scripting(XSS) 공격에 쉽게 노출될 수 있기 때문에 위험
    • 그래서, return에서 tag가 담긴 string은 태그가 먹히지 않는다.
  • 이런 취약점을 무시하고 string을 rendering 할 수 있어 dangerously가 붙어있다.

const highlighted: string[] = []
highlighted.push(`<mark>${letters[i]}</mark>`)
// ...

return (
    <div dangerouslySetInnerHTML={{ __html: val }} key={i} />
)

• 방법2: html-react-parser

  • 위의 속성을 사용하기 싫다면 이 라이브러리를 사용해 똑같은 작업을 할 수 있다.

  • 하지만 해당 라이브러리도 XSS에 안전하지 않다.

    • Is this XSS safe?
      - No, this library is not XSS (cross-site scripting) safe. See #94.

    • Does invalid HTML get sanitized?
      -No, this library does not sanitize HTML. See #124, #125, and #141.

• 결국 위의 두 가지 방법 중 하나를 사용하고 Sanitize 라이브러리로 데이터를 클린업 한 후 렌더링 해야한다?

  • sanitizing은 위험 요소가 될만한 부분을 자체적으로 삭제

• dompurify

  • sanitizes HTML and prevents XSS attacks.

XSS 공격이란?
신뢰할 수 없는 외부로부터의 데이터가 href 경로, 또는 innerHTML 속성 등 페이지 DOM에 삽입되는 경우가 있다. 특히 사이트에 스크립트 코드를 삽입하게 되면, DOM 트리에 접근할 수 있고 쿠키와 세션 정보에도 접근이 가능해진다. 사용자가 페이지를 사용할 때 미리 심어놓은 스크립트가 실행되는 원리.

참고
https://velog.io/@ggong/Sanitizer-API%EB%A5%BC-%ED%86%B5%ED%95%B4-DOM-%EC%95%88%EC%A0%84%ED%95%98%EA%B2%8C-%EC%A1%B0%EC%9E%91%ED%95%98%EA%B8%B0

https://stackoverflow.com/questions/44643424/how-to-parse-html-to-react-component