Clean Code that Works.

CODE COMPLETE


와.. 두껍다 -ㅅ-;;;
이번달은 개념서를 좀 읽어야 겠다.
이거랑.. 생각하는 프로그래밍.

이번엔 집중해서 재빨리 읽어 버리자!!!

그냥 게임 하면서 쓸려고 만듬 -_-


실행화면


AIR 공부할겸 겸사겸사 만든 RSS READER 프로그램.


Air를 사용한 rss reader 만들어 보는중~~
이거하고 액션 스크립트도 봐야지~!

9월 플렉스(플렉스 3 책 및 액션 스크립트 3.0)
10월 스프링 + 자바스크립트(스프링 2.5 프로그래밍, 프로자바스크립트 테크닉, jquery)
11월 루비(프로그래밍 루비, 루비 온 레일즈)
12월 필살 취직

중간중간 방법론 서적 보기

뭐.. Ajax 책 몇권.. 정독은 아니고 그냥 살펴 보았다..
책을 레퍼런스처럼 사용하는 경향이 있는데.. 이건 고쳐야할듯 =ㅂ=..

샘플 코드가 좀 쉬우면 다 해보겠는데 꼬이면 정말 -_-...

위키북스에 프로토타입 & 스크립타쿨러스 인 액션은 정말 비추였다.
서버사이드 언어가 php인다 자바스크립트 라이브러리 책에 서버사이드 언어가 왜 그렇게 많은지..
이건 책 제목을 php를 이용한 프로토타입 & 스크립타쿨러스 활용
이렇게 해 놨으면 더 좋겠다 -_-..

이건 자바를 공부한 나한테는 정말 못볼책이어서 따로 인사이트에서 나온
프로토타입 & 스크립타쿨러스를 샀다.
이것 역시 서버사이드 언어가 루비로 구현되어 있었지만
서버사이드 양이 위 책에 비하면 상당히 적기 때문에..뭐 거의 없다고 봐도 되지만.
공부하는데 전혀 문제가 되질 않았다.

두 출판사에서 이번에 jquery에 대한 책이 새로 나왔는데
서버사이드 언어가 무엇일지 궁금하다.
담달에나 사봐야지.

각설하고.. ajax가 뭐 있나.. 뭐 없다 -_-;;
그냥 가장 중요한건 비동기 통신 아닌가.
화면을 새로 고침하지 않고 화면안의 데이터를 변경할 수 있다.
이게 가장 핵심인거 같다. 비동기 통신 자체는 어렵지 않고 프로토타입같은걸 사용하면
코드량도 확 줄여서 사용할 수 있기 때문에 별 문제가 되지 않는다.

다른 중요한건 다른 자바스크립트 라이브러리와 css를 적절히 할용하여 ui를 잘 구성하는 것 같다.
자바스크립트 공부 한번 해볼까.. 하고 인사이트에서 나온 자바스크립트 완벽 가이드 라는 책을 샀는데 책 자체는 괜찮은데 너무 두꺼워서 읽기가 좀 무섭다. -_-;

웹쪽 자바스크립트 쪽만 참고 하는 상황이다.

부록으로 레퍼런스 북을 주는데
뒤에 인덱스좀 붙여 줬으면 하는 아쉬움이 있다.
난 인덱스 없는 책이 정말 싫다.
어디가 어딘지 알 수가 없자나!!!

그래서.. 이번달은 플렉스 책 사서 플렉스좀 보고..
다음달에는 루비 랑 루비 온 레일즈 책을 사 볼까 한다.

지금 읽고 있는 익스트림 프로그래밍은 방법론책이니깐 가볍게 읽어 주시고..

프로젝트 하는것도 일단 구현이 끝났으니 리팩토링겸 해서 정리좀 하자.
중복이 왜 이리 많아!!!

그나저나..취직은 언제해?



최근 자바스크립트 관련해서 ajax 공부하면서 꽤 깔끔하고 좋은 UI를 제공하는
자바스크립트 라이브러리를 발견했다.

바로 LivePipe 라는 자바 스크립트인데
프로토타입과 스크립타쿨러스를 기반으로 해서

탭, 윈도우, 스크롤바, 컨텐스트메뉴 등 약 8가지의 UI를 제공한다.

그중에서 윈도우와 탭을 현재 공부하고 있는 웹사이트에 적용해서 사용중인데
아주 깔삼해서 좋았다.

사용자 삽입 이미지

LivePipe


위 캡춰 화면과 같은 기능을 제공한다.

문법은 프로토타입을 기반으로 했기 때문에 프로토타입 사용하듯이 사용하면 된다.
API와 더불어 DOC 도 잘 정리되어 있고, 샘플도 어느정도 지원하기 때문에
샘플을 가지고도 사용할 수 있다.

결론적으로 사이트 주소는 http://livepipe.net/


뭘 결론은..

우리나라에선 힘들다는거 아닐까?

확실히 우리나라는 ActiveX와 IE 의존도가 너무~~~ 높기 때문에 힘들다..

웹 브라우저 사용 통계를 보면 파이어폭스가 세계적으로는 20~20%를 점유하고 있다지만..
(엄청난 발전 불과 몇년 전만 해도 겨우 3%정도 였는데)

우리나라에서는 5%나 될까??

뉴스에서 보다 시피 대부분 공공 기관이나 큰 기업 홈페이지, 결제 관련 홈페이지는

죄다 액티브x에 IE 를 써야 한다.

이러한 상황에서 크롬에 브라우저에 대한 이야기는 그냥 관심 거리에 불과 할것같다.

네이버 검색 서비스때문에 구글에 대한 인지도가 낮은 우리나라에서 크롬이 성공할 수 없지 않느냐..

우리나라에선 구글 검색 서비스에 대한 인지도를 높이는게 최 우선이다.

웹 버전.

프로젝트2008. 8. 23. 13:33
현재 이미지, 키워드, 구조 검색 구현은 다 되어있다.

앞으로 해야 할 것은..

일단 정렬이 좀 이상하게 된다 이거 수정좀 -_-;;;

1. 사용자가 업로드한 쿼리 이미지 바로 보여주기.
 - 업로드는 되는데 업로드 하고 나서 이클립스 내의 업로드 폴더를 새로 고침 해주어야 접근 가능하다. 이건 어찌 처리 해야 하는겨 -_-;;

2. 구조 검색할때 옆에 트리 구조로 XML 문서 보여주기
 - XML 문서 용량이 크면 로딩 시간이 오래 걸릴꺼 같아 하지 않으려고 했으나 데이터 다 집어 넣어도 5MB 정도면 될꺼 같아서 추가 해야 한다.

3. 서비스 측면으로 회원 서비스 제공
 - 간단한 회원 서비스를 제공할 목적이다.
 - 병해충 정보에 사용자가 댓글을 달 수 있도록 하거나, 사용자가 직접 촬영한 이미지를 업로드 할 수 있도록 한다.
 - 사용자 개인 화면을 제공하여, 최근 본 데이터, 업로드한 이미지 나 작성한 글을 볼 수 있도록 한다.

사용자 삽입 이미지

메인 화면



사용자 삽입 이미지

이미지 검색 결과

사용자 삽입 이미지

병해충 상세 정보



프로토타입을 사용하여 AJax 프로그래밍을 할 경우 Ajax 로딩 인디케이터 컴포넌트를 사용하여 로딩중 이란 모습을 사용자에게 보여 줄 수 있다.

이것을 사용하기 위해서 Protoload.js 라는 파일이 필요한데, Prototype을 바탕으로 해서 만들어 졌기 때문에 Prototype.js 역시 필요하다.

Prototype.js 다운로드
Protoload.js 다운로드

위의 파일들을 다운로드 한 후 각각 폴더에 알맞게 위치 시킨 다음
protoload 폴더에는 protoload.js, protoload.css, bigBlackwaiting.gif, bigWaiting.gif, blackWaiting.gif, waiting.gif 파일이 있을 것이다.

protoload.css 는 css폴더로 옴겨주고 사용할 html, jsp 파일에서 임포트 하면 되고.
img 파일들도 imgs 폴더로 이동 시키고 css내에 img 파일 경로를 수정하면 사용 준비가 완료된다.

function imageSearch(fileName) {
    new Ajax.Request("imageRetrieval.action",
        {
            method : 'POST',
            parameters : { uploadFileName:fileName },
            onLoading  : function() {
                $('results').startWaiting('bigWaiting');
               },
            onSuccess : function(req) {
                viewResult(req);
            },
            onFailure : function() {
            },
            onComplete : function() {
                $('results').stopWaiting();
            }
        }
    );
}

이렇게 사용하게 되면
results 라는 id 를 가진 html 요소에 bigWaiting 이란 파일을 읽어와서 로딩 이미지를 보여주게 된다.

onLoading은 Ajax에서 요청을 실행시켰을때 실행 되는 것이고
onComplete는 Ajax 요청이 성공하던지 실패 했던지 마지막으로 실행되는 것이다.

사용자 삽입 이미지

BigWaiting.gif

사용자 삽입 이미지

waiting.gif


참고 하였던 아웃사이더님 블로그.