wFTP 클라이언트 소개
wFTP 클라이언트는 웹 브라우저에서 동작하는 FTP 어플리케이션이며 웹 개발시 좀 더 편리하게 파일들을 관리하기 위해 만들었습니다.
이미지나 문서 파일들을 미리보기 할 수 있으며 FTP 서버가 웹 서버일 경우에는 해당 링크를 쉽게 가져올 수 있습니다.
위의 그림은 wFTP 클라이언트의 실행화면이며 디자인과 코딩은 다음클라우드를 참고하였습니다.
좀 더 자세한 소개글을 보고 싶으시다면 바로가기를 클릭해주세요.
지원 브라우저
크롬과 파이어폭스 최신 버전에서만 동작합니다. (IE는 9버전 이후부터 일부 기능만 동작)
설치 방법
관련 파일들을 모두 웹 서버에 업로드하고, 서버 단 코드는 node 폴더 안에 있으니 index.js 파일만 실행시켜주면 됩니다.
당연히 Node.js는 설치 되있어야 하고, 관련된 필수 모듈들을 추가적으로 설치해야 합니다.
cd node npm install underscore npm install jsftp npm install socket.io npm install rimraf node index.js
# 백그라운드로 실행하는 방법 (로그 포함) sudo nohup node index.js > wftp.log
데모 페이지
FTP 서버 계정을 가지고 있지 않는 분들을 위해 직접 접속하여 테스트 할 수 있는 계정을 세팅해두었습니다.
업로드/다운로드 파일의 크기 제한이 있습니다. (업로드: 5MB, 내려받기: 1MB, 링크받기: 제한없음)
wFTP 클라이언트 아키텍처
wFTP 클라이언트의 서버 단은 Node.js 기반으로 구현되어 있으며, 확장 모듈로
underscore와
jsftp 그리고
socket.io를 사용하였습니다. 아래 그림에 있는 index와 wftp는
클라이언트에서 요청한 메시지를 처리하는 기능이 구현되어 있고, 300라인 정도의 매우 간결한 코드입니다.
UI 개발 컨셉
wFTP는 서버 쪽과는 달리 클라이언트의 구조가 매우 복잡합니다. 그 이유는 하나의 페이지에서 모든 기능을 수행하는 SPA 방식으로 구현되었기 때문입니다. 그래서 어떻게 하면 효율적으로 UI 개발을 할 수 있을까라는 고민을 하다가 vojs라는 뷰-오브젝트 컨셉의 UI 프레임워크를 만들게 되었습니다.
뷰-오브젝트란?
vo는 웹 페이지에서 뷰가 되는 HTML 코드와 뷰를 구성하는 데이터, 즉 오브젝트가 같다라는 것이 기본 컨셉입니다. 먼저 아래 뷰 코드를 보도록 하겠습니다.
위의 코드는, , 1년 후---------------------------------------------
, , 1년 후
person1과 person2의 이름과 나이를 보여주는 뷰입니다. 그리고 뷰 코드와 매칭할 오브젝트의 클래스를 정의하도록 하겠습니다.
var Person = function(id, name, age) {
// 뷰-오브젝트 상속
vo.applyTo(this, id);
var self = this;
self.name = name;
self.age = age;
self.bind.name(self.name);
self.bind.age(self.age);
self.act.addAge = function() {
self.bind.age(++self.age);
}
};
Person이라는 클래스를 만들었으니 뷰 코드에서의 person1과 person2의 오브젝트를 생성하겠습니다.
var person1 = new Person("person1", "문학이", 27),
person2 = new Person("person2", "살라딘", 27);
문학이와 살라딘이라는 이름을 가진 오브젝트를 생성하였다면 아래와 같은 화면이 출력될 것입니다.
1년 후 링크를 클릭하면 대상의 나이가 증가하게 됩니다. 먼저 Person클래스의 3라인에서 호출된 vo.applyTo(this, id); 코드는
오브젝트가 생성이 될 때, 해당 오브젝트의 뷰를 전달 받은 id 값의 HTML 태그로 설정합니다. 뷰가 설정이 되면 오브젝트는 동적으로 뷰를 변경할 수 있습니다. 아래 뷰 코드처럼 태그의 속성 타입으로
data-bind를 설정을 하면, 해당 뷰를 포함하고 있는 오브젝트는 bind.name 메소드를 가지게 됩니다.
그리고 self.bind.name(self.name);과 같이 호출할 경우에는 뷰 코드의 내용이 변경됩니다.
UI 프레임워크 vojs는 앞서 설명드린
bind와 같은 요소들을 설정된 뷰 태그의 모든 속성을 분석하여 해당 오브젝트의 메소드나 프로퍼티로 생성합니다.
vojs는 bind외 act, tag와 같은 요소들도 제공하지만 관련해서 자세한 설명은 생략하겠습니다. (vojs 프레임워크 소개는 차후에 진행)관련 예제는 바로가기를 클릭하시면 직접 테스트할 수 있습니다.
클래스 구조
클라이언트의 클래스 구조는 크게 세 영역으로 나뉩니다. 첫번째로 클라이언트 UI 구성을 하는데 기본이 되며, 여러분들이 잘 알고 있는 jquery와 유틸리티 라이브러리인 underscore
그리고 이 두가지를 가지고 뷰-오브젝트 UI를 쉽게 구현할 수 있도록 필자가 개발한 vojs가 바로 core 영역입니다.
두번째로 ui 영역은 vojs를 기반으로 만든 UI 클래스들입니다. 아래 그림처럼 실행 화면에서 보이는 컴포넌트 별로 클래스를 구분하였습니다.
화면에 보이는 컴포넌트 별로 클래스를 구조화하는 것은 OOP 개념에 입각하여 개발하는 것과 같습니다. UI 관련 로직이 매우 복잡할 경우에는 기존의 function base의 개발 방법으로는 많은 어려움을 겪을 수 있습니다.
마지막으로 data 영역은 UI 클래스를 구성하는 데이터와 관련된 클래스들입니다.
대표적으로 FTP 어플리케이션의 기본적인 기능인 파일 업로드 및 다운로드, 삭제 등등에 필요한 파일 관련 데이터를 구조화한 FTPFile 클래스가 있습니다.
UI 클래스 소개
vojs 기반의 UI 클래스는 wFTP 클라이언트를 구성하는 가장 중요한 요소입니다. 단순하게 코드 규모만 봐도 서버 단과 비교가 안될 정도로 복잡합니다.
클라이언트와 서버 단 코드의 비율이 9:1 정도이고, 대부분의 코드들이 UI 관련 코드로 구성되어 있습니다.
참고로 본 프로젝트에서 뷰 코드들은 UI 클래스와 동일한 이름의 템플릿 파일로 구성하였습니다. 예를 들어 FtpUIBody 클래스가 있다면 해당 클래스는 ui/body.js 형태이며,
참조하는 뷰 코드는 tpl/body.tpl 형태로 구성됩니다.
아래 그림은 클라이언트 영역의 클래스 구조입니다. UI 클래스는 data 영역의 클래스를 일방적으로 참조하고, 관련된 뷰 코드는 해당 클래스와 동일한 이름으로 구성되는 것을 알 수 있습니다.
FtpUIBody 클래스
FtpUIBodyLeft와 FtpUIBodyMain 두 클래스가 참조하는 클래스이며 파일 및 폴더 목록, 삭제, 이름변경 등 핵심적인 기능들을 제공하는 클래스입니다.
예를 들어서 파일을 삭제하라는 명령을 서버로 보내면 서버의 응답을 받아 left와 main의 UI를 변경하도록 중재를 하는 역할을 합니다.
FtpUIBodyLeft 클래스
현재 경로에 있는 모든 폴더를 트리 구조로 보여주는 UI 클래스입니다. 성능 이슈로 모든 폴더를 트리화하지 않고 현재 경로의 폴더들만 트리 형태로 보여줍니다. 아직까지는 단순히 네비게이션 기능만을 제공하며 앞으로는 폴더 삭제 및 이동, 이름변경 등등 다양한 기능을 제공할 예정입니다.
FtpUIBodyMain 클래스
현재 경로의 파일과 폴더 목록를 보여주는 UI 클래스입니다. 미리보기와 리스트보기 두 가지 스타일이 있으며 정렬 기능도 제공합니다. 그리고 삭제나 이름변경, 미리보기 등 여러 기능들의 시작점이 되는 클래스이기도 합니다. 그렇기 때문에 UI 클래스 중에서 body와 더불어 가장 중요한 요소이기도 합니다.
FtpUIUpload 클래스
파일 업로드를 위한 UI 클래스입니다. 일반 웹에서의 파일 업로드와 달리 다수의 파일들을 쉽게 업로드 할 수 있도록 편리한 UI를 제공합니다. 또한 파일이 업로드 되는 진행 상황을 보여주므로써 UI의 완성도를 높혔습니다.
FtpUIDownload 클래스
파일 다운로드를 위한 UI 클래스입니다. 업로드와 마찬가지로 다수의 파일들을 다운로드 받을 수 있는 UI를 제공하며, 현재는 기술적인 문제로 다운로드 받을 파일 한개의 크기를 1MB로 제한해둔 상태입니다.
FtpUIPopup 클래스
각종 알림메시지, 이미지/파일 미리보기, FTP 서버추가, 파일/폴더 이름변경 등 팝업 형태의 다양한 UI를 제공하는 클래스입니다.
FtpUIMenu 클래스
파일이나 폴더에 마우스 오른쪽을 클릭하였을때 보여지는 컨텍스트 메뉴와 같은 UI를 제공하는 클래스입니다.
그 외 클래스
그 밖에 추가된 FTP 서버목록을 보거나 접속할 수 있는 UI를 제공하는 FtpUITop 클래스와 현재 접속자 수와 각종 링크를 볼 수 있는 FTPUIFooter 클래스가 있습니다.