개발에 대한 두서 없는 이야기

개발에 앞서 우선 이 글을 보는 사람은 궁금하지 않겠지만 쓰는 사람은 쓰고 싶은 내용이라 쓴다. 스킵해도 된다. 개발을 하는 이유는 없다. 문득 하고 싶어서 하게 됐으며, 할 수 있을것 같기도 해서였다. hwp 포맷은 국내에서 자주 쓰이는 포맷이지만, 나같은 일부 개발자들에게는 잘 쓰지도 않고 욕을 하는 포맷 중 하나인데, 가장 큰 이유는 고립 된 포맷이라는 점이다. 개발자들의 경우 고립 된 파일, 고립된 플러그인, 고립된 라이브러리 등은 사용하기 어렵다. 프로그램 자체의 이슈나 개발 도중 관련 이슈에 대해 해결하기 어렵고, 신뢰성도 그만큼 보증이 되지 못하기 때문이다. hwp를 사용하는 문서편집기인 한글은 한글을 지원하는 편집기 중 잘 만든 편집기이긴 하나, 그 포맷이 오랫동안 공개되어있지 않았었고, ..

기존의 방식은 스크롤 이벤트때 원하는 엘리먼트의 좌표, 스크롤의 위치 등을 구하여 더하고 뺴서 해당 값 이상이거나 이하일때 등의 복잡한 수식을 사용해야 한다. 하지만 IntersectionObserver를 활용하면 그러한 복잡한 이벤트 없이 활용 가능하다. let options = { root: document.querySelector('#scrollArea'), rootMargin: '0px', threshold: 1.0 } let observer = new IntersectionObserver(callback, options); root는 해당 이벤트를 받아들일 엘리먼트, roomtmargin은 해당 이벤트를 받아들일 엘리먼트가 보이기 전에 이벤트를 표시하고 싶을때, 그리고 threshhold는 해당..

vscode 소개하는 단축키는 글의 최하단에 있는 하이라이트 코드에서 테스트 가능하다. ctrl + [ ctrl + ] 아래의 하이라이트 코드에서 테스트 해볼 수 있다. Alt + Shift + 수직방향키 해당 커서에 있는 라인을 그대로 복사한다. 아래키를 누르고 복사하면 복사한 라인에 커서가 이동하고, 위 키를 누르면 복사한 원본에 커서가 유지된다. Ctrl + 좌우방향키 단어, 공백 등을 기준으로 커서가 이동된다 Shift와 함께 누르면 한번에 선택 된다. Ctrl+Alt +수직 방향키 멀티 커서 기능. 커서가 여러개 생겨 여러라인에 동일한 텍스트를 써야 할때 유용하다. Ctrl + D 특정한 영역 블록선택 후 누르면 해당 영역과 동일한 텍스트에 멀티커서가 생긴다. 동일한 텍스트 뒤나 앞 부분에 무언..

sudo find / -type s | grep mysqld.sock 로 찾아봐도 mysqld가 없다고 나오는 경우가 있다. sudo mkdir -p /var/run/mysqld sudo chown mysql /var/run/mysqld/ sudo service mysql restart 위의 명령어로 실행하면 mysql을 실행할 수 있다.

이미지가 흘러가는 이미지가 아닌 해당 영역의 전체 배경을 채우는 이미지가 돌아가야 할때. 이미지가 양 끝이 이어지는 이미지로 하게 되는 이미지의 경우 높이를 지정해주고 keyframe으로 애니메이션을 주어야 한다 .test{ background:url('test.png'); width:100%; height:1200px; position:absolute; top:0; background-size : 100% 1200px; //좌우넓이는 100%로 높이는 이미지의 원래 높이를 주자 left:0; animation: displace 3s linear infinite; } @keyframes displace { from { background-position: center 0; } to { ..

기능은 완성되지 않고 이것저것 잡기능만 넣고 테스트하는 상태 기존 ToastEditor로 작성할때 차트가 작성 되었으므로 차트 기능을 넣느라 한세월. 이 차트 기능을 표로도 쑤셔넣고 싶어서 작업하다가 일단 보류(어차피 나만 사용할거라면 json으로 입력해도 불편함이 없다는 큰 핑게거리가 생겼다) 추가하고 싶은 기능은 늘어만 나고.. 개인적으로 velog의 인터페이스를 좋아하는데 티스토리에서도 꾸미고 싶었다. 특히 우측사이드뷰에 목차가 생성되어 플로팅 스크롤로 따라오는것이 상당한 편의라고 보았는데 일부 구현해보았다. 클릭했을때 해당 영역으로 이동하는거까지 구성했고, h1태그의 크기에 따라 목차의 들여쓰기가 달라지는것까지 구현했다. 해당 영역을 볼때 해당 영역에 볼드가 되어 보고 있는 영역을 표시 하는 부분..

에러 투성이 2편의 글에서 봤듯이 에러 투성이다. 제대로 코드하이라이트 기능 및 차트가 되지 않으며(안될거라 예상해서 다행이다) 에디터도 기본 기능만 넣어논형태이고 편집의 편의성을 위해 넣어논 풀스크린 기능도 제대로 동작하지 않는다. 그리고 급조한 레이아웃들이 대부분 깨진다. 또한 티스토리에서 이미 작성한 글들을 불러올 때 깨지는 부분이 많다. 왠지 모르게 이러한 자잘한 문제를 잡는게 여태까지 개발해온 시간보다 더 걸릴거 같은 느낌은 왤까..

이제는 실사용 단계. 모나코 에디터를 마크다운 에디터로 포팅하는 작업은 오래걸릴 듯 오래걸리지 않아 생각보다 빠르게 작업되었고, 이미지 업로드의 경우도 직접 만든 에디터다보니 커스텀하거나 함수를 추가하는게 쉬워 그리 오래 걸리지 않았다. 코드하이라이트는 적용되어있고, 차트까지 처리하면 되는데 tui editor에 넣었던 chartjs는 넣지 않고 apexchart만 넣을 에정이다. 에디터 작성쪽에서는 어느정도 구현되었으나 실제로 보여지는 스크립트 단계처리부분이 핵심이다. 기존 코드로 돌아갈수는 있게 대충 때려 박았는데 될지 안될지 모른다. 어설프게 개발을 하면서 느낀건데. 실행이 될거라 생각하고 빌드하면 안되서 문제, 또 안될거라 생각하고 혹시나 하며 빌드 했는데 되서 문제인게 바로 개발이다. 이미지 업..

티스토리 블로그를 시작하면서, 앞서서 작성한 TISTORY APi 관련글에서도 이야기 했지만, 에디터가 불편했다. 에디터 중엔 괜찮은 성능을 발휘하는 에디터인 TOAST UI EDITOR를 적용했고 큰 불만은 없고 사실 어느정도 만족하지만, 내가 만든걸 아닌걸 갖다 붙여 쓰는것은 항상 만족이 안되는 부분이 있기 마련이다. 그리고 더 좋은것을 알고 있다면 더더욱말이다. 개발을 어느정도 하는사람이라면 왠만한 텍스트에디터는 웹이든 윈도우 프로그램이든 맥용 프로그램이든 아쉬운점이 있을것이다. vs-code, inteliJ 등에서 지원하는 강력한 편집 기능에 익숙해져있고(탭, 멀티커서 등..) 이러한 것은 개발 툴에서나 지원하지 일반적인 문서 편집기에서는 지원하지 않기 때문이다 그러던 도중 vscode의 기반이 ..

모나코 에디터는 vscode의 기반이 된 에디터이다. 마이크로소프트에서 공개해놓았으며 간단한 온라인편집기로도 사용할 수 있다. 마이크로소프트에서 만든것 답게 속도나 구동에는 문제가 없지만 기능이 많은 만큼 기본용량은 큰 편이다. 문득 이것이 코드하이라이트로 써도 괜찮다는 생각이 들었다. 다소 로딩할 때 지연은 되지만 실행되면 그 어느 코드하이라이트보다 더 좋은 퍼포먼스를 보여준다. 야호 window.onload = function () { require.config({ paths: { vs: "https://cdn.jsdelivr.net/npm/monaco-editor/min/vs" } }); var chart = document.querySelectorAll('pre.lang-chart'); chart..