본문 바로가기

프로젝트/Chillog (Blog)

 (11)
블로그 사용성 개선 (ver 1.7.5) 서론 아직도 많이 부족한 블로그지만 조금이라도 나아졌으면 해서 부족한 실력을 쥐어 짜 나름의 큰 업데이트를 해 봤다. 기존의 블로그는 모바일, 데스크탑, 태블릿에서 모두 동일한 인터페이스와 사용성을 가졌었다. 아직도 고민이 많이 필요한 부분이지만 태블릿부터 대화면의 장점을 충분히 활용하지 못하는 비효율적인 인터페이스를 가지고 있다고 생각해 조금 바꿔 보기로 했다. 본론 Cols, Row의 이해 이미 해당 부분은 갤러리 게시판의 양식을 만들기 위해 진행했던 부분이지만 역시나 따라만 했을 뿐 정확히 이해하지 못했던 것 같다. 이걸 이해하는데 한참이나 걸려버렸다. mdi-heart {{item.likeCount > 9 ? '9+' : item.likeCount}} mdi-fire {{item.title}} 위..
toast ui editor 3.0이 출시되었다. 본 블로그에 탑재 된 toast ui editor (이하 tui editor)가 버전업 되었다. 대충 쓰는덴 문제가 없으나 미천한 영어실력이라 대충 내가 필요한 기능들을 이해한 대로 정리하고자 한다. 경량화 기존의 마크다운 에디터는 코드미러와 토스트마크업을 동시에 띄우고 입력되는 데이터를 다른 API들을 통해 동기화 했다고 한다. 둘이 데이터를 다루는 방식이 다르기 때문에 같은 코드를 넣더라도 한 쪽에서 이를 인식하려면 꽤나 많은 과정을 거쳤던 듯 하다. 당장 렉도 많고, 글이 글어지기라도 하면 입력 지연, 멈춤 등이 발생하니 사용성이 개선 되었다니 반가울 다름이다. 커스텀 마크다운 문법 지원 GFM기반의 기본 마크다운 문법을 지원해 다채로운 작성이 불가능했던 것이 현실이다. $를 사용해 커스텀 마크다운..
해결해야 할 문제 뷰어에서 태그를 제대로 불러 오지 못하는 문제. 뷰어와 검색창에서 태그를 제대로 불러오지 못하는 문제가 있다. 운영 초기엔 이미지 위주로 업로드 되고, 뷰어에서 이미지 태그만 보이다보니 이미지를 불러오지 못하는 문제인가 했는데, 인용구들이 비슷한 문제가 있다는 걸 최근에 알아차렸다. 뷰어는 미리보기의 형태로 제공이 되고 있어 데이터 소모를 막기 위해(알게 모르게 이 블로그는 돈을 좀 쓰고 있다.) 글자수를 대충 끊어서 절약(?) 했는데, 아마 이 기준이 문제인 것 같다. 태그가 등장하면 태그까지만 불러온다. 태그가 등장하면 이후 부분을 날려버린다. 아마 어느 방법이든 골치가 좀 아플 듯... 오류처리 테스트와 작업 중엔 항상 콘솔로 오류를 확인 하고 있기 때문에 몰랐는데, chillog는 현재 제대로 오..
Google 검색에 등록하기 (#1) 서론 아직까지 chillog는 웹에 노출이 되지 않는다. 여태 올린 포스팅들은 모두 나 혼자 떠드는 이야기에 그치지 않았다는 것... 이전에 운영하던 네이버 블로그의 경우 네이버엔 자동으로 노출이 됐고, 역시 구글에서도 자동으로 노출이 되니 따로 신경 쓰지 않아도 유입이 됐다. chillog도 소통이 위해선 언제까지고 이렇게 폐쇄적으로 운영할 순 없는 노릇이다. 다만 chillog처럼 코드부터 호스팅까지 전부 하는 경우엔 이야기가 좀 다른데 오늘은 그 첫번째 이야기이다. 본론 스승님의 블로그의 경우 site map이란 것을 등록해야 했었는데, 아마 같은 강의를 쫒아온 내 경우에도(SPA) 필요한 과정으로 보이니 각오는 하고 있다. 우선은 가장 큰 검색 엔진인 구글에 등록을 해 보고, 정확이 어떤 반응이 ..
Toast UI Editor (tui editor) plugin 적용하기 (#2) 서론 지난 글에서 tui editor에 plugin을 적용해 봤었다. 다만 해당 plugin은 css가 없는 단순 기능 추가였어서 현재 코드의 문제가 드러나지 않았었는데 이번에 적용하는 code-syntax-highlight에서 아주 대차게 고생시켰다. 해당 플러그인은 codeblock에서 문법 강조 효과를 주는 플러그인으로, 블로그 글도 올리고(js, vue) swift도 포스팅도 올리고, 후에 올릴 다른 프로젝트에 관한 글들까지 생각하면 문법적으로나 시각적으로나 구별이 좀 필요할 것 같다고 생각이 들었다. 책을 안 읽은 사람보다 한 권만 읽은 사람이 더 무섭다고 했던가... 어줍잖은 지식으로 기고만장하면 어떻게 되는지 뼈저리게 느꼈다. 이번 포스팅은 tui editor의 기본 플러그인인 code-sy..
Toast UI Editor (tui editor) plugin 적용하기 (#1) 서론 지난 글에서 테스트 중에는 크게 불편함을 느끼지 못했던 에디터의 몇몇 문제에 대해 이야기 한 적이 있다. ( https://chillog.page/board/chillog/1617855589867 ) 시각적인 부분과 몇몇 간단한 문제들은 당일, 익일에 걸쳐 수정을 완료했지만, 아마 부족한 내 실력과 더불어 '문서화가 잘 되어 있지만 잘 되어 있지 않다.' 라는 어느 분이 지적한 문제가 겹쳐 상당히 해멘 Toast UI의 vue에서의 plugin 적용 법에 관한 이야기 이다. 이번 글에서 적용한 plugin은 tui markdown editor에서 셀 병합 기능을 추가해 주는 plugin으로, 학습 내용을 정리하던 중 너무 불편해 이걸 해결하지 않고는 차마 견딜 수가 없었다. 따라하고 있던 fkkme..
왠진 모르겠지만 첨부한 사진이 날아가는 문제. 서론 이전 글의 문제를 안 것과 동시에 발견한 문제인데 테스트 후 '진짜'문제라는 것을 확인했다. 올린지 좀 된 글들의 일부 사진을 불러오지 못하는 것을 확인했고, 그런 글들의 사진을 전부 다시 등록 했다. 그리고 다시 불러오지 못하는 것을 확인 했는데, 날아갈 거면 다 날아가던지... 왜 어떤 건 멀쩡하고 어떤 건 날아가는지... 당췌 이해가 안 간다. 본론 바로 이런 식으로 날아 가는데 webp, jpg만 남고 png가 주로 많이 날아갔길래 그런 문젠가 보다... 라며 좀 편해졌을 텐데 그냥 무작위로 저런 현상이 생긴다. (슬슬 그냥 티스토리나 할 걸 그랬나 싶기도 하고...) 조금 더 케이스가 쌓여야 감이 잡힐 것 같다.
운영하다보니 날 괴롭히는 editor 문제 서론 사용상의 문제는 간단하게 동작을 검증하는 테스트 단계에선 알아차리지 못하는 경우가 많다. 이번 문제는 현재 사용하고 있는 toast editor(tui editor)를 사용하면서 파악한 문제들이다. 2020년 3월 기준 2.0으로 업데이트 된 에디터로, 무료, 실시간 마크다운과 위지웍 동시 지원을 자랑하는 에디터이지만 간단하게 사용하면 문제 없어 보이지만 당장 검색만 해봐도 사용하기 불편하다는 것을 알 수 있다.🥲 본론 viewer에서의 마크다운 태그 문제 글의 최 상단에 이미지가 들어가는 경우엔 문제가 없지만 중간에 이미지가 들어가는 경우 사진과 같이 마크다운 이미지 태그가 그대로 노출 되는 것을 볼 수 있다. 마크다운, 위지웍 전환 간의 양식 '개박살' 문제 마크다운 문법은 간단한 문법의 조합으..
Firebase Hosting 도메인 연결 후 google authentication 인증 문제 서론 우여곡절 끝에 새 도메인을 연결 했지만 실제 사용 하는 데 문제가 하나 있다. 바로 그나마 만들어 둔 소셜 로그인(google auth)가 제대로 동작하지 않는 다는 점인데, 완전 난감할 수 밖에 없다. 본론 증상은 이러하다. 새로 연결 한 도메인으로 블로그에 접속 하는 데 까진 문제가 없지만, 글을 작성하고, 관리하기 위한 로그인 과정에선 문제가 발생한다. 대충 해석하면 '이 도메인은 이 동작을 사용하기 위한 인증이 되지 않았다. 다음으로 가서 추가해라.' 라는 뜻으로 일단은 시키는 대로 해 보는 게 좋다. 'firebase console > auth section > sign in method' 로 이동하자 차근차근 보다 보면 누가 봐도 관련 있어 보이는 부분이 있다. 도메인 추가를 누른 뒤 연..
Firebase Hosting 도메인(domain) 연결하기. 서론 블로그를 임시 오픈하긴 했지만 아직 남들에게 보여주기 민망한 수준이다. 컨텐츠나 대쉬보드의 경우엔 시간이 해결해 줄 문제이지만 가장 간단한 방법으로 도메인(domain)을 생각해 봤다. 쉽게 말하면 naver.com 같이 서버 ip를 대신하는 주소를 도메인이라고 하고. 이 도메인은 한 사람이 할당 하면 다른 사람을 사용하지 못하게 된다. 일반인들은 모르겠지만 나나 여러 개발자들의 경우 자신만의 사이트나 블로그를 갖고, 자신만의 도메인을 하나쯤 소유하고 싶은 욕구가 생긴다. 하지만 이 도메인을 사용하는 것은 일정량의 비용이 들고, 엄두도 못 내던 찰나 올 해에 하나 장만해 봤고, 이를 실질적으로 사용하는 과정을 적어 본다. 본론 내 블로그는 vue.js를 사용하고 서버 및 기능은 firebase에 의..

티스토리툴바