melius

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) { ..

모듈(Module)을 생성하고 호출하는 방법은 실행환경마다 다르다. 1. Node.js CommonJS 문법에서는 module객체를 이용하여 모듈을 생성하고 require함수를 이용하여 모듈을 호출한다. // myModule.js (CommonJS) let data1 = "java"; let data2 = "python"; module.exports = { data1, data2 }; // app.js (CommonJS) let myModule = require("./myModule"); console.log(myModule); ES6 문법에서 export, import 문장을 이용하여 모듈(ESM)을 생성할 수 있는데, 파일의 확장자를 'mjs'로 설정해야 한다. // myModule.mjs (ES6)..

원격 저장소 커밋 삭제 git reset --hard []// 로컬 저장소 헤드 특정 커밋으로 되돌리기 git push -f origin master// 강제 푸쉬 특정파일 로컬 및 원격 저장소에서 삭제 (과거 커밋 리스트에서는 삭제 안됨) // 로컬 저장소 특정파일 삭제 (파일도 삭제됨) git rm folder_name/file.txt git commit -m "delete" git push origin master // 로컬 저장소 특정파일 삭제 (추적만 해제) git rm --cached folder_name/file.txt git commit -m "delete" git push origin master 특정파일 로컬 및 원격 저장소에서 삭제 (과거 커밋 리스트에서도 모두 삭제) git filt..

Firebase 호스팅 시작하기 https://firebase.google.com/docs/hosting/quickstart Firebase 호스팅을 설정하기 전에 먼저 Firebase 프로젝트 생성해야 함 https://firebase.google.com/docs/web/setup/ * 호스팅만 하려면 앱까지 만들필요는 없음 1단계 Firebase CLI 설치 $ npm install -g firebase-tools 2단계 Firebase 로그인 Google에 로그인, 다음 명령어 실행 $ firebase login 3단계 프로젝트 초기화 $ firebase init Hosting 선택 (옵션은 나중에 수정가능) 연결할 Firebase 프로젝트를 선택 4단계 로컬 호스팅 테스트 index.html 파일..

https://threejs.org/ https://github.com/mrdoob/three.js/ Three.js는 WebGL를 이용한 3D 그래픽 라이브러리이다. 주요 구성요소는 아래와 같다. 1. Mesh (Object) Mesh 객체는 3D 화면을 구성하는 물체(Object)로서, Mesh 객체를 만들기 위해서는 형상정보(Geometry)와 재료정보(Material)를 정의해야한다. Mesh 객체가 만들어지면 설정값을 통해서 3D 공간상의 위치와 자세를 결정할 수 있다. let cubeGeometry = new THREE.BoxGeometry(2, 2, 2); let cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xFF0000 }); let c..