장고(Django) 환경의 HTML페이지에서 값을 입력 받아, ajax로 서버로 보내면 json타입으로 결과를 받아 실시간으로 화면에 보여주는 기능에 대한 내용입니다. 

다른 환경이나 언어라 하더라도 내용을 이해하시면 응용해서 쉽게 적용이 가능합니다. 

동작 방식을 그림으로 그려보자면 아래 그림과 같은 구조입니다. 

대략적인 동작 순서는

먼저 HTML페이지에서 입력창을 통해 사용자로 부터 값을 입력 받게 되면 

(1)JQuery에서 입력받은 값을 가지고 서버로 보내기 위한 작업을 진행하고 

(2) Ajax로 서버로 패킷을 전송하게 됩니다. 

이에 대해 서버에서는 결과값으로 보여줄 값에 대한 처리를 진행 한 후 

(3) 데이터를 Json 타입으로 변환하여 응답 패킷을 보냅니다. 

(4) 응답 패킷을 화면에 보여줄 포맷에 맞게 처리 하여 HTML 화면에서 보여주게 됩니다. 

이제, 화면별로 소스코드를 살펴봅시다. 

HTML 페이지 

'input' 태그(tag)를 사용해서 값을 입력 받도록 하고, 입력 받은 값은 'searchword'라는 'id'로 접근 할 수 있도록 해줬습니다. 

'div' 태그의 id값인 'results'는 결과값을 보여주기 위해 사용합니다. 

'searchajax()'는 아래 있는 jquery로 작성한 코드를 호출하는 코드입니다. 

JQuery 파일 

텍스트 입력 필드의 값을 가져와서 값이 존재하면 ajax로 전송하는 코드입니다. 

텍스트 입력 여부는 'keyup()' 함수를 사용해서 판단 할 수 있습니다. 

Ajax는 'POST' 메소드(method)로 보내며 데이터는 키(key) 값을 'searchwords'로 해서 전송합니다. 

성공적으로 전송하고 응답을 받았다면, 'success'에 작성한 것 처럼 값을 html 의 'results' 필드에 넣어주는 작업까지 진행합니다.

장고(Django) 서버 (파이썬)

'POST' 패킷에 대해 'searchwords' 값이 존재하는지 확인 후 원하는 작업을 수행하도록 코드를 작성해주시면 됩니다. 

결과값에 대해서는 json 타입으로 변환 후 응답 패킷을 보내주도록 하면 됩니다. 

물론, 장고의 url 설정에 '/browser/searchData/' 에 대한 값을 추가해주셔야합니다. 

이제 입력 필드에 값이 입력 될 때마다 실시간으로 결과 값이 화면에 출력되는것을 확인 하실 수 있을 겁니다. 

Django 어플리케이션을 Apache 서버에서 구동 시키기 위해 Debian 패키지를 만드는 방법입니다. 

이 글에서는 바이너리 패키지를 만드는 방법에 대한 설명만 하도록 하겠습니다. 

deb 패키징을 하려는 어플리케이션이  /home/USERNAME/Workspace/myapp 폴더라고 가정하고 진행하겠습니다.  (django 어플리케이션을 패키징 하는 것이므로 settings.py나 manage.py와 같은 파일들이 들어 있을 겁니다. ) 

myapp 이란 django 어플리케이션을 djangoapp이란 이름이로 패키지를 하는 절차입니다. 

작업을 진행하기 앞서 패키징을 진행할 위치에서 필요한 폴더를 만들고 작업하려는 파일들을 복사해 주어야 합니다. 

그 다음 패키징과 관련된 파일들을 넣어줄 'DEBIAN' 폴더도 만들어 줍시다. 

DEBIAN 폴더

이 폴더는 아래 파일들을 포함하고 있어야 합니다. 

• control
• config
• conffiles
• templates
• postinst
• postrm
• preinst
• prerm

각 파일들을 어떻게 작성해야 하는지 차례대로 알아봅시다. 

control 

이 파일은 패키징에 매우 중요한 파일입니다. 패키지에 대한 정보와 디펜던시(dependency)정보 등을 기술해줍니다. 우리는 바이너리(binary)패키지만 할 것이므로 아래와 같이만 기술해주면 됩니다. 

디펜던시(depends)에 이 패키지를 실행하기 위해 필요한 패키지 들을 나열해 주면 됩니다. 

config

패키지를 설치하기 전에 입력받아야 할 값이 있다면 이 파일에서 질문을 지정해주면 됩니다. 예를 들어 이름을 묻고 싶다면 아래와 같이 작성하세요. 

이 파일에는 질문에 대한 내용이 안보이죠? 그 내용은 아래 나오는 'templates'파일에서 기술하면 됩니다. 

templates

질문을 입력받기 위한 내용입니다. 일반적인 경우 입력 받을 일이 없으니 참고만 하세요. 

conffiles 

이 파일에는 패키지를 설치 할 때 일반적으로 '/etc' 하위 폴더에 넣어 줄 설정 파일과 관련된 정보를 기술해 줍니다. 우리는 django(장고) 시작 스크립트(script)와 apache(아파치) 설정 파일에 대한 정보를 입력해 주면 됩니다. 

아파치 설정 파일은 아파치 버전에 따라 다르겠지만,  버전 2.2.22 를 사용중인 저의 경우 'site-available'에 설정 파일을 넣어주고 'enable'시켜주는 방식이라 저 폴더에 넣어줬습니다. 

preinst

파일 이름에서 느낄 수 있는 것 처럼 설지를 진행하기 이전에 수행할 작업을 기술해 주는 파일 입니다. 

혹시나 이미 설치가 되어있어서 동작 중이었다면 동작을 중단 하도록 해줬습니다. 

postinst 

이 파일은 패키지를 압축을 푼 다음에 수행할 작업을 기술해 주는 파일입니다. 

설치시에 입력받았던 이름을 사용해서 무언가를 할 수 도 있습니다. 

그 외에도 필요한 폴더를 생성한다거나 다른 명령을 실행 하도록 지정 하는것도 가능합니다. 

( 'a2ensite'는 아파치의 'sites-available' 폴더에 넣어주었던 파일을 사용하도록 지정해 주는 명령어입니다.)

설치가 성공했다면 서비스를 시작하도록 해줍시다. 

prerm

이 패키지를 제거하는 명령어를 실행 했을 때 설치된 패키지를 제거하기 전에 수행할 작업을 기술해 주는 파일입니다. 

postrm

여기까지가 'debian/DEBIAN'폴더에 넣어주어야 하는 파일들입니다. 

웹 서버(아파치) 설정

위에서 아파치 폴더의 'sites-available' 폴더에 넣어줬던 파일에 대한 설명입니다. 

호스트 이름, 포트 명과 같은 서버 설정 정보와 'root'폴더를 지정해줍니다. 

그 아래 정보들은 django(장고)를 apache(아파치)에서 구동되도록 하기 위한 설정 들입니다. 참고만 하세요. 

Django(장고) init.d 스크립트 

시작 스크립트는 './debian/etc/init.d' 폴더에 넣어주면 됩니다. 

저는 웹 페이지 경로를 '/var/www/' 로 지정해 주었습니다. 이를 위해서 '/usr/share/myapp' 폴더의 링크를 '/var/www/djangoapp/myapp'에 만들어 주어야 합니다. 

위의 'DEBIAN/postinst' 에 예제로 적어놓은것 처럼 'postinst'에 지정해 주셔도 됩니다. 

Debian doc 파일들 

해당 패키지에 대한 문서 파일들을 작성해 주어야 합니다. 

changelog (changelog.Debian) 

changelog는 2개의 파일이 필요하지만 초기 설치이므로 같은 내용으로 작성해줍시다. 

이 파일은 은근 문법을 따집니다. 빈 줄을 제거하지 마시고 잘 넣어보시고 그래도 잘 되지 않는다면 changelog 문서를 참고하세요. 

작성한 파일은 './debian/usr/share/doc/djangoapp/'폴더로 복사한 다음 'gz'파일로 압축해 줍니다. 

copyright

copyright정보를 기술해 주는 파일입니다. 

이 파일도 changelog와 동일하게 복사하고 'gz'파일로 만들어 줍니다. 

debian은 파일의 권한(permission)을 755(-rwxr-xr-x)나 644(-rw-r--r--)로 할 것을 권장합니다. 

파일의 권한을 목적에 맞게 지정해 줍시다. 

준비를 다 했다면 패키지 빌드를 수행해 봅시다. 

dpkg-deb 명령으로 빌드를 수행하고, 그 결과 생성된 파일을 원하는 이름으로 수정 한 다음 lintian명령으로 패키지에 문제가 없는지 검사하는 순서로 진행하시면 됩니다. 

lintian명령 수행 결과 맨 앞에 'W'로 표시된 'Warning'은 수정하는게 좋지만 수정하지 않아도 배포는 가능하고, 'E'로 표시되는 'Error'는 모두 수정하셔야만 됩니다. 

'Error'가 없다면 deb파일을 배포할 준비가 완료 된겁니다. 

참고한 글 

mouseover, mousemove, mouseout 세 가지 액션에 대해 정의해 줍니다. 

mouseover:

현재 마우스가 위치한 곳의 title 속성의 값을 가져와서 보여줍니다. 

마우스의 위치에 따라 툴 팁이 보여지는 위치가 달라지므로 css 함수를 써서 위치 정보를 가져오도록 합니다. 

mousemove:

마우스를 움직일 때 마다 툴 팁이 마우스를 따라 다니도록 마우스의 위치 값을 가져다가 툴 팁의 위치를 업데이트 해줍니다. 

mouseout:

마우스가 링크 정보가 담긴 위치를 벗어 났다면 툴 팁이 보이지 않도록 제거해 줍니다. 

2. css 

툴 팁의 배경 색깔과 폰트 등을 설정해줍니다. 

3. html 

마우스를 가져갔을 때 툴 팁을 보여주기 위한 html입니다.

DJango를 사용하고 있다면 title값은 변수로 넘겨받은 값으로 지정해주는 것도 가능합니다.