영어하는개발자산가누렁이

19.13 Dynamic getStaticProps

일단 설치

npm i unified remark-parse remark-html

https://www.npmjs.com/package/remark-html

설치하고 아래처럼 사용하면 된다.

import { unified } from "unified";
import remarkParse from "remark-parse/lib";
import remarkHtml from "remark-html";

getStaticPath를 통해 파일 읽고, 파일 이름 읽어서 params에 {slug:name} 객체를 전달한다.
이것들을 페이지로 만들어주세요~하는거지

그러면 getStaticProps에서 context객체를 통해 위 params에 접근 가능하게 되고, 
슬러그 id들을 접수 받고, 이 슬러그(post)들을 HTML로 바꿔주고
화면을 그린다. 아래 사진 참고.

아래는 결과물

19.14 Inner HTML
ReacJS는 위처럼 받은 데이터가 html태그여도 그냥String으로 받는다.
보안에 상당히 취약하기 때문이다. 댓글로 <script>태그를 넣어 사용자 정보를 빼올 수도 있다.
그러니 이를 막아놨다.
다만 위 경우, data source를 신뢰 할 수 있기 때문에 dangerouslySetInnerHTML이라는 옵션을 사용하면 된다.
dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법,__html 키로 객체를 전달한다.

참고, css파일에서 @apply를 사용하면 tailwind 문법 사용가능하다.

19.15 Recap
getStaticProps가 잘 동작하는지 보려면, .next 폴더 지우고 build다시 해야 함.
getStaticProps처럼 페이지 빌드할 때 미리 다 해놓는걸 Backend or CRM or Admin pannel 이라고 부른다(?)