Jekyll을 사용하면서 자주 사용하는 Liquid 태그

Jekyll을 사용하면서 자주 사용하는 Liquid 문법과 유용한 내용을 메모했다.

출력

if

include

_include 디렉토리에 있는 파일을 추가하는 기능이다.

comment

이 태그 안에 들어간 내용은 사이트에 출력되지 않는다.

 

구문 강조

Pygments가 지원하는 언어의 코드 구문을 강조한다.

 

escape

liquid 태그를 그대로 보여줄 수 있게 escape하는 방법이다.

 

 

Node.js에서 자주 사용하는 코드

Node.js로 개발할 때 자주 사용하는 코드를 정리했다.

Crypto

Crypto는 OpenSSL 해시, HMAC, cipher, decipher, 서명, 증명 함수 등의 wrapper 세트를 포함한 암호 기능을 제공하는 모듈이다.

Node.js Crypto API

비밀번호를 디비에 암호화해서 저장할 때 사용할 수 있는 sha256 암호화 예제다.

파일 시스템

Gulp

gulpfile.babel.js를 사용할 때 SyntaxError 발생

gulpfile에 ES6 문법을 사용할 때, 다음 에러가 뜰 수 있다. 예를들어, import 할 때.

babel-core가 없을 때 발생할 수 있다.

Express.js

NPM 사용

모듈

내가 사용했던 유용한 Node.js 모듈이다. 더 많은 모듈을 npmjs에서 검색할 수 있다.

Atom Editor

Atom은 이해하기 쉽고, 커스터마이즈 하기 쉬운 에디터다. Github에서 Sublime Text와 상당히 비슷하게 만들었는데, 내장된 패키지 매니저가 있어서 패키지 관리나 설정은 오히려 더 쉽고, 편하다.

그리고 Electron을 사용해서 만들었기 때문에 윈도, OSX, 리눅스에서 모두 동작한다. Electron에서 Webview를 사용할 수 있어서, browser-plus와 같은 패키지를 만들 수 있는 것 같다. 이 부분이 Sublime Text와 비교했을 때 가장 큰 장점일 수 있을 것 같다. 오직 Atom 에디터만 열어놓고 웹 개발을 할 수 있다.

그 밖에 마크다운 관련 패키지가 기본적으로 내장되어 있어서, 별도로 설치할 필요가 없다. CTRL + SHIFT + M을 누르면 프리뷰 화면을 보면서 마크다운 텍스트를 편집할 수 있어서 편하다.

사용하면서 Sublime Text에 있는 패키지는 대부분 찾을 수 있었고, 기능은 오히려 더 좋았다.

유용한 패키지 모음

Sublime Text와 비슷한 환경을 만들기 위해 추가로 설치했던 패키지와 기능을 간단하게 기술했다. 진하게 표시된 패키지는 특히 유용한 것이다.

패키지 이름 기능
autosave 포커스를 잃었을 때 파일 저장
open-terminal-here 터미널을 띄워준다. 윈도, 맥에서 모두 동작
plantuml-viewer plantuml 뷰어
japanese-wrap 한글 워드랩이 정상적으로 동작하지 않는 문제를 해결
Stylus Stylus Syntax Highlight
language-cjsx coffee jsx(cjsx) Syntax Highlight
language-lua lua Syntax Highlight
language-plantuml plantuml Syntax Highlight
Remote-FTP 원격 파일 관리 (ftp, sftp 지원)
git-plus 편리한 git 명령이 가능
term 터미널(윈도에서 tty.js 모듈 빌드 문제 때문에 사용 불가)
project-manager Sublime Text처럼 프로젝트 관리
browser-plus 브라우저로 웹사이트를 열 수 있음.
minimap 코드 미니맵
date “2015-10-10”와 같은 형태로 날짜 입력
highlight-selected Sublime Text처럼 단어에 더블 클릭했을 때, 선택된 단어를 표시
react react 문법. jsx 지원
react-snippets React 스니펫
terminal-panel 터미널 명령 실행
atom-autocomplete-php PHP 자동완성
autocomplete-php PHP 자동완성
atom-coffee-repl coffee repl 환경
atom-terminal 현재 파일 디렉터리에서 터미널 열기
atom-wallaby Wallaby.js로 유닛테스트
coffee-autocompile 커피 스크립트를 자동으로 컴파일
coffee-navigator 커피 스크립트를 위한 코드 네비게이션
hyperclick Hyperclick UI
vagrant 편리한 vagrant 명령. (문제 있음)

Nuclide

nuclide는 웹과 모바일 개발에 특화되고, Atom 위에 패키지들의 모음으로 만들어진 통합 개발환경이다. 다시 말하면 Hack과 Javascript 개발하기 위한 Nuclide라는 이름으로 시작하는 페이스북이 만든 패키지들의 모음이라 할 수 있다.

기본적으로 원격 개발이 가능하므로, Remote-FTP 패키지는 비활성화시킨 후 사용해야 한다. 언어는 Hack과 Javascript를 지원하고, 정의한 위치로 이동하는 기능과 자동완성을 기본적으로 포함하고 있다. tree-view와 기능이 겹치기 때문에 비활성화하는 것이 좋다.

사용하면서 발생했던 문제

현재 윈도와 OSX에서 1.0.19를 사용하고 있는데, 몇 가지 문제가 있었다.

Sublime Text에 비해서 무겁다.

에디터를 열고, 사용할 때 전체적으로 Sublime Text보다 느려 답답한 느낌이 있다.

Atom Helper 프로세스의 CPU 부하 100%로 올라가는 문제가 있다.

이 문제는 OSX에서 더 심각했다. 처음 Atom을 실행하면 프로세스가 100%로 올라간다. 어느 정도 시간이 지나면 다시 내려간다.

안정성이 떨어진다.

여러 패키지를 업데이트할 때, CPU 부하가 심하다. 아무리 기다려도 업데이트가 완료되지 않는 경우도 발생한다. 사용하다가 검색이 필요해서 CTRL + F를 눌러 검색하려고 했는데, 아무런 반응도 없다. 단축키가 아무것도 동작하지 않는 문제도 있었다. 되살리기 기능도 제대로 안 될 때도 있었다.

결론

이런 문제들 때문에, Atom의 엄청난 기능에도 불구하고, 메인으로 사용하지 않고 있다. 무거운 것은 참고 쓸 수 있지만, 안정성은 포기할 수가 없었다. 마크다운 문서 편집 용도로만 쓰고, 코딩 작업에는 Sublime Text를 사용하고 있다.

개인적으로 기능만 봤을 때, Sublime Text를 앞서는 것 같다. 앞으로 안정성만 좋아진다면 메인으로 사용하고 싶은 에디터이다.

Hot Module Replacement(HMR)

React Hot Loader 사이트에 있는 비디오를 보고, 호기심을 가졌다. 전에 live-reload 기능이 있긴 하지만, 페이지 전체를 다시 불러오는 형태라서 비효율적으로 볼 수도 있다. 에디터에서 수정 후 저장하자마자 깜빡임도 없이 브라우저에 있는 UI가 바로 바뀌는 모습이 인상적이었다. 특히 CSS 수정했을 때 유용해보였다.

React Hot Loader는 React 컴포넌트를 수정할 때 상태를 잃지 않고, 즉각적으로 live refresh를 할 수 있게 해주는 Webpack 플러그인이다. 그래서 React.js와 Webpack을 사용해야한다. React.js만 지원한다.

간단하게 Webpack은 모든 Static Web Resource를 하나의 자바스크립트 파일로 만들 목적으로 사용하고, React.js는 페이스북에서 만든 뷰 구현을 돕는 프레임웍이다. 추가로 gulp와 coffee script를 사용했다.

Webpack

HMR 기능을 사용하려면 Webpack을 사용해야한다. require, configuration, cli 3가지 방법으로 로더를 사용할 수 있다.

CLI 방식:

require로 사용하는 방법:

!로 리소스와 로더를 분리할 수 있다.

configuration 방식 :

설정해야할 것이 많기 때문에, configuration을 정의한 후 gulp에서 사용하는 방식이 좋을 것 같다.

각각의 로더는 모두 설치해야한다. devDependency로 두는 것이 좋다.

개발서버 띄우기

HMR 기능을 사용하기 위해서 간단하게 데몬을 띄울 수 있다.

CSS작업만 한다면 이렇게 CLI모드를 사용해서 작업할 수 있다.

inline과 hot 옵션은?

  • –inline : webpack-dev-server 런타임 코드를 번들(.js)에 추가한다.
  • –hot : HotModuleReplacementPlugin 을 추가하고, hot mode로 서버를 교체한다. (모듈 변경 여부를 알려주는 역할)

HotModuleReplacementPlugin을 두 번 추가하지 않도록 주의해야한다.

윈도에서 경로 문제

윈도에서 웹팩 개발 서버가 제대로 변경된 파일을 감시하지 못하는 문제가 있었는데 설정파일에서 경로를 다음과 같이 변경해야 한다.

Webpack 관련 링크 모음

서브라임텍스트 패키지 모음

서브라임텍스트는 개발할 때 주로 사용하는 에디터인데, 기본 편집기능도 좋고, 패키지를 사용하게 되면 훨씬 더 편하게 개발할 수 있다. 이 포스팅에서는 개발할 때 자주 사용하는 패키지를 소개할 것이다.

Sublime Diagram Plugin

평소 서버구성도, 시퀀스 다이어그램을 그려야하는 경우가 많이 있다. Dia, 파워포인트, Pencil, yED와 같은 툴을 사용해봤지만, 만족스럽지 않았다. 직접 그리는 방식이라서 배치하는데 신경이 많이 쓰여 흐름이나 배치에 집중하기 어려웠다.

이 플러그인은 다음 프로그램이 준비되어 있어야 한다.

  • Java (download from java.sun.com)
  • Graphviz (I recommend “homebrew” on the Mac)
  • Sublime Text 2 or 3

그리고 서브라임 패키지 인스톨러로 설치가 되지 않기 때문에, 패키지 디렉토리에 직접 설치해야 한다.

Git Plugin

서브라임 텍스트에서 git을 편하게 사용할 수 있게 하는 플러그인이다. 패키지 인스톨러를 통해 설치하면 된다.

SublimeGit

윈도를 사용할 경우 따로 git 프로그램을 설치해야한다. 그리고 경로를 다음과 같이 설정해야할 것이다.

커맨드 팔레트에서 주로 다음 3개만 사용하는데, 특히 status에서 선택하는 기능이 좋다.

  • GIT status : 버전 관리할 파일을 선택하고, c를 누르면 커밋 메시지를 작성할 수 있고, 탭을 닫으면 커밋이 된다.
  • GIT push
  • GIT pull

MarkdownEditing

Markdown 형식으로 메모도 하고, 프로젝트에서 Readme.md 문서도 자주 만드는데, Markdown 파일을 작성하는데, 이 플러그인이 아주 유용하다. 지금 작성하는 블로그도, 서브라임에서 이 플러그인 사용해서 작성하고 있다. 문서와 코드(Javascript, Python 등)에 신택스 하이라이트도 되는 것이 핵심이다.

패키지 팔레트에서 다음 이름의 플러그인을 찾아 설치하면 된다.

MarkdownEditing

Markdown Preview

Markdown Editing으로 Markdown 파일을 작성할 때 도움이 된다고 할 수 있다. 최종 결과물을 브라우저에서 볼 수 있게 하는 플러그인이 바로 Markdown Preview다. 작성하다가 최종 결과물이 보고 싶다면 CTRL + B(빌드. 윈도)하면 브라우저에 작성하고 있는 문서가 보여질 것이다.

Markdown Preview

SFTP

여러 서버에서 작업할 일이 많이 있는데, 이 플러그인이 아주 유용하다.

SFTP

sftp-config.json 파일을 만들고, CTRL + ALT + U, W를 누르면 서버에 존재하는 폴더와 파일을 볼 수 있다. 수정할 파일을 선택하고, 수정 작업을 거친 후 저장하면 서버에 저장이 된다. 그런데 이 플러그인을 쓰는 것 보다 atom 에디터의 sftp 기능이 더 좋았었다.

GhostText

브라우저의 텍스트 입력창(Textarea)의 내용을 서브라임 텍스트로 작성할 수 있게 하는 플러그인이다. 크롬이나 파이어폭스에 플러그인을 추가로 설치해야한다. 크롬과 파이어폭스에 플러그인을 설치하고, 텍스트 영역에 GhostText 기능을 활성화 할 수 있다. 그 상태에서 서브라임에서 내용을 작성할 수 있다.

그러나 내가 자주 사용하는 도구는 위지웍 에디터라서 잘 활용하지 못했다.

GhostText

처음 알았을 때는 많이 사용하려고 시도했지만, 은근히 귀찮다. 텍스트 창에 글을 입력하다 브라우저가 문제가 생겨 종료가 되더라도, 글은 서브라임에 남아있는 것은 장점이다.

플러그인 페이지

InsertDate

2016-06-22와 같이 원하는 형식의 날짜를 단축키로 입력할 수 있게 하는 플러그인이다. 메모하다가 오늘 날짜를 입력해야할 때 유용하다.

InsertDate

단축키는 CTRL + F5, D

SublimeLinter

프로젝트에서 사용하는 언어에 따라 linter를 세팅하고 시작하는 것이 좋다.

coffeelint
eslint
jshint
pylint
shellcheck

기타 사용중인 플러그인

Dockerfile Syntax Highlighting

Dockerfile 문법 강조

플러그인 페이지

Autotools

Autotools 문법 하이라이트

플러그인 페이지

Babel

JSX를 포함한 ES6 문법 하이라이트

플러그인 페이지

BracketHighlighter

괄호안에 있을 때, 좌측에 표시해 준다.

플러그인 페이지

RPM Spec Syntax

rpm.spec 파일에 관한 문법 강조를 지원한다.

플러그인 페이지

sublime-project-specific-syntax

프로젝트에 따라 문법을 다르게 설정할 수 있다.

플러그인 페이지

sublime_diagram_plugin (PlantUML)

Plantuml을 이미지로 만들어준다. 내부에서 Java와 Graphviz를 사용한다.

플러그인 페이지

Terminal

현재 파일 또는 프로젝트 폴더를 터미널로 열어준다.

플러그인 페이지

Stylus

Stylus 문법 강조를 지원한다.

플러그인 페이지

Siteleaf Liquid Syntax

Liquid 문법 강조를 지원한다.

플러그인 페이지

SideBarEnhancements

사이드바 기능을 강화한다. 특히 우클릭을 통해 다양한 기능을 사용할 수 있다.

플러그인 페이지

React ES6 Snippets

React로 개발할 때 아주 유용한 Snippet을 제공한다. (cdm, cdup, …)

플러그인 페이지

R-Box

R 파일 작업할 때, 자동완성, 메뉴, 팝업 힌트를 제공.

플러그인 페이지

PHP Code Coverage

에디터에서 코드 커버리지 데이터를 표시한다. 테스트가 된 코드는 녹색으로 나온다.

플러그인 페이지

Phpcs

PHP CodeSniffer, PHP Code Beautifier and Fixer, PHP Coding Standards Fixer, the PHP Linter, PHP Mess Detector, Scheck

플러그인 페이지

PhpDoc

문서화 주석을 빠르게 작성할 수 있다. /**로 시작하면 자동 완성됨.

플러그인 페이지

NSIS

Nullsoft Scriptable Install System 문법 강조

플러그인 페이지

Lua​Autocomplete

Lua 자동완성

플러그인 페이지

Jekyll

Jekyll과 통합

플러그인 페이지

INI

INI 문법 강조

플러그인 페이지

Find++

현재 폴더, 프로젝트에서 검색할 수 있다.

플러그인 페이지

DocBlockr

문서화를 위한 주석을 쉽게 작성할 수 있다.

플러그인 페이지

C++11

C++11 문법 정의

플러그인 페이지

C++ Snippets

C++에서 유용한 스니펫이 추가됨.

플러그인 페이지

Lint 플러그인

  • SublimeLinter : 기본 linting 프레임웍
  • SublimeLinter-contrib-eslint : ECMAScript/JavaScript
  • SublimeLinter-contrib-htmlhint : HTML
  • SublimeLinter-cpplint : C++
  • SublimeLinter-jshint : Javascript
  • SublimeLinter-json : json
  • SublimeLinter-pep8 : Python(PEP8)
  • SublimeLinter-php : php-l 옵션을 사용
  • SublimeLinter-phplint : phplint를 사용
  • SublimeLinter-pylint : Python(pylint)
  • SublimeLinter-shellchek : 쉘 스크립트

삭제한 플러그인

이번 장은 플러그인 너무 많아서 지금은 쓸 일 없는 것들을 지우면서 기록한 내용이다.

View In Browser

현재 서브라임탭에 있는 것을 브라우저로 보여준다.

플러그인 페이지

TypescriptCompletion

Typescript 자동완성.

플러그인 페이지

VBScript

VBScript 문법 강조, 스니펫

플러그인 페이지

Select By Regex

정규식으로 영역을 선택할 수 있다.

플러그인 페이지

Repeat Macro

반복적인 작업을 할 때 사용한다.

플러그인 페이지

SublimeServer

Markdown, HTML 파일을 서비스할 수 있는 서버를 띄운다.

플러그인 페이지

설명

플러그인 페이지

React​JS

Babel 플러그인에서 제공해서 필요 없다.

플러그인 페이지

React Templates

React Templates 문법 강조. Babel 플러그인에서 제공해서 필요 없다.

플러그인 페이지

Move Tab

커맨드 팔레트 명령을 통해 탭이 이동한다.

플러그인 페이지

Markdown Extended

TOP 100. 마크다운 문법 강조. 언어에 따라 강조.

플러그인 페이지

Indent​Tips

인덴트와 코드의 위치를 상태바에 보여준다. JS와 PHP는 안된다. 어떤 언어에서 동작하는지 모르겠다.

플러그인 페이지

HTML5

HTML5 번들. HTML5 문법 모드와 스니펫.

플러그인 페이지

Flow

Flow로 자바스크립트 정적 분석을 한다.

플러그인 페이지

Download Source

특정 URL의 데이터를 새로운 또는 이미 존재하는 버퍼로 가져온다.

플러그인 페이지

Dockerfile Syntax Highlighting

Dockerfile 문법 강조

플러그인 페이지

Color Highlighter

색상을 미리보고, 선택할 수 있다.

플러그인 페이지

Markup Jira confluence(SublimeConfluence)

Atlassian Confluence와 통합된 플러그인.

플러그인 페이지

Browser Integration

브라우저와 서브라임을 통합하는 플러그인이다. 우선 서브라임에서 브라우저를 실행하고, 서브라임에서 브라우저로 커맨드를 날릴 수 있다. reload, 스타일시트 보기, 특정 코드 실행하기 등이 가능하지만, 아직 개발중이라고 한다.

플러그인 페이지

All Autocomplete

현재 창에 열린 모든 파일에 있는 내용과 일치할 때 자동완성 키워드를 보여주는 플러그인이다. 느려질 수 있어서 주의가 필요하다.

플러그인 페이지

ApplySyntax

파일 구문을 감지하고, 적용할 수 있는 플러그인이다. 예를들면, .rb 파일은 일반적으로 Ruby 파일이지만 Rails 프로젝트에서의 Rspec, Cucumber 파일, Ruby on Rails(컨트롤러, 모델) 파일을 구분할 수 있다.

플러그인 페이지

Better Coffee Script

신택스 하이라이트, 체크, 커맨드, 단축키, watch 기능 등을 제공한다.

플러그인 페이지

CJSX Syntax

Coffee Script JSX 문법을 지원하는 플러그인이다. ES6로 바꾼 이후는 쓸 필요없었다.

플러그인 페이지

Grunt

Grunt와 통합하는 플러그인이다. Gulp로 바꾸고 나서 쓰지 않는다.

플러그인 페이지

ChangeQuotes

’ 또는 “에 커서를 놓고, 이 플러그인 커맨드를 실행하면 ‘ -> “, 아니면 그 반대로 바꿔주는데, 잘 사용하지 않아서 지웠다.

https://packagecontrol.io/packages/ChangeQuotes

ColorHelper

CSS 작업할 때, 컬러코드를 인식해서 색상을 보여주고, 선택할 수 있는 툴팁을 제공한다. 인라인으로 색상을 보여주는 부분때문에, 확실히 느려진다.

https://packagecontrol.io/packages/ColorHelper

Emmet

Emmet의 공식 플러그인이다. Emmet은 예전에 Zen Coding으로 불렸고, html 작업을 할 때, CSS 스타일로 입력해서 html을 만들어 준다. 편리하지만 html 작업을 많이 하지 않고, 그 마저도 React로 하므로 필요 없어졌다.

https://packagecontrol.io/packages/Emmet

Evernote

Evernote를 서브라임에서 쓸 수 있는 플러그인이다.

https://packagecontrol.io/packages/Evernote

Google Search

서브라임에서 선택한 키워드를 구글에서 검색하는 플러그인이다.

https://packagecontrol.io/packages/Google%20Search

npm

npm을 통합한 플러그인이다. 쉘로 하는게 더 편하다.

https://packagecontrol.io/packages/npm

yUML

yUML을 서브라임에서 만들어 주는 플러그인이다. plantuml을 사용해서 지웠다.

https://packagecontrol.io/packages/yUML

SublimeGit

Git 통합 플러그인이다. 쉘에서 Git 작업을 하면서 지웠다.

https://packagecontrol.io/packages/SublimeGit

GitSavvy

SublimeGit과 유사한 플러그인이다.

https://packagecontrol.io/packages/GitSavvy

HTMLBeautify

HTML을 보기 좋게 만드는 도구다. 가끔씩 필요해서 같은 기능을 하는 사이트를 이용하면서 지웠다.

https://packagecontrol.io/packages/HTMLBeautify

Live​Reload

LiveReload 서버가 서브라임텍스트에서 실행되고, 파일을 저장할 때, 이 서버와 통신할 수 있다.

https://packagecontrol.io/packages/LiveReload

SqlBeautifier

SQL을 사람한테 보기 좋게 만드는 플러그인이다.

https://packagecontrol.io/packages/SqlBeautifier

Text Pastry

반복적인 작업을 쉽게 할 수 있게 돕는 플러그인이다.

https://packagecontrol.io/packages/Text%20Pastry

Pretty JSON

JSON을 보기 좋게 만들어주고, 유효성을 체크할 수 있고, 압축할 수도 있다.

https://packagecontrol.io/packages/Pretty%20JSON

InsertDate

포맷에 맞춰서 현재 날짜와 시간을 출력하는 플러그인이다.

https://packagecontrol.io/packages/InsertDate

SVN

SVN 통합 플러그인.

https://packagecontrol.io/packages/SVN

ShellCommand

쉘 명령을 서브라임내에서 실행하고, 그 결과를 탭에서 보여주는 플러그인이다.

https://packagecontrol.io/packages/ShellCommand

Shell Turtlestein

ShellCommand와 유사한 플러그인이다. 다른점은 결과가 서브라임 콘솔에 출력된다.

https://packagecontrol.io/packages/Shell%20Turtlestein

Tabs​Extra

탭에 추가 기능을 주는 플러그인이다. sticky 탭을 만들고, 탭 정렬, 삭제, 이름 변경 등을 할 수 있다.

https://packagecontrol.io/packages/TabsExtra

Scheme

Scheme이라는 언어를 지원하는 플러그인인데, 언제, 왜 설치했는지 모르겠다.

https://github.com/egrachev/sublime-scheme

PyV8

Emmet 플러그인 설치할 때 자동으로 설치되는 플러그인이다.

https://github.com/emmetio/pyv8-binaries

Java​Script & Node​JS Snippets

Console, DOM, Loop 등을 쉽게 작성할 수 있는 Snippet이다. cl은 console.log, al은 alert, …

https://packagecontrol.io/packages/JavaScript%20%26%20NodeJS%20Snippets

Handlebars

Handlebars.js 템플릿을 지원하는 플러그인이다.

https://packagecontrol.io/packages/Handlebars

Jade

Jade 템플릿을 지원하는 플러그인이다.

https://packagecontrol.io/packages/Jade

Liquid

Liquid 템플릿을 지원하는 플러그인이다.

https://packagecontrol.io/packages/Liquid

Less

Less Syntax Highlight를 지원하는 플러그인이다.

https://packagecontrol.io/packages/LESS

SublimeCodeIntel

Open Komodo Editor에서 포팅된 플러그인으로, 다양한 언어를 지원한다. 심볼이 정의된 파일로 이동하고, 사용가능한 모듈을 자동완성할 수 있다.

https://packagecontrol.io/packages/SublimeCodeIntel

Swift

Swift 언어를 지원하는 플러그인이다. XCode에서 작업해서 필요없다.

https://packagecontrol.io/packages/Swift

Sublime​REPL

서브라임 탭에서 PHP, Python, Ruby, R, Node.js 등 다야한 언어의 인터프리터를 실행하는 플러그인이다.

https://packagecontrol.io/packages/SublimeREPL

Vue Syntax Highlight

Vue 템플릿을 지원하는 플러그인이다.

https://packagecontrol.io/packages/Vue%20Syntax%20Highlight

TypeScript

TypeScript 문법, Snippet을 지원하는 플러그인이다. 백그라운드로 Node 프로세스가 실행된다.

https://packagecontrol.io/packages/TypeScript

LogView

로그 파일을 볼 때 로그 단계에 따라서 심각하면 빨강 덜 심각하면 노랑으로 표시하는 플러그인이다.

https://packagecontrol.io/packages/LogView

SublimeLinter-coffeelint

Coffee Script 문법을 체크하는 Linter인데, ES6로 바꾼 후 사용하지 않는다.

https://packagecontrol.io/packages/SublimeLinter-coffeelint

JSX

JSX 언어 정의.

플러그인 페이지

DB1

PostgreSQL, MySQL, SQLite, MariaDB 같은 디비에서 쿼리를 실행하는 플러그인.

플러그인 페이지

DotENV

.env 파일에 대한 문법 강조

플러그인 페이지

Theme

BitTorrentSync

BitTorrentSync란?

BitTorrentSync(이하 Sync)는 OSX, Windows, 리눅스, iOS, Android 등 대부분 플랫폼에서 동작하는 동기화 프로그램이다.

리눅스의 rsync와 비슷하지만, P2P로 양방향으로 동기화가 가능하다. 그리고 중앙 서버가 필요 없고, 폐쇄된 환경에서 내부 네트워크만 연결되어 있으면 동기화할 수 있다.

제품 설명 페이지에 따르면 클라우드 서버를 거치지 않기 때문에 클라우드 서비스보다 16배 빠르다고 한다.

기능

  • 크로스플랫폼 장치간 파일 전송
  • 인텔리전트 동기화
  • 모바일 데이터 백업

무료, Pro 버전 비교

설치 후 30일 동안 Pro 버전을 사용할 수 있고, 그 이후부터 무료 버전으로 사용할 수 있다.

두 가지 기능에 대해 약간 더 알아볼 필요가 있었다.

처음으로 폴더 수 무제한 기능이다. 무료 버전에서 10개까지만 사용할 수 있다. 만약 10개를 사용하고 있는데, 1개 폴더를 더 공유하고 싶다면 Pro로 업그레이드하거나 1개 폴더를 제거해야 한다.

다음은 데스크탑에서의 온디맨드 액세스 기능이다. 전체 파일을 동기화하는 것이 아니고, 필요할 때 동기화하는 방식이다. 개인적으로 이 기능은 유용한 상황이 없었다. 이 기능은 iOS, 안드로이드 앱에서 무료로 사용할 수 있다.

설치하고 사용하기

설치와 설정 등 기본적인 사용법은 간단하다. 다운로드 후 실행하면 된다.

설정할 때 수신받는 포트를 지정하는 것이 좋다. 수신받는 포트는 TCP와 UDP가 함께 열리게 된다. 보통 55555번 포트를 많이 사용하는 것 같다.

장치 간 최소한 이 포트에 접근할 수 있어야 공유할 수 있다. 또는 Sync에서 제공하는 릴레이 서버에 대한 접근이 막혀있지 않다면, 이 서버가 중계해주는 역할을 해줄 수 있다.

다음은 트래커 서버와 릴레이 서버가 접근 가능한지 확인할 수 있는 명령이다. 아쉽게도 현재 사용 중인 호스팅에서 중계 서버에 접속이 안 돼서 중계 서버는 사용할 수 없었다.

윈도와 맥은 트레이에 아이콘이 나타나고 백그라운드로 동작한다. 여기서 설정이나 상태 등을 확인할 수 있다. 이와는 달리 리눅스 버전은 웹 UI가 제공된다. 웹 UI는 TCP 포트를 사용하고 기본적으로 8888번을 사용한다.

어쨌거나 Sync를 통해서 폴더를 추가하고, 해당 폴더를 공유할 수 있다. 또는 전체 폴더를 동기화 시킬 수도 있다.

처음에 공유하고 싶은 폴더를 QR코드나 링크를 통해서 대상 컴퓨터나 모바일에서 사진을 찍거나 코드를 입력하면 공유할 수 있게 된다.

간단하게 기본적인 사용법은 알아봤고, 실제 어떤 식으로 사용했는지 사례를 알아보겠다.

장비 구성은 서버, 회사 PC, 집 PC, 랩탑으로 되어 있다. 실제로 여기에 아이폰, 아이패드 같은 장비를 추가로 사용한다.

서버에서는 매일 DB 데이터를 덤프해서 특정 폴더에 보관하고 있다. 그리고 nginx를 사용해서 특정 폴더에 대한 웹서비스를 하고 있다.

폴더 공유 목적
데이터베이스 백업 폴더 서버에 있는 데이터베이스 백업을 하고 집 PC에도 저장시켜 이중화시킨다.
웹서비스 폴더 블로그의 이미지나 테스트 페이지 작성을 위해서 집 PC, 랩탑, 회사 PC 등 모든 장비에서 공유한다.

데이터베이스 백업 폴더는 개인적인 데이터이기 때문에 회사 PC에서는 필요 없다. 그리고 웹서비스 폴더의 경우 아무 장비에서나 공유된 폴더에 이미지를 올리거나 페이지를 만들면 동기화되면서 서버에서 바로 서비스가 된다. 예를 들어 랩탑에서 블로그에 쓸 이미지를 10개를 공유 폴더에 위치시키면 바로 nginx를 통해서 10개 이미지를 웹서비스를 할 수 있는 것이다. html, javascript 파일도 서비스 할 수 있다. 물론 jsfiddle로 할 수 있지만, PC에서 내가 좋아하는 에디터를 사용해서 코드를 작성하고 페이지를 바로 공유할 수 있는 것이 다른 점이다.

문제점

동기화가 이상하게 되는 문제

이 외에도 사진이나 개인적으로 보관하고 있는 파일들도 지워질 것에 대비해서 집 안에 있는 PC끼리 서로 백업시키는 용도로 쓰고 싶었다. 그래서 맥(OSX)과 미니 PC(윈도7)에 Sync를 설치하고, 백업 폴더를 공유시켰다. 그리고 공유시킨 폴더 안에 있는 구조를 변경하고, 파일 이름들도 바꾸는 등 작업을 했는데 미니 PC에서 작업한 대로 정상적으로 변경되지 않고, 파일도 삭제되는 문제가 있었다. 이 문제는 너무 치명적이라서 맥과 윈도 간 동기화를 통한 이중화는 하지 않았다. 아마 맥 버전이 문제일 것으로 보인다.

파일 변경이 바로 반응하지 않는 문제(해결)

이 문제는 우분투에서 문제가 발생했었는데, 우분투에서 파일을 삭제하거나 내용을 변경했는데 동기화가 전혀 되지 않았었다. 디버그 모드를 체크한 후 확인해 보니 전혀 이벤트가 발생하지 않는 것으로 보였다. 포럼을 찾아봐도 해결방법을 찾을 수 없었다. 아마 i386(glibc 2.3) 버전을 설치했었는데, i386으로 다시 다운로드 후 다시 설치하니 이벤트가 정상적으로 발생했다.(또는 그 반대로)

백신 프로그램 때문에 막힌 경우

회사 윈도 PC의 경우 백신으로 시만텍이 설치되어 있는데, Sync를 악성 프로그램으로 보고, Sync에서 사용하는 포트를 전부 막아버린다. 그래서 윈도에서는 사용할 수 없었다.

결론

중앙서버를 거치지 않고, 폐쇄된 환경에서도 P2P 방식으로 폴더를 공유하고, 양방향으로 동기화되는 것은 아주 매력적이다. 이러한 기능을 구현하기 위해서 rsync를 사용하고, 구조를 생각하고 스크립트를 만들었어야 했을 텐데, Sync를 사용하게 되면 데몬만 띄우고 폴더만 지정해서 간단하게 구현할 수 있었다.

그러나 백신 프로그램이나 맥과 윈도 간 동기화할 때 문제점은 치명적이었다. 특히 동기화가 이상하게 되는 안정성에 관한 문제들은 앞으로 개선되었으면 좋겠다.

References

윈도 데스크탑 유틸리티 소개

회사에서 메인 PC의 OS로 윈도7을 사용하고 있다. 기본적인 데스크탑 환경이 다른 OS(우분투, OSX)보다 불편하다고 느끼는 부분이 많아서, 여러 유틸리티를 찾아 사용하고, 이 프로그램들로 정착했다. 이들을 설치한 결과 업무 생산성은 다른 OS보다 훨씬 좋아졌다.

Dexpot – 가상 데스크탑

Dexpot은 가상 데스크탑을 만드는 프로그램이다. OSX의 미션 컨트롤과 유사한 기능을 가지고, 훨씬 더 세밀하게 설정할 수 있다. 화면을 9개(3×3)으로 설정했고, DexControl과 Dexgrid라는 플러그인만 사용하고 있다. Alt+1 ~ Alt + 9까지 단축키를 설정하고, 주요 작업은 1번 화면에서 하고, 갑작스런 요청이 들어온 경우 Alt + 4번을 눌러 해당 작업에 필요한 애플리케이션을 띄우고 작업을 하는 형태로 사용하고 있다.

바탕화면 미리보기 기능을 자주 사용하는데, 마우스로 창을 이동하고 복사할 수 있어 편하다.

XLaunchpad – 런치패드

XLaunchpad는 OSX의 런치패드와 같은 목적의 프로그램이다. 왼쪽 CTRL 버튼을 빠르게 두번 누르면 다음과 같은 화면이 뜬다. 인터렉션은 OSX에 비하면 형편없지만, 목적에 충실하다.

등록하는 방법도 간단하다. 등록하려는 아이콘에 마우스 오른쪽 버튼을 누르면 다음 메뉴가 나타나는데, Send To XLaunchpad를 선택하면 된다.

시작 메뉴를 잘 사용해도 되지만, 큼지막하게 아이콘을 보고 선택할 수 있는 것이 큰 장점이다.

VistaSwitcher – 창 전환

VistaSwitcher는 ALT+TAB을 대체하는 프로그램이다.

이 프로그램을 사용하는 이유는 단 하나다. 듀얼 모니터를 사용하는데, 왼쪽 화면에서 ALT+TAB을 눌렀을 때, 왼쪽화면에 있는 창만 전환할 수 있게 하려는 것이 그 이유다.

ShellEnhancer – 창크기 조절

ShellEnhancer는 아주 다양한 기능을 가진 프로그램이다.

  • 창 전환기(Alt+Tab 대체)
  • 창 모양 관리(투명도, 항상 위로 보이기, 롤업 등)
  • 마우스 제스쳐
  • 화면 모서리에 마우스가 갔을 때, 프로그램 실행
  • 단축키 …

이 프로그램을 사용하는 가장 큰 이유는 단축키로 창 위치와 사이즈를 지정할 수 있기 때문이다.

다음 그림과 같이 단축키를 관리하는 기능이 있고, View1 ~ 8까지 단축키로 지정했다. (Win + 숫자1 ~ 8) 해상도가 1920×1200이 두 개라서 작은 창 8개를 단축키로 배치할 수 있게 했다.

1번을 예로 들면 창을 0x0 위치로 옮기고, 800×600 사이즈로 바꾸라는 내용이다.

크롬을 8개 띄우고, 각각 선택해서 단축키를 1~8까지 입력하면 이런 모양으로 창을 배치할 수 있다.

특히 서버의 여러 로그 파일을 한 눈에 확인할 때 좋다.

Launchy – 스포트라이트

Launchy는 OSX의 스포트라이트처럼 검색을 통해 프로그램이나 문서를 찾아 실행하는 프로그램이다.

Alt + Space를 누르면 다음과 같은 화면이 뜨고, s를 누르면 s로 시작하는 프로그램이 떠서 키보드를 통해 프로그램을 실행할 수 있다.

FreeCommander XE – 파일 탐색기

FreeCommander XE는 윈도 탐색기를 대체할 수 있는 프로그램이다. 윈도 커맨더, 토탈커맨더에서 자주 썼던 주요 기능들이 FreeCommander에서도 사용할 수 있는데, 미묘하게 다른 부분도 있기 때문에 적응할 필요가 있다. 아무튼 파일 탐색기 보다 파일 관리가 편하다는 것은 확실하다.

자바스크립트 DOM

Dom 이란?

Document Object Model의 약자로 HTML을 제어 할 수 있는 API의 역할을 한다.

DOM의 처리 순서

  • 제어 대상 탐색
  • 제어 대상 메소드 실행 및 이벤트 핸들러 등록

Dom Method

  • createElement : HTML 요소를 생성
  • appendChild : 자식에 요소를 추가
  • getAttribute : 속성을 가져옴
  • setAttribute : 속성을 넣음
  • getElementById : ID속성으로 요소를 가져옴
  • getElementsByName : NAME속성으로 요소를 가져옴(배열)
  • getElementsByTagName : 엘리먼트명으로 요소를 가져옴(배열)

이러한 Dom 메소드를 어떻게 사용하는지 알아볼 것이다.

HTML

Javascript

jQuery 에서는?

Manipulation – 조작

  • append : 자식요소를 가장 뒤에 추가한다.
  • prepend : 자식요소를 가장 앞에 추가한다.
  • after : 형제요소를 뒤에 추가한다.
  • before : 형제 요소를 앞에 추가한다.
  • attr : 속성을 가져오거나 지정할 수 있다.(get/set)
  • html : 선택된 요소 안에 HTML을 가져오거나 지정할 수 있다.(get/set)
  • text : 선택된 요소 안에 텍스트만 가져오거나 지정할 수 있다.(get/set)
  • val : 선택된 요소의 value 값을 가져오거나 지정할 수 있다.(get/set)
  • css: 선택된 요소의 css 값을 가져오거나 지정할 수 있다.(get/set)
  • remove : 선택된 요소를 삭제한다.

Traversing – 탐색

  • find : 선택된 요소 아래에 있는 요소를 검색해서 선택한다.
  • next : 선택된 요소 다음 요소를 선택한다.
  • prev : 선택된 요소 이전 요소를 선택한다.
  • parent : 선택된 요소의 부모 요소를 선택한다.
  • children : 선택된 요소의 자식 요소를 선택한다.

 

자바스크립트 개발환경 구축과 디버깅

준비물

  • 텍스트 에디터 – 이클립스, 에디트 플러스, 메모장 등 자신에게 가장 편한 텍스트 에디터
  • 파이어폭스, 파이어버그 플러그인 이 문서의 내용을 따라가기 위해서는 반드시 파이어폭스와 파이어버그 플러그인을 설치해야 한다.

파이어폭스, 파이어버그 설치하기

  • 모질라 파이어폭스 사이트에서 다운로드 받는다.
  • 다운로드 받은 파일을 실행해서 설치한다.
  • 파이어폭스 프로그램을 실행한다.
  • 메뉴에서 [도구] – [부가기능]을 선택한다.
  • [전체검색] 탭을 선택하고, Firebug 를 검색해서 설치한다.
  • 파이어폭스를 닫고 다시 시작한다.

Hello World!

이제 텍스트 에디터를 이용해서 helloworld.html 파일을 생성하고, 아래 코드를 입력하고 저장한다.

helloworld.html 파일을 파이어폭스에서 불러온다.(탐색기에서 파이어폭스로 드래그)

  • 파이어폭스 우측 하단에 벌레 아이콘을 클릭해서 파이어버그를 실행한다.
  • 콘솔 탭의 화살표를 눌러 Enable 상태로 바꾼다.
  • 새로고침을 하게 되면 콘솔창에 Hello World!라고 출력된다.

지금까지 파이어버그의 콘솔창을 이용해서 Hello World를 출력했다. 여기서 중요한 것은 console.log를 이용한 디버깅인데, 위의 예제는 String 값을 출력하는 것이지만 Object나 Array를 넣게 되면 안에 들어가는 내용이 무엇인지 보기 좋게 나오게 된다.

이러한 디버깅 방법은 Opera의 기본 디버거인 잠자리나 크롬의 개발자도구에서 별도의 플러그인 없이 지원하며, IE8 개발자도구에서도 String까지는 지원한다. 게다가 모바일 사파리에서도 디버그 설정을 활성화 시키면 console.log를 사용해서 디버깅할 수 있다.

자바스크립트로 모달창 만들기

자바스크립트로 모달창을 만들려고 한다.

모달창은 보통 배경은 어둡게 되고, 팝업 레이어가 뜨는 형태로 많이 사용있는데, 모달창을 만들기 위해서 모달창에 어떤 기능을 넣을지 기능정의를 해야한다.

  • 보여주기
  • 감추기
  • 배경 어둡게 하는 레이어 생성
  • 가운데 보여주기

간단하게 기능정의를 해봤는데, 이정도 기능을 가진 모달창을 어떻게 만드는지 알아보겠다.

먼저 HTML과 CSS를 정의한다.

HTML

CSS

버튼이 하나가 있고, 감춰진 레이어(모달창)가 있다. 버튼을 누르면 감춰진 레이어가 모달창으로 나타나고, 확인 버튼이나 닫기 버튼을 누른다는 것이 예상되는 HTML이다.

Javascript

자바스크립트를 살펴보면, 3가지 액션을 한다.

  • 모달창 인스턴트 생성
  • 모달 창 여는 버튼에 이벤트 걸기
  • 모달 창 안에 있는 확인 버튼에 이벤트 걸기

Example.Modal.js

이 메소드들이 어떤 일을 하는지 알아봐야겠다.

Initialize

인스턴트를 생성했을 때 초기화를 시켜주는 생성자다. 인스턴트 생성되었을 때 하는 모든일은 여기서 정의한다. getLayerSize(), getBodySize(), addElement(), addEvent() 메소드를 실행한다.

getHashData

다음과 같은 부분이 있는데, getHashData 메소드를 실행시키고 그 반환값을 멤버변수인 this.hash에 집어넣는다는 의미다. 이 메소드는 자바스크립트 인스턴트의 기본(default)값을 정의하는 역할을 한다.

addElement

추가 엘리먼트를 생성한다. 모달창 div 나 버튼 같은 요소들은 Javascript로 처리되기 전에 있어도 상관 없지만, 백그라운드 레이어 같은 경우는 모달창이 뜰때만 필요한 부분일 수도 있기 때문에 동적으로 생성되는게 더 효율적이라고 생각한다.

addEvent

모듈에 관련된 요소들에 이벤트를 걸어준다. 여기서는 모달창 모듈의 닫기 버튼에 클릭이벤트를 걸었다.

show

가장 중요한 보여주기 기능이다. 콘텐츠 레이어를 가운데로 옮기고, 배경레이어 사이즈 조정 후 콘텐츠와 배경레이어를 보여준다.

hide

감추는 기능이다. 모달창과 배경레이어를 감추는 내용이다.

getLayerSize

콘텐츠 레이어의 너비와 높이를 구하는 메소드다. 가운데 정렬하기 위해서 필요한 수치이기 때문에 이 메소드를 따로 두게 되었다.

getBodySize

body의 너비와 높이를 구하는 메소드다. 이 메소드 역시 가운데 정렬을 하기 위해 필요하다.

addOverlay

단순히 배경 레이어를 생성하고, css를 in-line으로 정의되어서 독립적으로 쓸 수 있다.

moveCenter

위 메소드를 실행시켜 구한 수치들을 이용해서 계산을 하는 메소드다. 마지막에는 css의 top, left 의 수치를 변화시켜서 가운데 정렬을 하게된다.

applyOverlay

배경 레이어의 사이즈를 body의 사이즈에 따라서 변화한다. 이 메소드는 resize를 할 때 body의 사이즈가 달라졌을 경우 실행하도록 하면 항상 body를 덮는 배경레이어를 만들 수 있다.