728x90

Sublime Text 에디터는 패키지(Package)를 이용하여 기능을 지속적으로 확장, 보완할 수 있습니다.

워낙 다양한 패키지들이 공개되어 있어 어떤 것을 사용하는게 좋다는 이야기를 드리기 조심스럽지만

자주 행하게 되는 반복 작업에 지친 분들이 있을까봐 좋은 패키지 하나를 소개합니다.


업무 특성상 HTML, CSS, Javascript 그리고 JSON 파일을 많이 다루고 있습니다.

여느 웹 개발자나 서버단의 개발자 분들 역시 그런 경우가 많을 것 같습니다.

그동안은 웹 기반으로 만들어져 있는 들여쓰기 정렬툴, 소위 Pretty Print 도구를 사용했습니다만

오프라인 환경에서 작업할 때는 인터넷 엑세스가 제한되어 불편함이 있었습니다.



오늘 발견한 HTMLPrettyfy 패키치는 node.js 가 설치되어 있는 환경에서 사용 가능한 패키지로

서브라임 텍스트2와 3에서 모두 활용할 수 있는 코드 포맷터입니다.

node.js 가 설치되어 있지 않다면 당연히 사용이 어렵다는 정도가 제약사항이라 하겠습니다.


소스코드가 깃헙에 공개되어 있기 때문에 필요에 따라 SQL 이나 다른 구조화된 포맷이 필요한 텍스트에 대해서

기능을 개발하고 제안하여 참여 가능하다는 것도 기억해 두시기 바랍니다. (누가 SQL 좀... 굽신...)




설치를 위해서는 먼저 서브라임 텍스트의 패키지 매니저를 실행해야 합니다.

맥 환경인 경우 Command + Shift + P 를 누르면 되고 윈도인 경우 Ctrl + Shift + P 를 누르면 됩니다.

까만 에디터 위로 조그만 팝업이 뜨면 "Package Control Install Package"를 입력하여 패키지 설치를 시작하겠습니다.



팝업 창이 리프레시되면 위 이미지처럼 "HTML-CSS-JS Prettify"를 검색하시어 선택합니다.

이미 설치되어 있는 경우 결과창이 나오지 않습니다만 설치가 되어 있지 않은 경우

검색 결과 화면이 나오고 엔터를 누르면 서브라임 텍스트 에디터 하단에 설치 진행 현황이 업데이트 됩니다. 


BeforeAfter



이제 정렬하고자 하는 문서가 활성화된 상태에서 Command + Shift + H (윈도에서는 Ctrl + Shift + H) 를 누르면

예쁘게 들여쓰기와 줄바꿈이 된 문서로 탈바꿈 하게 됩니다. 





728x90
728x90

CentOS 환경에서 NPM (node package manager) 와 node.js 를 설치하는 방법을 정리해 봅니다. 환경 셋업을 자주 하지 않다보니 필요할때마다 겪는 시행착오를 줄이기 위해서 블로그에 적어둡니다 ^^;; 주기적으로 디지털 오션을 통해서 서비스 받고 있는 뉴욕 가상머신과 싱가폴 가상머신을 깨끗하게 정리하곤 합니다. 왠지 대청소를 하는 기분이라... 이렇게 해놓고 나면 바로 밀려오는 것이 패키지 설치에 대한 귀차니즘이죠.


간단한 테스트를 할일이 있어 DNS 셋업을 하고보니 가상머신에 아무런 패키지도 설치되지 않은 클린 설치라는 것을 발견했습니다. 이미지를 구워 놓아도 되련만, 그 이미지 조차도 왠지 찜찜해서 종종 하는 작업이 왠지 모르게 아깝게 느껴집니다. 오늘 정리하는 내용은 CentOS 에서 (버전은 6.7 입니다) yum repository 를 업데이트하고 nodejs, npm 을 설치하는 방법입니다.


# sudo yum install epel-release


yum 에 설정된 기본 repository 에는 nodejs 와 npm 이 존재하지 않습니다. 대신 epel repository 에 존재하는데요, epel repository 를 사용하기 위해서 위의 명령으로 epel 을 이용할 수 있도록 해봤습니다.


# yum install nodejs npm --enablerepo=epel


yum 명령으로 nodejs 와 npm 을 한번에 설치해 보겠습니다. 새롭게 준비한 epel repository 를 이용하기 위해서는 yum 옵션으로 --enablerepo=[repository이름] 을 지정해 주셔야 합니다. 위의 커맨드처럼 입력하시면 되겠죠? 약간의 시간이면 두 패키지와 종속된 패키지들이 모두 설치가 완료됩니다. 중간중간 인터렉티브하게 물어보는 질의에는 y 를 눌러주시면 됩니다. 


# npm install -g n


간편한 nodejs 버전 관리를 위해서는 n 을 설치해 주어야겠지요? 이제 npm 이 생겼으니 npm install -g n 명령으로 n 을 설치해 줍니다. 다른 지역의 가상머신과 node.js 버전을 맞춰주기 위해서 4.4.2 버전을 설치했습니다. 


# n 4.4.2


     install : node-v4.4.2

       mkdir : /usr/local/n/versions/node/4.4.2

       fetch : https://nodejs.org/dist/v4.4.2/node-v4.4.2-linux-x64.tar.gz

######################################################################## 100.0%

   installed : v4.4.2


간단한 테스트를 해보기 위해서는 node.js 의 핵심 패키지가 필요하겠죠. express 패키지가 그나마 익숙해서 요것까지 설치를 했습니다. 


# npm install -g express


- NoPD -

728x90
728x90

node.js 를 이용하여 서버 프로그램을 만드는 경우, 디버깅이 짜증날때가 간혹 있습니다. 소스코드를 수정하면 다시 프로세스를 죽였다가 살리는 과정을 반복하는 경험들을 많이 하실텐데요, 이런 불편함을 없애주기 위한 여러가지 패키지들이 많이 준비되어 있습니다. 다 간단하긴 하지만 그 중에서도 nodemon 을 무척 잘 쓰고 있어서 소개해 봅니다.



nodemon GitHub 페이지 [바로가기]


당연하겠지만 Node Packager Manager 를 이용해서도 손쉽게 설치하실 수 있습니다. npm 명령을 이용해서 패키지를 설치하려면 아래와 같이 명령을 입력하시면 됩니다. 관리자 권한이 필요할 수 있다는 점 기억해 두시면 되겠네요.


npm install -g nodemon


nodemon 을 설치한 이후에 이용하는 방법은 node 를 통해 스크립트를 실행하지 마시고 nodemon 을 이용해서 스크립트를 실행하기만 하면 됩니다. 말로 적으면 복잡하나 커맨드로 보자면...


(기존) node server.js

(변경) nodemon server.js


번거로움을 한번에 없애주는 nodemon 으로 프로세스 중단, 재시작하는 불편함을 없애보시기 바랍니다!


728x90
728x90
자바스크립트는 참 편리한 스크립트 언어이지만 다른 한편으로는 이해하기 힘든 녀석이기도 합니다. 이유인 즉선 너무 유연하게 사용할 수 있다보니 가끔 일반적인 언어, 컴퓨터 상식으로는 "왜 이렇게 동작하지?" 하는 경우들이 있기 때문입니다. 가장 대표적인 것이 조건 비교문을 이용하여 변수나 객체를 비교할때 입니다. 잘 동작할 것으로 생각했던 구문들이 정상적인 동작을 하지 않거나 예상치 못한 반응을 한다면 혹시 아래 표에 나온 경우중 하나가 아닌지 잘 살펴봐야 합니다. 아래 표는 http://dorey.github.io/JavaScript-Equality-Table/ 에서 업어왔습니다

 
Boolean 값인 True 와 1은 같은 값일까요? 그리고 True 와 "1"은 같은 값일까요? 조금 더 나아가 True 와 [1] 을 비교하면 어떻게 될까요? 두개의 이퀄 연산자(==)를 사용하여 자바스크립트에서 값을 비교하는 경우 위의 표에서 초록색으로 표시된 것처럼 결과가 리턴된다고 합니다. "" 와 0 이 같다는 생각을 해보셨나요? 혹은 "" 와 [[]] 가 같은 값으로 식별된다는 상상을 누가 해봤을까요? 

때문에 자바스크립트에서는 각 객체와 객체를 비교했을 때 값을 정확하게 예측하기 힘들다면 이퀄 연산자를 두개 이어쓰는 대신 세개(===)를 쓰는 것이 좋습니다. 세개의 이퀄 연산자를 사용하는 경우 엄격한 규칙에 의거하여 값을 비교하게 되고 이로 인한 조건 비교문의 오동작을 효과적으로 막을 수 있습니다. 세개의 연산자에 대한 부정형은 !== 이니 참고하시면 될 것 같습니다


훨씬 상식(?)에 가까운 결과를 보실 수 있습니다. 같은 형태의 자료형들간에 비교를 했을때 정확한 값이 나오는 것을 볼 수 있습니다. 자바스크립트를 쓰면서 뭔가 이해할 수 없는 동작이 발생하고 있다면 표를 참고하시고 연산자를 바꿔보는 것을 검토해 보세요. 우리의 시간은 소중하니까요. :-)

 

728x90

+ Recent posts