Jun's TID

JPA는 대표적인 ORM 기술 명세로, 객체와 관계형 데이터베이스의 데이터를 자동으로 매핑할 때 사용한다. 객체 지향 프로그래밍은 클래스를 사용하고, 관계형 데이터베이스는 테이블을 사용한다. 그렇기 때문에 경우에 따라 객체 모델과 관계형 모델 간에 불일치가 존재한다. JPA가 객체 간의 관계를 바탕으로 SQL을 자동으로 생성하여 불일치를 해결하는 데 도움을 준다. Spring-JPA reference URL : https://docs.spring.io/spring-data/jpa/docs/current/reference/html/#jpa.repositories JPA 자체 reference URL: https://www.objectdb.com/api/java/jpa 우선 Spring 에서 JPA를 사용하..

프로젝트를 톰캣 서버를 사용하여 run할 때, 기본 경로는 web.xml내에 welcome file로 지정되어 있는 파일이다. 지금까지는 그냥 index.jsp나 index.html 을 생성해서 default 값을 사용했다. 하지만, mvc model2 패턴을 사용하여 프로젝트를 구성한다면 index.jsp 또한 ActionFactory를 사용하여 마찬가지로 index.html에서 Controller에게 요청하여 index.jsp 로 이동하게끔 구성하는 방법도 있다. 이 방법을 사용하면, 물론 설계 초반에 좀 더 손이 가겠지만, index.jsp 파일을 url 직접적으로 노출시키지 않고 또한 header나 footer를 고정시킨 상태에서 그 내부 컨텐츠를 좀 더 쉽게 변경할 수 있다는 장점이 있다. 방법..

문제: #search 버튼 클릭시 ajaxCallTest4.jsp url로 ajax를 호출하여연관검색단어를 조회하여 #str에 출력. 단, ajax에 배열 형태를 넘겨야 하기 때문에 {'키[]' : 배열객체} 형식으로 데이터를 전달해야한다. ◎ 04_ajaxTest4.html 연관검색단어를 조회 취미 축구 수영 게임 연관단어검색 ▶ 연관단어 ◎ search_words.js /** * search_words.js */ $(document).ready(function() { $('#search').click(function() { var input = $('#types').val(); var request = $.ajax({ url: "ajaxCallTest4.jsp", method: "POST", data..

ajax 이해를 위한 3번째 예제이다. 버튼 클릭시, 선택창에서 선택된 숫자만큼의 크기를 갖는 배열(List)을 반환하여 #myName에 출력하는 기본적인 문제이다. (JS 폴더 내에 jQuery 코드를 따로 작성하여 html 에서 로드하는 방식으로 풀이하였다.) ◎ 03_ajaxTest3.html 1 2 3 4 5 배열크기 전송 ◎ ajax_array_size.js /** * ajax_array_size.js */ $(document).ready(function() { $('#call').click(function() { var input = $('#num').val(); console.log(input); var request = $.ajax({ url: "ajaxCallTest3.jsp", meth..

jQuery를 활용한 비동기 통신은 기본적으로 다음의 구조로 이뤄진다. 1. jQuery 내부에서 요청할 데이터를 생성하고 전송 //특정 이벤트, 트리거의 내부에 request 객체 선언 var request = $.ajax({ url: "전송할 주소", // 호출(요청) 대상 method: "POST", // 전송 방식 data: { // jsp가 읽어낼 파라미터명: 전송값 //데이터 맵핑 }, dataType: "json" // 응답받을 타입 }); // 응답에 성공했을 경우 request.done(function(data) { console.log(data); alert(data.result); }); // 응답에 실패했을 경우 request.fail(function(jqXHR, textStatus..

우선 AJAX란, JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며, 쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다. 지금까지 공부한 jQuery 프레임워크에서 해당 비동기 통신을 지원하도록 ajax() 함수를 제공하기 때문에 해당 카테고리의 대부분의 예제는 jQuery를 사용하여 구현할 예정이다. 그럼 빠른 이해를 위해 간단한 기초 예제로, 비동기 통신을 이용하여 아이디 중복 확인 기능을 구현해보자. 1. 우선, 데이터를 보낼 html 쪽에..

load() 함수를 이용하면 원하는 페이지를 비동기 방식으로 해당 페이지에 로드할 수 있다. 바로 확인해보자. HTML읽어오기 버튼 보면, alert가 load 뒷부분에 작성되었지만, alert창이 나온 뒤에 로드되는 것을 확인할 수 있다.

jQuery 는 JS보다 좀 더 다양한 시각적 효과들을 좀 더 쉬운 방법으로 사용이 가능하다. 대표적으로 쓰이는 몇 가지 효과를 예제와 함께 알아보도록 하자 1. show & hide : show(), hide() 함수를 이용하면, 특정 요소를 보이거나 숨길 수 있으며, 괄호 내에 "slow", "fast", "수치" 등을 입력하여 show & hide 속도를 조절할 수 있다. 안녕하세요. 여기는 본문입니다. more... 또 만나요 2. fadeIn() & fadeOut(): 서서히 나타내기 & 서서히 사라지기 첫번째 영역 또 만나요 3. slideUp: 말 그대로 슬라이드하며 올라오거나 내려감 첫번째 영역 두번째 영역 4. animate() : 여러가지 효과를 동시에 map 형태로 적용 가능 안녕하세..

사실 jQuery를 사용하는 가장 큰 이유 중 하나가 바로 동적으로 어떤 요소를 추가하거나 삭제하기 편리하다는 점일 것이다. 이번 포스팅에서는 세상 편리하게 동적으로 html 요소를 추가하는 몇 가지 방법을 작성해보려고 한다. 바로 확인해보자. 1. append: 동적으로 html 태그를 추가하는 함수 1) 테이블 동적 추가 여기에 태그 추가 행 열 2) 특정 용어에 대해서 번호 붙이기 jQuery is a new kind of JavaScript Library jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interaction..

jQuery의 트래버싱은 요소 선택을 좀 더 편리하게, id 속성 값을 굳이 주지 않아도 부모나 자식 요소의 관계나 인덱싱을 통해 요소에 접근하는 방법이다. 바로 확인해보자. 1. n 번째 index C# ASP.NET jQuery jQuery1 jQuery1 2. 지정된 표현식 존재 여부 3. 지정된 표현식을 제외한 요소 가져오기 4. 방금 실행한 요소의 직전 요소 반환 JavaScript jQuery