본문 바로가기

전체 글92

JavaScript을 사용한 multiple 속성 이미지 미리보기 안녕하세요. IT여행자입니다. 이번 여행지는 JavaScript를 사용하여 file 태그에 의해 선택된 이미지를 미리 보는 작업을 해볼까 합니다. HTML5가 이제 보편적으로 사용되면서 하나의 file 태그에 의해 하나 이상의 파일들을 한 번에 선택할 수 있게 되었습니다. 아직 몇몇 파일 다운로드 API 중에는 file 태그의 multiple 속성을 사용할 수 없는 것도 있지만 버전업이 되지 않는다면 시장에서 도태되겠지요~ 여담이지만, 우리나라도 이제 것 IE에 종속적이었기 때문에 web 개발 능력이 한없이 IT 선진국에 비해 뒤쳐져있는 건 사실일 것입니다. 아니, 정확히 이야기하면 신기술을 사용하지 못하고 그저 IE의 특성만을 답습하다 보니 우리도 모르게 세계 시장에서 도태된 것일 겁니다. 사설 끊고~.. 2021. 1. 10.
서버 정보를 전체 화면 새로고침없이 실시간으로 검색하기 안녕하세요. IT 이곳저곳을 여행하고 있는 IT여행자입니다. 이번 포스팅은 Ajax를 사용하여 서버에 있는 정보를 실시간으로 검색하여 전체 화면을 새로 고치지 않고 검색된 정보를 화면에 표시해 보도록 하겠습니다. 실제로는 데이터를 Database를 통해 받아야 하겠지만, 코드의 간결함과, 프로세스의 단순함을 위해 검색할 데이터를 서버 페이지의 Collection에 저장한 후 데이터를 가져와 클라이언트 화면에 표시하도록 하겠습니다. [시연 영상] 전체 화면 새로고침없이 응답정보 표시 1. 데이터 시트 아래와 같은 데이터를 자바의 Map 구조로 저장할 것입니다. 구분 요소 산이름 백수산, 금강산, 치악산, 설악산, 지리산, 내장산 강이름 한강, 낙동강, 금강, 한탄강, 두만강, 대동강, 섬진강 꽃이름 장미,.. 2021. 1. 6.
암호 입력을 위한 모달 박스 만들기 안녕하세요. IT 이곳저곳을 여행하고 있는 IT여행자입니다. 이번 포스팅은 CSS와 JavaScript만을 사용하여 모달 박스를 만들어 암호를 입력하도록 해 보겠습니다. iframe이나 새창을 띄워서 모달 형태의 박스를 구현하는 방법도 있지만 쓰임새에 따라 각각의 장단점들이 있겠습니다. 여기서 모달 박스란 반드시 어떤 작업을 해야 하거나, 승인 또는 거부를 한 후 다음 작업이 진행되도록 하기 위해 사용될 것입니다. [시연 장면] 암호 입력을 위한 모달창 시연 1. HTML 작업 먼저 모달이 필요한 페이지와 모달을 구현할 페이지를 작성합니다. 암호를 입력하려면 버튼을 클릭해 주세요. 암호를 입력하세요 CSS를 구현하기 이전이기 때문에 아마도 아래와 같은 화면이 출력될 것입니다. 여기서 id='modal'로.. 2021. 1. 6.
이클립스 코드 자동 완성기능 안녕하세요. IT 이곳저곳을 여행하고 있는 IT여행자입니다. 이번 작은 IT구슬은 이클립스의 코드 자동 완성 기능입니다. 이클립스가 언제부터인가 코드 자동 완성 기능에 대하여 그리 신경 쓰지 않고 있다는 생각이 드네요. 아마도 이런 요소들 때문에 급격히 VSC(Visual Studio Code)에게 밀리고 있지 않나 생각해 봅니다. VSC 에디터를 사용하다 보면 html5, css3, javascript에 대한 코드 자동 완성 기능이 정말 이클립스와 비교가 되지 않을 정도로 지원하고 있습니다. 이클립스의 정책 구조가 서드파트 개발자들과의 상생이 목표라면 크게 반길만한 정책이지만, 아무튼 불편한 건 사실입니다. 또한 서드 파트의 개발자들의 부지런함에 종속되어 버린 에디터라면 생명력이 그리 길어 보이지는 않.. 2020. 12. 28.
3장. 사용자의 요청과 응답에 관한 Ajax의 처리과정 안녕하세요. IT 이곳저곳을 여행하고 있는 IT여행자입니다. 이번 포스팅은 Ajax를 이해하기 위한 첫걸음으로 사용자의 요청 처리를 Ajax는 어떤 과정을 통해 처리되고 응답되는가에 대한 내용을 실어 보았습니다. 일반적인 웹은 사용자가 서버에게 어떤 작업을 요청하면 각 클라이언트는 그 결과를 받아와 화면에 표시하기 위해서 전체 화면을 갱신해야 하는 특징이 있습니다. 이것은 우리가 일반적으로 겪고 있는 현상중 하나가 전체 화면이 갱신되고 있다는 것입니다. 물론 브라우저의 캐시 기능이나 고속의 네트워크 환경 때문에 전체 화면 갱신에 따른 불편함이나 화면 딜레이 현상이 최소화가 되었다고는 하지만 프로그래머 입장에서는 어찌 되었던지간에 현재에 표시된 정보가 다음 화면에서도 필요하다면 수단과 방법을 가리지 않고 .. 2020. 12. 10.
2장. ajax 초간단 샘플 프로그램 안녕하세요. IT이곳 저곳을 여행하고 있는 IT여행자입니다. 이번엔 Ajax의 맛을 보기 위해 간단한 샘플 프로그램을 만들어 보겠습니다. 요구 사항 : 서버에 정수 하나를 전달하여 홀/짝수를 판별하여 그 결과를 "홀수입니다" 또는 "짝수입니다"로 전달받아 화면에 표시. 위와 같은 요구사항을 기존 웹 방식과 Ajax 방식을 비교해 보도록 하겠습니다. [기존 웹 방식] 파일명 : odd_even_check_form.jsp 홀짝수 체크 정수를 입력하세요 : 위의 코드를 실행하면 숫자를 입력했던 입력 상자의 값이 사라집니다. 이유는 '체크' 버튼을 클릭하면 서버에 자료를 요청하면서 현재 페이지가 자동으로 새로고침 되기 때문이다. 물론 jstl이나 el을 사용하여 파라미터로 전달된 값을 아래와 같이 다시 의 입력.. 2020. 12. 5.
1장. Ajax 개요 Ajax는 지금에 와서 전혀 새로운 기술은 아니지만, HTTP가 갖고 있는 단점을 보안할 수 있는 대표적인 기술중 하나 입니다. 왜 이런 기술이 보편화되서 사용되지 않는지 의문이 들정도로 간편하고 강력하죠. HTTP 가 갖고 있는 단점중 하나가 바로 저장성이 없다는 것입니다. 이런 특징 때문에 이전 페이지에서 현재 페이지로 전환되거나 새로고쳐지는 경우 여러 가지 방법으로 파라메터를 전달하여 현재 페이지에 정보를 표시하거나 처리합니다. 이런 Web 프로그램의 환경을 App 프로그램 환경처럼 만들기에 대단히 편리하고 간단한 기술이 바로 Ajax인 것입니다. 자바스크립트를 사용할 수 있는 개발자라면 더욱 쉽게 접근할 수 있으며, jQuery와 같은 라이브러리를 사용한다면 더욱 간단히 사용할 수 있습니다. 물론.. 2020. 12. 5.
다음 API를 사용한 우편번호 검색 안녕하세요 IT 이곳저곳을 여행하고 있는 IT여행자입니다. 이번 포스팅은 다음 API를 사용한 우편번호 검색 프로그램으로 자바스크립트만을 사용한 우편번호 검색입니다. 다음 API를 사용한 우편번호 검색의 특징은 아래와 같습니다. 별도의 로그인이나 KEY 등록 과정이 필요 없다. 자바스크립트만을 사용하여 우편번호 검색을 할 수 있다. API 연결과 검색 버튼의 이벤트 처리만으로 모든 것을 해결할 수 있다. step 1. 웹페이지를 작성한 뒤 다음 API를 사용하기 위한 스크립트를 추가합니다. step 2. 우편번호 검색을 위한 을 작성합니다. 우편번호 주소 step 3. 우편번호 검색 버튼의 클릭이벤트에 다음 API의 우편번호 검색 로직을 호출합니다. 우편번호 검색 버튼(btnZipcode)이 클릭되면 다.. 2020. 11. 1.
Servlet과 JSTL이 중요한 이유~ 먼저, Servlet이 중요한 이유는, 자바 진영에서 사용되는 대부분의 Framework의 기본 원리는 Servlet 구조를 갖고 있기 때문입니다. 클라이언트의 요청 정보를 외부에 노출시키지 않고 전달받아 처리한 후 아무도 모르게(?) 다시 클라이언트에게 전달되는 구조를 갖고 있죠. 특히나 웹과 관련된 프로젝트에서 신경 쓰이고 고민스러운 것이 MVC(Model, View, Control)의 분리입니다. 이 중에서 Model 부분은 대부분 분리가 되어 있거나 분리하는데 큰 어려움이 없지만, View부분과 Control 부분의 분리는 쉽지 않습니다. 왜냐하면 이 두 부분은 직간접적인 연결 고리가 있어야 하기 때문입니다. 그건 그런데, 왜 굳이 MVC를 분리해야 하는가에 대한 원론적인 질문을 하게 됩니다. 이.. 2020. 7. 12.
선택한 것만 미리보기 하면서 멀티 파일 전송하기 사용자가 파일을 다중 선택하거나 탐색기에서 파일을 드래그 앤 드롭을 사용하여 파일을 선택하도록 한 후 최종적으로 전송할 파일을 선택 또는 취소하여 파일을 전송하는 솔류션입니다. 그 흔한 jquery를 사용하지도 않았습니다. 자바스크립트의 기본 기능만을 사용했습니다. 물론 jquery를 사용한다면 소스가 조금 단순해지긴 할 것 같네요~ ^^ 먼저 움짤을 보고 가시죠~ 보다 다양한 기능은 처리하지 않았지만, file 태그를 사용하여 파일을 선택하거나, 탐색기에서 파일을 다중으로 선택할 수있고, 최종 선택된 이미지를 보면서 최종 선택 여부를 결정하여 파일을 전송할 수 있습니다. [체크사항] servlet.com에서 재공하고 있는 cos.jar API는 사용할 수 없습니다. 이 글이 포스팅되는 시점에서도 아직 .. 2020. 6. 3.
20장 후기 및 배포 파일정보 모든 요소를 모두 자세히 설명드리지는 못했지만 지면이 굉장히 길이졌습니다. 그러나 실제로 코딩된 내용을 차근 차근 보다 보면 그리 많은(?) 내용은 아닐것이라 생각됩니다. 서두에서도 언급했지만 최대한 UI나 UX에 대한 요소는 배제했습니다. 따라서 실행 결과가 그리 멋스럽지는 못했네요. 패포 파일은 zip 파일로 압축했습니다. 적당한 폴더에 압축을 해제 한 후 이클립스에서 import 메뉴를 사용하여 프로젝트를 가져오면 프로그램을 실행해 볼 수 있습니다. 물론 데이터베이스와 테이블에 대한 내용은 각자 별로의 조치가 필요합니다. 끝까지 이 글을 읽어주신 모든 분들께 감사의 말씀을 전하며 이번 프로젝트를 마무리짓겠습니다. 감사합니다. 2020. 5. 14.
19장 댓글 처리 이제 마지막으로 댓글 처리를 해 보도록 하겠습니다. 전체적인 프로그램의 흐름이나 처리 내용은 게시판 입력과 거의 동일합니다. 단지, 다른점이 하나 있다면 댓글이 저장될 때 자신의 원본글의 serial 번호를 pSerial 컬럼에 저장해야 한다는 것입니다. 그렇게 저장되어야 계층형 쿼리를 사용하여 목록을 나열할 때 이상이 없이 나열 됩니다. 이점을 염두해 두고 프로세스를 이해해 주시기 바랍니다. 1. 사용자가 상세보기(view.jsp) 페이지에서 댓글 달기 버튼을 클릭합니다. 2. 자바스크립트(board.js)에 의해서 댓글폼 화면이 실행됩니다. // 댓글 버튼 클릭시 if($id('btnRepl') != null){ let btn = $id('btnRepl'); btn.onclick = function(.. 2020. 5. 10.
18장 삭제 처리 이번 포스팅에서는 게시물을 삭제하는 부분을 만들겠습니다. 삭제와 관련된 별도의 폼 페이지는 없습니다. 스크립트를 통해 삭제 정보를 BoardController에게 보내고 BoardController는 관련 정보를 BoardDao에 전달하여 삭제 처리를 한 후 그 결과를 result.jsp 페이지에 보내 삭제된 결과만을 alert()창으로 표시한 후 다시 select.jsp를 호출하여 목록을 표시해 주도록 작성하였습니다. 당연한 이야기 이지만, 암호가 다르거나 댓글이 있는 글은 삭제되지 않습니다. 그럼, 삭제 프로세스의 흐름을 간단한 그림으로 살펴 보도록 하겠습니다. 1. 먼저 사용자는 상세보기(view.jsp) 페이지에서 삭제 버튼을 클릭합니다. 2. 삭제 버튼이 클릭되면 javascript 파트에서 암.. 2020. 5. 10.
17장 수정 처리 작업 파일 : /WebContent/board/modify.jsp 사용자가 수정하려는 작업은 크게 세 가지로 나누어 볼 수 있습니다. 내용만 수정하는 경우 첨부 파일만 수정하는 경우 내용+첨부 파일 모두를 수정하는 경우 위의 세 가지를 다시 두 가지로 함축하면 내용은 무조건 수정된다고 생각하고 첨부파일의 수정 여부만을 놓고 보면, 첨부파일을 추가하는 경우 첨부파일을 제거하는 경우 첨부파일을 부분 제거, 추가하는 경우 와 같을 것입니다. 이 부분은 실제로 BoardDao의 modifyR()에서 처리하겠지만 프로세스가 어떻게 흘러가는지 염두해 두고 진행해 주시기 바랍니다. 먼저 작업의 결과 동영상을 보도록 하겠습니다. [modify.jsp 전체 코드] 자유 게시물 수정 작성자 제 목 파일첨부 0){ %> 첨.. 2020. 5. 10.
16장 상세보기및 파일 다운로드 작업 페이지 : /WebContent/board/view.jsp select.jsp 페이지에서 게시물의 세부적인 내용을 보기 위해 목록의 한 행을 클릭하면 보게 되는 페이지 입니다. ... 물론 자바스크립트 함수 board.view()에 의해 index.jsp?inc=./board/view.jsp 가 태그의 actioin값으로 전달됩니다. 이 때 view.jsp 페이지에 넘어가는 주요 정보는 nowPage, findStr, serial 입니다. 세부 내용은 자바스크립 코드를 확인해 보시기 바랍니다. 첨부파일이 있는 게시물의 상세보기 하면의 예입니다. [전체 코드] 자유 게시물 상세보기 작성자 | 2020. 5. 10.
15장 게시물 입력폼 만들기 이번 장에서는 게시물을 입력하기 위한 폼을 만들어 보도록 하겠습니다. 작업 파일명 : /WebContent/board/register.jsp 먼처 처리 결과에 대한 간단한 영상을 보시기 바랍니다. 파일 업로드 과정 게시물 저장및 파일 업로드에 대한 전체적인 프로세스의 흐름은 아래의 그림과 같습니다. 차근 차근 만들어 봅시다. 검색 페이지(select.jsp)에서 '입력' 버튼을 클릭하면 board.js에 있는 이벤트 처리 부분에서 './board/register.jsp' 파일이 inc 파라미터 변수에 담겨져 index.jsp 에 보내지면 id='content' 영역에 동적으로 include 됩니다. // select.jsp 페이지 일 부분 // board.js 일부분 let url = 'index.jsp.. 2020. 5. 10.
14장 검색및 페이징 작업 파일 : /WebContent/board/select.jsp 검색 및 페이징 처리를 위한 웹 페이지들은 가장 많은 변화를 줄 수 있으며 , 처리 방법 또한 굉장히 다양한 요소를 품고 있는 페이지가 아닐까 합니다. 또한 검색 프로그램은 사용자 UI와 가장 밀접한 관계를 갖고 있기 때문에 MVC를 구현하고자 할 때 가장 어려운 부분 중 하나 이기도 합니다. MVC: Model, View, Control를 의미하며, 대부분 데이터, UI, 제어의 의미를 갖고 있습니다. 검색 및 페이징 처리 페이지의 기본 흐름은 아주 단순합니다. '변경된 값을 사용하여 자신이 자신을 호출한다.' 입니다. 여기서 변경된 값이라는 것은 아래와 같습니다. 검색어가 변경된 경우 페이지를 이동한 경우 HTTP 프로토콜의 특징중 하.. 2020. 5. 10.
13장 Dao와 Vo 본 포스팅에서 사용되는 자바 클래스들의 종류와 용도입니다. 클래스명 설명 BoardDao.java BoardController로 부터 요청사항을 전달받아 처리한 후 그 결과를 다시 BoardController에게 전달하는 클래스. Page.java 게시물 목록을 볼 때 페이징 처리를 하기 위한 클래스 BoardVo.java 게시물 한 건에 대한 데이터 저장 클래스 AttVo.java 첨부파일 한 건에 대한 데이터 저장 클래스 DBConn.java 오라클 데이터베이스를 연결하기 위한 클래스 FileUpload.java 첨부파일을 업로드 하기위한 클래스 BoardController 사용자의 요청정보를 전달받아 BoardDao에 전달하고 처리된 결과를 BoardDao에게서 리턴받아 사용자에게 전달하는 클래스 .. 2020. 5. 10.
12장 페이지 동적 삽입 11장 메인 페이지와 로그인 처리 만들기에서 이미 언급되었지만, JSP에서 외부의 페이지를 삽입하는 방법을 보다 자세하게 알아보고 진행하도록 하겠습니다. JSP에서 외부 페이지를 삽입하는 방법은 크게 두 가지로 나뉩니다. 정적 삽입 : 지시문 사용 동적 삽입 : 액션 태그 사용 정적 삽입 방법 : 파일명 대신 변수를 사용할 수 없다(파일의 가변성이 없다) 파일의 소스 코드가 그대로 삽입된다. 따라서 변수명 등의 중복 트러블 등이 발생할 수 있다. 동적 삽입 방법 : 파일명을 변수에 담아 대입할 수 있다(파일의 가변성이 있다) 파일의 실행 결과가 삽입되기 때문에 정적 삽입처럼 변수명의 중복 트러블 등과 같은 문제가 발생하지 않는다. 위에서 언급한 특성뿐만 아니라 더 복잡한 내용들이 포함되어 있습니다. 보다.. 2020. 5. 10.
11장 메인 페이지와 로그인 처리 만들기 프로젝트의 시작과 전체 페이지의 운영을 담당하는 메인 페이지를 만들겠습니다. A. 관련 파일명 WebContent/index.jsp, header.jsp, footer.jsp, log.jsp, login_out.jsp WebContent/css/index.css, board.css WebContent/js/index.js, board.js 메인 페이지에서 구현할 기능은 아래와 같습니다. 전체 레이아웃 구성. 로그인 여부에 따른 로그인/로그아웃 페이지 표시 메뉴나 사용자 요청에 따른 페이지 처리 A.1 전체 레이아웃 설정 위의 그림과 같은 골격을 갖기 위해 먼저 index.jsp 페이지에서 태그들을 사용하여 기초작업을 합니다. HTML5에 의하면 메뉴나 링크 모임 같은 것은 태그를, 헤더는 모든 페이지를 .. 2020. 5. 10.
반응형

티스토리툴바