티스토리 API를 활용한 글 작성.

에디터가 구리다.

티스토리 블로그를 시작한지 얼마 되지 않았지만
하면서 가장 불편함을 느낀것이 바로 에디터였다.
HTML 편집기능을 어느정도 제공은 하지만 모바일에는 적용이 제대로 되지 않고, HTML 에디터는 불편하고 소스 보기도 불편하다.
마크다운은 제대로 지원되지 않는다.

그러던 와중에 티스토리가 글쓰기, 글 수정, 이미지 업로드 등에 대한 API를 제공하는것을 알았고 차라리 이 API를 활용하여 별도의 글쓰기 폼을 가지는게 낫다 싶었다.

웹에서 사용할 수 있는 에디터는 상용 에디터가 아니더라도 최소한 티스토리 에디터보다는 좋은 기능을 가진것이 많고,
많은 후보군중에서
마크다운 에디터와 위지윅 에디터를 동시에 겸할 수 있는 국산에디터인 Tui Editor를 사용하기로 했다.

에디터에서 필요했던 기능들

우선 기존 에디터에서 한계점을 느낀것은 code하이라이트를 쓰는데도 문제가 많고 HTML서식을 꾸미는데도 불편한것이 많았다.
오픈그래프를 가져오는 기능은 쓸만했지만 그거 외에는 기존 에디터들에 비해 기능이 없는것도 많고 있어도 뭔가 나사가 하나씩 빠져 있었다.

개인적으로 차트 스크립트를 제대로 사용했으면 했고,
마크다운이 제대로 지원됬으면 했는데

마크다운은 그냥 합의보자 하더라도 차트의 경우 chart라이브러리를 사용하니 스크립트 삽입은 불편하고, canvas 객체의 경우 글 수정을 하게 되면 사라진다.
다시 입력해야한다.

글을 쓰고 수정을 자주하는 입장에서 매우 불편할 수 밖에 없었고 이 불편함을 해소하기 위해 결국 API를 활용하기로 한 것이다.

인터페이스는 급조한거기때문에 어설프다.
어차피 배포용도 아니고 혼자 사용하는 용도로 개발했으므로 이정도면 만족한다.
이미지를 보면 알 수 있듯이 현재 글을 위 에디터에서 API와 연동하여 작성하고 있으며
마크다운에 어느정도 익숙하다보니 편하기 그지 없다.

개인적으로 데이터 관련 된 글을 자주 쓸것이기에 차트 부분도 해당 에디터에서 기능을 커스텀하여 넣었으며
아래와 같이 보여줄 수 있다.

{
      "type": "bar",
      "data": {
      "labels": ["ㅇㄹㅇ", "ㅁㄴㅇㄹ", "ㅁㄴㅇㄹ", "ㅁㄴㅇㄹ", "ㅁㄴㅇㄹ", "ㅁㄴㅇㄹ"],
      "datasets": [{
          "label": "안녕",
          "data": [12, 19, 3, 5, 2, 3],
          "backgroundColor": [
              "rgba(255, 99, 132, 0.2)",
              "rgba(54, 162, 235, 0.2)",
              "rgba(255, 206, 86, 0.2)",
              "rgba(75, 192, 192, 0.2)",
              "rgba(153, 102, 255, 0.2)",
              "rgba(255, 159, 64, 0.2)"
          ],
          "borderColor": [
              "rgba(255,99,132,1)",
              "rgba(54, 162, 235, 1)",
              "rgba(255, 206, 86, 1)",
              "rgba(75, 192, 192, 1)",
              "rgba(153, 102, 255, 1)",
              "rgba(255, 159, 64, 1)"
          ],
          "borderWidth": 1
      }]
      },
      "options": {
        "responsive": true,
        "legend": {
          "position": "top"
        },
        "title": {
          "display": true,
          "text": "테스트 차트입니다"
        }
      }
    }

{
      "type": "bar",
      "data": {
      "labels": ["ㅇㄹㅇ", "ㅁㄴㅇㄹ", "ㅁㄴㅇㄹ", "ㅁㄴㅇㄹ", "ㅁㄴㅇㄹ", "ㅁㄴㅇㄹ"],
      "datasets": [{
          "label": "안녕",
          "data": [12, 19, 3, 5, 2, 3],
          "backgroundColor": [
              "rgba(255, 99, 132, 0.2)",
              "rgba(54, 162, 235, 0.2)",
              "rgba(255, 206, 86, 0.2)",
              "rgba(75, 192, 192, 0.2)",
              "rgba(153, 102, 255, 0.2)",
              "rgba(255, 159, 64, 0.2)"
          ],
          "borderColor": [
              "rgba(255,99,132,1)",
              "rgba(54, 162, 235, 1)",
              "rgba(255, 206, 86, 1)",
              "rgba(75, 192, 192, 1)",
              "rgba(153, 102, 255, 1)",
              "rgba(255, 159, 64, 1)"
          ],
          "borderWidth": 1
      }]
      },
      "options": {
        "responsive": true,
        "legend": {
          "position": "top"
        },
        "title": {
          "display": true,
          "text": "테스트 차트입니다"
        }
      }
    }

위와 같이 특정한 양식안에 chartjs에서 요구하는 json 형태로 입력하면 차트도 자동 작성이 된다.
개발은 프론트는 vue2, 백앤드는 github에 공개되어있는 php tistory api를 일부 커스텀하였다.

해당 에디터의 성능 설명은 다 되었으니 다음 글부터는 개발, 그리고 티스토리 API 문서의 문제점 등을 작성하려 한다.