react.js 썸네일형 리스트형 Electron + React 데스크탑 앱 개발 (2) 앞의 포스팅에서 언급되었듯이 Electron은 내장된 Chromium에 html, javascript, css로 구성된 화면을 렌더링 하는 방식으로 작동하기 때문에 일반적인 React.js 프로젝트를 생성하는 것과 크게 다르지 않습니다. 프로젝트에 React를 적용하는 방법은 크게 두 가지가 있습니다. 첫번째는 React boilerplate인 create-react-app을 이용하여 프로젝트를 생성한 뒤 이를 Electron에 올리는 방식입니다. 두번째로는 React, Babel, Webpack을 설치한 후, 작성된 React 프로그램을 Electron에 올리는 방식입니다. create-react-app을 이용하는 방식은 React를 비롯하여 필요한 라이브러리가 자동으로 설치되고, 설정파일도 사용자가 .. 공적마스크 재고현황 조회 웹 어플리케이션 공공API에 올라와있는 공적마스크 재고조회 API를 이용해서 재고현황 조회할 수 있는 웹앱입니다. https://code0xff.github.io/mask-tracker/ Public Mask Tracker code0xff.github.io 접속하게되면 내 위치에서 500m내에 있는 구매처의 재고 현황을 조회해주고, 검색범위를 선택하여 탐색할 수 있습니다. 결과는 카드형태로 보여지며, 약국명, 약국주소를 보여주고, 배지로 몇 km이내에 있는 약국인지, 현재 몇 개가량이 남아있는지 보여줍니다. 처음 접속시 위치정보 공유에 대한 권한제공에 대해 동의해주셔야 사용이 가능합니다. 추가 정보를 확인하기 위하여 지도에서 보기를 선택하면 카카오맵으로 위치를 확인시켜주며, 정보검색을 선택하면 카카오맵에서 해당 약국의 .. Electron + React 데스크탑 앱 개발 (1) Electron은 HTML, CSS, Javscript를 사용해 크로스 플랫폼 데스크탑 애플리케이션을 만들기 위해 Github에서 개발한 오픈 소스 라이브러리입니다. Electron은 크로스 플랫폼을 지원하기 위해 Chromium과 Node.js를 1개의 런타임으로 통합했고, Electron을 이용해 작성한 앱은 Mac, Windows, Linux 용으로 패키징할 수 있습니다. 앞서 설명하였듯이 웹 개발자라면 충분히 개발을 시작할 수 있기 때문에 개발에 들어가기 위한 진입장벽이 낮지만, 결과물은 플랫폼과 상관없이 사용이 가능하기 때문에 크로스 플랫폼을 지향하는 많은 데스크탑 어플리케이션이 Electron을 사용하여 앱을 개발하고 있습니다. 대표적인 Electron 앱으로는 Atom, Visual Stud.. 이전 1 다음
