the Rabbit_Sand, IT Blog 🍀

post 방식의 특징 1. url의 body 영역에 데이터를 포함시켜서 요청한다. → 사용자가 입력한 데이터(값)들이 url에 노출되지 않아 보안유지가 가능하다. → 로그인이나 회원가입의 경우가 post 방식에 적합하다. 2. body 영역은 전송하는 길이 제한이 없어 게시판 작성 등에 용이하다. 3. 즐겨찾기가 가능하지만 전달되는 데이터가 url에 노출돼있지 않아서 get 방식과 달리 기존의 검색결과를 볼 수 없다. request_post.html 이름: 성별: 남자 여자 나이: 거주 지역: 서울 경기 강원 부산 대구 광주 울산 인천 키: 좋아하는 음식(모두 선택하기) 중식 일식 양식 한식 분식 RequestPostServlet @WebServlet("/test2.do") public class Req..

get 방식의 특징 1. url의 header 영역에 데이터들을 포함시켜서 요청한다. → 사용자가 입력한 데이터들이 url에 노출되어 보안 유지가 불가능하다. → 로그인이나 회원가입과 같이 보안 유지가 필요한 경우에는 get 방식이 부적합하다. 2. header 영역은 전송 길이에 제한이 있다. → 방대한 데이터들을 담고 있을 경우엔 초과된 데이터들이 절단되어서 넘어간다. → 게시판 작성과 같은 경우엔 get 방식이 부적합하다. 3. url에 입력 데이터가 노출되므로 북마크(즐겨찾기)가 가능하다. → 검색 기능을 사용할 땐 get 방식이 적합하다. 회원 정보 입력 이름: 성별: 남자 여자 나이: 거주 지역: 서울 경기 강원 부산 대구 광주 울산 인천 키: 선호하는 음식 선택(최대 5개) 중식 일식 양식 ..

Servlet : Servlet은 웹 서비스를 위한 Java class이다. - MVC에서 Controller의 기능을 하며, 사용자의 요청을 받아서 처리하고 그에 해당하는 응답 페이지를 만들어서 다시 사용자에게 전송하는 역할을 한다. - 동적 웹 페이지를 Java로 구현할 수 있게 하는 서버 측 프로그램이다. - 장점: Java 코드 내에 작성하므로 반복문이나 조건문 등의 메소드를 사용할 수 있다. - 단점: html을 수정해야 할 때는 직접 Java 코드 내에서 수정해야 하므로 서버를 재구동시켜야 한다. web.xml - 배포 서술자(DD, Deployment Descriptor) : 해당 웹 애플리케이션의 기본적인 설정을 위해 작성하는 파일이다. - 해당 웹 애플리케이션을 구동시키는 서버를 star..

jQuery : 기존의 JavaScript만으로 구현하기엔 복잡했던 구문들을 간소화하기 위해 개발된 JavaScript 기반 라이브러리이다. → JavaScript 언어로 함수나 기능들이 이미 정의돼있다. - jQuery의 장점 : DOM 요소와 관련된 스크립트를 쉽게 구현할 수 있다. AJAX, 이벤트 처리 등 폭넓게 지원한다. jQuery와 관련된 확장형 플러그인, 오픈 API 등을 지원한다. jQuery 라이브러리 연결 방식 1. 오프라인 방식 : https://www.jquery.com에서 jQuery 라이브러리를 직접 다운로드 받은 후에 경로를 지정한다. - UnCompressed : 개발자 전용 → 일반 js 파일: 개발자가 보기 쉽도록 주석과 코드 정렬 등을 활용하여 가독성이 좋다. - Co..

정규표현식(REGEX/REGEXP: Regular Expression) : 특정 패턴을 가진 문자열을 찾거나 변경할 때 사용하는 형식 언어이다. - 문자열에 대해 특정 패턴의 조건을 검사하거나 변경할 때 복잡한 조건을 제시하지 않고 간단하게 처리할 수 있다. - JavaScript 외에 Java, Oracle 등 다른 언어에서도 사용할 수 있다. 정규 표현식 객체 생성 방법 방법1. 생성자 구문으로 작성한다. var regExp = new RegExp("script"); 방법2. 정규식 변수를 선언한다. var regExp = /script/; 정규 표현식과 관련된 메소드 var sub1 = "javascript jquery ajax"; var sub2 = "java oracle html css"; 1...

유효성 검사 : 로그인이나 회원가입을 할 때 보면, 아이디와 비밀번호를 입력할 때 지켜야하는 조건들이 있다. '비밀번호는 영문자와 숫자, 특수문자를 포함하여 8~15자 이내로 입력하세요', '아이디는 숫자만으로는 입력할 수 없습니다' 등등. 이때 사용자가 값을 입력하면 유효성 검사를 통해 한 글자씩 조건에 맞는지 확인한다. 만약 조건에 맞지 않으면 기본 이벤트가 실행되지 않도록 한다. 정규표현식을 통한 유효성 검사 - 정규표현식 틀 : // - 시작: ^ , 끝: $ - 조건 정할 때: [] - a-z: 소문자 a부터 z까지 - A-Z: 대문자 A부터 Z까지 - 0-9: 숫자 0부터 9까지 - 글자 수 n글자부터 m글자 이하까지: {n, m} var regExp = /^[a-zA-Z0-9]{5,12}$/..

이벤트의 종류 1. 고전 이벤트 모델(기본) : 요소객체를 가져와 해당 요소객체에 이벤트 속성으로 접근한 후에 이벤트 핸들러를 연결한다. - 이벤스 속성에 null을 대입하여 이벤트를 제거할 수 있다. - 동일한 이벤트를 여러 번 사용할 수 없고, 나중에 작성된 이벤트로 덮어쓰기가 된다. 고전 이벤트 버튼1 고전 이벤트 버튼2 2. 인라인 이벤트 모델 : 요소 내부에 직접적으로 이벤트 속성을 제시하여 실행할 내용을 정의한다. - 주로 script 태그에 정의돼있는 함수를 호출하는 방식으로 사용한다. - 이 모델은 구문이 길어지고 복잡해보여 잘 사용하지 않는다. 버튼 누르기 버튼 클릭 3. 표준 이벤트 모델(addEventListener) - 동일한 이벤트를 여러 번 사용할 수 있다. - 이벤트 대상 요소..

window용 객체 : JavaScript의 최상위 객체이며, 크게 BOM과 DOM으로 나뉜다. - BOM(Browser Object Model): location 객체, screen 객체, navigator 객체, history 객체 - DOM(Document Object Model): document 객체 1. window.open("url", "창 이름", "특성"); 1) 첫 번째 인자값: 새 창에서 열 url 주소 2) 두 번째 인자값: 창 이름, 같은 이름의 창이 이미 열려있으면 원래 열려있던 창에서 새로고침된다. 3) 세 번째 인자값: 창의 특성, 새 창의 너비와 높이, 툴바, 스크롤바, 상태표시줄 등(브라우저마다 다름) * 창의 특성 - yes/no, resizable(창 크기 조절 가능 ..

객체의 선언 및 호출 : 중괄호 {}를 사용하여 객체를 생성하고, {} 안에 객체에서 필요로 하는 속성들을 정의한다. - 속성값에 모든 자료형들의 값을 담을 수 있다. - 속성: key와 value 형태로 정의한다. - Java의 HashMap과 유사하다. var 변수명 = { 속성명1:속성값1, 속성명2:속성값2, ... }; - 객체 내부 속성에 직접적으로 접근하는 방법 : 방법1. 객체명['속성명'] var product = { pName:"냉장고", pCompany:"LG", pColor:["silver", "white", "black"] }; divE.innerHTML += product['pName'] + " "; // 냉장고 divE.innerHTML += product['pCompany']..

선언적 함수 : 매개변수가 없는 경우에는 매개변수를 생략할 수 있고, 반환값이 없을 경우에 반환값을 생략할 수 있다. function 함수명(매개변수1, 매개변수2, ...){ 해당 함수를 호출했을 때 실행할 소스코드; return 결과값; } 익명함수 : 주로 특정 변수나 속성에 대입되는 함수(이벤트 핸들러)를 제시할 때 사용한다. - 이벤트 핸들러: 이벤트 속성에 대입되는 function function(매개변수1, 매개변수2, ...){ 소스코드; } 함수의 매개변수 - 매개변수를 제시할 땐 자료형을 지정하지 않고 변수명만 작성한다. - 정의한 매개변수의 개수보다 많이 전달되면 초과된 전달값은 무시되고 개수 만큼 반환된다. - 정의한 매개변수의 개수보다 적게 전달되면 undefined가 반환된다. ..