리눅스에서 NPM -> nodejs -> socket.io 순으로 설치하기. While이 에 작성. 2,808번 읽힘.
socket.io 는 웹에서 실시간처리에 관한 것들을 쉽게 구현 할 수 있도록 만들어진 라이브러리이다. 클라이언트와 서버 모두 같이 동작시키도록 설계되어 있다.
클라이언트는 간단한 .js 파일만 읽으면 되고, 서버에서는 nodejs 라는 것을 필요로 한다.
이름에서 보듯이 nodejs 의 언어는 javascript 이다. C언어에서 CLI 로 보통 간단한 프로그램을 만들 던 것 같이, PHP에서도 PHP-CLI라고 간단한 CLI프로그램을 만들 수 있도록 설계 된 것을 본 적이 있을 것이다. 이 nodejs 도 역시 같은 종류이며 javascript 를 CLI로 활용 가능하게 해준다. javascript 를 돌리는 엔진은 구글크롬에서도 쓰고 있는 유명한 V8엔진이다.
먼저 nodejs 설치는 소스를 받아 컴파일을 하는게 제일 낫다. 다음으로 socket.io 는 npm을 통해 설치하는 것이 추후 귀찮고 복잡한 방법이 없는 제일 쉬운 방법이다. 아래에 소개하는 방법 중 이미 설치된 것들은 그냥 넘기면 된다. 보기 편하기 위해 기본적으로 sudo 같은 것들은 생략하므로 알아서 하기 바란다.
설치 방법
curl 설치하기 (apt-get)
apt-get install curl
curl 설치하기 (yum)
yum install curlnodejs 설치하기
http://nodejs.org/ 에서 원하는 버전을 받아서 wget http://nodejs.org/dist/node-v0.4.9.tar.gz 이런 식으로 파일을 받는다. 웬만하면 stable 버전으로 하는게 낫다. (안정된 버전)
tar -zxvf node-…. 를 통해 압축을 푼다. 압축풀린 디렉토리로 들어가서 ./configure, make 를 한다.
그리고 make install 을 해도 되고 make DESTDIR=원하는디렉토리 install 을 해도 되는데, 원하는 디렉토리에 설치를 하면 나중에 귀찮게 손봐야할일이 조금 있다. 그냥 좀 찝찝하지만 make install 을 추천한다.
node 를 쓰고 엔터를 해보고 명령어가 없다고 나오지 않으면 정상적으로 설치가 된 것이다. 뭔가 치는게 나오면 Ctrl+C를 눌러 종료한다. 받은 tar.gz 파일과 압축 푼 폴더는 별 볼일 없으면 지워도 된다. 근데 나중에 보고 싶어 질 수도 있으니 조심.
npm 설치하기
curl http://npmjs.org/install.sh | sh
참고: 자동으로 yes 를 하도록 하려면 curl http://npmjs.org/install.sh | clean=yes sh
권한 문제가 구리므로 npm 설치시에는 sudo su 를 해서 root 로 설치하는 것을 추천한다. 설치중에 g++이 없다든가 openssl 이 없다든가 잡소리가 가끔 나오는 것을 볼수 있을지도 모른다. 에러메시지 구글링을 통해 알아서 devel 버전을 apt-get 으로 설치하기 바란다.
socket.io 설치하기
여기서 npm이 필요한데 이미 위에서 npm을 설치 했으니 간단히 아래의 명령을 치면 설치가 된다. 참고로, npm을 처음써봐서 잘은 모르겠지만 현재 있는 디렉토리를 기준으로 뭔가를 설치하는 것 같으므로 npm을 통해서 어떤 것을 설치하기 전에 설치를 하고싶은 디렉토리를 미리 정해둔다. 나는 /home/node/ 로 정해뒀다.
npm install socket.io 를 입력한다. 약간의 시간이 흐른 후 설치가 완료된다. ls 를 해보면 뭔가가 설치된걸 볼 수 있다.
예제 다운 및 보편적으로 필요한 모듈 설치하기
socket.io 의 기본 예제들은 express, stylus, nib 등 npm 을 모르는 사람으로썬 듣도보도 못한 이상한 모듈을 많이 갖다쓴다. 그냥 socket.io 만 설치하고 예제를 실행하면 실행이 되지 않을 수 있으니 이런 것들을 설치해야한다. 먼저 예제를 받아보자.
http://socket.io/ 에 접속하여 오른쪽 위 혹은 사이트 내에 Github 로 접근 하는 곳을 찾아 들어간다. github 주소를 찾았으면 git clone git://github.com/LearnBoost/socket.io.git 을 하던가 혹은 Downloads 눌러서 tar.gz 파일을 받아 압축을 푼다.
생긴 디렉토리에 들어가 examples 폴더에 들어가면 간단한 예제 chat 와 irc-output 이 나온다. chat 폴더에 들어가 node app.js 를 입력하면 테스트 구동을 시킬 수 있다.
그러나 처음에는 express 모듈을 찾을 수 없다고 오류가 날 것이다. 그럼, 아까 npm 설치를 하던 디렉토리로 다시 들어가 npm install express 를 한다. 그리고 다시 node app.js 를 해본다. 이번엔 stylus 가 없다고 할 것이다. 똑같이 알아서 설치해주고 이후에도 nib 등에 같은 메시지가 뜨면 알아서 계속 설치해준다.
다 설치 되면
info - socket.io started
app listening on http://0.0.0.0:3000
위와 같이 뜰 것이다. 그럼 정상적으로 구동 된 것이며 http://서버아이피:3000 으로 접속 해본다.
그런데, 들어가면 또 모듈이 없다는 에러가 뜬다. 이처럼 어떤 프로그램에선 어떤 모듈을 쓰고 어떤 프로그램에선 또 다른 어떤 것을 쓰기 때문에 예제들을 실행시켜볼땐 무슨 모듈을 쓰고 있는지 확인 후 설치를 해줘야한다. 설치 후 새로고침을 해보면 간지나는 채팅방을 볼 수 있다. 브라우저를 여러개 띄워보고 스마트폰으로도 접속해서 테스트도 해보면 끝.
이제 socket.io 사이트의 예제나 각종 인터넷에 널린 예제를 가지고 이것저것 해보면서 socket.io 와 nodejs를 익혀보면 된다.
클라이언트용 socket.io/socket.io.js 는 어디서 받지?
그냥 서버를 구동시키면 자동으로 /socket.io/socket.io.js 파일이 링크가 된다.
도메인과 라이브러리 While이 에 작성. 1,075번 읽힘.
나는 지금 시점에서 가지고 있는 도메인이 40개가 넘는다.
일부는 무료도메인 서비스 (oa.to) 를 위해서 산것도 있고, 내가 보기에 좋은 도메인이라 가지고 놀려고 산 것도 있고 또 무료도메인 서비스같이 특정 서비스를 하려고, 아니면 홈페이지를 운영하려고 산 도메인도 있다.
무튼 지금은 내가 보기에 좋은 도메인이라고 생각하는거에 대해서 글을 쓸 생각인데, 요즘에 만들고 있는 사이트에서는 이미지나 자바스크립트, CSS등을 모두 한곳에 몰아놓고 쓴다. 뭐 맨날 이것저것 홈페이지 관련된걸 만들다보니 매번 공통적으로 쓰는게 있었다. 정말로 내가 만든 페이지에서는 빠지지 않는 이것!
어떤 사이트에서도 공통적으로 적용 할 수 있는 ‘이니셜라이저 CSS’이다. 웹표준 사이트를 만드려고 하기 위해서는 어떤 사이트든 무조건 CSS에 대해서 이니셜라이징을 해둬야 많은 브라우저에서 잘보이기 마련이다. 그 말썽쟁이 IE라는 놈 때문에.. 저기엔 내가 정말로 자주 쓰고 항상 쓰는 속성만 싹 모아놨다. 그게 바로 “라이브러리”이다. 자기가 많이 쓰는 기능들을 한데모아 편하게 쓸 수 있도록 모아두는 걸 라이브러리라고 한다. 어떤 프로그래머든 자신이 자주이용하는 함수를 모아둔 라이브러리를 만들고 싶은 마음이 없는 사람은 거의 없을거다. 그냥 나도 차곡차곡 정리하다보니 아래에 나올 라이브러리들이 모아졌다.
근데 뭔가 특이한게 있지 않은가? 위에 보이는 저 도메인은 ‘라이브러리’전용 도메인이다. 실제로는 내가 zz.gg 라는 도메인의 주인이고, 거기에 이미지 서버등의 서브도메인으로 많이 쓰는 ”static”의 약자인 s를 붙여 s.zz.gg 라고 지었다. ss.gg 뭐 요정도면 더 좋았겠지만 이런건 구하기 힘드니까.. 이게 뭔 의미냐 싶겠지만 저렇게 하면 입력하기 상당히 쉽다. 그런데 어차피 복사 붙여넣기로 css랑 js 붙여넣어 쓰면서 뭘 편하길 바라냐고? 아 그것까지는 대답 못해주겠음! 사실 그것까지는 나도잘.. 그냥 간지나게 짧은 도메인 붙여봤음.
내가 젤 자주 쓰는 공개 ajax 라이브러리가 jquery 이다. 이것도 역시 아래와 같이 주소를 구성하여 쓰고있다.
http://s.zz.gg/jquery/jquery.placeholder.js
다른 것들과 구분의 핵심이 s.zz.gg/ 뒤에 나오는 폴더이름이다. 저 폴더를 중심으로 구분하고 있다. 이런거 하다보면 대충대충 이리저리 껴넣다가 나중에 구조가 파산신청하고 싶어버리게 될때가 상당히 많은데 첨부터 차곡차곡.. 이외에도 phpjs, sound manager2, codemirror, extjs 등을 모두 넣어놨다. 이렇게 쓴지 반년은 된거 같은데 엄청 편하다.
그리고 위에 css 라이브러리 뿐만 아니라 js 라이브러리도 쌓고 있다. 요즘에 js 에 재미가 들어서 전면 ajax 적용된 CMS를 만들고 있다. 코드네임은 infiniteboard.
http://s.zz.gg/infinite/func.js
위는 가장 자주 쓰는 함수 모음의 일부이다.
여러가지가 있다. form 태그에 여러 간단한 attribute 만 추가해주고 아주 쉽게 ajax 처리를 끝내버릴 수 있는, 추가적인 스크립트 따위도 코딩이 필요 없이 그냥 간단한 ajax 폼를 한방에 만들어버릴 수 있는 함수가 있다.
둘째로 빙빙 돌아가는 로딩이미지를 보여주는 함수가 있다.
셋째로 a href 와 비슷한 기능을 하면서 특정 키를 누르고 있을때는 새창이 열리게 하는 등의 기능이 있는 함수가 있다. 대체적으로 button 에다가 a href 거는 것은 비표준이니, onclick로 링크를 걸고 싶을 때 사용한다.
넷째로 실시간 시간을 보여주는 처리를 하는 함수이다. phpjs 의 time() 함수에 의존성이 있고 <span class=’_timestamp’ timestamp=’타임스탬프값’></span> 라고 본문에 적어두면 특정 시간마다 갱신하는 기능을 넣을 수 있다. 그렇게 되면 저 타임스탬프값과 클라이언트의 시간 값을 비교해서 몇초 전에 작성된 글인가? 요런걸 갖다 보여준다. 서버와 클라이언트간의 시간 차가 있을 수 있으니 이것도 처리를 해주는데, 이건 서버마다 다르니까 웹페이지를 만들때 따로 처리를 한다. 저기 보이는 전역 변수 timeDif 가 그 비밀이다.
또 다섯째로 instantForm 이라는 부분이다. 이건 일반적으로 inline 으로 보이는 “텍스트”를 클릭을 하면 갑자기 “input 상자”로 바뀌면서 바로 그 자리에서 수정을 할 수 있도록 하는 기능이다. 아직 만든지 1-2주밖에 되지 않았고 좀더 확실하고 범용적이게 개선이 되려면 아직 몇주 더 걸릴것이다. 참고로 요건 uibutton 이라는 함수에 의존성이 있다. 그냥 꾸밈용 함수인데 이건 나~중에 설명하기로 한다. 페이스북의 버튼 기능에 감동받아서 만든 함수이다.