거니의 velog

(2) 게시판 글쓰기 구현 * 게시판 글쓰기 기능을 구현하는 과정은 다음과 같다. (1) 글 목록창(listArticles.jsp)에서 글쓰기창을 요청한다. (2) 글쓰기창에서 글을 입력하고 컨트롤러에 /board/addArticle.do로 글쓰기를 요청한다. (3) 컨트롤러에서 Service 클래스로 글쓰기창에서 입력한 글 정보를 전달해 테이블에 글을 추가한다. (4) 새 글을 추가하고 컨트롤러에서 다시 /board/listArticles.do로 요청하여 전체 글을 표시한다. * 글 추가는 한 개의 글을 추가하므로 /addArticle.do 이고, 글 목록에 출력하는 경우는 여러 개의 글을 조회하므로 /listArticles.do 이며 s가 붙는다. * 클래스와 JSP를 구현하기 전에 프로젝트의 Web..

(1) 게시판 글 목록 보기 구현 * 다음 그림은 게시판의 글 목록 보기 기능을 구현하는 과정을 나타낸 것이다. * 브라우저에서 /board/listArticle.do로 요청하면 Controller가 전달받아 Service와 DAO를 거쳐 글 정보를 조회한 후 listArticle.jsp로 전달하여 화면에 글 목록을 보여준다. 여기서 문제는 글 목록을 그냥 나열만 하는 것이 아니라 부모 글에 대한 답변 글을 계층 구조로 보여주어야 한다는 것이다. 이렇게 하려면 어떻게 해야 할까? * 오라클에서 제공하는 계층형 SQL문 기능을 이용하면 이를 구현할 수 있다. -- LEVEL : 오라클에서 제공하는 가상 컬럼으로 글의 깊이(depth)를 나타낸다. (부모 글은 1이다) SELECT LEVEL , articl..

4. 모델2로 답변형 게시판 구현하기 * 게시판 기능은 모든 웹 페이지의 기본 기능을 포함하기 때문에 게시판을 만들 수 있다면 모든 웹 페이지를 쉽게 만들 수 있다. * 이번에 우리가 실습을 통해 구현할 답변형 게시판의 글 목록은 다음과 같은 형태이다. * 부모 글이 목록에 나열되면 각 부모 글에 대해 답변 글(자식 글)이 계층 구조로 나열되어 표시된다. 그리고 답변 글에 대한 답변 글은 또 다시 계층 구조로 표시된다. 즉, 답변 글에 또 답변 글을 올릴 수 있는 기능을 하는 게시판이다. * 다음 표는 답변형 게시판 글을 저장하는 테이블 컬럼이다. 게시판의 글을 작성하려면 회원이 로그인 상태여야 한다. 즉, 각 글에는 작성자 ID가 저장된다. 따라서 게시판 테이블의 ID 컬럼은 회원 테이블의 ID 컬럼에..

(3) 회원 정보 수정 및 삭제 기능 구현 * 이번에는 회원 정보를 수정하고 삭제하는 기능을 구현해 보자. * 회원 정보를 수정하는 과정은 다음과 같다. (1) 회원 정보 수정창에서 회원 정보를 수정하고 '수정하기'를 클릭해 /member/modMember.do로 컨트롤러에 요청한다. (2) 컨트롤러는 전송된 회원 수정 정보를 가져온 후 테이블에서 회원 정보를 수정한다. (3) 수정을 마친 후 컨트롤러는 다시 회원 목록창을 보여준다. * 삭제하는 과정도 크게 다르지 않다. (1) 회원 목록창에서 '삭제'를 클릭해 요청명 /member/delMember.do와 회원 ID를 컨트롤러로 전달한다. (2) 컨트롤러는 request의 getPathInfo() 메서드를 이용해 요청명을 가져온다. (3) 회원 ID를..

3. MVC를 이용한 회원 관리 * 우리는 앞에서 JSP를 이용해 모델1 방식으로 회원 관리 기능을 구현한 적이 있다. 즉, 모델1 방식이었기 때문에 모든 기능을 JSP에서 처리한 것이나 마찬가지이다. * 이번에는 MVC 방식으로 브라우저의 요청은 서블릿이 맡고, 비즈니스 처리는 모델이 맡고, 화면은 JSP가 맡는 방식으로 회원 관리 기능을 다시 구현해 보자. 결국 같은 프로그램을 개발하는 것이지만 방법을 달리함으로써 개발 원리를 쉽게 익히는 것이다. (1) 회원 정보 조회 기능 구현 * 다음은 MVC로 구현한 회원 정보 조회 기능을 실행하는 과정이다. (1) 브라우저에서 /mem.do로 요청한다. (2) 서블릿 MemberController가 요청을 받아 MemberDAO의 listMembers() 메..

1. 웹 애플리케이션 모델* 보통 웹 애플리케이션을 개발할 때 화면은 디자이너가 맡아서 구현하고, 데이터베이스 연동 같은 비즈니스 로직은 프로그래머가 알아서 구현한다. 즉, 각자 맡은 기능을 좀 더 분업화해서 개발을 하는 것이다. * 일반적으로 어떤 일을 맡아 진행하게 되면 일단은 기존에 주로 사용했던 방법이나 방식을 따르게 마련이다. 웹 애플리케이션을 개발할 때도 마찬가지이다. 일일이 처음부터 새로 개발하는 것이 아니라 기존에 웹 애플리케이션 개발 방법이나 방식을 따른다. * 따라서 지금의 웹 애플리케이션 개발은 일반적으로 많이 사용하는 표준화 소스 구조를 만들어 개발을 진행한다. 이러한 표준화된 소스 구조를 웹 애플리케이션 모델이라고 한다. 웹 애플리케이션 모델의 종류에는 모델1과 모델2 방식이 있다..

(2) Ajax 이용해 서버와 JSON 데이터 주고받기 * 이번에는 서버의 서블릿과 JSON 자료를 주고받는 기능을 알아보자. 서버의 서블릿에서 JSON을 사용하려면 JSON 라이브러리를 설치해야 한다. 1. 다음의 사이트로 이동한다. https://code.google.com/archive/p/json-simple/downloads Google Code Archive - Long-term storage for Google Code Project Hosting. code.google.com 2. json-simple-1.1.1.jar를 클릭해 다운로드한다. 3. 이클립스 프로젝트의 /WebContent/lib 폴더에 붙여 넣는다. 4. 이번에는 JSP에서 제이쿼리 Ajax 기능을 이용해 서블릿으로 JSO..

(4) ID 중복 여부 확인하기 * 이번에는 Ajax를 이용해 회원 가입 시 사용자 ID 중복 여부를 판별해 보자. 1. sec02.ex01 패키지를 만들고 MemberDAO, MemberServlet 클래스를 만든다. 그리고 ajax3.html을 추가한다. 2. MemberServlet 클래스를 다음과 같이 작성한다. 클라이언트에서 Ajax로 전송된 ID를 받아서 MemberDAO의 overlappedID() 메서드를 전달한다. package sec02.ex01; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServl..

5. 제이쿼리 Ajax 기능* 온라인 쇼핑몰에서 회원 가입을 하려면 먼저 ID 중복 여부부터 체크한다. 이때 보통 회원 가입 페이지는 브라우저에 표시된 채 ID 중복 여부를 확인하는 창만 서버에 질의하여 화면에 따로 보여준다. * 이처럼 클라이언트 측에서의 작업과는 상관 없이 비동기적으로 서버와 작업을 수행할 때 Ajax 기능을 사용한다. Ajax란 Asynchronous Javascript(비동기 자바스크립트) + XML의 의미로 자바스크립트를 사용한 비동기 통신, 즉 클라이언트와 서버 간의 XML이나 JSON 데이터를 주고받는 기술을 의미한다. * Ajax는 페이지 이동 없이 데이터 처리가 가능하며, 서버의 처리를 기다리지 않고 비동기 요청이 가능하다는 특징이 있다. * 다음 그림들은 기존 웹 페이지..

3. 제이쿼리 주요 개념 * 제이쿼리란 화면의 동적 기능을 자바스크립트보다 좀 더 쉽고 편리하게 개발할 수 있게 해주는 자바스크립트 기반 라이브러리이다. 제이쿼리는 여러 가지 효과나 이벤트를 간단한 함수 호출만으로 빠르게 개발할 수 있어 유용하다. * 다음은 제이쿼리의 주요 특징이다. - CSS 선택자를 사용해 각 HTML 태그에 접근해서 작업하므로 명료하면서도 읽기 쉬운 형태로 표현할 수 있다. - 메서드 체인 방식으로 수행하므로 여러 개의 동작(기능)이 한 줄로 나열되어 코드가 불필요하게 반복되는 것을 피할 수 있다. - 풍부한 플러그인을 제공하므로 이미 개발된 많은 플러그인을 쉽고 빠르게 이용할 수 있다. - 크로스 브라우징을 제공하므로 브라우저 종류에 상관 없이 동일하게 기능을 수행한다. * 제이..