에디터 라이브러리 선정 회의(티스토리 오픈 API)

티스토리 오픈 API를 활용하여 게시글에 대한 데이터베이스로 활용하는 경우

백엔드 개발자와 함께 오픈 API를 DB로 활용하기

=> 서버에서 해당 글 id에 대해서 유저와 매칭을 하고 매칭된 티스토리 글 id값을 기억했다가 보내주는 방식으로 구현 가능

1. 글을 작성했을 때 넘어오는 response값에서 postId를 그 글의 id로 유저테이블에 매칭해서 저장

{
  "tistory":{
    "status":"200",
    "postId":"1",
    "url":"http://informationjunk.tistory.com/1"
  }
}​

2. 프론트에서 해당 글에 대한 정보를 요청하면 서버에서 티스토리 API를 활용하여 티스토리에서 글에 대한 정보를 가져옴.
아래가 티스토리 API에서 글 내용을 가져왔을 때의 값이면 아래에서 필요한 값인 title과 content, tag에 대한 정보만 프론트로 넘겨줌.

{
  "tistory":{
    "status":"200",
    "item":{
      "url":"https://infomationjunk.tistory.com",
      "secondaryUrl":"",
      "id":"1",
      "title":"테스트",
      "content":"<div class="\"imageblock" center\"="" style="\"text-align:" center;="" clear:="" both;\"=""><img src="\"https://t1.daumcdn.net/cfile/tistory/156987414DAF979922\""></div><br><p></p>테스트<br> ",
      "categoryId":"0",
      "postUrl":"http://oauth.tistory.com/1",
      "visibility":"0",
      "acceptComment":"1",
      "acceptTrackback":"1",
      "tags":{
        "tag":["테스트", "티스토리 API"]
      },
      "comments":"0",
      "trackbacks":"0",
      "date":"20230719"
    }
  }
}​

3. 서버에서 해당 글에 대한 값을 1차 정제해서 프론트에 넘겨주면 프론트에서는 content에 대해서 div의 dangerouslySetInnerHTML 속성을 활용하여 렌더링!

      <div
        dangerouslySetInnerHTML={{ __html: `${el?.content}` || "" }}
      ></div>

우리는 에디터 기능을 위해서 하고 있었는데... 이건 에디터는 없고 데이터베이스만 활용하는 느낌인데?
맞다.. 산으로 가고 있었음...ㅠㅠ