DTO 생성 


안녕하세요.
고코더 입니다.


이번에는 DTO 라는 객체에 대해서 알아봅니다. DTO(Data Transfer Object)는 VO(Value Object)라고 합니다.
계층간 데이터 교환을 위한 자바빈즈이고 컨트롤러, 뷰 계층간 데이터 교환을 위한 객체입니다.
DTO는 로직을 없고 순수한 데이터 객체만 다룹니다. getter, setter 메소드를 생성한 클래스입니다.

다시 쉽게 말하면 DAO 데이터베이스를 가져올때 사용하는 변수의 집합이라고 생각하면 쉽습니다.



 1. dto 클래스를 생성 합니다.


컨트롤러를 생성하겠습니다. 
net.gocoder.mvcboard.dto 패키지에서 class를 생성 합니다. 


클래스명은 Dto로 생성 합니다. 


package net.gocoder.mvcboard.dto;
import java.security.Timestamp;
public class Dto {
     int Idx;
     String Name;
     String Title;
     String Content;
     Timestamp Regdate;
     Timestamp Modidate;
     int Passwd;
     int Hit;
}

7~14번 라인
    - 데이터베이스에 사용할 변수들을 선언하고 해당 변수에 대해 setter, getter을 생성 합니다. 
       - 생성 방법은 책 앞면에 나와 있습니다. 


그리고 생성자를 통해 사용할 수 있도록 메소드를 하나 만들어 보겠습니다.
     public Dto() {
                     
     }
     
     public Dto(int Idx, String Name, String Title, String  Content,
                Timestamp Regdate, Timestamp Modidate, int  Passwd, int Hit ) {
           this.Idx = Idx;
           this.Name = Name;
           this.Title = Title;
           this.Content = Content;
           this.Regdate = Regdate;
           this.Modidate = Modidate;
           this.Passwd = Passwd;
           this.Hit = Hit;      
     }          

setter에 값을 넣어서 사용할 수 있게 this를 이용하여 변수를 담습니다.

이렇게해서 게시판에 사용할 Dto가 준비되었습니다.
한번 선언한 변수는 어느 곳에서나 재사용할 수 있게 됩니다.


마무리


Dto가 이해가 안되도 다음 시간에 Dao를 보면 이해가 됩니다.


댓글을 달아 주세요


MVC 컨트롤러(Controller) 개발


안녕하세요.
고코더 입니다.


이번 시간에는 스프링에 핵심인
컨트롤러를 만들어 보겠습니다.

이전에 설명한 거처럼 디스패처 서블릿이 컨트롤러를 호출하면 컨트롤러는 
Dao를 호출해 데이터베이스 정보를 가져오고 다시 
모델에 담아 프론트에 전달 합니다.



 1. 컨트롤러 생성


컨트롤러를 생성하겠습니다. 
net.gocoder.mvcboard.controller 패키지에서 class를 생성 합니다. 


클래스 명은 BoardController 입니다. 
게시판에 사용할 컨트롤러명 입니다. 




 2. 컨트롤러 코딩 


컨트롤러 작성을 해보겠습니다. 하나의 메소드를 작성하면 거의 비슷한 형태에
나머지도 거의 비슷한 코딩을 이어나갑니다. MVC패턴에 매력이자 어려운 규율 때문입니다.
그래도 똑같다고 방심하지 말고 복습한다는 생각으로 읽어 가보세요.

리스트 페이지 컨트롤러를 작성 해보겠습니다.
@Controller
public class BoardController {
     Command command;
     
     @RequestMapping("/list")
     public String list(Model model) {
           System.out.println("list()");
           command = new ListCommand();
           command.execute(model);
           
           return "list";
     }

17번 라인 
    - 해당 클래스를 컨트롤러 사용하기 위해 어노테이션 @Controller을 사용합니다.
    - "import org.springframework.stereotype.Controller;" 를 참조해야 합니다.
19번 라인
    - 커맨드 인터페이스를 사용하기 위해 command로 호출 합니다. 
21번 라인 
    - "/list" 접근시 해당 컨트롤러가 호출 됩니다.
23번 라인 
    - List커맨드를 가져와서 객체를 만듭니다.
    - 해당 객체에 모델을 실행합니다. 
    - 현재까지는 커맨드안에 내용들은 개발되어 있지 않습니다.
26번 라인
    - view로 모델을 전달 합니다.


글 등록 페이지 컨트롤러를 작성 해보겠습니다.
     @RequestMapping("/write")
     public String write(HttpServletRequest request, Model  model) {                   
           model.addAttribute("request", request);
           command = new WriteCommand();
           command.execute(model);
           
           return "redirect:list";
     }

29번 라인 
    - "/write" 접근시 해당 컨트롤러가 호출 됩니다.
31번 라인
    - request에 담긴 파라미터 값을 데이터객체를 모델에 담습니다.
32~33번 라인
    - 커맨드 객체를 이용해 모델을 실행합니다.
35번 라인
    -"redirect:" 페이지를 이동 시킵니다.
    -글 등록 후에 list로 페이지를 이동합니다.


글 상세 컨트롤러를 작성합니다.
     @RequestMapping(value="/modify", method=RequestMethod.POST  )
     public String modify(HttpServletRequest request, Model  model){                    
           model.addAttribute("request", request);
           command = new ModifyCommand();
           command.execute(model);
           
           return "redirect:list";
     }

38번 라인
    - "/write" 접근시 해당 컨트롤러가 호출 됩니다.
40번 라인 
    - request에 담긴 파라미터 값을 데이터객체를 모델에 담습니다.
41~42번 라인 
    - 커맨드 객체를 이용해 모델을 실행합니다.
44번 라인
    - view로 모델을 전달 합니다.


글 수정 컨트롤러를 작성합니다.
     @RequestMapping(value="/modify")
     public String modify(HttpServletRequest request, Model  model){                    
           model.addAttribute("request", request);
           command = new ModifyCommand();
           command.execute(model);
           
           return "redirect:list";
     }

47번 라인
    - "/write" 접근시 해당 컨트롤러가 호출 됩니다.
49번 라인
    - request에 담긴 파라미터 값을 데이터객체를 모델에 담습니다.
50~51번 라인
    - 커맨드 객체를 이용해 모델을 실행합니다.
53번 라인
    -"redirect:" 페이지를 이동 시킵니다.
    -글 수정 후 list로 페이지를 이동합니다.

글 삭제 컨트롤러를 작성합니다.
     @RequestMapping("/delete")
     public String delete(HttpServletRequest request, Model  model) {        
           model.addAttribute("request", request);
           command = new DeleteCommand();
           command.execute(model);
           
           return "redirect:list";
     }

56번 라인
    - "/write" 접근시 해당 컨트롤러가 호출 됩니다.
58번 라인
    - request에 담긴 파라미터 값을 데이터객체를 모델에 담습니다.
59~60번 라인
    - 커맨드 객체를 이용해 모델을 실행합니다.
62번 라인
    -"redirect:" 페이지를 이동 시킵니다.
    -글 삭제 후 list로 페이지를 이동합니다.


이렇게 게시판에 필요한 모든 클래스를 만들었습니다.
처음이 어렵지만 한번 따라하다보면 컨트롤러 개발 방법이 속에 익어 갈것입니다. 



마무리


쉽지 않나요?


댓글을 달아 주세요


게시판 만들기 초기설정


안녕하세요.
고코더 입니다. 


스프링에 대해 알아보았고
간단한 예제로 중요한 요소들을 살펴보았습니다.
이번 시간부터 스프링 게시판을 만드는 방법을 알아보겠습니다.
기본적으로 회사에서 많이 사용하는 방식으로 구현할 것 입니다.



 1. 프로젝트 구조도




함께 만들어올 게시판에 구조도 입니다.
스프링으로 웹프로젝트를 하면 대부분 이런 구조가 나타나는데요.
이 그림은 머리속에 한번 새겨 보시고 프로젝트를 함꼐 하면서
조금씩 구체화 되어 나갈것입니다.



 2. 프로젝트 생성 


 2-1. 이번 프로젝트 이름은 MVCBoard 라고 하겠습니다.
이전 시간에 배웠던 방법대로 MVC Project를 만들어보겠습니다.


 2-2. 이번 패키지 명은 net.gocoder.mvcboard로 만들어 보겠습니다. 


 2-3. 그럼 이제 게시판을 만들 MVCBoard가 생성 됩니다. 





 3. 패키지생성


개발에 들어가기 전에 패키지를 생성합니다. 
패키지는 쉽게 말하면 폴더 입니다. 먼저 폴더를 만들어 구조도대로
개발을 준비하는 과정입니다. 

 3-1. package를 생성 하는 방법은 프로젝트에서 
new->package를 선택합니다.


 3-2. 그리고 아래처럼 입력하여 패키지를 만들겠습니다.
net.gocoder.mvcboard.command


 3-3. 그럼 이렇게 빈 패키지가 생성 됩니다. 


 3-4. 이런 방식으로 3가지 패키지를 더 생성 합니다.
net.gocoder.mvcboard.controller

net.gocoder.mvcboard.dao

net.gocoder.mvcboard.dto


 3-5. 만들어진 패키지 모습은 이런 구조가 됩니다.
빈 폴더이기에 하얀색이고 안에 파일은 아직 없습니다.



마무리


프로젝트를 생성하여 패키지를 만들었습니다.


댓글을 달아 주세요


게시판 만들기 read


안녕하세요.
고코더 입니다. 


이번 시간에는 리스트에 있는 글에
내용을 확인하는 상세 페이지를 개발 합니다. 
지금까지 강의를 잘 따라오신 분들이라면
이 글을 안보고도 개발이 가능합니다. 
지금 내가 어느정도 노드가 자신있는지 테스트 해보실려면
이 강의 전에 읽기 페이지를 한번 스스로 만들어보세요.



 1. '/read' board.js 상세보기 코딩 추가 


 1-1. board.js에 코딩을 추가합니다. 


 1-2. 상세보기를 표현할 라우터를 추가합니다. 
1
2
3
4
5
6
7
8
9
10
11
router.get('/read/:idx',function(req,res,next)
{
var idx = req.params.idx;
    var sql = "select idx, name, title, content, date_format(modidate,'%Y-%m-%d %H:%i:%s') modidate, " +
        "date_format(regdate,'%Y-%m-%d %H:%i:%s') regdate,hit from board where idx=?";
    conn.query(sql,[idx], function(err,row)
    {
        if(err) console.error(err);
        res.render('read', {title:"글 상세", row:row[0]});
    });
});
cs

 1-2. 소스 설명 
  • 39번 라인 
    • read라는 uri 뒤에 idx 게시글의 고유번호를 받습니다.
  • 42번 라인
    • 쿼리를 작성합니다. 한개에 글만 조회 하기 때문에 마지막 idx 에 매개변수를 받습니다.
  • 44번 라인 
    • 매겨변수에 idx를 전달 합니다.
  • 47번 라인
    • row[0]에 데이터를 랜더링 합니다. 한개에 데이터만을 가져오도록 첫번째 행만 요청합니다.


쿼리에 idx만 조회 하고 하나에 데이터를 가져오는거 빼고는 글 리스트와 거의 동일한 구조입니다. 



 2. read.ejs 파일 추가 


 2-1. 글을 확인하는 글 상세 파일을 생성합니다. 
read.ejs 이름으로 생성합니다. 
리스트에 데이터를 클릭할때 자세히 확인할 수 있는 페이지입니다.



 2-2. 글 상세 페이지 내용 입력
상세 내역 HTML을 그대로 복사해서 코딩해주세요.
그대로 복사해서 페이지를 만들어 주세요. 
해당 페이지는 글을 상세기능과 글 수정으로 폼을 전송합니다. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
</head>
<body>
<h1><%= title %></h1>
 
<form action="/board/update" method="post">
    <table border="1">
        <input type="hidden" name="idx" value="<%=row.idx%>"/>
        <tr>
            <td>작성자</td>
            <td><input type="text" name="name" id="name" value="<%=row.name%>" required/></td>
        </tr>
        <tr>
            <td>제목</td>
            <td><input type="text" name="title" id="title" value="<%=row.title%>" required/></td>
        </tr>
        <tr>
            <td>내용</td>
            <td><textarea name="content" id="content" cols="30" rows="10" required><%=row.content%></textarea></td>
        </tr>
        <tr>
            <td>패스워드</td>
            <td><input type="password" name="passwd" id="passwd" required/></td>
        </tr>
        <tr>
            <td>변경일</td>
            <td><%=row.modidate%></td>
        </tr>
        <tr>
            <td>등록일</td>
            <td><%=row.regdate%></td>
        </tr>
        <tr>
            <td>조회수</td>
            <td><%=row.hit%></td>
        </tr>
        <tr>
            <td colspan="2">
                <button type="submit">글 수정</button>
                <a href="/board/list">목록</a>
            </td>
        </tr>
    </table>
</form>
 
</body>
</html>

cs

 2-3. 소스 설명
  • 10번 라인
    • post로 꼭 method를 지정해줘야 합니다. 
    • 폼은 /board/upate로 전송해서 수정 기능으로 보냅니다.

 2-4. 개발 완료된 HTML 화면입니다.
글쓰기 버튼을 클릭시 로 '/board/update'로 post를 전송합니다. 


상세 페이지를 조회 하는 예제 입니다. 개발하기 가장 쉬운 페이지입니다. 




마무리


처음 제안처럼 혼자 개발 해보셨나요?
역시 해내셨군요!




아메리카노 한잔으로 배우는 Node.js Express 기본편



해당 내용은 제가 집필한 책에 일부를 발취한 내용입니다.
도움이 되셨으면 후원에 마음으로 제 책을 전국 온라인 서점에서 구매해보세요.



댓글을 달아 주세요