Scientific Computing & Data Science

이 글에서는 CSS 전처리기(Preprocessor)인 Sass의 간단한 사용법 및 컴파일 등에 대하여 알아보고자 합니다. 현재 널리 사용되는 CSS 전처리기는 Sass, LESS, Stylus가 있으며, 이 중 현재 개발자들이 가장 많이 사용하는 전처리기는 Sass입니다.CSS 전처리기란 무엇인가?최근 웹페이지의 경향에 있어 CSS 문서 작성이 점점 양이 방대해지고 있는데, 주로 반복적인 작업이 많이 요구되기 때문입니다. 즉, hex 컬러값을 찾는 것과 tag를 닫는 일, 클래스를 상속받아야 하는 것으로 인한 copy & paste 등 비효율적으로 시간이 요구되는 작업이 많습니다. 이것이 CSS 전처리기 등장의 이유이며, 단지 CSS 전처리기는 CSS를 확장하기 위한 스크립팅 언어이며 컴파일러를 통해 ..

이번 글에서는 HTML5의 Canvas Element의 Touch Gesture를 통해 이미지를 이동하거나 확대(Pinch Zoom)하는 방법에 대하여 알아보고자 한다.Canvas의 Image Touch Gesture를 위한 소스코드는 https://github.com/rombdn/img-touch-canvas를 이용하였으며, Touch가 안 되는 환경(Desktop without Touch Device)에서는 Mouse를 이용한 Drag를 통하여 이미지 이동이 가능하다. 다음 링크의 프로젝트 파일을 다운받아 테스트 할 수 있다:img-touch-canvas.js상기 Github 페이지에서 img-touch-canvas.js를 다운받는다. /* =================================..

이번 글에서는 Modal Dialog를 작성하는 방법에 대해 알아보고자 한다.본 예제는 W3Schools.com의 예제를 기반으로 jQuery로 동작하도록 작성한 것이며, 버전 3.0.0을 이용하여 작성되었지만, 이전 버전에서도 큰 문제없이 동작하리라 생각된다. 편의를 위해 jQuery 3.0.0 소스를 첨부한다: HTML다음과 같이 index.html 파일을 작성한다: [index.html] Modal Example Open Modal × Some text in the Modal.. CSSCSS 파일을 다음과 같이 작성한다: [modal-dialog.css]/* The Modal (background) */ .modal { display: none; /* Hidden by default */ posit..

이번 글에서는 CSS3에 공식적으로 포함되어 있지는 않지만, 테스트 해 볼만한 새로운 기능인 이미지 반사(Image Reflection)에 대하여 알아 보도록 하겠다.[테스트 이미지] landscape.jpg 준비테스트를 위해 HTML 파일을 다음과 같이 준비한다.[index.html] 단, 준비한 이미지 "landscape.jpg"는 index.html 파일과 동일한 경로에 존재하여야 한다.포함한 CSS 파일 "base.css"에서 이미지 반사 옵션에 대한 코드를 작성할 것이다.기본 반사기본 반사 옵션은 원본 이미지 그대로 반사되는 효과를 의미한다.CSS 파일에 img라는 클래스를 정의하고 다음과 같이 옵션을 작성한다.[base.css]img { -webkit-box-reflect: below; } 결..

이번 글에서는 electron-packager를 이용하여 개발된 Electron App을 배포하기 전 패키징 하는 방법에 대하여 알아보도록 한다. 지원 플랫폼Electron Packager는 다음과 같이 Electron이 지원하는 플랫폼을 지원한다:Windows (32/64 bit)OS XLinux (x86/x86_64) 설치Command Line Terminal에서 다음과 같이 명령어를 입력하여 설치하도록 한다.# for use in npm scripts > npm install electron-packager --save-dev # for use from cli > npm install electron-packager -g 사용방법Electron Packager의 기본적인 사용방법은 --help 옵션..

이번 글을 통해 Electron App의 기본 기능을 포함하는 Template을 제공하고자 한다. 기본적인 기능 구현을 생략함으로써 빠르게 Electron App을 만드는 데 있어 불필요한 시간 낭비를 줄이는 것이 목표이다. [Electron App Template 다운로드] package.jsonpackage.json 파일에 만들고자 하는 App의 정보를 채워넣도록 한다. { "name": "{YOUR_APP_NAME}", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "start": "electron main.js" }, "repository": { "type": "git", "url": "" }, "author": ""..

이번 글은 Node.js의 C/C++ Addon을 작성하는 방법에 대하여 알아 보기로 하겠다. 위에 첨부한 동영상은 참고한 YouTube Tutorial이며,Node.js의 공식 도큐먼트인 https://nodejs.org/api/addons.html#addons_wrapping_c_objects 와관련 stack overflow 사이트, http://stackoverflow.com/questions/21611867/how-to-build-a-native-node-js-extension-using-node-gyp-on-win-7-x64-vs2012 이다. 개발 환경은 다음과 같다:OS: Window 7 Professional 64 bitIDE: Visual Studio 2015 (v14) Communit..

이번 글에서는 지난 글(Creating Desktop Apps with Electron)에 이어 Electron Desktop App에서 메뉴를 만드는 방법에 대하여 알아보도록 하겠다.App 초기화Terminal에 "npm init" 명령을 통해 다음과 같이 입력한다. $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use ..

이번 글은 node.js(nodejs.org) 기반 Cross Platform Desktop App을 만드는 도구인 Electron(http://electron.atom.io)을 이용하여 기본앱(Hello World)을 만드는 방법에 대하여 알아보도록 하겠습니다. 우선 App을 만들 폴더를 하나 만듭니다(비어 있어야 합니다).Terminal에 다음 명령을 실행하여 App 초기화를 합니다(node.js가 설치되어 있어야 합니다). $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See ..