melius

Cordova을 이용하면 기본적으로 웹기술을 이용하여 앱을 제작할 수 있다. 하지만, 카메라나 푸쉬 알림과 같은 디바이스 레벨의 기능을 사용할 수도 있다. Cordova에서는 Android나 iOS의 Native SDK을 사용하기 위해서 Javascript API을 제공하는 Plugin을 사용한다. Plugin들은 npm에 등록되어 있으며, 주요 API들은 Apache Cordova 오픈소스 프로젝트에서 제공되며 Core Plugin API라 불린다. https://cordova.apache.org/docs/en/latest/guide/support Plugin 검색 및 설치를 위한 주요 CLI는 아래와 같다. $ cordova plugin list $ cordova plugin add plugin-na..

https://cordova.apache.org/ 1. 코르도바 설치 $ npm install -g cordova 2. 프로젝트 생성 $ cordova create project_name 위의 명령을 실행하면, 하위폴더에 프로젝트 폴더가 생긴다. $ cd project_name 3. 프로젝트 코드작성 프로젝트 폴더내에 www 폴더에 있는 index.html 파일을 수정하여 프로젝트 코드를 작성한다. 4. 플랫폼 추가 아래 명령어로 빌드를 원하는 플랫폼을 추가한다. 브라우저는 간단한 프로젝트 실행상태 확인용으로 사용된다. $ cordova platform add browser $ cordova platform add android $ cordova platform add android@7.1 아래 명령어로..

https://socket.io/ Socket.IO 모듈은 브라우저와 서버(Node.js) 간의 이벤트 기반의 실시간 양방향 통신을 가능하게 하는 라이브러리이다. 1. 서버 서버단에 Socket.IO 모듈을 설치한다. npm install socket.io 실행 코드는 아래와 같다. var app = require('http').createServer(handler); var io = require('socket.io')(app); app.listen(80); function handler(req, res) { res.writeHead(200); res.end("hello"); } io.on('connection', function (socket) { socket.emit('news', { hello: ..

gabia 관리콘솔 설정 보안설정에 들어가서 SFTP/SHH 접속설정 및 접속기간 설정하고, 비밀번호(웹/DB 통합)를 변경한다. 터미널 sftp 접속 % sftp -oPort=22 username@username.gabia.io 아래의 sftp command list를 이용하여 Node.js 프로젝트 폴더를 sftp 서버로 업로드 한다.(FileZilla Client를 사용해도 된다.) sftp> help sftp> pwd// 원격 작업경로 확인 sftp> ls// 원격 작업경로 항목표시 sftp> cd// 원격 작업경로 이동 sftp> lpwd// 로컬 작업경로 확인 sftp> lls// 로컬 작업경로 항목표시 sftp> lcd// 로컨 작업경로 이동 // 다운로드 sftp> get filename...

Mapshaper를 이용하여 Shapefile을 GeoJSON 이나 TopoJSON 파일로 변환할 수 있다. 1. Shapefile 일반적으로 가장 많이 사용되는 지도파일의 형식은 Shapefile이며, 4개의 파일로 구성되어 있다. 그중에서 shp 파일에 기하학적인 지도정보가 저장되어 있다. (자세한 내용은 https://mapschool.io/ 참고) 아래의 사이트에서 지도데이터를 구할수 있다. 공간정보시스템: http://www.gisdeveloper.co.kr/?p=2332 국가공간정보포텉: http://www.nsdi.go.kr 국토정보플랫폼: http://map.ngii.go.kr Natural Earth: https://www.naturalearthdata.com 2. Mapshaper D3..

https://webpack.js.org/guides/development/ 웹팩에는 개발(development)모드에서 사용할 수 있는 유용한 기능이 있다. Source Maps 사용하기 에러발생시 번들링된 결과파일의 에러정보를 알려주면, 원본파일에서 에러를 찾기가 쉽지 않다. Source Maps을 이용하면 원본파일의 에러정보를 바로 알 수 있으므로 매우 편리하다. 매우 다양한 옵션이 있지만 여기서는 inline-source-map 옵션을 사용해 본다. webpack.config.js 파일에 devtool 속성값으로 'inline-source-map'를 할당하면 된다. // webpack.config.js module.exports = { entry: './src/index.js', output: {..

https://webpack.js.org/ webpack은 자바스크립트 모듈을 하나의 파일로 묶어주는 모듈 번들러이다. JavaScript 모듈 번들링 webpack을 사용하기 위해서 webpack 모듈을 설치한다. npm install webpack webpack-cli --save-dev webpack 설정파일인 webpack.config.js을 작성한다. https://webpack.js.org/concepts/ // webpack.config.js const path = require('path'); module.exports = { entry: './src/index.js', // 모듈간 의존성 분석을 위한 진입점 output: { path: path.resolve(__dirname, "dist..

프로퍼티(props) 컴포넌트가 외부에서 데이터를 받을 때에는 컴포넌트의 프로퍼티(props)를 이용한다. 프로퍼티는 읽기 전용으로 컴포넌트가 내부에서 프로퍼티를 변경하지 않는다. class ValueInput extends React.Component { render() { return ; } } ReactDOM.render(, $('#root')[0]); 상태(state) 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에는 상태(state)를 이용한다. class ValueInput extends React.Component { constructor(props) { super(props); this.state = { val: this.props.val }; } handleChange(e) { ..