WSL(윈도우 서브시스템 리눅스) 에서 node.js 개발하기

오늘 좀 골때리는 경험을 했기에 글 싸지른다. 왜인지는 후에 설명한다.
이 글은 윈도우 10 레드스톤 2(크리에이터즈 업데이트) 이상에서 리눅스 서브시스템을 설치한 사용자에 해당된다.
안깔았으면 이전 글을 참고하고, 해당사항 없으면 씹기 바란다.

1. node.js 설치

먼저 apt-get 공식 리포지토리의 node 는 옛날 버전이다.
원하는 버전을 설치하고자 할 경우 리포지토리를 추가하여 설치해야 한다.
설치 버전별 목록은 여기서 볼 수 있다.
여기서는 가장 최신 버전인 7.x 버전을 설치하도록 하겠다.
별거 없다.

curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -  
sudo apt-get install -y nodejs  

끗. 사실 윈도우에 별도로 node.js 깐 적 없다면 1번에서 끝나면 된다.
URL 끝 setup_(메이저버전).x 파일명 부분에 자신이 원하는 버전 숫자로 바꾸면 된다.
하지만 윈도우 내 개발환경에서 node.jsPython 등을 설치했을 경우 골때리는 문제가 발생할 것이다.
이제부터 들어간다.

2. 환경변수 관리

이 글을 쓰는 이유이기도 한데, 기본적으로 리눅스 서브시스템을 실행하면 윈도우 환경변수가 리눅스로 공유된다.
그래서 윈도우 PATH 변수가 먼저 들어간 뒤, 리눅스 PATH 변수 내용이 짬뽕된다.
이 때문에, 예를 들어 윈도우 내 node.js를 설치한 상태일 경우, npm 실행 시 아래 메시지가 나올 것이다.

$ npm
: not foundram Files/nodejs/npm: 3: /mnt/c/Program Files/nodejs/npm:
: not foundram Files/nodejs/npm: 5: /mnt/c/Program Files/nodejs/npm:
/mnt/c/Program Files/nodejs/npm: 6: /mnt/c/Program Files/nodejs/npm: Syntax error: word unexpected (expecting "in")

물론 환경변수 공유는 편리할 수 있으나, 대부분 독립형 운영체제라 가정하고 설계하고 개발하기 때문에
개발자 입장에서는 난처하면서도 골 안때릴 수가 없다. 몇가지 방법이 있는데 취향껏 따라하면 된다.

윈도우 환경변수 공유하지 않도록 설정

윈도우 아니랄까봐 리눅스 서브시스템 옵션을 레지스트리에 등록하고 있다.
따라서 만약 윈도우 환경변수를 리눅스로 옮기기 싫으면 아래 레지스트리 소스를 메모장 등으로 붙여넣은 후,

Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Lxss]
"AppendNtPath"=dword:00000000

참고로 레지파일은 반드시 빈 행이 하나 들어가도록 한 뒤 끝내야 한다.
원하는 파일명.reg 로 저장한 뒤 걍 실행해버리면 된다. 물론 되돌리고 싶으면 값 부분에 dword:00000001 로 바꿔 실행하면 된다.

Github Issue 출처

.bashrc 파일에 원치 않는 변수내용 삭제

윈도우 환경 변수를 포기 못할 경우에 간단한 팁이다.
PATH 환경변수에 특정 내용을 지우는 식으로 처리할 수 있다.
아래 쉘 스크립트를 ~/.bashrc 파일 내용에 추가하면 원치 않는 변수 내용을 삭제할 수 있다.

### remove unnecessary Win PATHs
# This can prevent extension-less commands from bleeding into BASH.
# (eg. "ng" would execute the Win bin if "@angular/cli" wasn't installed on Linux.)
#
function path_remove {
  # Delete path by parts so we can never accidentally remove sub paths
  PATH=${PATH//":$1:"/":"} # delete any instances in the middle
  PATH=${PATH/#"$1:"/} # delete any instance at the beginning
  PATH=${PATH/%":$1"/} # delete any instance in the at the end
}

path_remove '/mnt/c/Users/me/AppData/Roaming/npm'
path_remove '/mnt/c/Users/me/AppData/Local/Yarn/bin'
path_remove '/mnt/c/Program Files (x86)/Yarn/bin'
path_remove '/mnt/c/Program Files/Git'
path_remove '/mnt/c/Program Files/Git/cmd'
path_remove '/mnt/c/Program Files/nodejs'
path_remove '/mnt/c/OpenSSL-Win32/bin'
path_remove '/mnt/c/Program Files (x86)/Python27'

이후 bash를 빠져나가고 다시 bash 실행하면 원치 않는 명령어 실행을 방지하여 조금은 더 깨끗한 환경에서 개발할 수 있을 것이다.
Github Issue 출처

composite / 2017년 8월 24일 / Piss Development / 1 Comment

appjs Dev kit

app.js 개발을 위한 키트.

내용물은 node.js 포함하여 app.js 등이 있으며 크기는 약 16MB.

첨부파일 제한 때문에 어쩔 수 없이 분할압축하여 올림.

이 배포본은 appjs 공식 사이트의 배포본을 기초로 하여 제작됨.

따라서 readme.txt 파일을 참조하여 유의사항을 짚어본 후 개발 및 배포할 것.

예제 또한 app.js 에서 만든 예제를 올려두었음.

그럼 app.js 의 재미를 느껴보기 바란다.

조만간 mac 및 linux 용 개발 키트도 만들어 올릴 예정이다.

cfile7.uf.1777D039505C203A0101C8.rar

<

p style=”text-align: left;”>cfile10.uf.184AE639505C203C330869.rar

한번에 받기 (github)

composite / 2012년 9월 21일 / 미분류 / 0 Comments

Node.js 로 데스크탑 앱을 만드는 app.js

node.js 에서 드디어 UI도 정복하는 건가? 커뮤니티에서 이미 데스크탑 UI까지 이식하려 한다.

UI 프레임워크는 다른 것도 봤듯이 API가 드럽게 방대해서 일반적인 데스크탭 앱 프레임워크를 만들기엔 당연히 무리.

하지만 그런 UI 구조에 구세주를 내려주셨으니 그것은 바로 Chrome Embedded Framework

바로 프로그램 안에 HTML5를 이식할 수 있는 프레임워크이다. 거기다가 크로스 플랫폼이다.

app.js 는 바로 이 크롬 임베디드로 UI 프레임워크의 방대함을 간단하게 극복했다.

만약 Qt나 WxWidget 를 자바스크립트로 이식한다 해도 그 API를 알아야 하지만, HTML은 그럴 필요가 없기 때문이다.

Morteza Milani 와 Brandon Benvie 2명이서 만든 이 node.js 프레임워크는 단 몇분만에 UI를 입힌 데스크탑 앱을 만들 수 있도록 도와준다.

준비물 : node.js 32비트 (64비트의 경우 크롬 엔진이 지원하지 않아 안된다 한다. 현재 수정 중).

NPM:

npm install appjs

NPM 설치 시 윈도우의 경우 Visual Studio 2010 컴파일러가 없는 경우 네이티브 코드 컴파일이 안될 것이다. 다행히도 각각의 바이너리를 제공하니 다운받으면 된다.

AppJS 0.0.19 Distributables:

      <ul><li><a href="http://dists.appjs.org/0.0.19/appjs-0.0.19-win32-ia32.zip">Windows</a></li><li>Linux <a href="http://dists.appjs.org/0.0.19/appjs-0.0.19-linux-ia32.tar.gz">32 bit</a> / <a href="http://dists.appjs.org/0.0.19/appjs-0.0.19-linux-x64.tar.gz">64 bit</a></li><li><a href="http://dists.appjs.org/0.0.19/appjs-0.0.19-darwin-ia32.zip">Mac OS X</a></li></ul><p>그런 다음 <span style="font-family: Courier New;">node --harmony node_modules/appjs/examples/hello_world/app.js</span> 실행을 해 보시라.

화면이 대충 이런 식으로 나올 것이다.

아래는 본인이 직접 앱을 시연하는 동영상이다.

크롬 개발자 도구도 지원하기 때문에 UI 디버깅도 척척 해낼 수 있다.

그럼 이거를 어디다 쓰면 좋을까? 좋은 질문이다.

활용 범위는 다양하다. 일단 HTML5 이므로 여러분이 원하는 최대한의 표현을 할 수 있다. 차트던 그래픽이던 모두.

서버 모니터링할때 이쁘게 꾸밀 수 있지 않겠는가?

아니면 아예 클라이언트 데스크탑 앱으로 해도 손색이 없다. 커뮤니티 전용 앱이라던가, 웹 게임 등. 다양한 활용 범위가 있을 것이다.

또한 안정화가 되면 비즈니스에서 보안을 요구하는 사내 프로그램에 대한 생산성 향상을 꾀할 수 있다.

또한 HTML5/CSS/Javascript 정도 알면 당신은 이미 100% 데스크탑 앱을 만들 수 있다.

또한 node.js 자스 코드를 그대로 웹상에서 활용 가능하다. 말 다했다.

아직 취약점이 있고 개선해야 할 부분은 천지다. 하지만 이 가능성은 이미 충분하고도 남는다.

이제 자바스크립트로도 데스크탑 앱을 만들 수 있다. 준비 되었으면, 참여하고 경험하라!

composite / 2012년 9월 19일 / 1127 / 1 Comment