개발일지

[Electron / Vue.js] Vue.js로 만든 앱 Electron 으로 배포해보기 - 1 웹퍼블리싱을 하면서 리스트를 만들때 태그로 감싸는 작업을 너무하기 귀찮아서 만든 앱이 있다. 처음엔 HTML+javascript  로 만들었다가 다음에는 자바.exe 파일로 만들었고 최종적으로 vue.js + electron 조합 으로 시도하였다. java로 만든 easyHTML.exe [다운로드] 혹시 이걸 검색해서 오셨다면 ㅎㅎ 아무나 사용해도 좋습니다. 1. vue.js 로 만든앱을  npm run build 로 빌드한다. 2. electron-quick-start 로 app을 바로 만든다. -> npm install 로 설치한다. https://github.com/electron/electron-quick-start 3.  vue.js 빌드한 파일을 electron index.html 에 있는 곳에 넣는다. 4. npm start 로 앱을 시작해본다. 5. npm install electron-packager --save-dev   로 패키징을 한다. package.json 파일 에 빌드를 추가한다. "scripts": { "start": "electron .", "build": "electron-packager . ElectronPJ" }, 6. npm run build 으로 빌드한다. 7. 그럼 프로젝트 경로에 ElectronPJ-win32-x64 이름으로 폴더가 생성되고 ElectronPJ.exe 를 클릭하면 실행된다. +  웹서버에 올려서 웹으로 동작하게 할건지 앱으로 동작하게 할건지는 일단 고민중.. 아직 추가 작업을 해야한다. 퍼블리싱 작업할때 찾는 사이트라던지 문서라던지 통합으로 쉽게 접근할 수 있게끔.. 우선 태그 리스트작업, 대문자 소문자 변경만 추가...

  javascript 기초공부 - 1 : 타입강제와 약한 형식화, 단축평가 값 자바스크립트가 알지 못하는 데이터 타입을 사용하면 자바스크립트는 오류를 발생시키지 않고 가능한 작업을 수행하려고 시도한다. 자바스크립트는 내부적으로 데이터 타입을 변환하여 작업을 완료할 수 있다. 이를 타입강제(type coercion) 이라고한다. 예를 들어 '1' > 0 이라는 구문을 실행할때 숫자 '1'은 1로 변환될 수 있다. 그결과 이 표현식은 true 로 표현된다. 자바스크립트는 약한형식화(weak typing) 을 사용한다. 데이터 타입 string : 텍스트 number :  숫자 Boolean : true / false null : 빈값 undefined : 변수가 선언되긴 했지만 아무런 값도 대입되지 않은 상태 false 로 취급될 수 있는 값 var value = false; var value = 0; var value = ''; var value = 10/' '; //Infinity var value = 10/"aaa"; // NaN var value; var value = NaN; true 로 취급될 수 있는 값 var value = true; var value = '1'; var value = '0'; var value = 'false'; var value = ' '; NaN== NaN: false NaN은 false로 취급될 수는 있지만 이와 동일한 것으로 취급될 수 있는 다른 값은 존재하지 않는다.( 정의되지 않은 숫자 이기 때문) 단축평가값 논리연산자들은 왼쪽에서 오른쪽으로 실행된다. 이 연산자들은 결과를 얻게 되는 순간 단축평가(즉, 평가의중단)을 실행한다. 그래서 그 결...

Express EJS 템플릿연결 자바 스크립트로 HTML 마크 업을 생성 할 수있는 간단한 템플릿 언어 https://ejs.co/ [설치방법] NPM 으로 EJS 설치 $ npm install ejs --save app.js 에서 템블릿 변경 views 폴더안 파일을 ejs 확장자로 변경 app.set('view engine', 'ejs'); 레이아웃 <% include('header'); %> <h1> Title </h1> <p> My page </p> <% include('footer'); %>

grunt-express-server 사용하기 https://www.npmjs.com/package/grunt-express-server node.js로 개발할때 express를 사용시, 재가동을 위해 플러그인을 사용하면 편하게 개발 가능하다. [설치방법] GRUNT 커멘드 라인 설치 $ npm install -g grunt-cli express-server 서버생성작업 $ mkdir express-server #서버 폴더생성 $ cd express-server #서버폴더로 이동 $ npm init #초기화 $ npm install grunt --save-dev #grunt 설치 $ npm install -g express-generator #express 설치 $ cd .. $ express project01 #express 프로젝트 초기생성 $ cd project01 #프로젝트 폴더로 이동 $ npm install #초기화 $ npm start #실행 express-server 폴더로 이동하여 grunt-express-server 설치 $ cd ../express-server $ npm install grunt-express-server --save-dev grunt-contrib-watch 설치 $ npm install grunt-contrib-watch --save-dev 파일 변경 감지 서버 재가동 자동화 플러그인 구현 - project01/bin/grunt_www.js 작성 설치된 express 서버를 기동(npm start)  package.json 안에 있는 bin/www 의 경로의 파일 스크립트가 실행 되기 때문에 이를 변경해준다. /* grunt_www.js */ var debug = require('debug')('project01'); var app = require('../app'); app.set('port', p...

GRUNT 사용하기 웹페이지 :  https://gruntjs.com/ 참조 : https://gruntjs.com/ GRUNT는 플러그인 기능을 사용하여 자동화 효율을 높이는 툴이다. 자바스크립트 합치기, 최소화하기, 이미지 크기 최소화하기 등  한번 설정을 해두면 명령어 한번으로 자동화 해준다. [사용방법] 1. Grunt Cli 설치 Grunt Command Line Interface(CLI)를 설치한다. $ npm install -g grunt-cli 2. package.json 파일 생성 프로젝트를 생성한다. $ npm init 3. Grunt 설치 프로젝트 폴더의 root경로에서 grunt를 설치한다. --save-dev 로 설치를 진행하여 package.json 파일에 연동시킨다. // package.json { "name": "grunt-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "grunt": "^1.0.3" } } 4. Gruntfile.js 파일 생성 package.json 과 같은 위치 root 폴더에 생성한다. 아래는 예시 // Gruntfile.js 예시 const mozjpe...

browsersync  웹사이트  https://www.browsersync.io/ 프론트 작업, 퍼블리싱 작업을 하다보면 캐시지옥에 빠지게 된다. 수정 -> 저장 -> F5연타 -> 반영이 안되는군.. -> 캐시정리 -> F5 의 연속.. 이 작업이 싫어서 버전 쿼리스트링을 timestamp 로 넣어 새로고침때마다 새로 불러오게 처리하였다. <link href="./../_public/css/style.css?v=115835156" rel="stylesheet" type="text/css"> browsersync 은 이 작업을 좀더 편안하게 해주는 브라우저 테스트 툴이다. [설치방법] 1. Node.js 설치 2. Browsersync 설치 npm install -g browser-sync 3. Browsersync 시작 1) 정적 html 파일만 사용하는경우 browser-sync start --server --files "css/*.css" 2) 동적사이트 (로컬서버)를 사용하는 경우 browser-sync start --proxy "localhost:8012" --files "D:\php\_publish" [Browsersync] Proxying: http://localhost:8012 [Browsersync] Access URLs: -------------------------------------- Local: http://localhost:3000 External: http://172.16.131.27:3000 -------------------------------------- UI: http://localhost:3001 UI External: http://localhost:3001 ------------...