SpringBoot로 게시판 만들기 실습 / 3. DB설계, 화면설계

실습2에서는 서버를 구동하고 첫 번째 jsp파일을 실행했습니다.

 

이번장에서는 프로젝트에 필요한 DB와 화면(메인, 로그인, 회원가입)을 설계하겠습니다.

 

실습2에서 생각해볼 것

- JSP란?

- Context-path란?

- MVC패턴과 controller란?

Goal

 - 소프트웨어의 개발 과정

 - DB 설계

 - 화면 설계

 

[소프트웨어의 개발 과정]

 

본격적으로 개발에 들어가기에 앞서 소프트웨어의 개발 과정에대해 간단히 짚고 넘어가겠습니다.

 

소프트웨어의 개발 과정은 일반적으로 아래와 같이 이루어집니다.

요구사항 명세 -> 요구사항 분석 -> 기본 설계 -> 상세 설계 -> 구현 -> 테스팅 -> 유지 보수

 

저는 간단한 토이 프로젝트를 진행하는 것이기 때문에 위의 모든 과정을 적용하지 않고

다음과 같은 과정에 따라 실습을 진행겠습니다.

요구사항 명세 -> DB 설계 -> 화면 설계 -> 구현 -> 시연 -> 리뷰

 

요구사항 명세

:  실습1에서 명시한대로 SpringBoot, JSP를 이용한 회원관리, 게시판, 로그인 기능을 구현할 예정입니다.

1. DB 설계 

 - DB 설계 단계 다음과 같습니다.

 

 1) 실세계 - 요구사항 수집 분석

  - 먼저 실제 세계에서 어떤 시스템을 구축할 것인지에 대한 요구사항을 수집합니다

: 회원관리, 게시판, 로그인기능이 담긴 코로나 방문자 관리 웹 사이트를 구축할 예정입니다. 웹 사이트에 접속한 회원은 로그인을 통해 서비스를 이용하며 자신이 방문한 장소와 특이사항을 게시판에 작성할 수 있습니다. 웹 사이트의 관리자는 회원관리를 할 수 있습니다.

 

  - 요구사항에 대해 어떤 데이터들이 필요한지, 어떤 기능들이 필요한지 분석합니다.

: 요구사항을 보니 회원과 게시글에 대한 정보를 저장하면 될 것 같습니다.

회원은 사이트에 로그인 할 수 있도록 아이디와 비밀번호가 필요하고 이름, 이메일, 핸드폰번호, 주소, 가입일시의 정보를 갖습니다.

게시글은 회원이 방문한 장소를 나타냅니다. 따라서 방문주소, 특이사항을 적을 내용, 같이온 사람, 방문 일시, 게시글 번호, 방문자 아이디 정보를 갖습니다.

 

 2) 개념적 설계

  - ER 다이어그램을 통해 요구사항을 개념적으로 표현합니다.

: 다음의 사진은 workbench에서 생성한 EER Diagram입니다. ER다이어 그램의 작성은 생략하겠습니다.

 3) 논리적 설계

  - 관계 모델(Relation model)을 통해 개념적 설계를 논리적으로 표현합니다.

: 테이블로 개념적 설계를 표현하는 논리적 설계는 생략하겠습니다

 

 4) 물리적 설계

 - 실제 디스크와 같은 물리 저장장치에 데이터를 저장할 수 있도록 표현합니다.

: 다음의 DDL을 복사하고 실행하여 데이터베이스에 table을 생성해주세요

use coronabook;

CREATE TABLE `user` (
  `userid` varchar(16) NOT NULL,
  `username` varchar(20) NOT NULL,
  `userpwd` varchar(16) NOT NULL,
  `email` varchar(50) DEFAULT NULL,
  `phonenumber` varchar(20) NOT NULL,
  `address` varchar(100) DEFAULT NULL,
  `joindate` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`userid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

CREATE TABLE `visitorbook` (
  `postno` int(11) NOT NULL AUTO_INCREMENT,
  `userid` varchar(16) NOT NULL,
  `address` varchar(100) NOT NULL,
  `content` varchar(2000) NOT NULL,
  `companion` int(11) DEFAULT 0,
  `visitdate` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`postno`),
  KEY `visitorbook_username_FK_idx` (`userid`),
  CONSTRAINT `visitorbook_userid_FK` FOREIGN KEY (`userid`) REFERENCES `user` (`userid`)
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

 5) DTO 생성

 * DTO란?

 : DTO(Data Transfer Object)는 데이터 전송(이동) 객체입니다. 즉, 계층간 데이터 교환을 위한 객체이며 Java Beans라고도 불립니다. 예를들어 Persistence Layer에 있는 데이터베이스의 데이터를 Business Layer인 Service나 Presentation Layer인 Controller 등으로 보낼 때 사용하는 객체의미합니다. DB의 데이터가 Service나 Controller로 넘어올때는 DTO로 변환되어 서로 다른 시스템에서 데이터 전송이 가능하게 됩니다.

 - DTO는 로직을 갖고 있지 않는 순수한 데이터 객체이며, getter/setter 메서드만을 갖습니다. DB에서 Service, Controller로 전달할 때 쓰일 뿐만아니라 Controller Layer에서 Response DTO 형태로 Client에 전달되기도 합니다. 

 

 - 패키지 구조

 - 다음과 같이 model 패키지를 만들고 DTO클래스로 사용될 User.java, VisitorBook.java를 생성해줍니다

 - User.java 코드

package com.coronabook.springboot.model;

public class User {

	private String userid;
	private String username;
	private String userpwd;
	private String email;
	private String phonenumber;
	private String address;
	private String joindate;

	public String getUserid() {
		return userid;
	}

	public void setUserid(String userid) {
		this.userid = userid;
	}

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public String getUserpwd() {
		return userpwd;
	}

	public void setUserpwd(String userpwd) {
		this.userpwd = userpwd;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}

	public String getPhonenumber() {
		return phonenumber;
	}

	public void setPhonenumber(String phonenumber) {
		this.phonenumber = phonenumber;
	}

	public String getAddress() {
		return address;
	}

	public void setAddress(String address) {
		this.address = address;
	}

	public String getJoindate() {
		return joindate;
	}

	public void setJoindate(String joindate) {
		this.joindate = joindate;
	}

}

 - VisitorBook.java 코드

package com.coronabook.springboot.model;

public class VisitorBook {
	
	private int postno;
	private String userid;
	private String address;
	private String content;
	private String companion;
	private String visitdate;

	public int getPostno() {
		return postno;
	}

	public void setPostno(int postno) {
		this.postno = postno;
	}

	public String getUserid() {
		return userid;
	}

	public void setUserid(String userid) {
		this.userid = userid;
	}

	public String getAddress() {
		return address;
	}

	public void setAddress(String address) {
		this.address = address;
	}

	public String getContent() {
		return content;
	}

	public void setContent(String content) {
		this.content = content;
	}

	public String getCompanion() {
		return companion;
	}

	public void setCompanion(String companion) {
		this.companion = companion;
	}

	public String getVisitdate() {
		return visitdate;
	}

	public void setVisitdate(String visitdate) {
		this.visitdate = visitdate;
	}
	
	
	
}

 - DB설계에서 생성한 user테이블과 visitorbook테이블의 정보가 DTO에 담기기 때문에 각 테이블의 컬럼은 DTO 클래스의 맴버변수명과 매칭시켜줍니다. (꼭 명칭을 일치시킬 필요는 없습니다. 하지만 나중에 mapper.xml에서 쿼리문을 날릴 때 DTO의 맴버변수와 테이블의 컬럼이 일치해야 코드를 관리하기 간편합니다.)

 

2. 화면 설계 (메인, 로그인, 로그아웃, 회원가입)

 - 메인, 로그인, 로그아웃, 회원가입은 다음과 같은 흐름으로 진행되며

 - index.jsp, login.jsp, join.jsp 페이지를 구현할 예정입니다.

 - 페이지 디자인은 BootStrap을 사용하겠습니다.

 

[화면 설계 그림 설명]

 - 빨간 부분 : API(URL)

 - 파란 부분 : jsp파일명, 페이지 이동 기법(include, redirect)

 - 검정 부분 : 도식화한 페이지

 - 초록 부분 : 페이지 이동 흐름

 

다음 장에서는

설계한 메인, 로그인 화면을 구현하고 로그인과 로그아웃 기능을 만들어 보겠습니다.