계산기:   calc.html


게임:   scr.html


그림판(작업중):   picture.html


파일로저장하기:   filedown.txt



'프로그래밍 > HTML XML' 카테고리의 다른 글

그림판  (0) 2018.01.12
Visual Studio Code HTML 확장기능  (0) 2018.01.08
[HTML5] 새로운 요소와 기능  (0) 2014.12.18
자바에서 XPath 사용 하기  (0) 2013.07.07
자바에서 XQueryY 사용법  (0) 2013.07.07
블로그 이미지

오픈이지 제로킴

시큐어코딩 교육/컨설팅 전문가 그룹

Visual Studio 확장(Extensions) 


웹클라이언트 프로그램 작성에 사용하는 경우 사용하면 편한 확장 기능들입니다.

출처: http://bimmermac.com/1242


EXTENSIONS설명
ftp-simpleFTP를 탐색기 패널에서 트리 구조로 볼 수 있습니다. 리스트를 동기화하는 방식이라서 처음 불러오거나 갱신할 때 시간이 조금 걸립니다.
ftp-sync프로젝트 개념으로 FTP를 사용하려고 하니 ftp-simple에 비해 더 편하네요. 다만 아직 Sublime Text의 SFTP에 비할 정도는 아니고, 보완할 부분이 많은 것 같습니다.
HTML SnippetsHTML 코드를 편하게 입력할 수 있도록 돕는 기능
View in BrowserHTML 문서를 디폴트 브라우저로 띄워주는 기능입니다. 설치 후 Ctrl+F1 키를 누르면 브라우저로 뜨게 됩니다. HTML 문서만 지원하며 저장되지 않은 문서나 다른 종류의 문서는 지원되지 않는 것 같습니다.
Live HTML PreviewerHTML 문서를 편집하며 실시간으로 미리보기할 수 있습니다.
Syncing확장 기능 및 에디터 환경 설정 등을 여러 디바이스와 동기화시켜주는 기능입니다. Github의 gist에 업로드하는 방식이라서 Private하게 올릴 수가 있습니다.
Guides여는 코드와 닫는 코드 사이에 가이드 세로선을 표시합니다.
Markdown Shortcuts마크다운 문법을 단축키 혹은 마우스로 쉽게 할 수 있도록 기능을 제공합니다.
markdownlint마크다운 문법을 체크합니다.
Beutify지저분하게 정렬돼 있는 코드를 예쁘게 정렬해줍니다.
Auto Rename TagHTML/XML에서 한쪽 태그를 수정하면 나머지 반대쪽 상응하는 태그를 함께 수정해 줍니다.
VS Color Picker컬러를 선택할 때 팔레트에서 고르거나 스포이트 툴로 색상 코드를 가져올 수 있습니다.
vscode-open-project프로젝트 기능에 비해서는 부족하지만, 작업 폴더를 프로젝트 리스트로 만들어서 쉽게 폴더 전환을 할 수 있습니다.
Paste Image클립보드의 이미지를 바로 마크다운 코드로 붙여넣을 수 있습니다. 붙여 넣은 이미지는 자동으로 지정된 폴더에 저장됩니다.


'프로그래밍 > HTML XML' 카테고리의 다른 글

그림판  (0) 2018.01.12
Visual Studio Code HTML 확장기능  (0) 2018.01.08
[HTML5] 새로운 요소와 기능  (0) 2014.12.18
자바에서 XPath 사용 하기  (0) 2013.07.07
자바에서 XQueryY 사용법  (0) 2013.07.07
블로그 이미지

오픈이지 제로킴

시큐어코딩 교육/컨설팅 전문가 그룹

Node.js 는 single thread 기반으로 동작하는 고성능의 비동기IO를 지원하는 네트워크 서버를 구현하는 기술이다. 


Google Chrome V8 엔진으로 개발되었다.


Java Script 를 프로그래밍 언어로 사용한다.


Event 기반의 프로그래밍 모델을 사용한다. 

Non blocking IO 컨셉을 사용하여 IO 처리를 요청하고, 다른일을 하고 있다가 IO 처리가 끝나면 이것을 이벤트로 받아서 응답을 처리한다. 


개발구조가 매우 단순하고 빠르다.


Socketio를 이용하여 간단하게 웹push 구현이 된다.


Node.js는 IO 처리가 많은 구조의 프로그램에 적합하다. 즉 CPU를 많이 사용하는 애플리케이션은 절대적으로 적당하지 않다. 왜? 단일 스레드 구조이기 때문이다.


자바스크립트언어의 특성상 에러가 그 코드 위치에 진입할 때 발생이 되기 때문에 디버깅도 어렵고 하나의 잘못된 코그로 인해 전체적인 request 처리에 문제가 발생할 수 있다.(숙련된 개발자에게 적합)





'프로그래밍 > Node.js' 카테고리의 다른 글

Node.js 기억하기  (0) 2017.09.26
블로그 이미지

오픈이지 제로킴

시큐어코딩 교육/컨설팅 전문가 그룹

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

HTML5 표준화 KISA

https://www.koreahtml5.kr/



웹표준 진단 클리닉

https://www.koreahtml5.kr/jsp/diagnosis/SP04.jsp



HTML5 공개 프레임워크 

http://webframeworks.kr/


'프로그래밍 > HTML XML' 카테고리의 다른 글

그림판  (0) 2018.01.12
Visual Studio Code HTML 확장기능  (0) 2018.01.08
[HTML5] 새로운 요소와 기능  (0) 2014.12.18
자바에서 XPath 사용 하기  (0) 2013.07.07
자바에서 XQueryY 사용법  (0) 2013.07.07
블로그 이미지

오픈이지 제로킴

시큐어코딩 교육/컨설팅 전문가 그룹

jQuery POST 요청 타입(1)
 
var formData = "id=kim&pass=123"//전송할 Form 데이터를 이름=값 형식으로 지정
var formData = {id:"kim",pass:"123"}; // 또는 전송할 Form 데이터를 배열 형식으로 지정  
  
$.ajax({
    url : "AJAX_POST_URL",
    type: "POST",
    data : formData,
    success: function(data, textStatus, jqXHR)
    {
        // data 는 서버로 부터 수신된 응답
        // $('#result').empty();
        // $('#result').append(data);
    },
    error: function (jqXHR, textStatus, errorThrown)
    {
  
    }
});
 
jQuery POST 요청 타입(2)
 
$.post("AJAX_POST_URL",
    {id:"kim",pass:"123",submit:true},
    function(data, textStatus, jqXHR)
    {
        //data는 서버의 응답
    }).fail(function(jqXHR, textStatus, errorThrown) 
    {
        alert(textStatus);
    });
  
//With jqXHR callbacks .done() and .fail()
$.post("AJAX_POST_URL",
    {id:"kim",pass:"123",submit:true}).done(function(data, textStatus, jqXHR) 
        {
  
        }).fail(function(jqXHR, textStatus, errorThrown) 
    {
        alert(textStatus);
    });
 
 
1. 간단한 Form 요청
 
간단한 form을 이용한 submit Form
<form name="form1" id="ajaxform" action="test.jsp" method="POST">
    Name: <input type="text" name="fname" value =""/> <br/>
    Email : <input type="text" name="email" value=""/> <br/>
</form>
 
TYPE-1. 간단한 form submit을 처리하는 jQuery 콜백핸들러
$("#form1").submit(function(e)
{
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
    $.ajax(
    {
        url : formURL,
        type: "POST",
        data : postData,
        success:function(data, textStatus, jqXHR) 
        {
            //data: return data from server
        },
        error: function(jqXHR, textStatus, errorThrown) 
        {
            //if fails      
        }
    });
    e.preventDefault(); //STOP default action
    e.unbind(); //unbind. to stop multiple form submit.
});
  
$("#form1").submit();
 
 
2. Multipart form 데이터 전송 요청
 
multipart/form-data 요청 Form 
<form name="multiform" id="multiform" action="multi-form-submit.php" method="POST"         enctype="multipart/form-data">
    Name: <input type="text" name="name"  value="Ravi"/> <br/>
    Age :<input type="text" name="age"  value="1" /> <br/>
    Image :<input type="file" name="photo" /><br/>
</form>
 
multipart/form-data 요청 이벤트를 위한 jQuery 콜백 핸들러
$("#multiform").submit(function(e)
{
    var formObj = $(this);
    var formURL = formObj.attr("action");
    var formData = new FormData(this);
    $.ajax({
            url: formURL,
            type: 'POST',
            data:  formData,
            mimeType:"multipart/form-data",
            contentType: false,
            cache: false,
            processData:false,
            success: function(data, textStatus, jqXHR)
            {
                // 요청 처리가 성공적으로 처리된 경우 응답으 data로 참조할 수 있다.
            },
            error: function(jqXHR, textStatus, errorThrown) 
           {
           }          
    });
    e.preventDefault();   //디폴트 액션을 예방한다. 
    e.unbind();
}); 
$("#multiform").submit();  //form을 전송한다.

'프로그래밍 > jQuery' 카테고리의 다른 글

jQuery POST 요청 처리  (0) 2014.02.12
블로그 이미지

오픈이지 제로킴

시큐어코딩 교육/컨설팅 전문가 그룹



































블로그 이미지

오픈이지 제로킴

시큐어코딩 교육/컨설팅 전문가 그룹



























블로그 이미지

오픈이지 제로킴

시큐어코딩 교육/컨설팅 전문가 그룹


































블로그 이미지

오픈이지 제로킴

시큐어코딩 교육/컨설팅 전문가 그룹












































블로그 이미지

오픈이지 제로킴

시큐어코딩 교육/컨설팅 전문가 그룹







블로그 이미지

오픈이지 제로킴

시큐어코딩 교육/컨설팅 전문가 그룹













블로그 이미지

오픈이지 제로킴

시큐어코딩 교육/컨설팅 전문가 그룹






















블로그 이미지

오픈이지 제로킴

시큐어코딩 교육/컨설팅 전문가 그룹



















블로그 이미지

오픈이지 제로킴

시큐어코딩 교육/컨설팅 전문가 그룹






블로그 이미지

오픈이지 제로킴

시큐어코딩 교육/컨설팅 전문가 그룹

자바스크립트(JavaScript)에서는 다음의 함수들로, HTML 페이지 주소를 인코딩/디코딩 한다.

encodeURI() / decodeURI()


최소한의 문자만 인코딩 한다.
; / ? : @ & = + $ , - _ . ! ~ * ' ( ) #  문자는 인코딩 하지 않는다. 

ex) http://openeg.co.kr/key=한글

     http://openeg.co.kr/key=%ED%95%9C%EA%B8%80


encodeURIComponent() / decodeURIComponent()


알파벳과 숫자외의, 대부분의 문자를 모두 인코딩한다.
ex) http://openeg.co.kr/key=한글
     http%3A%2F%2Fopeneg.co.kr%2Fkey%3D%ED%95%9C%EA%B8%80


escape() / unescape()
예전부터 있던 오래된 함수다.   (* @ - _ + . /) 문자는 인코딩하지 않는다.


ex) http://openeg.co.kr/key=한글

      http%3A//openeg.co.kr/key%3D%uD55C%uAE00




자바에서는 URLEncoder/URLDecoder 클래스를 사용하여 웹에서 통용되는 'x-www-form-urlencoded'형식으로 변환하거나 인코딩된 문자열을 다시 역변환하는 작업을 수행한다.


URLEncoder는 대소문자, 숫자, 밑줄을제외한 URL에 있는 모든 문자를 코드화 한다.


URLEncoder 변환규칙 

- 아스키문자(a~z, A~Z, 1~9),  '.',  '-',  '*',  '_' : 그대로 전달 

- 공백문자(' ') : '+' 기호로 변환

- 기타문자 : '%xy' 와 같이 세 개의 문자로 변환

                    xy는 해당 문자의 ASCII코드를 16진수화한 결과를 두자리의 대문자로 나타낸 것.


(사용예)

String data= URLEncoder.encode("http://한글/", "UTF-8");

String origin= URLDecoder.decode(data, "UTF-8"); 


블로그 이미지

오픈이지 제로킴

시큐어코딩 교육/컨설팅 전문가 그룹

티스토리 툴바