창문을 열심히 닦아요

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 발생시 전체 페이지가 아닌 일부분만을 업데..

JDK7 설치이때, 자바 JDK 버전이 7 이었음. 현재 PC 설치한 JDK는 버전 8JDK8은 어노테이션 인식이 안되므로 JDK7 설치를 하고자한다.설치되는 위치가 다르기 떄문에 충돌은 일어나지 않음 64비트와 32비트 차이로 인해 저장위치 다름 서버 환경설정 변경1. Runtime Environment 클릭2. Installed JREs 클릭3. Standard VM 클릭4. ADD JRE의 Directory 클릭5. JRE7이 설치된 경로 ▶ 확인 ▶ finish6. JRE7으로 설정 변경 7. 디폴트 설정을 'jre7'로 변경 ▶ finish8. 프로젝트 마우스 우클릭 ▶ properties ▶ Java Compiler ▶ Compiler Compliance level 1.7로 변경 9. 객체생성..

의존성 주입 (Dependency Injection) 클래스 설계에서 주요 고려 사항중 하나는 객체 간 의존성을 제거해서 변경사항에 유연하게 대처하도록 구성하는 것이다. 의존성을 제거하는 클래스 구현방법으로 각 클래스가 인터페이스를 기반으로 호출하게 하고, 의존성 주입을 통해 객체 생성을 추상화하는 방법이 있다. Dependency Injection : 스프링은 객체의 의존성을 의존성 주입을 통해 관리한다. 의존성 주입 방법은 생성자 기반(Constructor Injection), 세터 기반(Setter Injection) 의존성 주입이 있다. DI는 Spring 프레임워크에서 새롭게 지원하는 IoC의 한 형태로 각 클래스사이의 의존관계를 빈 설정(Bean Definition) 정보를 바탕으로 컨테이너가..