blah blah

jsbin 설치

팀내 javascript 테스트 및 소스 공유를 위해 윈도우 XP 에 jsbin 설치하다가 몇가지 자질구레한 에러가 발생하여 해결 내역을 간단히 메모해보았다.

1. jsbin 이란? http://jsbin.com

  • Collaborative JavaScript Debugging App.
  • Test live JavaScript with HTML and CSS context
  • 비슷한 서비스로 http://jsfiddle.net/ 이 있으나 jsfiddle 의 경우 소스 공개되어 있지 않음.

2. 기본 설치

github 위키에 있는 설치 문서 How to install JS Bin in your own environment 대로 하면된다.

다만 일부 단계에서 설치 문서대로 했을 경우 에러 발생하므로 여기서는 이 에러 해결한 내용만 간단히 기술하겠다.
( Step 2 에서 제시한 MAMP 설치하지 않았고 Apache, PHP, mySQL 별도로 설치된 상태에서 진행했음 )

3. 에러 수정 내역

3.1 Step 3의 jsbin.sql 관련 부분

최초 테이블 생성 시 owners 테이블 name, url 컬럼 길이 문제로 생성 오류 발생

  • 내 컴에 설치된 mySQL 버전의 문제인지 다른 문제인지는 모르겠으나 255 라는 기본 생성 컬럼 길이가 운용에 핵심 사항은 아니므로 일단 컬럼 길이를 허용하는 크기로 조정.

테이블 생성에는 문제 없으나 실제 설치 후 jsbin 사용 시 작성한 javascript/html 저장 시에 insert 오류 발생

  • insert 문 실행 시 streaming_key, streaming_read_key 등의 값에 아무 값도 전달되지 않음. 하지만 테이블 설계 상으로는 이 컬럼들 ‘NOT NULL’이라고 옵션 지정되어 있어서 sql 에러 발생함.
  • 해당 컬럼들에서 ‘NOT NULL’ 옵션을 일단 제거하여 테이블 재생성.

3.2 Step 5 (optional) Build 관련 부분

make 실행 시 Makefile 의 내용이 실행되는데 git submodule init, git submodule update 은 github 에서 소스 다운로드했을 경우 굳이 실행 필요 없을 듯(확실하지는 않음)
마지막 라인의 php ./build/build.php 실행해서 에러없이 완료되면 js 디렉토리에 jsin-2.8.10.js 파일이 생성된다 ( 이 버전 표시 자바스크립트 파일은 VERSION 파일에 명기된 버전에 따르는 듯 )

  • 하지만 이렇게 생성되어도 jsbin 웹에서 실행해보면 jsbin 못 찾아서 에러 발생함.
  • 에러 내용 참고하여 js 디렉토리 내에 2.8.10 이란 디렉토리 생성 후 여기에 위에서 생성된 jsin-2.8.10.js 파일을 jsbin.js 으로 이름 변경하여 복사해 넣음.

3.3 웹에서 실행 시 save 오류

위 작업들 모두 마친 후 웹 상에서 실행해보면 기본 기능들은 모두 정상 작동했으나 ‘Save’ 버튼 클릭 시 Save 란 파일 못찾는다는 에러 발생.
이 에러는 4.3 Host url 에서 언급된 .htaccess 파일에 정의된 Rewrite 룰이 적용되지 않아서 발생하는 문제로 httpd.conf 에서 .htaccess 내용 적용될 수 있도록 Document root 디렉토리의 Options 과 AllowOverride 설정 값을 아래 같은 식으로 수정해주었다.

  • 내 경우에는 로컬에서 테스트용으로 돌리는 거므로 그냥 간단히 이런 식으로 했으나 실제 운영 서비스라면 아파치 설정 문서 좀 더 꼼꼼하게 읽어야할거임.
<Directory "D:/Dev/Apache2.2/htdocs">
    Options Indexes FollowSymLinks
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>

매 번 후회하지만 작업 후 곧장 기록 남기지 않고 기억 더듬어한 것이라 정확하지 않은 내용이 있을 수 있 …

Advertisements

One thought on “jsbin 설치

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s