본문 바로가기

javascript25

Keyboard Maestro 공백 제거 코드 붙여넣기 스크립트 클립보드로 복사한 문자열에서 공백을 제거하는 스크립트를 작성합니다. Actions 에서 sciprt로 검색하면 사용 가능한 스크립트를 확인할 수 있습니다. 그중에서 javascript로 스크립트를 작성하였습니다. 기본 스크립트 클립보드를 다루는 방법은 아래 코드를 통해 확인할 수 있습니다. // --- SET CURRENT APP VARIABLE NEEDED FOR DIALOGS & StandardAdditions.osax --- var app = Application.currentApplication() app.includeStandardAdditions = true //--- GET A REFERENCE TO THE KM ENGINE --- var kme = Application("Keyboard M.. 2019. 8. 15.
Vworld 3D Data를 Three.js로 출력하기 Vworld 3D Data를 Three.js로 출력하기 Vworld WebGL기반 3차원 지도 Vworld WebGL기반 3차원 지도 에 접속하시면 아래와 같은 화면을 볼 수 있습니다.여기서 WebGL 이란 웹 기반의 그래픽 라이브러리 자바스크립트 프로그래밍 언어를 통해서 사용 호환성이 있는 웹 브라우저에서 인터랙티브한 3D 그래픽을 사용할 수 있도록 제공 (출처: 위키피디아) 3D 데이터API 레퍼런스 소개 데이터 API는 브이월드에서 제공하는 다양한 국가공간정보를 외부(기관,기업,개인등)에서 활용할 수 있도록 XML또는 JSON형식으로 데이터를 제공하는 API서비스 입니다. 어떻게 사용해야 하나요? 어떤 데이터가 어떻게 제공 되나요? 3D 데이터API 레퍼런스 키 발급 개발자센터 > 인증키 > 인증키.. 2018. 10. 18.
[책] React.JS 프로 리액트 (2/2) [책] React.JS 프로 리액트 (2/2) React.js를 이용한 모던 프런트엔드 구축 프로 리액트 React.js를 이용한 모던 프런트엔드 구축카시우 지 소자 안토니우 저/최민석 역 동형 리액트 애플리케이션 동형isomorphic 자바스크립트 애플리케이션은 코드가 전체 또는 부분적으로 클라이언트와 서버 간에 공유되는 애플리케이션이다. 리액트 컴포넌트의 테스트 Jest 제스트는 리액트가 권장하는 테스트 프레임워크다. 널리 이용하는 재스민Jasmine 프레임워크를 기반으로 하며 여러 유용한 기능이 추가됐다. 가상 DOM 구현으로 테스트를 실행한다.(따라서 테스트를 명령줄에서 실행 할 수 있다.) JSX를 기본적으로 지원한다. 웹팩 소스맵 생성 원래 작성된 파일을 가리키는 소스맵을 생성하는 devtoo.. 2018. 5. 20.
[책] React.JS 프로 리액트 (1/2) [책] React.JS 프로 리액트 (1/2) React.js를 이용한 모던 프런트엔드 구축 프로 리액트 React.js를 이용한 모던 프런트엔드 구축카시우 지 소자 안토니우 저/최민석 역 시작하기 리액트의 정의 리액트는 자바스크립트와 (필요에 따라) XML을 이용해 조합형 사용자 인터페이스를 구축하는 엔진이다. 리액트의 장점 편리한 반응형 렌더링 순수 자랍스크립트를 이용한 컴포넌트 기반 개발 문서 모델의 유연한 추상화 컴포넌트 계층 정의 컴포넌트는 단일 관심사를 가져야 하며 작아야 한다. 즉, 컴포넌트는 한 가지 일만 해야 한다. 컴포넌트가 더 성장하는 경우 작은 하위 컴포넌트로 분할해야 한다. 프로젝트의 와이어프레임과 레이아웃을 분석하면 컴포넌트 계층에 대한 많은 힌트를 얻을 수 있다. 데이터 모델이.. 2018. 5. 19.
Cesium Viewer 화면 설정 확인 Cesium Viewer 화면 설정 확인 Viewer - Cesium Documentation 에서 자세한 내용을 확인 할 수 있습니다. animation: false import React, { Component } from "react"; import { Viewer } from "cesium"; class CesiumPage3 extends Component { componentDidMount() { this.viewer = new Viewer(this.cesiumContainer, { animation: false, }); } render() { return (this.cesiumContainer = element)} />; } } export default CesiumPage3; 좌측 하단의 애.. 2018. 5. 18.
Cesium-React 적용 Cesium-React 적용 출처: cesium-react - npm create-react-app react 프로젝트 생성 create-react-app cesium-react-test cd cesium-react-test yarn eject yarn install 모듈 설치 cesium cesium-react html-webpack-include-assets-plugin copy-webpack-plugin yarn add cesium cesium-react html-webpack-include-assets-plugin copy-webpack-plugin webpack.config 수정 config/webpack.config.dev.js // config/webpack.config.dev.js cons.. 2018. 5. 17.