'2020'에 해당되는 글 497건

  브라우저의 요청은 서블릿이 맡고, 비지니스 처리는 모델이 맡고, 화면은 JSP가 맡은 방식으로 회원 관리 기능을 다시 구현해 보겠습니다. 

우선 순서는

• 브라우저에서 /mem.do로 요청합니다.
• 서블릿 MemberController가 요청을 받아 MemberDAO의 listMembers() 메서드를 호출합니다.
• MemberDAO의 listMembers() 메서드에서 SQL문으로 회원 정보를 조회한 후 회원 정보를 MemberVO에 설정하여 반환합니다.
• 다시 MemberController에서는 조회한 회원 정보를 회원 목록창(listMembers.jsp)으로 포워딩합니다.
• 회원 목록창(listMembers.jsp)에서 포워딩한 회원 정보를 목록으로 출력합니다.

  컨트롤러 역할을 하는 서블릿인 MemberController 클래스를 다음과 같이 작성합니다.

  init() 메서드에서 MemberDAO 객체를 초기화하고 MemberDAO의 listMembers() 메서드를 호출하여 회원 정보를 ArrayList로 반환받습니다. 이때 request에 조회한 회원 정보를 membersList 속성 이름으로 바인딩합니다. 그런 다음 RequestDispatcher 클래스를 이용해 회원 목록창(listMembers.jsp)으로 포워딩합니다.

MemberDAO클래스에는 listMembers() 메서드 호출 시 SQL문을 이용해 회원 정보를 조회한 후 결과를 ArrayList로 반환합니다.

memberVO클래스를 작성합니다

변수와 생성자, getter/setter 등 기본적인 사항을 만들어 줍니다.

출력해 보겠습니다.

 모델2 방식

  모델2 방식의 핵심은 웹 어플리케이션의 각 기능(클라이언트의 요청 처리, 응답 처리, 비지니스, 로직처리)을 분리해서 구현하자는 것입니다. 객체 지향 프로그래밍에서 각각의 기능을 모듈화해서 개발하자는 것과 같은 원리입니다.

  웹 프로그램 개발 시 개발자가 전체 기능을 몰라도 각 기능이 모듈화되어 있으므로 자신이 맡은 부분만 개발하면 됩니다. 각 부분을 조립만 하면 나중에 전체를 사용할 수 있어 개발 효율성도 높습니다. 물론 모델2 방식으로 개발하기 위해서는 필요한 기술이나 개념을 숙지해야 하는 번거로움은 있지만 초급자라면 우선 자신이 맡은 부분만 개발하면 되므로 훨씬 효율적인 개발 방식이라고 할 수 있습니다. 그리고 개발 후 서비스를 제공할 때도 유지보수가 편할 뿐만 아니라 개발한 모듈들을 비슷한 프로그램을 만들 때 사용할 수 있어 코드 재사용성도 높습니다. 현재 모든 웹프로그램은 모델2 방식으로 개발한다고 보면 됩니다.

  모델2 방식의 특징

• 각 기능이 서로 분리되어 있어 개발 유지 및 유지보수가 쉽습니다.
• 각 기능(모듈)의 재사용성이 높습니다.
• 디자이너와 개발자의 작업을 분업화해서 쉽게 개발할 수 있습니다.
• 모델2 방식과 관련된 기능이나 개념의 학습이 필요합니다.

MVC 디자인 패턴

  모델2 구조에서 가장 자주 사용되는 개념이 MVC입니다. MVC란 Model-View-Controller(모델 - 뷰 - 컨트롤러)의 약자로, 일반 PC프로그램 개발에 사용되는 디자인 패턴을 웹 어플리케이션에 도입한 것입니다. 즉 웹 어플리케이션을 화면 부분, 요청 처리 부분, 로직 처리 부분으로 나누어 개발하는 방법이죠.

원래 모델2 방식의 구조가 MVC를 포함하는 개념이지만 MVC가 모델2 방식의 뼈대를 이루므로 모델2 방식으로 구현한다는 말은 곧 MVC로 구현한다는 것과 같은 의미로 보면 됩니다.

MVC의 특징은

• 각 기능이 분리되어 있어 개발 및 유지보수가 편리합니다.
• 각 기능의 재사용성이 높아집니다.
• 디자이너와 개발자의 작업을 분업화해서 쉽게 개발할 수 있습니다.

  컨트롤러는 사용자로부터 요청을 받아 어떤 비지니스 로직을 처리해야 할지 제어합니다.

  모델은 데이터베이스 연동같은 비지니스 로직을 처리하고, 뷰는 모델에서 처리한 결과를 화면에 구현하여 클라이언트로 전송합니다.

Controller

• 서블릿이 컨트롤러의 역할을 합니다.
• 클라이언트의 요청을 분석합니다.
• 요청에 대해서 필요한 모델을 호출합니다.
• Model에서 처리한 겨과를 보여주기 위해 JSP를 선택합니다.

Model

• 데이터베이스 연동과 같은 비지니스 로직을 수행합니다.
• 일반적으로 DAO와 VO 클래스로 이루어져 있습니다.

View

• JSP가 화면 기능을 담당합니다.
• Model에서 처리한 결과를 화면에 표시합니다.

  웹 어플리케이션에서 컨트롤러의 역할은 서블릿이 담당합니다. 모델은 DAO나 VO클래스가 담당하고, 뷰 역할은 JSP가 담당합니다.

다음 글부터 mvc를 활용한 코딩을 해보겠습니다.

  우선 서버의 서블릿에서 json을 사용하려면 json 라이브러리를 설치해야 합니다

code.google.com/archive/p/json-simple/downloads 로 접속을 한후

사진과 같이 json-simple-1.1.1.jar 파일을 다운받아

프로젝트의 lib에 넣어줍니다.

  그리고 JSP에서 제이쿼리 Ajax 기능을 이용해 서블리승로 JSON 데이터를 전송하기 위해 sec03.ex01 패키지를 만들고 JsonServlet 클래스를 추가해보겠습니다.

  먼저 Ajax로 전달된 JSON 문자열을 getParameter() 메서드를 이용해 가져옵니다. 그런 다음 JSONParser 클래스의 parse() 메서드를 이용해 JSONObject를 가져오고 JSON데이터의 name속성으로 value를 출력합니다.

  그리고 자바스크립트에서 회원 정보를 JSON 객체로 만들어 매개변수 이름 jsonInfo로 ajax를 이용해 서블릿으로 전송합니다.

전송을 누르면 Console에 회원정보가 출력됩니다.

실행해 보면

출력이라는 글을 클릭하면 회원이름이 나오게 됩니다

두번째 코드를 작성해 보겠습니다.

출력을 클릭하시면 회원 나이가 나옵니다.

세번째 코드를 작성해 보겠습니다.

Ajax 응답 시 정보를 XML로 전달받아 출력해보겠습니다.

ajax xml

github: github.com/soulwine-it/html5-test

  sec01.ex01 패키지를 만들고 AjaxTest1.java, AjaxTest.java를 생성합니다. 그리고 test03 폴더에  ajax1.html, ajax2.html을 추가하겠습니다.

저는 이렇게 준비하였습니다.

  AjaxTest1은 클라이언트에서 Ajax로 메시지를 보내면 이를 처리하는 서블릿입니다. 브라우저에서 매개변수 이름인 param으로 데이터를 보내면 getParameter()를 이용해 데이터를 가져옵니다. 그리고 서블릿에서는 PrintWriter의 print() 메서드의 인자로 응답 메시지를 브라우저에 보냅니다.

ajax1.html 은 제이쿼리 Ajax기능을 이용해 서블릿에 매개변수 이름 param으로 "Hello, jquery"를 서버로 전송하면 서버로부터 받은 메시지를 id가 message인 <div>태그에 표시합니다.

전송하기를 누르시면 서버에서 ajax로 전송된 데이터를 <div> 엘리먼트에 표시합니다.

  클라이언트 측에서의 작업과는 상관 없이 비동기적으로 서버와 작업을 수행할 때 Ajax기능을 사용합니다. Ajax란 Asynchronous Javascript(비동기 자바스크립트) + XML의 의미로 자바스크립트를 사용한 비동기 통신, 즉 클라이언트와 서버 간의 xml이나 JSON 데이터를 주고받는 기술을 의미합니다.

  Ajax는 페이지 이동 없이 데이터 처리가 가능하며, 서버의 처리를 기다리지 않고 비동기 요청이 가능하다는 특징을 가지고 있습니다.

  개인 정보를 입력하고 서버에 요청하면 서버에서 결과를 처리한 후 HTML 태그를 클라이언트의 브라우저에 전송하여 다른 페이지를 보여줍니다. 즉, 페이지 이동이 발생합니다.

  반면에 Ajax로 페이지를 처리할 경우를 보면 요청 페이지의 결과를 서버에서 처리한 후 다시 XML이나 JSON으로 원래 요청 페이지로 전송합니다. 즉, 페이지 이동이 발생하지 않습니다.

  제이쿼리에서 Ajax를 사용하려면 $ 기호 다음에 ajax라고 명명한 후 속성에 대한 값을 설정해야 합니다.

다음 글부터 제이쿼리 Ajax를 사용해 서블릿과 비동기식 방식으로 데이터를 송수신 해보겠습니다.

  이전 글에서 알아본 제이쿼리 선택자를 이용해 HTML 태그에 접근하여 여러가지 작업을 수행해 보겠습니다. 먼저 제이쿼리의 ID선택자 기능을 이용해 HTML 태그의 ID에 접근하는 방법입니다.

  사용하실 이미지 파일과 test02폴더를 만들고 연습할 jQuery.html 파일을 만들겠습니다.

  jQuery1.html을 작성하도록 하겠습니다. 페이지 로드 시 $("#unique2")는 # 다음에 오는 id가 unique2인 태그를 웹 페이지에서 검색합니다. id에 해당하는 태그(객체)를 얻은 후 제이쿼리의 html() 메서드를 호출해 태그의 값을 얻습니다.

  다음으로는 제이쿼리의 id 선택자를 이용해 해당 id를 가지는 <p> 엘리먼트에 접근하여 동적으로 텍스트를 추가해보겠습니다. jQuery2.html을 작성합니다.

제이쿼리로 id가 article인 태그를 찾아서 html() 메서드의 인자값을 태그에 설정합니다.

추가하기를 누르면 안녕하세요라는 메시지가 나타납니다.

  이번에는 class 선택자로 <div> 태그에 접근하여 기능을 수행해 보겠습니다. 버튼을 클릭하면 함수에서 제이쿼리의 클래스 선택자를 사용해 class1 클래스 이름을 갖는 <div> 태그에 접근하여 이미지를 나타냅니다.

다음은 제이쿼리에서 <div> 엘리먼트에 직접 접근하여 이미지를 추가해 보겠습니다. jQuery4.html을 다음과 같이 작성합니다.

사용자가 텍스트 박스에 입력한 내용을 제이쿼리 id 선택자를 이용해 가져온 후 다시 텍스트 박스에 출력하는 내용입니다. 제이쿼리의 val()메서드는 해당 엘리먼트의 값을 가져오거나 엘리먼트로 값을 출력하는 기능을 합니다.