[Django][RestAPI] Image Path로 서버에 이미지 업로드하기 서버에서는 사용자 PC에 있는 이미지의 경로만 갖고 해당 위치의 이미지를 서버로 복사(이동)할 수 없다. 파일 열기(불러오기)기능을 하는 을 이용하면 가능하지만, JS에서 서버로 넘긴 path만으로는 Chrome에서 사용자 PC에 접근을 막았기(fakepath, Chrome보안정책) 때문에 불가능했다. Electron(NodeJS)에서 서버로 RestAPI(Django Rest FrameWork)를 통해서 이미지 경로만 갖고 여러 개의 이미지를 한번에 전송하려면 base64로 인코딩(encode/encoding)한 값을 서버로 전달 한 후 서버에서 base64를 이미지로 디코딩(decode/decoding)해주면 된다. 먼저,..
electron
[Electron] 빌드(build) 하기 2 ( electron-builder ) 이전 글 `[Electron] 빌드(build) 하기 ( electron-builder )`에 정보를 조금 더 추가한 글입니다. mac사용자를 위해 osx 빌드가 필요했고, 관련해서 찾아보았습니다. 다행히 한글로된 글이 존재했고, 해당 글을 따라 했습니다. (출처) * 사용 방법 지난 번과 마찬가지로 package.json을 수정해줍니다. 이번에는 각 요소에 대한 설명을 하진 않겠습니다. 필요하다면 이전 글을 참고해 주세요. { ... "scripts": { ... "build": "electron-builder build", "build:osx": "build --mac", "build:win32": "build --w..
[Electron] ProgressBar 사용하기 (부제: electron-progressbar) Electron에서 TaskBar에 진행 상태를 나타내는 방법이 있다. setProgressBar를 이용하면 된다. setProgressBar의 값은 0~1사이의 퍼센트 값을 이용한다. 예를 들어, 63%는 0.63을 입력하면 된다. 그리고, 0보다 낮은 값(-1)으로 설정하면 진행 상태가 제거되고, 1보다 높은 값(2)를 설정하면 진행 상태가 중간 모드로 변경된다. const { BrowserWindow } = require('electron') const win = new BrowserWindow() // ex) 50% win.setProgressBar(0.5) 하지만, 어플리케이션 자체에도 진행바를 나..
[JavaScript] TreeView 사용하기 (fancytree) 사용하고자 하는 Tree 조건은 다음과 같았다. * Tree(트리) 사용 조건 방향키로 노드간 이동 가능해야 한다. shift, ctrl이용해서 다중 선택이 가능해야 한다. 폴더간 드래그 앤 드롭으로 이동이 가능해야 한다. 루트 노드는 이동 불가해야 한다. 자식노드는 자식노드 하위로 이동 불가해야 한다. 위 조건을 모두 만족하는 트리를 찾기 힘들었다. 처음에는 가장 많이 쓰는 라이브러리를 찾아 구현되어 있지 않는 조건들은 stackoverflow 나 git 등에서 찾아 기능을 추가하려고 했으나, 쉽지 않았다. 완성된 프로젝트에 트리 부분만 떼다 붙이려니 여러가지 오류가 발생했었다. jstree 가장 많이 사용함. 위 조건 모두 구현 가..
[Electron] 자식창(Child Window) 자식창은 부모창 위에 보여진다. 자식창을 선언 할 때, parent: 부모창를 입력하여 부모의 자식임을 선언한다. 기본적으로 createWindow시 부모창과 자식창 모두 선언해 준다. 아래와 같이 입력하면 앱을 실행할 때 자식창과 부모창 모두 표시된다. let win; // 부모 let child; // 자식 function createWindow() { // 부모 창 선언 win = new BrowserWindow({ width: 1400, height: 1000, webPreferences: { nodeIntegration: true } }); // 자식 창 선언 child = new BrowserWindow({ parent: win, width:..
[Electron] Access to XMLHttpRequest at '' from origin '' has been blocked by CORS policy 에러 해결 방법 Access to XMLHttpRequest at '...' from origin '...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 위 에러는 HTTP 접근제어(CORS)에서 볼 수 있듯이 보안 상의 이유로, 스크립트 내에서 초기화되는 cross-origin HTTP 요청을 제한함으로써 발생된 오류이다. 에러를 제거하기 위해서 웹 보안(same-origin정책)을 해제하면 된..
