INCLUDE (jsp:include, jsp:forward) include 액션태그 : include태그가 위치한 부분에 지정한 페이지를 포함한다. include 액션태그를 사용하면 다수의 웹페이지에서 중복되는 코드들을 줄일 수 있다. include 태그 사이에 공통되는 코드들을 작성하고 별도의 코드들만 include에 해당하는 페이지에서 작성하면 되기 때문이다. jsp:include 액션태그 사용법 예시) 총방문자수 : XXX 현재접속자수:XXX 로그인 환영합니다. 한 페이지에 4개의 페이지를 동시에 불러와서 표현하는 모습이다. 블로그나 카페 등에서 이런식으로 구성된 모습을 볼 수가 있다. jsp:forward 액션태그 사용법 jsp:forward 태그를 이용하면 바로 다른 페이지로 이동한다. 이를 ..

AJAX (Asynchronous Javascript And XML) 란 무엇인가? 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신기능 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다 비동기 방식이란? 웹페이지를 리로드 하지 않고 데이터를 불러오는 방식 웹페이지에서 기타 코드들을 요청할 경우, 웹페이지를 리로드 하면서 불필요한 리소스가 낭비가 되는데, 비동기 방식을 이용하면 필요한 데이터만 불러오면서 리소스 낭비를 줄일 수 있다. AJAX는 XMLHttpRequest객체를 통해 서버에 request한다. JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다. AJAX의 장점 웹페이지 속도향상 서버의 처리가 완료될 ..

서버에서 클라이언트로 JSON 데이터 전송하기 파라미터로 member의 id값이 오는 경우 서버에서 해당 member 데이터 가져오는 방법 요청 url : http://localhost:8282/project4/**t4.jsp?id=aa 파라미터로 id=aa를 넘김 url에 있는 파라미터 값을 받아서 Member객체를 조회하는 쿼리문이 있는 메서드에 넘겨서 Member의 정보를 JSON형태로 받아서 출력 파라미터로 id값을 받아서 텍스트 박스에 멤버의 정보를 출력하는 방법(JSP문법에서 자바스크립트로 데이터를 넘기는 방법) 요청 url : http://localhost:8282/project4/t4.jsp?id=aa 파라미터로 id=aa를 넘김 ID : PW : ADDR : TEL : 자바스크립트 에서는..

JSON(JavaScript Object Notation)이란? 데이터를 저장, 전송할 때 사용되는 경량의 DATA 교환 형식 javascript에서 객체를 만들 때 사용하는 표현식 JSON은 데이터 포맷일 뿐, 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법 JSON의 특징 서버와 클라이언트 간의 교류에서 일반적으로 많이 사용된다. 자바스크립트 객체표기법과 아주 유사하다. 자료형이 아닌 텍스트의 형식일 뿐이다. JSON형식의 문서를 쉽게 자바스크립트 객체로 변환할 수 있다. 다른 프로그래밍 언어를 이용해서도 쉽게 만들 수 있다. 특정 언어에 종속되지 않으며, 대부분의 프로그래밍 언어어세 JSON 포맷의 데이터를 핸들링 할 수 있는 라이브러리를 제공한다. JSON 문법 {..

Filter(필터) 필터의 기본구조 필터는 클라이언트로 가는 응답과 최종 자원 사이에 위치 최종 자원의 요청 결과를 알맞게 변경하는 역할을 할 수 있다. init() 메서드 : 서버를 켰을때, 서블릿이 실행되기 전에 먼저 실행이 된다. 주로 필터 초기화 작업을 시작한다. doFilter() 메서드 : 필터 기능을 수행하는 메서드. destroy() 메서드 : 서버가 종료될때 호출된다. 필터 체인의 구성 필터 여러개가 모여서 하나의 필터 체인을 형성한다. 예시) 게시판 목록은 들어가진다. 회원목록은 로그인을 해야 볼 수 있도록 하기 위해서 로그인이 안되어 있는 경우 필터를 작동 시키는 예 p75 menu.jsp LoginFilter kr.co.seoulit.common.filter.LoginFilter L..

배열 array(for in, for of, forEach), 구조분해 할당 배열 생성 literal로 배열생성 Array객체를 이용하여 배열생성 let a=[10,20,30]; // literal로 생성 let b=new Array(40,50,60); // Array객체로 생성 console.log(a[0]); console.log(b[0]); #배열요소 호출 const a=[10,20,30] document.write(a[2]) //30 배열의 크기 Array.length 를 사용 var a=[10,20,30]; console.log(a.length); // 3이 출력 let a=[10,20,30,40,50]; let size=a.length; for(let b=0; b

화살표 함수 💡 화살표 함수란? function키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언 모든 경우 화살표 함수를 사용할 수 있는 것은 아니다. // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다. (x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다. // 함수 몸체 지정 방법 x => { return x * x } // single line block x => x * x // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다. () => { return { a: 1 }; } (..

구조분해할당(destructuring assignment), 전개연산자, toObject(배열을 객체로 전환) 💡 구조 분해 할당이란? 객체나 배열의 요소를 변수로 분해 할 수 있게 해주는 문법 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우 사용하기 좋다. 배열 분해 하기 let [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 배열[10,20]이 분해 되어 각각 a와 b에 할당됨 let array = [1, 2, 3]; let [a, b, c] = array; console.log(a, b, c); // 1 2 3 array의 [1, 2, 3]을 선언후, 배열 [a, b, c]에 각각 할당함 만약 배열의 첫 번째 요소를 가져와..