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

VScode 두번째 커밋 약 3달전에 커밋이 완료됐고 1월달에 반영된것을 이번달 초에나 알게 됐고, 테스트를 해보았더니 버그가 있었다. 버그 영상 VsCode 윈도우 버그 맥 버그 맥과 윈도우의 엔진(VSCode는 크로미움 기반의 일렉트론을 쓴다) 맥 정책때문에 브라우저 엔진의 제한이 있어, 동일한 크롬이더라도(사용자에겐 거의 동일한 퍼포먼스로 차이가 거의 없다) 개발시에는 하나의 테스트 기기만 두고 개발하면 거의 99%(100%) 버그가 난다. 간단한 부분만 수정하니, 문제 없을거라 생각했는데 문제가 있었다. Mac에서는 KeyEvent에 Process가 없다. Process로 구분했는데, 대신 isCompsed는 동일한 호환성을 지닌것을 확인해 해당 코드로 수정하였다. 그리고 2일정도 코드 분석하여 ..

정말 사소한 버그 과거에 쓴 vscode를 사용하던 중 toggle screen cast 모드에서 한글이나 중국어, 일본어 같은 ime(조합형 문자)가 제대로 표시되지 않는 버그가 있었다. 사실 버그라고 하기에도 애매한게 toggle screen cast는 개발자가 입력한 키를 간단한 토스트메시지로 보여주는 기능이며 실제로 개발시에 자주 쓰지 않는 기능이다 개인적으로 라이브 코딩으로 강의 할 일이 생겨서 해당 기능을 사용하려고 하던 중 발견했고, 코드를 확인해보진 않았지만 그렇게 고치는게 어렵진 않겠구나 라는 생각. 그리고 vscode에 기여해보고 싶다는 생각에 한번 도전해보았다 일렉트론 기반에 typescript로 만들어졌다는건 들었다. 모르긴 몰라도 나도 그냥 코드 보면 분석은 할 수 있겠지 라는 자..

backgroud.js -> serviceworker.js v2의 백그라운드.js가 serviceworker.js로 바뀌었다. 기본적인 기능은 비슷하나, 서비스워커의 경우 일정시간 동작하지 않으면 죽어버린다. 만약 서비스워커를 계속 살려둬야하는 경우가 있으면 주기적으로 서비스워커에 메세지를 보내야 한다 var wakeup = function(){ setTimeout(function(){ chrome.runtime.sendMessage('ping', function(){ }); wakeup(); }, 10000); } wakeup(); 와 같은 코드를 이용해서. IFRAME 문제 v3로 넘어오면서 webrequest 부분이 많이 바뀌었고, declarativeNetRequest로 대체하여 사용하여야 한다...

씨발. 물론 프로그래머의 기본 소양은 백업이고 백업이라 하였지만, 욕 밖에 안나오는 상황이다. window나 mac은 https://www.docker.com/ 위의 링크를 활용하여 도커를 깔아서 사용할 수 있는데 이 경우 mac에 깔아서 사용하고 있었다. 잘 쓰고 있었으나, 계속 업데이트 하라는 경고메시지가 느낌표가 너무 거슬려서 업데이트 후 실행. 실행이 안되네? 설정파일이 잘못 됐다고 도커에서 알려준다. 그리고 자동복구 실행 이미지 싹 다 사라짐. 심지어 복구도 안된다. 개인적으로 1달 넘게 코딩하던 리액트 작업물이 다 날아갔다. 아무리 개발시 백업이 필수라지만 일반적으로는 해당 경로에 해당 작업물이 있는지 모르고 지우거나, 옮기는 과정에서의 실수, 깃허브 명령어 실수 등이라면 내 손가락이라도 탓하..

기존의 방식은 스크롤 이벤트때 원하는 엘리먼트의 좌표, 스크롤의 위치 등을 구하여 더하고 뺴서 해당 값 이상이거나 이하일때 등의 복잡한 수식을 사용해야 한다. 하지만 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 특정한 영역 블록선택 후 누르면 해당 영역과 동일한 텍스트에 멀티커서가 생긴다. 동일한 텍스트 뒤나 앞 부분에 무언..

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

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

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

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