개발일지

에디트플러스에서 자동정렬기능 추가하기 처음 코딩을 접할때 에디트플러스로 시작했다. 퍼블리싱을 할때 가볍기로는 제일 좋은 듯하고 (개인취향임.. 다른 에디터는 조금 버벅이는게 느껴진다. ) FTP 쓰기에도 간편하다. 몇 년간 에디트 플러스를 자주 쓰다가 다른 에디터( vscode , atom, eclipse 등..)를 쓰다보니 자동정렬 기능이 항상 아쉬웠다. 다른 에디터로 갈아타려다가 혹시 자동정렬기능이 있을까하여 구글검색을 해보니 어떤 개발자분이 올려둔 정렬 기능이 있더라... 왜 지금찾아봤을까( 검색을 생활화 하자 ) [설정과정] 1. htmlarg.exe 파일을 다운로드한다.  사용환경 : Windows , Editplus / 개발자 : http://www.killrain.net(현재 닫혀있다) 2. 에디트플러스 실행 -> 도구 -> 사용자 도구 구성 -> 추가 -> 다운받은 프로그램(htmlarg.exe) 선택 명령 : 다운로드 받은 htmlarg.exe 파일의 경로 지정 인수 : 정렬을 위한 인수 설정 [ ex : tt? D,head,body,header,footer,nav,section,li,ol,ul D D $(CurSel) ] 동작 : 텍스트 필터로 실행(바꾸기) 3. 적용 -> 확인 으로 완료. 4. 그룹1에 설정했다면  CTRL + 1 ( + 영역선택 ) 단축키로 실행 [인수설정방법] [들여쓰기][서버스크립트][코드들여쓰기] [태그리스트1] [태그리스트2] [태그리스트3] ($CurSel) 들여쓰기 : 0~9까지의 숫자, 탭문자를 이용하고 싶으면 t를 사용 코드들여쓰기 : 0~9까지의 숫자, 탭문자를 이용하고 싶으면 t를 사용 서버스크립트 : 아무것도 적지 않으면 php로 설정 (? 와 동일) , jsp, asp 의 경우 %를 쓴다. 태그리스트1 - 들여쓰기할 태그리스트 : D를 이용하면 기본태그(tr,td,d...

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

지식정리 겸, 일정정리 겸.. 앞으로 개발일지를 작성하려고 한다. 목표는 1일 1개발! 구글 블로그스팟이 네이버 블로그보다 좀더 깔끔한 것 같다. 조금 써보다가 어느정도 익숙해지면 스킨변경을 시도해 보는걸로.. 오랜만에 글을 쓰니까 생각 정리가 쉽지않다. 차근차근 해나가는 걸로!