Ajax 의 주요 구성 요소 1. XMLHttpRequest : 웹서버와 통신을 담당하는 것으로서 사용자의 요청을 웹서버에 전송해주고, 웹서버로 부터 받은 결과를 사용자의 웹브라우저에 전달해줌. 2. DOM (Document Object Model) : DOM은 HTML과 XML문서에 대하여, 이들 문서의 구조적인 표현방법을 제공하며, 어떻게 하면 스크립트를 이용하여 이러한 구조에 접근할 수 있는지를 정의하는 API 이다. DOM 객체는 텍스트와 이미지, 하이퍼링크, 폼 엘리먼트 등의 각 문서 엘리먼트를 나타낸다. 3. CSS : 글자색, 배경색, 위치 등 UI 관련 부분을 담당. 4. JavaScript : 사용자가 마우스를 드래그하거나 버튼을 클릭하면 XMLHttprequest 객체를 통해 웹서버에 ..
ALL
쌍용 강북 교육센터 국비학원 Day 78일차 파일을 첨부해서 보내는 폼태그가 enctype="multipart/form-data" 으로 되어있으면 HttpServletRequest request 을 사용해서는 데이터값을 받아올 수 없다. 이때는 cos.jar 라이브러리를 다운받아 사용하도록 한 후 아래의 객체를 사용해서 데이터 값 및 첨부되어진 파일까지 받아올 수 있다. MultipartRequest mtrequest 은 HttpServletRequest request 가 하던일을 그대로 승계받아서 일처리를 해주고 동시에 파일을 받아서 업로드, 다운로드까지 해주는 기능이 있다. =첨부되어진 파일을 디스크의 어느 경로에 업로드 할 것인지 그 경로를 설정해야 한다. ServletContext svlCtx =..
쌍용 강북 교육센터 국비학원 Day 77일차 ※ 선택자를 잡을때 선택자가 태그에 직접 기술한 것이라면 선택자를 제대로 잡을수가 있으나 스크립트내에서 (함수, jQuery로) 기술한 것이라면 선택자를 못 잡아올수도 있다. 이러한 경우는 이벤트 처리는 아래와 같이 해야한다. $(document).on( "이벤트종류", "선택자", function ( ) { } ); 으로 한다. 다음은 이미지를 업로드 하기 위해 input 태그에 이미지를 선택하면 해당 이미지의 미리보기를 띄워주는 예제이다. $(document).on("change", "input.img_file", function(e) { const input_file = $(e.target).get(0); jQuery선택자.get(0) 은 jQuery 선..
쌍용 강북 교육센터 국비학원 Day 73일차 ※ method GET 방식을 사용할때는 항상 사용자가 URL에 임의의 값을 넣을 수 있기 때문에 경우의 수를 생각해 입력하는 값을 막아주어야 한다. Paging (페이징) 처리 sizePerPage - 한 페이지당 화면상에 보여줄 행의 개수 blockSize - 보통 1개 블럭당 10개씩 잘라서 페이지 만든다.1개 페이지당 sizePerPage 를 보여주는 것 TotalPage - DB에서 불러올 총 행의 개수를 반올림 한것 (남는 것까지 페이지는 구현이 되야하기 때문에 반올림) currentShowPageNo - 현재 가르키고 있는 페이지 1블럭 1 2 3 4 5 6 7 8 9 10 [다음] 2블럭 [이전] 11 12 13 14 15 16 17 18 19 ..
쌍용 강북 교육센터 국비학원 Day 70일차 라디오중에서 한개를 선택했을 경우 같은 index의 이벤트 발생 예제 위와 같이 하나의 라디오를 선택했을때 point가 적혀있는 span 태그의 addClass를 하는 예시이다. 팝업창에서 부모창 함수 호출 방법 3가지 결제로직과 같이 팝업창과 페이지창이 번갈아가면서 로직을 구현해야할 때 함수를 이용하는데 이 때 부모창 (페이지창)의 함수를 호출하는 방법이다. 일반적인 방법 - 1 opener.location.href = "javascript:부모창스크립트 함수명();"; 일반적인 방법 - 2 window.opener.부모창스크립트 함수명(); (window.opener는 부모창을 뜻한다) jQuery를 이용한 방법 $(opener.location).attr(..
쌍용 강북 교육센터 국비학원 Day 69일차 Modal 창의 값을 초기화 하는 방법 위는 대상 아이프레임을 선택해서 모달창 내부 jsp 에서 함수를 이용해 값을 초기화 시킨 것으로 페이지 구현이 많지 않을 때 사용하기 용이하다. iframe 요소에 접근하는 contentWindow 와 contentDocument 의 차이점은 다음과 같다. contentWindow 와 contentDocument 모두 iframe 하위 요소에 접근 할 수 있는 방법으로 contentWindow 는 iframe의 window (전체, 전역)을 의미하는 것이고 contentWindow.document 은 contentDocument 와 같은 것이다. contentWindow 가 contentDocument 의 상위 요소이다...
쌍용 강북 교육센터 국비학원 Day 67일차 session (세션) session이란 WAS 컴퓨터의 메모리(RAM) 의 일부분을 사용하는 것으로 접속한 클라이언트 컴퓨터에서 보내온 정보를 저장하는 용도로 쓰인다. (즉, 웹 컨테이너에 클라이언트의 상태 정보를 보관할 때 사용한다) 클라이언트 컴퓨터가 WAS 컴퓨터에 웹으로 접속을 하기만 하면 무조건 자동적으로 WAS 컴퓨터의 메모리(RAM)의 일부분에 session 이 생성되어진다. session 은 클라이언트 컴퓨터 웹브라우저당 1개씩 생성되어진다. 예를 들면 클라이언트 컴퓨터가 크롬 웹브라우저로 WAS 컴퓨터에 웹으로 연결하면 session이 하나 생성되어지고, 또 이어서 동일한 클라이언트 컴퓨터가 엣지 웹브라우저로 WAS 컴퓨터에 웹으로 연결하면 ..
쌍용 강북 교육센터 국비학원 Day 66일차 암호화 / 복호화 ※ 관련용어 ※ 암호 (Cryptography) : 해독 불가능한 형태로 변환하거나 또는 암호화된 메시지를 해독 가능한 형태로 변환하는 기술 평문 (Plain text) : 해독 가능한 형태의 메시지 암호문 (Ciphertext) : 해독 불가능한 형태의 메시지 암호화 (Encryption) : 평문을 암호문으로 변환하는 과정 복호화 (Decryption) : 암호문을 평문으로 변환하는 과정 대칭키 암호 (또는 비밀키 암호) : 암호화키와 복호화키가 같은 암호 비대칭키 암호 (또는 공개키 암호) : 암호화키와 복호화키가 다른 암호 단방향 (일방향) 암호화 알고리즘 (SHA-256 Secure Hash Algorithm) 단방향 암호화는 평문을..
쌍용 강북 교육센터 국비학원 Day 65일차 JQuery의 Datepicker Datepicker는 생년월일을 입력하는 등 날짜를 입력하는 input 태그에 텍스트로만 입력하지 않고 이벤트로 직관적인 달력을 띄워 날짜를 선택하는 코드로 jQuery에서 오픈소스로 제공하는 코드이다. 기본적으로 제공하는 것은 영어로 되어있지만 API 문서를 통해 옵션값을 설정하여 커스텀을 할 수 있다. (또한 함수를 이용해 날짜와 날짜사이의 기간을 지정할 수도 있다) 옵션값 설명 옵션값 값 설명 dateFormat 'yy-mm-dd' 와 같은 Date 형식 Input Display Format 변경 showOtherMonths boolean 빈 공간에 현재월의 앞뒤월의 날짜를 표시 showMonthAfterYear bool..
쌍용 강북 교육센터 국비학원 Day 64일차 Connection Pool Connection 은 데이터베이스 서버에 연결하기 위해 사용되어지는 객체이다. 객체는 새롭게 만들어질때 시스템 자원(CPU, 메모리) 의 많은 소모와 시간이 걸리게 된다. 특히 DAO 클래스에서 사용하는 메소드 (insert, select, update, delete 등) 를 작성하려면 매번 Connection 객체 생성을 필요로 하게된다. 매번 이 객체를 생성해서 사용해야 한다는것은 자원소모가 크므로 이를 해결하기 위해 나온 방법이 Connection Pooling 기법이다. Connection Pool 은 미리 처음부터 여러개의 Connection 객체를 만들어 두고서 DAO 클래스의 메소드를 호출할때 마다 미리 만들어둔 객체..
