JSP

ajax 공부! ✔️ post 방식은 파라미터를 send 로 서버에 넘겨준다. (query) ✔️ post 방식은 enctype 을 설정해줘야한다. ✔️ json 방식은 문자열을 json 객체로 변환한다. json-20220320 으로 쉽게 json 객체를 사용할 수 있어졌다. 프로젝트 때문에 하루종일 모니터만 봤더니 쓰면서 공부하고 싶었음...

[AJAX] AJAX 란? (get 방식 / post 방식) ✔️ AJAX 란? - 비동기 자바스크립트 XML 이다. - HTML, CSS, 자바스크립트, DOM, XML 등 기존에 사용하던 여러 기술을 함께 사용하는 개발 기법이다. - 빠르게 동작하는 동적인 웹 페이지 만들 때 사용 - 페이지 일부만 갱신해서 속도도 빠르다. - JSON, XML, HTML 등 서버를 이용한다. 👩‍💻 장점 - 웹 페이지 일부만 갱신 가능하다. (서버에서 일부만 가져올 수 있다.) - 백그라운드 영역에서 서버로 데이터를 보낼 수 있다. - 비동기 통신을 사용함으로써 데이터를 보내고 나서도 사용자는 다른 작업이 가능하다. 👩‍💻 한계 - 클라이언트가 서버에 데이터를 요청하는 클라이언트 폴링 방식을 사용한다. 서버 푸시 방..

[jQuery] jQuery 요소 선택자, 직렬화 ✔️ 요소 선택자 - ':' 를 사용 -- 특정 요소를 선택할 수 있는 선택자 :button : type 속성값이 "button"인 요소를 모두 선택한다. $(":button") :checkbox : type 속성값이 "checkbox"인 요소를 모두 선택한다. $(":checkbox") :file : type 속성값이 "file"인 요소를 모두 선택한다. $(":file") :image : type 속성값이 "image"인 요소를 모두 선택한다. $(":image") :password : type 속성값이 "password"인 요소를 모두 선택한다. $(":password") :radio : type 속성값이 "radio"인 요소를 모두 선택한다. $(..

[jQuery] jQuery event 이벤트 ✔️ jQuery 이벤트 -- 이벤트의 연결(event binding) $("selector").click(function(event) { // 실행하고자 하는 jQuery 코드 }); $("selector").bind("click", function(event) { // 실행하고자 하는 jQuery 코드 }); $("selector").on("click", function(event) { // 실행하고자 하는 jQuery 코드 }); $("body").on({"click": function(event) { // 실행하고자 하는 jQuery 코드 }}, "selector"); $("body").on("click", "selector", function(eve..

[jQuery] jQuery css , attr 추가, 프로퍼티 설정 ✔️ jQuery css -- css .css() : css() 메소드는 선택한 요소 집합의 첫 번째 요소의 스타일 속성값을 반환하거나, 선택한 요소의 스타일 속성을 인수로 전달받은 값으로 설정한다. --속성명 설정 방식 - JavaScript에서는 하이픈(-)으로 연결된 CSS 속성 명을 사용할 때, 하이픈(-)을 제거하고 이름을 camelCase 방식으로 바꿔서 사용해야 한다. font-size => fontSize로 변경해서 사용해야 함 - jQuery의 .css() 메소드에서는 하이픈(-)으로 연결된 CSS 속성 명과 camelCase 방식의 속성 명을 둘다 사용할 수 있다. font-size, fontSize 둘다 사용 가능 ..

[jQuery] jQuery parent_closest , find, children ✔️ jQuery parent -- 상위(ancestor:조상) 요소의 탐색 .parent( [selector] ) : 선택한 요소의 부모(parent) 요소를 선택한다. .parents( [selector] ) : 선택한 요소의 상위(ancestor) 요소를 모두 선택한다. .parentsUntil( [selector] [,filter] ) : 선택한 요소의 상위 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택한다. .closest( selector ) : 선택한 요소를 포함한 상위 요소 중에서 지정한 선택자에 해당하는 요소 중 가장 첫 번째 요소를 선택한다. 📓 예제 1 $(functio..

[jQuery] jQuery append 요소 추가, 요소 삭제 ✔️ jQuery append -- 요소 추가 : 기존 요소의 내부에 추가 .append() : 선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다. .prepend() : 선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다. .appendTo() : 선택된 요소를 해당 요소의 마지막에 추가한다. .prependTo() : 선택된 요소를 해당 요소의 첫번째에 추가한다. 📓 예제 1 $(function(){ //마지막에 새로운 요소 추가 $(".box1 ul ").append("C/C++"); $("HTML 5").appendTo(".box2 ul"); //위치가 다름. //첫번째에 새로운 요소 추가하기. $(".box3 ul ").p..

[jQuery] jQuery 정의 셀렉터 요소 접근 ✔️ jQuery 사용하기 - jQuery( elements ) Returns : jQuery - jQuery(원소), jQuery(원소.원소.원소) : 실행후 jQuery객체를 반환 하나 또는 다단계의 문서 원소로서 사용할수 있다. - $()은 $(document).ready() 의 짧은 표현으로 사용가능하다. - $(document).ready() 은 문서가 사용가능한 시점을 자동으로 인식하여 주어진 콜백 함수를 동작시킨다. - 콜백함수란 지정된 행위가 끝난다음 자동적으로 실행될 함수를 의미한다. ✔️ jQuery 셀렉터 * : 모든 요소와 일치 태그 : 지정된 태그와 일치 #아이디 : 요소의 id 속성값과 일치 .클래스명 : 요소의 class 속성..

[JSP/Servlet] 파일처리(파일 업로드) / 서블릿 파일 업로드 ✔️ 파일 업로드를 위한 태그 : 태그 안에 정의된 요청 파라미터를 클라이언트에서 서버로 전송할 때 인코딩 방법을 지정한다. : method 속성이 post 인 경우에만 속성은 유효하다. 👩‍💻 속성값 1. application/x-www-form-urlencoded : 기본 enctype 속성으로 해당 콘텐츠 타입은 바이너리 데이터(파일 등) 을 전송할 수 없다. 2. multipart/form-data : 문자 인코딩을 하지 않고 전송되며, 파일을 전송할 때 사용한다. : 여러 형태의 데이터(파일 내용, 텍스트 입력 값) 이 동시에 전달되며, 각 데이터는 [boundary = ....] (경계 정보) 뒤에 붙은 문자열을 이용하여 ..

[Servlet] 방명록 기능 Servlet ✔️ 방명록 만들기 직접 작성한 코드라 부족한 부분이 있을 수 있다. ❌JSP 코드 업로드❌ - DTO , DAO, 서블릿 작성 - URI 및 JSP 1) 방명록 메인 화면 URI, JSP 2) 글 등록완료 URI, JSP -> 메인 화면으로 리다이렉트 3) 글 삭제완료 URI, JSP -> 메인 화면으로 리다이렉트 -- 👩‍💻 서블릿 코드 package com.guest; import java.io.IOException; import java.util.List; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.annotation...