dev-dock

Eletron으로 Desktop App을 만들고자한다.평소에 이리저리 분주하게 일하는 편이지만 요즘 들어 개발 문서를 작성하다가도 검색하고, 참고해야될 내용을 찾을때도 Chrome 브라우저를 열어 검색해서 URL 붙여넣기, 아키텍쳐 예시 이미지 검색해서 붙여넣기 등..

이 글은 2026-07-24에 게시한 기존 글을 현재 프로젝트 기준에 맞춰 보완하는 후속 원고다. 기존 글의 제목은 그대로 두되, 기술 명칭은 Electron으로 통일한다.개발 문서를 작성할 때 링크 하나, 아키텍처를 설명할 이미지 하나가 필요해도 보통은 에디터를 떠난

Electron 템플릿을 만든 뒤 가장 먼저 한 일은 화면을 예쁘게 만드는 일이 아니었다. 어떤 기능을 만들지, 어디까지를 MVP로 볼지, 보안 때문에 절대 허용하지 않을 것은 무엇인지 문서로 먼저 고정했다.Dock은 로컬 파일과 외부 검색 결과를 함께 다룬다. 이 조

초기 Electron Forge 템플릿은 저장소 루트에서 시작했다. 작게 시작할 때는 편하지만, Dock은 앞으로 문서, 자동화 스크립트, 공용 패키지, 앱 확장 가능성을 함께 관리해야 한다. 그래서 앱 하나를 실행할 수 있다는 현재 상태와, 저장소가 맞춰야 할 구조를

구조 이동이 끝난 뒤에는 곧바로 편집기를 넣지 않았다. 먼저 React를 안전하게 올릴 수 있는지, 타입 검사와 포맷 검사가 재현 가능한지 확인했다. 이 단계의 목표는 화려한 화면이 아니라 ‘이후 기능이 쌓일 바닥’을 만드는 것이었다.npm run typecheck에서

이 글은 다음 구현을 설명하는 계획 글이다. F4의 항목들은 아직 완료라고 표기하면 안 된다. 구현과 검증이 끝나면 결과와 명령을 이 글에 보완한다.React 앱 셸까지 연결됐지만, 아직 Renderer와 운영체제 권한 사이의 보안 경계는 기본 템플릿 상태다. Dock

Dock은 아직 MVP가 아니다. 현재 완료된 것은 Electron 기반 저장소 구조와 React 앱 셸, 그리고 그 다음에 기능을 안전하게 쌓기 위한 작업 순서다. 이 글은 앞으로 무엇을 어떤 순서로 만들지와, 저장소 문서와 Velog 기록을 어떻게 일치시킬지 정리한

보안 설정과 단위 테스트를 추가한 뒤에는 꼭 남는 질문이 있다.“각 조각은 맞는데, 실제 앱을 켰을 때도 Main·Preload·Renderer가 같은 규칙으로 연결될까?”Dock에서는 이 질문을 Playwright의 Electron API로 확인했다.이번 글은 기능을

개발 모드에서 창이 열리고 E2E가 통과해도, 배포용 앱이 같은 방식으로 동작한다는 보장은 없다. Dock은 Vite로 Main·Preload·Renderer를 번들링하고 Electron Forge가 ASAR 기반 package를 만든다. 이 과정에서 경로나 prelo

Dock에 파일 열기나 Markdown 편집 기능을 바로 붙일 수도 있었다. 하지만 그 전에 사용자가 어떤 흐름으로 문서를 찾고, 쓰고, 미리보고, 명령을 실행하는지를 담을 화면 구조가 필요했다. 그래서 M1에서는 권한을 추가하지 않고 Application Shell부

이번 단계에서는 Dock 화면에 실제 로컬 문서 폴더를 연결했다.사용자는 폴더를 선택하고, Markdown 파일 목록을 확인하고, 문서를 열어 편집한 뒤 저장할 수 있다. 다만 파일 시스템을 Renderer에 직접 열어 주지는 않았다. 파일 권한은 Main 프로세스가

Markdown 파일은 내 컴퓨터에서 만든 문서일 수도 있지만, 외부에서 내려받았거나 다른 사람이 공유한 파일일 수도 있다. Markdown 안의 HTML과 링크를 그대로 화면에 넣으면 문서가 실행 가능한 입력이 될 수 있다.이번 단계에서는 Markdown을 HTML로

/image 전체 로직을 한 번에 구현하지 않고, 먼저 검색 결과를 보여 주고 사용자가 선택하는 경계까지 만들었다.이미지 결과는 제목, 출처 페이지, thumbnail URL, download URL, 라이선스 정보를 가질 수 있는 계약으로 정리했다. 현재는 deter

이번 단계에서는 /image 검색 결과를 문서에 넣는 과정을 마무리했다. 검색 결과를 고르는 것과 실제 파일을 저장하는 것은 서로 다른 책임이기 때문에, Renderer에서 바로 Markdown을 만들지 않고 Main의 다운로드 과정을 거치도록 구성했다.이미지 결과를