Datepicker 를 사용하여 선택하는 날짜를 받아오는 이벤트는 onSelect 이다. CSS 요소가 크게 영향이 없는 형태로 사용한다면, 문제가 되지 않는다. 하지만 브라우저에 부담을 주는 요소를 사용하는 경우 깜빡임 현상이 나타 날 수 있다.


최근에 겪은 사례로는 background 요소를 적용 한 경우 발생 했다. setTimeout( fun, 200 ) 을 사용해서 시점을 천천히 하여 보면, 초기화 된 후 재 생성 되는 부분을 확인 할 수 있다. 즉 CSS 는 초기화 된다.


아래 소스는 jquery-ui.js 중 datepicker onSelect 함수를 Callback 하는 부분이다. trigger custom callback 부분을 보도록 한다. 두개 인자를 제공 한다.


  • dateStr: 날짜 문자열
  • inst: Datepicker Object

/* Update the input field with the selected date. */
_selectDate: function(id, dateStr) {
    var onSelect,
        target = $(id),
        inst = this._getInst(target[0]);

    dateStr = (dateStr != null ? dateStr : this._formatDate(inst));
    if (inst.input) {
        inst.input.val(dateStr);
    }
    this._updateAlternate(inst);

    onSelect = this._get(inst, "onSelect");
    if (onSelect) {
        onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]);  // trigger custom callback
    } else if (inst.input) {
        inst.input.trigger("change"); // fire the change event
    }

    if (inst.inline){
        this._updateDatepicker(inst);
    } else {
        this._hideDatepicker();
        this._lastInput = inst.input[0];
        if (typeof(inst.input[0]) !== "object") {
            inst.input.focus(); // restore focus
        }
        this._lastInput = null;
    }
},


inst.inline 기준에 따라 this._updateDatepicker( inst ) 함수를 호출 하여 위에서 언급한 상황이 재연 된다. 현상을 해결 하기 위해서는 onSelect 함수를 아래와 같이 구현하여 호출 되지 않도록 해야 한다.


$datepicker.datepicker( { 
  inline: true,
  showOtherMonths: true,
  showMonthAfterYear: true,
  monthNames: [ '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12' ],
  dayNamesMin: [ '일', '월', '화', '수', '목', '금', '토' ],

  onSelect: function( date, inst ) {
    inst.inline = false; // datepicker object inline false 변경
    customSelect( date ); // 사용자 정의 구현 함수
  }
} );


위 소스를 참고하여 적용 한다면, 깜박임 현상은 해결 된다. customSelect( date ) 로 정의한 함수는 스타일에 맞게 적용 하도록 한다.


참고 사이트


개발을 하다보면 빼 놓을 수 없는 것이 한가지 있다. 바로 달력 이다. 개발자를 귀찮게 하는 요소 중 한 가지 인데, 제일 큰 이유는 아래와 같다.


대표적인 라이브러리는 jQuery Datepicker 이다. 하지만 UI 는 그대로 사용 할 수 없다.


제공 되는 서비스에 따라 달력은 여러가지 형태로 제공 되게 된다. 요구 조건에 맞게 변경 하는 방법을 알아 보자.


jquery, jquery ui 라이브러리를 다운로드 한다.


<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>


Html 을 작성 한다.


<div id="datepicker"></div>


Datepicker Element 를 생성 한다.


$('#datepicker').datepicker({
    inline: true,
    showOtherMonths: true,
    showMonthAfterYear: true,
    monthNames: [ '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12' ],
    dayNamesMin: ['일', '월', '화', '수', '목', '금', '토']
});


기본적인 준비는 완료 되었다. 이제 CSS 를 적용 해보자. 간단하게 정리를 해보았다.


  • ui-datepicker: 배경 표시
  • ui-datepicker-title: 년, 월 표시
  • ui-datepicker-header: 요일 표시
  • ui-datepicker-prev: 이전 달 버튼
  • ui-datepicker-next: 이후 달 버튼
  • ui-datepicket table: 일 표시

추가적인 내용은 동적으로 생성 되는 HTML 을 참고 하도록 하자.


샘플 URL: http://jsfiddle.net/whitelife/6mxx8rex/


위 방법을 이용해서 CSS 작업을 한다면, 의도하는 달력을 제작 할 수 있을 것이다.


참고 사이트


Express 가 4.x 이 되면서 Connect 라이브러리를 사용하지 않는다. 프로젝트 생성시에도 body-parser, cookie-parser 를 추가로 설치 해줘야 한다.


파일 업로드 하는 부분에 있어서도 별도의 미들웨어를 사용해야 한다. 간단하게 사용할 수 있는 Multer 를 소개 한다.



설치 시 --save 옵션을 사용하게 되면 package.json 에 추가되어 다른 환경에 설치 시 npm install -d 로 일괄 설치 할 수 있다.


$ npm install multer --save


app.js 에 미들웨어 선언을 하자.


var app = express()
app.use(multer({ dest: './uploads/'}))


파일 업로드 시 아래의 객체에서 확인이 가능 하다.


console.log(req.body)
console.log(req.files)


자세한 내용은 github 를 참조 하도록 하자.


보통 외장 하드를 사용해서 가상 OS 를 사용하는 경우 발생 하는걸로 보여진다. 마찬가지로 당했기 때문에 아무리 지우려도 발버둥 쳐도 지워지지 않는다.



휴지통 경로를 직접 찾아서 지우는 방법 이다.


$ rm -rf ~/.Trash


위 방법으로 해결이 되지 않는 경우는 directory not empty 라는 에러 문구가 발생 한다. 이동식 디스크에 Trash 파일이 있기 때문에 직접 경로로 들어가서 지워야 한다. 아이러니 하게도 OSX 에서 rm -rf 명령어를 사용하면 같은 에러 문구만 발생 한다.


결국 Windows 설치된 PC 에 이동식 디스크를 연결 한 후 .Trash 폴더를 직접 삭제 한다.


다시 이동식 디스크를 연결해 보면 깨끗한 휴지통을 구경할 수 있을 것 이다.


'OSX' 카테고리의 다른 글

OSX 에서 외장 하드사용하기  (0) 2015.01.21
OSX 에서 brew 설치하기  (0) 2015.01.12

OSX 에서는 사용 하는 파일 시스템이 다르기 때문에 Windows 에서 기본적으로 사용 하는 NTFS 는 읽기 권한 만 지원 된다. FAT32 는 호환이 가능 하지만, 용량에 제한이 있어 고용량 파일을 사용하기에는 번거로움이 있다.


NTFS 파일 시스템을 보완하여 쓰기 권한 까지 지원 하도록 도와주는 프로그램에 대해서 알아 보자.


첫째. 제조사에서 제공 하는 프로그램이 있는지 확인 하도록 한다. 어느정도 인지도가 있는 기업의 제품인 경우 드라이버를 제공 한다.



운 좋게 Seagate 외장 하드를 쓰고 있어 손쉽게 적용 할 수 있었다. 삼성 외장 하드 내부에는 Seagate 하드를 사용하고 있다. 예전에 삼성 외장 하드를 AS 받으러 간 적이 있었는대, 하드 교체는 Seagate 센터로 가서 받았다.


드라이버 설치 방법에 대해 Seagate 기준으로 소개 한다. 외장 하드를 연결 한 후 다운로드 받은 파일을 실행 하자.



약관 동의 및 계속 버튼을 클릭 하여 진행 한다.



설치가 완료 되면 재시동을 하자.



읽기와 쓰기 가능 으로 권한이 적용 되었다. 이제 기쁘게 사용할 일만 남았다.


둘째. 범용적으로 사용할 수 있는 프로그램을 사용 한다.



유료화로 제공되는 프로그램이다. 한화로 2~4만원 내외이다. 오픈소스로 제공 되는 것도 있지만, 설치 절차가 번거롭다고 한다.


별도로 설치 하는 것보다, 드라이버를 제공 해주는 외장 하드를 사용하는 것이 고민 할 필요 없이 편리 한 것 같다.


'OSX' 카테고리의 다른 글

OSX 휴지통이 비워지지 않는 경우 해결 방법  (0) 2015.01.21
OSX 에서 brew 설치하기  (0) 2015.01.12

Linux 시작 스크립트 적용 시 발생 했다. 윈도우와 리눅스의 줄 바꿈이 다르기 때문에 발생 한다.


$ vi -b filename
:%s/^M//g


위와 같이 실행 하면 ^M 이 제거되고 정상적으로 동작 한다.


참고 사이트


아래 라이브러리를 추가적 으로 설치 한다.


[root@devcentos python2.7]# yum install libtiff-devel
Loaded plugins: fastestmirror, refresh-packagekit, security
Setting up Install Process
Loading mirror speeds from cached hostfile
 * base: ftp.daum.net
 * extras: ftp.daum.net
 * updates: ftp.daum.net
Resolving Dependencies
--> Running transaction check
---> Package libtiff-devel.x86_64 0:3.9.4-10.el6_5 will be installed
--> Finished Dependency Resolution

Dependencies Resolved

=====================================================================================================================================
 Package                            Arch                        Version                              Repository                 Size
=====================================================================================================================================
Installing:
 libtiff-devel                      x86_64                      3.9.4-10.el6_5                       base                      468 k

Transaction Summary
=====================================================================================================================================
Install       1 Package(s)

Total download size: 468 k
Installed size: 1.3 M
Is this ok [y/N]:


'Python' 카테고리의 다른 글

Python No module named 해결하기  (1) 2015.01.12

보통 패키지 매니저를 사용하여 설치 하는 경우 습관적으로 환경변수 설정을 하지 않게 된다. 라이브리 경로를 찾지 못하여 발생 하는 메시지 이다.


~/.profile 에 환경변수를 추가 하자.


export PYTHONPATH=/usr/local/lib/python2.7/site-packages


정상적으로 실행 될 것이다.


+ Recent posts