728x90 반응형 SMALL 일렉트론5 [기초-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. [프로젝트 생성-쉬운버전] 일렉트론 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. [프로젝트 생성-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
