728x90 반응형 SMALL Electron10 [오류]일렉트론 콘솔에 오류, 경고 없애기 일렉트론으로 개발하다보면 위와같이 보기싫은 에러코드라던가 경고메세지가 나옵니다. 이것을 없애는 방법에 대해서 설명드리겠습니다. node:electron/js2c/renderer_init:2 Electron Security Warning (Insecure Resources) This renderer process loads resources using insecure protocols. This exposes users of this app to unnecessary security risks. Consider loading the following resources over HTTPS or FTPS. - http://themes.googleusercontent.com/static/fonts/titilli.. 2023. 3. 1. [기초-4] 일렉트론 사이드 메뉴 만들기 일렉트론에 사이드메뉴와 같은것을 적용해 보겠습니다. 디자인은 저번 화면개발때와 마찬가지로 이미 멋지게 만들어진 디자인을 빌려서 사용하겠습니다. https://codepen.io/search/pens?q=side+menu CodePen Search codepen.io 사이드 메뉴라고 검색하니 바로 나옵니다. 그냥 맨첫번째로 있는 사이드메뉴를 적용해보겠습니다. css는 그대로 복사한다음 css폴더에 새로 하나 만든다음 main.html에 적용을 해줍니다. 이제 html에 사이드메뉴부분을 가져오겠습니다. 네모친 부분을 우선 가져옵니다. 위에 있는 링크태그는 앞서 만들었던것입니다. 그리고 그 아래 태그 부터 쭉~~~다 가져와서 nav 태그가 끝나는 지점까지 쭉복사를 해서 가져온다음 실행해보겠습니다. 지금 뚫고 .. 2023. 2. 27. [기초-3] 일렉트론 타이틀바 수정/변경 일렉트론의 기본 타이틀바는 많이 딱딱합니다. 기본 프로그램같습니다. 이것을 쉽게 수정하는 방법에 대해서 포스팅하겠습니다. 사용할 아이콘 선정 아이콘은 간단하게 부트스트랩에 있는 아이콘을 이용하겠습니다. 위 링크를 이용해서 사용하실 수 있으시고, pc에 놓고 두고두고 사용하고 싶으시면 아래의 npm i bootstrap-icons 명령어로 설치해줍니다. 그래서 필요한 것들을 골라서 사용할 수 있게합니다. 우선 타이틀바에서 가장 중요한건 창 최소화, 창 최대화, 닫기 이렇게 3총사가 제일 중요합니다. 3총사를 모두 선택한다음 css와 html에 추가를 해줍니다. 타이틀바 디자인하기 이 아이콘들을 버튼으로 만들어서 진행하겠습니다. 그리고 이것들을 담을 수 있는 그릇역할을 하는 div 태그를 만들겠습니다. 나의.. 2023. 2. 26. [기초-2] 일렉트론 화면 개발하기 일렉트론 화면은 웹 개발과 동일합니다. html, css , js 만으로 개발이 가능합니다. 간단하게 디자인을 이용하기 위해 코드펜에 있는 디자인을 잠시 가져와서 사용하면서 진행해보겠습니다. 엄청신기한것들 많습니다. 여기서 간단하게 디자인하나 이용해서 진행하겠습니다. 저의 경우에는 이런 형식의 디자인을 사용하겠습니다. html은 index.html에, js는 새로 하나 만들어주시고, css도 index.css에 넣어줍니다. 각각 내용을 추가 또는 생성해준모습입니다. 파일트리는 위처럼 구성을 했습니다. 적용되었습니다. 그리고 한번 이미지를 추가해보겠습니다. 그리고 경로를 추가했습니다. 이미지까지 적용되었습니다! 이것으로 일렉트론에 이미지 및 디자인을 적용하는 것을 알아보았습니다. 감사합니다. 2023. 2. 24. [기초-1] 일렉트론 메뉴 추가하기 / 다루기 안녕하세요 일렉트론 상단의 메뉴를 다루거나 추가하거나 없애는 방법에 대해 포스팅하겠습니다. https://www.electronjs.org/docs/latest/api/menu Menu | Electron Create native application menus and context menus. www.electronjs.org 일렉트론 공식사이트를 통해서 메뉴를 다루는 것을 참고하실 수 있습니다. 기능들은 참 많은데 이번 포스팅에서는 간단하고 주로 쓸수 있을 것 같은 것들을 한번 실습해보려고합니다. 기존 메뉴는 아무것도 설정하지 않았다면 처럼 일반적인 모습만 나옵니다. 메뉴를 사용하기 위해서는 메뉴라는 api를 사용해야합니다. main.js에 메뉴를 추가합니다. const { app, BrowserWi.. 2023. 2. 24. [프로젝트 생성-쉬운버전] 리액트 프로젝트에 일렉트론추가하기 지난 포스팅에서는 일렉트론프로젝트를 보일러플레이팅을 통해 기존 패키지를 그대로 설치해서 사용할 수있는 쉬운 방법을 포스팅하였습니다. https://uno-kim.tistory.com/377 [프로젝트 생성-쉬운버전] 일렉트론 App 쉽게만들기 (보일러플레이트) 지금까지 우리는 하나하나 설치해가면서 일렉트론을 설치하면서 테스트를 통해 진행했습니다. 그러나... 보일러 플레이트를 사용하면 이전에 만들었던 일렉트론 프로젝트를 보다 빠르고 쉽게 uno-kim.tistory.com 이번엔 리액트 프로젝트에 일렉트론을 추가해보겠습니다. npx create-react-app {생성팔 프로젝트 폴더이름입력} //npx create-react-app react-electron 명령어로 리액트 프로젝트를 만듭니다. 생성이.. 2023. 2. 24. [프로젝트 생성-쉬운버전] 일렉트론 App 쉽게만들기 (보일러플레이트) 지금까지 우리는 하나하나 설치해가면서 일렉트론을 설치하면서 테스트를 통해 진행했습니다. 그러나... 보일러 플레이트를 사용하면 이전에 만들었던 일렉트론 프로젝트를 보다 빠르고 쉽게 만들수 있습니다. 보일러 플레이트란 ? 틀 같은것이다. 붕어빵틀!! 파웨셸을 엽니다. cd C:\Users\zhfld\electron cd C:\Users\zhfld\electron 위치로 이동하겠습니다 (일렉트론이 설치되어있는 곳) npx create-electron-app {프로젝트명} >> npx create-electron-app myElectronProj 원래 프로젝트랑 이름을 다르게하겠습니다. 설치된 패키지 확인 code . 명령어를 통해 vs코드를 열어줍니다. 오 ㅋㅋㅋㅋ아무것도 안했지만 프로젝트가 생성되었다고!ㅋ.. 2023. 2. 23. [프로젝트생성-3] 일렉트론에 리액트 추가하기 https://uno-kim.tistory.com/375 [프로젝트 생성-2] 일렉트론 패키징과 배포 지난 포스팅 https://uno-kim.tistory.com/370 [프로젝트 생성-1]node.js로 일렉트론 설치하기 https://uno-kim.tistory.com/369 Node js 설치 노드 JS 를 설치하는 방법입니다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript uno-kim.tistory.com 일렉트론 패키징과 배포에 대해서 알아보았습니다. 이번에는 이제 마지막으로 일렉트론에 리액트를 추가해 보겠습니다. 리액트 추가하기 리액트 라이브러리를 추가하기 위해서는 패키지를 추가해야합니다. 아래의 명령어를 입력해 줍니다. npm inst.. 2023. 2. 23. [프로젝트 생성-2] 일렉트론 패키징과 배포 지난 포스팅 https://uno-kim.tistory.com/370 [프로젝트 생성-1]node.js로 일렉트론 설치하기 https://uno-kim.tistory.com/369 Node js 설치 노드 JS 를 설치하는 방법입니다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 사이트에서 Node.js를 설치해줍니다. uno-kim.tistory.com 정상적으로 나오는 것을 확인해 보았습니다. 이제 조금더 편리하게 패키징과 배포를 하는 방법에 대해 포스팅을 하겠습니다. 이 방법까지는 해준다면 멋진 일렉트론 셋팅이될것같아 저도 나중에 틈틈히 보.. 2023. 2. 22. [프로젝트 생성-1]node.js로 일렉트론 설치하기 https://uno-kim.tistory.com/369 Node js 설치 노드 JS 를 설치하는 방법입니다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 사이트에서 Node.js를 설치해줍니다. 현재는 벌써 18.14.2 버전까지 나왔군 uno-kim.tistory.com 우선 위 URL에 접속해서 node.js 를 설치해줍니다. 그리고 일렉트론 설치를 위해 진행합니다. 노드 js 설치가 완료되었다면 일렉트론을 이제 시작할 폴더를 선정하고 그 폴더에 설치를 진행해줍니다. 저의 경우에는 사용자(user)폴더에 생성합니다. 큰이유는 아니지만 경로.. 2023. 2. 22. 이전 1 다음 728x90 반응형 LIST
