Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

98 lines (60 sloc) 11.378 kB

클라이언트측 코드

소켓스트림은 구조화된 클라이언트 측 자바스크립트를 서버 측 코드와 완벽히 동일한 방법으로 작성할수 있게 합니다. 양쪽의 모듈 공유도 쉽게 하구요.

모듈사용하기

libs(아래 참조)디렉토리에 있지 않은 모든 파일은 모듈로 취급됩니다. 모듈은 서버쪽의 노드와 같은 감각으로 사용할 수 있습니다. 다른 모듈을 require()하는것도 모듈안에서 값을 케싱하는 것도요.

클라이언트 측 코드는 /client/code에 있습니다. 원하는 만큼 서브디렉토리를 만드셔도 됩니다. 모듈 참조는 상대패스로 할수도 있고(예를들면require('../../image/processor')) 절대패스로도(require('/path/to/my/module.js')) 할 수 있습니다. 전부 원하시는대로 움직일 겁니다. 단지 요청(require())하지않은 모듈은 실행하지 않는것만 기억해두세요.

팁: 브라우저 콘솔에서 require.modules을 쳐보면 require()가능한 모든 모듈의 목록을 보실수 있습니다.

특별한 예외

브라우져와 서버를 퇴대한 비슷하게 하려고 노력하고 있지만, 아직 몇가지 특별한 경우가 있습니다:

'libs' - 오래된 (커먼js가 아닌) 라이브러리들

'libs'안에 있는 어떤 파일도 모듈로 취급되지 않습니다. 대신에 있는 어떤 수정도 없이 그대로 전송됩니다. 일반적으로 window오브젝트를 사용하는 제이쿼리나 다른 라이브러리는 /client/code안의 'libs'디렉토리에 둡니다.

Common JS라이브러리가 아닌 파일은 로드 순서가 매우 중요하므로 다음 둘 중에 하나는 하셔야 합니다. libs아래의 파일을 알파벳 순서로 정렬 해두던가(역주: 숫자도 좋음 1_xxxx.js, 2_xxxx.js) ss.client.define()명령으로 명시적으로 각파일의 로딩순서를 적으세요.

'system' - 시스템 모듈

시스템 모듈은 일반 모듈과 비슷하지만 한가지 중요한 차이점이 있습니다: 그건 / 없이 접근 할수있다는건데요. 노드js의 require('url')require('querystring')를 생각하시면 이해하기 편하실꺼에요.

근데 왜 이런 구별이 필요할까요? 왜냐하면 Backbone.js같은 라이브러리('libs' 디렉토리에 넣기보단 모듈로써 사용하고 싶을때)는 시스템 모듈에 의존하기 때문입니다. 이런 경우 백본은 require('underscore')를 내부적으로 요청합니다. 따라서 backbone.jsunderscore.jssystem디렉토리에 있어야 하죠.

소켓스트림은 Browserify의 코드를 사용하기 때문에, 'system'디랙토리도 노드의 inbuilt 모듈을 브라우저에서 사용할 수 있습니다. https://github.com/substack/node-browserify/tree/master/builtins 로 가셔서 라이브러리를 복사해서 system을 부르는 /client/code 아무데나 붙여 넣으세요.

'/entry.js' - 항목 관리자

/entry 모듈은 특별한 차이점이 있는 일반 모듈입니다: 이 모듈은 모든 파일이 브라우저에 전송된 시점에서 자동으로 요청되는 단 하나의 모듈입니다.

entry.js (아니면 entry.coffee) 파일은 프로젝트를 만들때 자동적으로 생성됩니다. 이 파일엔 아주 조금의 셈플 코드가 들어있어, 아마도 이걸 수정해웹소켓 연결이 끊어지거나, 재연결 되거나, 다음 웹소켓 연결이 이루어지면 require()할 모듈을 설정하거나 할수있습니다.

라이브러리가 'libs' 에 들어갈지 'system'에 들어갈지는 어떻게 구별해야 할까요?

그건 window값에 접근하는가에 달려있습니다. 예를들어, Backbone.js는 Backbone.history를 사용해window객체를 접근하지 않는 이상 system에서 잘 작동합니다.

없는 모듈을 요청하면 어떤 일이 생기나요?

브라우저 콘솔에서 에러를 보실수 있습니다. 앞으로는 소켓스트림에서 그런 일이 발생하기 전에 잡을수 있게 할 생각입니다.

맞춤형 모듈 로딩

모든 모듈을 한번에 브라우저에 보낼 필요는 없습니다. 필요할 때 로딩하게 할 수도 있어요.

배경 정보

클라이언트 코드를 바로잡자는 것은 소켓스트림 프로젝트를 시작했을 때 소켓스트림의 중요한 목표중 하나였습니다.

웹 개발자들은 너무나 오랫동안 네임스페이스와 의존성을 관리할 방법이 없는 체로 구조화되지 않은 자바스크립트 파일 더미와 씨름해야만 했습니다.

이런 혼돈스러운 상태에서, Require.js같은 해결책과 다른 AMD 접근법은 어느정도 질서를 가져올 수 있었습니다만, 개발자들에게 의존성을 수동으로 목록을 만들고 추적해야하는 책임이 생겨 버렸습니다. 더 문제인 점은, 클라이언트와 서버에서 파일을 require()하고 싶을때 각각 다른 문법으로 하고 있었다는 점입니다. - 이것 때문에 클라이언트 와 서버의 파일공유하려는 시도는 꿈도 꿀 수 없었죠.

소켓스트림에서는 좀 더 잘하고 싶었습니다. 결국, 소켓스트림은 클라이언트와 서버 스택을 모두 관리하는 독특한 프레임워크가 되어 버렸습니다. 이 솔루션은 Browserify 덕분입니다. - 멋지고, 가볍고, 모든 문제를 한방에 해결해주는 라이브러리 였지요.

소켓스트림은 Browserify 를 package.json에 추가하고 그 위에 구현을 추가하는 방식으로 개발하지는 않았습니다. 왜냐하면 거기에 우리가 필요없는 코드가 들어있었거든요, 하지만 우리는 거기에서 핵심 컴포넌트를 가져왔습니다.(require()라는 마법을 가능하게 해주는 핵심 코드를 포함해서요.) 이 까다로운 문제에 대한 깔끔한 해결책을 주신 Substack에게 감사합니다.

Jump to Line
Something went wrong with that request. Please try again.