창문을 열심히 닦아요

Depth가 깊어지며 콜백 함수를 알아보기 힘든 피라미드 구조 . step1(function (value1) { step2(value1, function(value2) { step3(value2, function(value3) { step4(value3, function(value4) { // Do something with value4 }); }); }); }); q.js를 활용한다면 깔끔해지고 순차적인 비동기 처리를 가독성 높게 파악 가능하다. Q.fcall(promisedStep1) .then(promisedStep2) .then(promisedStep3) .then(promisedStep4) .then(function (value4) { // Do something with value4 }) .c..

새로고침(Reload) 하지않아도 글을 작성 시 밑에 조회가 되도록 구현해보자. 개발 환경 셋팅 톰캣 7.0, 이클립스, 오라클, JDK 7.x, Struts2, Spring2.5, iBatis 구현 순서 1. [DB] 사용할 테이블 생성 - iguest 2. DTO 생성 - GuestDTO.class 3. 페이징 처리를 위한 클래스 생성 - MyUtil.class 4. [jsp 페이지 생성] 방명록 작성/조회 페이지 - guest.jsp 5. [jsp 페이지 생성] DB에 접근하여 방명록이 작성되어 div태그로 작성되는 페이지 - list.jsp 6. [iBatis] iguest_sqlMap.xml 작성 7. [iBatis] sqlMap_config.xml에 resource 등록 (iguest_sqlM..

JSON 표기법 JavaScript Object Notation 표기법은 서로다른 프로그래밍 언어 간에 데이터를 교환하기 위한 표기법으로 읽고 쓰기 쉬운 표기법이다. DB에 있는 데이터를 JSON표기 형식으로 변환하기 위해 소스 코드를 작성하는 방법도 공부하자! ① Key: Value 쌍 Map이나 hashTable과 같은 방식. key는 String이다. collection 타입. 다양한 언어들에서, 이는 object, record, struct(구조체), dictionary, hash table, 키가 있는 list, 또는 연상배열로서 구현 { “이름1”:값1, “이름2”:값2, “이름3”:값3 } ② 배열 값들의 순서화된 Collection. 대부분의 언어들에서 array, vector, list,..

자바스크립트 객체 prototype를 사용해서 자바스크립트 클래스를 만들 수 있다. 자바스크립트에는 Date, String 등의 클래스가 있고 이렇게 기본적으로 제공하는 클래스 외에 추가적으로 개발자가 직접 새로운 클래스를 정의할 수 있다. ① 출력 기능의 로그 스크립트 작성 - log.js function log(msg){ var consolE = document.getElementById("console"); consolE.innerHTML += msg + " "; } ② Member클래스 생성 자바스크립트를 이용해서 클래스를 생성할 수 있다. Member클래스 생성 후 생성자를 가지고 객체를 초기화시킨 것과 동일. 객체 생성시 id와 name 두 파라미터값을 전달받는 클래스를 정의했다. Member..

DOM이란? DOM(Document Object Model)은 문서를 객체로 표현하기 위한 표준. HTML 이나 XML등의 문서를 객체로 표현할 때 사용되는 API이다. 자바스크립트 ,자바,C,C# 등 다양한 언어에서 DOM API를 제공하고있다. DOM은 문서를 트리구조로 표현하기 때문에 쉽게 이해할 수 있다. XMLHttpRequest 객체는 응답 텍스트 대신 XML 응답 결과를 사용할 수 있다. 이 때, DOM API를 사용해서 서버가 생성한 XML로부터 데이터를 추출할 수 있다. XML문서와 DOM트리 구조 브라우저는 HTML의 모든 요소를 객체화하고 이 객체를 계층구조로 묶어, 어떤 요소가 다른요소 내부에 포함되어 있을때, 이 요소는 자신을 포함한 요소의 자손 요소로써 구조화한다. 예를 들어, ..

일반적인 검색엔진을 사용할 때, 사용자가 검색한 단어를 DB에 누적시켜 저장시킨 뒤 검색빈도가 높은 목록을 정리해서 출력해준다. 이 제시어 기능을 구현해보자. ① 검색어를 입력할 페이지 - suggestClient.jsp 제시어 .suggest{ display: none; position: absolute; left:11px; top:131px; } function sendKeyword(){ var userKeyword = document.myForm.userKeyword.value; if(userKeyword==""){ hide();//검색창이 비워져있으면 숨김 return; } var params = "userKeyword="+userKeyword; sendRequest("suggestClient_o..

1. Javascript를 통한 ajax 구현 ① helloAjax.jsp - 요청 전송 페이지 Insert title here var XMLHttpRequest; function ajaxRequest(){ XMLHttpRequest = createXMLHttpRequest();//객체 생성 XMLHttpRequest.open("GET","helloAjax_ok.jsp",true); //요청을 초기화하면서 요청 방식, 주소, 동기화 여부를 지정. XMLHttpRequest.onreadystatechange = viewMessage; //Callback함수 XMLHttpRequest.send(null);//요청을 보낸다. } function viewMessage(){ var responseText = XM..

JavaScript & Ajax & JQuery 자바스크립트와 jQuery를 이용해서 Ajax를 구현하는 간단한 페이지를 실습해보고자 한다. JavaScript 사용예제 - test1.jsp, ajaxUtil.js, test1_ok.jsp JavaScript를 이용하여 서버로 보내는 HTTP request를 만들기 위해서는 그에 맞는 기능을 제공하는 Object의 인스턴스가 필요하다. XMLHttpRequest 객체 생성 var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");//IE5.0이후에 나온 브라우저 var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE5.0이전 var xmlHttp = new XMLHttpReq..

JQuery - 셋팅 Jquery는 엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는 자바스크립트 라이브러리. 두가지로 나뉘어져 있음. Script 파트와 GUI파트. GUI 환경은 굉장히 만들기 쉬움. Script를 통해서 Ajax를 활용하므로 기본적으로 이해를 해줘야한다. 이 모든것을 합쳐놓은게 Bootstrap https://jquery.com/ 에서 download JQuery 클릭 compressed 와 upcompressed 는 공백 여부 차이 커스텀 다운로드 클릭 1.12.1 다운로드 min파일은 공백이 없음. 그걸 제외하고는 동일한 내용의 파일 WebContent 폴더에 data폴더 생성 jQuery의 스크립트 부분을 jquery-3.3..

Ajax Asynchronous JavaScript + XML의약어. 비동기식. 서버와 통신하기 위해서 XMLHttpRequest 객체를 사용한다. 일반 텍스트 형식, JSON, XML,HTML 등 다양한 포맷을 주고받을 수 있다. Ajax는 새로운 언어도 기술도 아니며 현존하는 웹프로그래밍 관련 기술(JavaScript, HTML, CSS, XHTML, XML, DOM, XMLHttpRequest 등 - XML, HTML은 DOM객체)들을 통합하여 대화형 웹애플리케이션을 개발하는 새로운 개발 방법(패러다임)이다. 비동기 웹 기술의 가장 큰 장점은 비동기적으로 작업을 수행함으로써 페이지 일부만을 변경할 수 있다는 것이다. 이러한 비동기성을 통해서 특정 Event 발생시 전체 페이지가 아닌 일부분만을 업데..