Clean Code that Works.

CKEditor 팁.

프로그래밍/웹 쪽2014. 6. 3. 18:15

CKEditor 사용하면서 찾았던 내용 정리.

CKEDITOR.replace("contents", {

height: 350, // 높이 수정

allowedContent: true // 소스코드 포함 수정(you tube 링크 걸 경우)

});

Keep Alive

프로그래밍/웹 쪽2011. 5. 19. 14:07

http://stackoverflow.com/questions/1787557/apache-proxy-to-tomcat-keep-alive-confusion
 

keep-alive 옵션에 대한 설명.


There are (at least) four “keep-alive”s.

  1. HTTP layer keep-alive between client browser and Apache. (Enables multiple client requests in a HTTP/TCP connection. “KeepAlive” directive to configure.)

  2. TCP layer keep-alive between client browser and Apache. (To avoid connection to be closed by firewalls, send empty packet periodically (around 2 hours by default in Linux). I don't know how to configure in Apache.)

  3. AJP layer keep-alive between Apache and Tomcat. (Enables multiple Apache request in a AJP/TCP connection. “max” and “smax” options for “ProxyPass” to configure.)

  4. TCP layer keep-alive between Apache and Tomcat. (Same as 2, but for firewall between Apache and Tomcat. “keepalive” option for “ProxyPass” directive to configure.)

jquery ui calendar 사용 할 때.

프로그래밍/웹 쪽2010. 12. 20. 11:32
주의 해야 할 점.

IE 에서는 new Date(calendarObj.getDate)가 안 먹는다.
getDate를 slice 해서 year, month, day로 구분해 주자. ㄱ- 뭐이래

js에서 month 는 0 부터다. + 1, - 1을 적절히 해서 우리가 보는 것과 동일 하게 해주자.

numberOfMonths 옵션을 사용 할 때, css에 지정되어 있는 숫자는 최대 4까지다.(25%)
더 쓰고 싶으면 css에 추가 해주자
ex) .ui-datepicker-multi-5 .ui-datepicker-group { width:20%; }

js에서 getYear는 Deprecated 되고 getFullYear()를 사용 해야 한다.(ie 8에선 getYear가 여전히 작동)
ff에서는 안먹는데 왜 getYear 가 deprecated 됬지.

jQGrid에서 json 형식 변경 하기.

프로그래밍/웹 쪽2010. 10. 11. 17:44

jQGrid에서 jsonData 사용할 경우에 일반적으로 아래와 같은 구조로 데이터가 넘어올 것이라 기대한다.
{"page":"1","total":2,"records":"13",
"rows":[{"id":"13","cell":["13","2007-10-06","Client 3","1000.00","0.00","1000.00",null]}]}

다른 부분은 문제가 없는데 rows에 id와 cell정보가 모델 형식과 맞지 않는 경우가 많아서...
List<Post> 형식으로 rows를 구성하고 싶은데, 이를 가공해 줘야 한다는 말씀... 맵 형식으로 해서 id, cell 방식으로..
게다가 cell 에는 키가 없고 값만 줄줄이 들어 있다.

음 하여 나는 이걸 좀 변경하고 싶다.
아래와 같은 형식으로 키 : value 쌍으로.(jackson 컨버터가 이런형식으로 변환 해 준다.)


그럼 어떻게 하면 되는가..

jQGrid 옵션에다가 이것을 추가 하면 된다.

jsonReader 속성을 보면 응답해주는 json의 값들의 키들을 변경해 줄 수 있다.
root, page, total, records 등등

jQGrid는 글번호를 자동 생성 해 준다.(글번호 관련 column 및 row가 필요 없다.)

Client Validation.

프로그래밍/웹 쪽2010. 7. 22. 22:28

자바 스크립트로 체크하는 Validation

유효할 때


필드 값들을 입력하고, 다른 필드로 넘어 갈때 유효성을 체크 하고,
submit을 클릭하였을 때 아래와 같이 유효성을 다시 한번 체크 한다.

에러가 발생했을 경우


에러의 갯수를 팝업을 통해 알려주고,
입력 필드 오류 메시지도 입력 필드 옆에 보여준다.
또한 폼 위 아래로 메시지를 표시하여 오류가 났음을 인식 하도록 한다.

 * http://bassistance.de/jquery-plugins/jquery-plugin-validation/
 * http://docs.jquery.com/Plugins/Validation

위의 validation 플러그인을 활용하여 만들 수 있다.



오메, 노트북 책상이 필요해!! 누워서 할려니 하다가 지쳐서 하기가 싫네 ㅋㅋㅋ

validation check

프로그래밍/웹 쪽2010. 7. 19. 11:04
클라이언트(웹 브라우저)에서 유효성 체크는 어떻게 하는게 좋을까?
그때그때 상황에 맞추어 사용하고는 있지만, 이런 저런 케이스에 따라서 한번 정리해 보고 싶었다.

1. 폼 전송 클릭 시 체크 한다.
-> 결과를 팝업으로 알려준다.(아마 가장 쉽게, alert으로 뿌려 줄 때)
-> 결과를 input field 옆이나 밑에 오류표시로 알려준다.(좀 더 있어 보이는, 하지만 고객들도 이런거 좋아하나??)

2. field 입력 후 다른 field로 넘어갈 때
-> 이 방식도 괜찮기는 한데, 입력 후 다음 필드로 넘어 갔을 때 이전 필드에 오류 났다고 표시하면 바로 다시 가서 수정하기가 좀 짜증나지 않나? 예전에 인포메이션 아키텍쳐(폼 디자인 책인가) 관련 해서 보면서도, 전체적인 흐름에 어긋나기도 하고.. 작성 흐름이 깨지기 때문에 비추 하는 모양.

3. field 필드 입력시 바로바로 검사
-> 이것 좀 괜찮은 방법있듯, 일단 입력시 이벤트로 바로바로 검사해서 사용자에게 알려주는.. 음 하지만 이렇게 하면 경고 메시지가 자주 나오기도 하고.. 옆에서 나왔다 사라졌다 하면 좀 짜증나겠다 귀찮고.

대충 이정도로 하면 되겠는데,
내가 하고 싶은 방식은 "폼 전송 클릭시" 이 부분이 되겠다.
보통 이렇게 하지 않을까 싶은데.

하여.. jQuery 플러그인을 사용해서 이 부분을 작성해 보자.
옵션으로 결과를 팝업으로 할지, 인풋 필드로 알려줄 지 선택 할 수 있도록 해서..
고고싱.

JSON POST 요청 하기.

프로그래밍/웹 쪽2010. 7. 12. 15:13
jqGrid의 gridData 들을 JSON 형식으로 서버에 전달해야 하는데..
이게 좀 햇갈려서 -.,-

스프링 팀 블로그 보기

위 블로그를 보면 $.postJSON이라는 함수를 써서 submit 하는데,
jQuery에는 이게 없으니깐, 이것을 구현한게 있나 구글링 해 보니.
postJSON 보기
이렇게 해주더라..

$.postJSON = function (url, data, callback) {

    $.ajax({

        'url': url,

        'type': 'post',

        'processData': false,

        'data': JSON.stringify(data),

        contentType: 'application/json',

        success: callback,

    });

};

삽질 중에 contentType을 'application/json'으로 주는것 까지는 생각했었는데, data를 json으로 바꿔줘야하는것은 생각을 못했다. json 형식으로 직접 만들어 줘도 안되길래..
음 뭐 내가 잘못 생각 한건가.. -,.-;;

아무튼 jqGrid data 가지고 excelView 만들어 주는 작업 계속 진행 중.


ajax로 파일 업로드 한 후에 리절트 <pre>로 쌓여 있을 때.

프로그래밍/웹 쪽2010. 6. 14. 16:59
jquery 플러그인으로 파일 업로드를 했을 경우.

sucess: 이벤트에서 json 타입을 받아서 처리 하지 못한다.
이유를 검색 해 보면 iframe에다가 값을 쓰기 때문에 그러 한다고 한다.

그렇기 때문에 값들을 일단 json 형태로 가져오데, text로 해서 다른 div 에다가 쓴 후 
이것을 json으로 파싱해서 사용 하면 된다.

근데 ie 나 FF에서 이것들 가져 올 때 iframe에 싼다고 생각하여 <pre></pre> 태그를 붙여준다.

하여 이놈을 없에 주어야 하는데.

이렇게 해서 정규식으로 pre를 잘라내서 사용하는 방법 도 있다.

var cleaned = uploadResponse.responseText.replace(/<\/?pre>/ig, '');

XML 을 JSON으로..

프로그래밍/웹 쪽2010. 4. 1. 16:36
네이버 지도 OPEN API 사용하는데...
위치 검색 해서 좌표 구하는 부분에서.. 네이버에서는 XML을 리턴한다.

그러므로.. 크로스 도메인 문제로 jQuery로는 사용이 불가 하다.(JSON으로 리턴해주면 되는데!!!!)
하여 서버사이드에서 처리를 해 줘야 한다.

서버에서 URL 로 콜 해서 데이터들을 가져온 다음..
(이걸 XML로 변환한 다음에 JSON으로 변환해야 될줄 알았는데 그냥 데이터(XML 형식의 TEXT)를 JSON으로 변환 시켜도 된다)

그럼 이런 결과가 찍힌다.
<?xml version="1.0" encoding="euc-kr" ?><geocode xmlns="naver:openapi"><userquery><![CDATA[경기도성남시정자1동25-1]]></userquery><total>1</total><item><point><x>321063</x><y>529727</y></point><address>경기도 성남시 분당구 정자1동 25-1</address><addrdetail><sido><![CDATA[경기도]]><sigugun><![CDATA[성남시 분당구]]><dongmyun><![CDATA[정자1동]]><rest><![CDATA[25-1]]></rest></dongmyun></sigugun></sido></addrdetail></item></geocode>

이것을 JSON으로 변경 해야 하는데
이미 공개된 API들이 있으므로 그것을 사용하자. ㅋ

org.json(maven) 과 net.sf.json

org.json의 경우 XML이라는 클래스에 toJSONObject() 메서드를 제공 한다. 하여 결과를 찍어 보면,
깔끔한 JSON 코드가 나온다.
{"geocode":{"total":1,"userquery":"경기도성남시정자1동25-1","item":{"point":{"y":529727,"x":321063},"address":"경기도 성남시 분당구 정자1동 25-1","addrdetail":{"sido":{"sigugun":{"content":"성남시 분당구","dongmyun":{"content":"정자1동","rest":"25-1"}},"content":"경기도"}}},"xmlns":"naver:openapi"}}


net.sf.json 에서는 XOM이라는 jar 파일이 필요하다.
XMLSerializer에서 의존하고 있는것이 있다.
하여 실행을 해 보면 아래와 같이 표시된다.
{"geocode":{"total":1,"userquery":"경기도성남시정자1동25-1","item":{"point":{"y":529727,"x":321063},"address":"경기도 성남시 분당구 정자1동 25-1","addrdetail":{"sido":{"sigugun":{"content":"성남시 분당구","dongmyun":{"content":"정자1동","rest":"25-1"}},"content":"경기도"}}},"xmlns":"naver:openapi"}}
{"@xmlns":"naver:openapi","userquery":"경기도성남시정자1동25-1","total":"1","item":{"point":{"x":"321063","y":"529727"},"address":"경기도 성남시 분당구 정자1동 25-1","addrdetail":{"sido":{"#text":"경기도","sigugun":{"#text":"성남시 분당구","dongmyun":{"#text":"정자1동","rest":"25-1"}}}}}}

약간 틀리다.
org.json에서는 text 값들을 content로
net.sf.json은 #text로 표시해준다.

왼지 org.json이 깨끗해 보이긴 하나.. 이미 net.sf.json을 사용중이므로..
아래것으로 해야겠다.

테스트 코드는 아래 것.

@Test
    public void getXmlData() {
        URL naverUrl;
        StringBuffer sb = new StringBuffer();
        try {
            naverUrl = new URL(
                    "http://map.naver.com/api/geocode.php?key=키입력&query=경기도성남시정자1동25-1");
           
            BufferedReader in = new BufferedReader(new InputStreamReader( naverUrl.openStream()));
            String inputLine;

            while ((inputLine = in.readLine()) != null)
                sb.append( inputLine.trim());
           
            in.close();
           
            System.out.println( sb.toString());
           
            org.json.JSONObject jsonObj = XML.toJSONObject( sb.toString());
            System.out.println(jsonObj);
            JSONObject obj = (JSONObject) new XMLSerializer().read( sb.toString());
            System.out.println( obj);

        } catch (MalformedURLException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        } catch (JSONException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }





jQuery, non-jQuery Rich Text Editor.

프로그래밍/웹 쪽2010. 1. 21. 13:10
see this site 
http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors


10가지 jQuery와 jQuery가 아닌 자바스크립트 rich text editor.
간단한 게시판이나 방명록에 활용해도 좋다.

티스토리툴바