본문 바로가기

컴퓨터 공부37

자바스크립트를 사용해서 나 혼자 쓰는 다이어리 만들기 4 - 작성 목록 보여주기 저번엔 내용을 작성해 제출하면 JSON파일에 내용을 저장하는 걸 구현했다.파일을 열어보면 저장된 내용을 확인할 수 있지만 프로그램이 켜져 있는 상태에서 내용을 볼 수 있어야 한다. 먼저 electron의 공식 API 문서에서 사용할 api를 찾아봤다.https://www.electronjs.org/docs/latest/api 그리고 파일 내용을 읽기 위해 ipcMain.handle을 사용했다. 공식문서에서 알려준 방법으로 .handle을 main.js에서 사용하고 preload.js에서는 invoke를 사용했다.renderer가 JSON파일 내용을 읽어달라고 main.js에게 요청하는 느낌이다. 실질적으로 중요한 함수를 작성했다. 작성했던 내용이 있다면 제목과 내용을 볼 수 있을 것이다.. 2025. 4. 29.
자바스크립트를 사용해서 나 혼자 쓰는 다이어리 만들기 3 - 작성 기능 구현 저번엔 electron 프레임워크를 설치해 기본적인 실행창을 만드는 데 성공했다.⭕자바스크립트를 사용해서 나 혼자 쓰는 다이어리 만들기 2 - 프레임워크를 사용 이번엔 제출 버튼을 누르면 제목과 내용을 json파일로 만드는 것을 목표로 했다. json파일을 만들기 위해 node.js 모듈인 path, fs을 사용하는데 electron의 보안이슈로 preload 기능을 사용해야 된다. https://www.electronjs.org/docs/latest/tutorial/tutorial-preloadhttps://www.electronjs.org/docs/latest/tutorial/ipc 위 링크의 튜토리얼을 참고하여 작성했다. ipcRenderer.send를 사용해 데이터를 보내고 main... 2025. 4. 18.
자바스크립트를 사용해서 나 혼자 쓰는 다이어리 만들기 2 - 프레임워크를 사용 저번에 exe 파일로 실행하면서 데이터를 JSON 파일로 받는 게 좋다고 생각해 electron이라는 프레임워크를 사용하였다.자바스크립트를 사용해서 나 혼자 쓰는 다이어리 만들기 1 electron은 node.js 기반에 데스크톱 앱을 만들 수 있다. https://www.electronjs.org/docs/latest/링크에서 튜토리얼과 관련 문서들을 볼 수 있다. 열심히 봐야겠다! 먼저 설치를 해줬다. 앱을 생성해 주는 코드다. index.html의 내용을 보여줄 것이다. 잘 나온다! 수첩처럼 내용을 입력하기 위해 입력폼을 작성해 줬다.아직은 작동되는 기능은 아니다. 작동되는 함수를 만든다면 제목과 내용을 제출할 수 있을 것이다. 제출 기능은 다음에! 2025. 4. 16.
자바스크립트를 사용해서 나 혼자 쓰는 다이어리 만들기 1 컴퓨터를 하거나 책을 읽으면서 메모를 하는 건 좋은 습관이라고 한다.그래서 손바닥 만한 수첩을 들고 다니며 사소한 것 들을 적고 다니는데, 이 내용들을 정리할 때 키보드를 두드리며 정리할 수 있으면 좋겠다는 생각을 했다.   기본 메모장도 있고, 기능 많고 질 좋은 프로그램도 많지만 나 혼자 쓸 수 있는 프로그램을 갖고 싶어 시작해 본다!   먼저 기본적인 기능인 "제목", "내용"을 쓸 수 있게 해 봤다.작성   그리고 쓴 내용은 나중에 또 봐야 하니 나에겐 2가지 선택권이 있었다.하나는 localStorage를 사용해 브라우저에 임시로 저장하는 방법과, JSON 형식으로 내보내서 파일로 저장하는 방법이다. 브라우저에서 기록하는 거보다 exe파일로 구동되는 걸 원하기 때문에 후자를 선택했다.. 2025. 4. 13.
728x90