즐겨찾기 관리 프로그램을 만들다.

예전 포스팅 에서 공개했던 프로그램을 완성했다. 사실 완성이라고 하기엔 뭐하고 쓸만할 정도가 되었다.

예전에 공개한 버전에서 UI를 조금 바꾸고 변경했다.
아직 미흡한 부분이 남아있지만…
SML을 만들면서 몇 가지 목표가 있었고, 그 중 한가지가 내가 필요해서 만들었으니 나에게 맞는 기능을 만들어 써보자 였다.

사실 프로그래머 개발자 이런게 뭐 별거인가?
그냥 내가 필요해서 만드는게 그 직업군이지.

무튼 그래서 내가 만들었고, 현재 잘 쓰고 있다.
노션에 정리할 때 보다 더 편리한거 같다.

공개는 Github 에 해뒀고, 다운로드는 릴리즈 페이지에서 가능하다.

소스코드는…정리좀 하고 올릴 예정이다.
너무 하나에 몰아두고 짜서 보기 어렵다…
뭐 누가 보겠느냐 싶겠지만 그래도 추가 기능 개발 및 향후 내가 만들 웹 서비스에 연동을 위해서 몇 가지 사전 작업을 해둬야 해서…

곧 리펙토링 및 코드 정리가 끝나면 오픈할 예정이다.
참고로…
난 Javascript 라는것을 이번에 처음 공부하며 써보기 시작했다.
주로 Java 백엔드만 짜다가 제대로 공부해서 해보는 중이다.
뭐 이것도 사실 제대로 공부 안하고 일단 부딪쳐 보자 식으로 해본거지만…

Node를 공부하다가 일렉트론을 생각하게 되어 잠시 샛길로 빠져 만든 것이다.
그래서 코드가 조잡하고 그럴 수 있다. (밑밥?)
일렉트론…좀 더 제대로 공부하면 더 좋은(?) 결과를 낼 수 있었지만…
이번 SML은 사실 구동과 기능의 정상 작동에 포커스를 맞춰서 잘못 개발했을 수도 있다.

여담이지만 이걸 마지막으로 일렉트론은 접어둘 생각이다.
왜냐하면 곧 메인 개발을 해야 할 부분이 Node쪽이라서 그렇다.

정리하자면…소스코드는 정리하고 공개할 예정이며…

코드 오픈의 이유는 필요한 사람이 직접 추가 기능을 개발해서 쓰라는 의미로 오픈하는 거니 코드의 품질이나 개발 방법론은 잠시 접어두자.

뭐로 만들고 구성이 어떻게 되나?

일렉트론으로 만들었고, 화면단은 Bootstrap 5를 이용해서 만들었다.
원래는 지금 공부하는 리엑트를 적용해서 해볼까 했는데 이거 적용해서 하려면 너무 오래 걸릴거 같아서 그냥 부트스트랩으로 만들었다.
그리고 jQuery를 이번에는 쓰지 말자라고 결심을 해서 쓰지 않았다.
덕분에 바닐라.js ? 그냥 순수한 자바스크립트를 바닐라라고 부르는 것도 이번에 처음 알았다 ’_‘;;

디비쪽은 SQLite를 사용했다.
이런 작은 프로그램에서 쓰기엔 최고다.

백업과 복원을 위해서 JSON 형식으로 처리했다.

그 외 특이한 기술은 없고 Select 처리를 위해 치리오? 발음을 몰라서… cheerio를 사용했다.
알람창 이쁜거를 위해 sweetalert2를 사용했다.

기능은?

간단하다.
핵심 기능은 링크 데이터의 CRUD 이게 끝이다.
부가 기능으로 페이징과 검색정도?

데이터 등록과 수정은 비슷하니 굳이 서술하지 않겠다.
다만 태그 기능에 대해 약간 부연 설명을 하자면…

위는 데이터 추가할 때 나오는 사진인데 모달 하단에는 태그를 위한 두 개의 선택 옵션이 있다.
하나는 기존에 추가된 태그를 선택하는 select 이고, 하나는 새로운 태그를 추가할 때 쓰는 input 이다.
이거 두개를 통합해서 사용하는 select 를 찾아봤는데… 죄다 jQuery 의존이 강하게 엮여있거나 vue, react 등으로 개발된 것들이었다.

내가 직접 개발하기엔 시간도 오래 걸리고 해서 결국 저렇게 뻘짓으로 개발해뒀다.
혹시 더 좋은 라이브러리나 방법이 있다면 공유 해주시면 감사하겠다.

백업의 경우 현재 SQLite에 저장된 모든 데이터를 JSON 파일로 뽑아서 특정 경로에 저장한다.
Mac의 경우 자신의 홈디렉토리에 SML 디렉토리에 저장한다.
그런데 윈도우는 내가 안써봐서 이상한 경로에 저장하는 듯 한다.

appData였나 무튼 추가하면 알림에 어느 경로에 저장되는지 표시는 뜨게 해두었다.

윈도우 문제

윈도우를 내가 안써서 잘 모르겠다.
일렉트론 빌드로 윈도우용 exe를 만들었고, 설치할 때 c:\program files 인가 경로로 깔면 권한인가 뭐 때문에 정상적으로 안되는거 같았다.
그래서 테스트 환경에서는 d:\ 에 새로운 경로를 만들고 거기에 설치를 하니 잘 되었다.
그런데 설치 완료 후 아래와 같이 윈도우 디팬더에서 트로이잔이 나온다.

왜 이런지 나도 잘 모르겠지만…
왠지 개발자 서명이 안되어서 그런게 아닐까 싶다.

그래서 github Readme 에도 찝찝한 사람은 직접 빌드해서 쓰라고 명시해뒀다.
그리고 조만간 코드 오픈도 되니까 뭔가 문제가 있는 코드가 있었다면 메일이나 다른 채널로 알려주지 않을까 싶다 ㅎㅎ

그래서 결론은?

이번 프로그램을 배포 후 몇 가지 건의를 받은 것도 있는데 이 부분은 개발을 해서 버전 업을 할 예정이다.
거기까지 해두고 내가 만들려던 서비스를 만들어갈 예정이다.
뭐 이미 너무 아이디어가 공개되어 있어서 오픈할까 했지만 그래도 직접 만든 후 오픈하는게 좋지 않을까 싶어서 언급을 안하려 한다.

깃허브 릴리즈 노트 같은것도 이쁘게 꾸며보고 싶었지만…
시간이 부족해서…
그냥 여기까지만 해두려 한다.

해당 프로그램이 유용했다면 Github의 Star 한번 부탁드리고, 의견이나 버그 등이 있다면 메일로 부탁한다.
이 프로그램이 유용했기를 바라면서 다음 버전으로 인사드리겠다.