개발일지

[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 를 클릭하면 실행된다. +  웹서버에 올려서 웹으로 동작하게 할건지 앱으로 동작하게 할건지는 일단 고민중.. 아직 추가 작업을 해야한다. 퍼블리싱 작업할때 찾는 사이트라던지 문서라던지 통합으로 쉽게 접근할 수 있게끔.. 우선 태그 리스트작업, 대문자 소문자 변경만 추가...

CSS를 알아보자! 1. 방법론 (SMASS, BEM, OOCSS) 2. 전처리도구(SASS/SCSS/LESS) CSS를 지금껏 사용했지만 사실 전처리도구(SASS/SCSS/LESS) 등을 사용해보지 않았다. 지금까지 너무 게으르게 살았던듯... ㅜㅜ 다시 정신차리고 공부하는 삶을 살아야겠다. 목표1 : 몇가지 방법론을 살펴보고 한가지를 선택해서 적용! 목표2 : 전처리기를 사용하여 작업!  1. 방법론 (SMASS, BEM, OOCSS) 1-1. CMASS(Scalable and Modular Architecture for CSS) 참고 - https://smacss.com/ SMACSS의 핵심은 분류이다. CSS 규칙을 범주화 함으로써 패턴을 설정한다. SMACSS는 5가지의 규칙 이 있다. Base - 기본스타일 Layout - 엘리먼트를 나열하는 것과 관련된 스타일 Module - 재사용을 위해 하나로 묶는 스타일 State - 상태변경을 위한 스타일 Theme 프리픽스(preifx) 를 사용하여  layout, state, module 규칙을 구별한다. layout : l- module : 모듈의 이름을 사용 state : is- [Base] html, body, form { margin: 0; padding: 0; } input[type=text] { boarder: 1px solid #999; } a { color: #039; } a:hover { color: #03C; } -> CSS reset 과 같은부분 [Layout] Layout은 ID 선택자를 사용해도 된다. #header, #article, #footer { width: 960px; margin: auto; } #article { border: solid #CCC; border-width: 1px 0 0; } #article { ...

  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로 취급될 수는 있지만 이와 동일한 것으로 취급될 수 있는 다른 값은 존재하지 않는다.( 정의되지 않은 숫자 이기 때문) 단축평가값 논리연산자들은 왼쪽에서 오른쪽으로 실행된다. 이 연산자들은 결과를 얻게 되는 순간 단축평가(즉, 평가의중단)을 실행한다. 그래서 그 결...

HTTP란? ( H yper T ext T ransfer P rotocol, WWW 상에서 정보를 주고받을 수 있는 프로토콜) 1. HTTP란? HTTP는 웹에서만 사용하는 프로토콜로 TCP/IP 기반으로한 지점에서 클라이언트와 서버 사이에 이루어지는 요청/응답(request/response) 프로토콜을 말한다. TCP/IP : 컴퓨터와 컴퓨터간의 지역네트워크(LAN), 광역네트워크(WAN)에서 원활한 통신을 가능하게 하기위한 통신규약(Protocol) TCP/IP는 TCP, IP 2개의 프로토콜로 이루어져있다. IP : 4바이트로 이루어진 주소번호를 사용하여 각각의 node를 구분하고 목적지를 찾아가게 한다.(예-192.168.100.100) TCP : 서버와 클라이언트간에 데이터를 신뢰성있게 전달하기 위한 프로토콜이다. 데이터 전송을 위한 연결을 만드는 연결지향 프로토콜이다. 클라이언트 : 서버에 요청하는 소프트웨어가 설치된 컴퓨터. 서버 : 클라이언트의 요청을 받아서 요청을 해석하고 응답. 2. 응답코드 코드 메세지 설명 200 Success(성공) 데이터전송이 성공적으로 이루어짐. 300 Multiple Choices 최근에 옮겨진 데이터를 요청 4XX 클라이언트오류 클라이언트 측의 오류. 5XX 서버의오류 서버 측의 오류. 참고 : https://ko.wikipedia.org/wiki/HTTP

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