07. 스프링(Spring) 개발 - 프로젝트 생성 및 시작

07. 스프링(Spring) 개발 - 프로젝트 생성 및 시작

이번글에서는 아주 단순한 CRUD(등록, 조회, 수정, 삭제) 게시물 관리를 만들어 보겠습니다. 이 글에서 중점 두는 것은 어떤 순서로 어떤 점을 고려해서 제작해야 하는가에대한 노하루를 전달하는 것입니다. 

모든 게시물 관리의 시작 형태는 등록, 조회, 수정, 삭제를 기준으로 합니다. 여기에 반드시 하나가 더 추가되는 것이 화면상에 데이터의 목록을 보여주는 리스트 기능이라 할 수 있습니다.

웹 프로젝트의 경험이 없을 때는 게시물 관리하는 프로그램을 만드는 것이 쉬운 일이라고 생각 하는 경우가 많지만, 실제로 작업을 진행해 보면 예상하지 못했던 문제가 많습니다. 간단하지만 기본이 되는 프로젝트 일수록 본인이 직접 만들어 보고 본인의 노하우를 쌓을 필요가 있습니다. 

7.1 개발 준비

개발을 시작 할떄는 항상 현재 만들어야 하는 목표를 눈으로 볼 수 있게 하는 것이 중요합니다. 눈으로 결과를 보는 것은 개발 이전에 신경 써야만 하는 점에 대해서 사전에 파악이 가능하고. 개발 중에는 올바르게 개발이 진행되고 있는지를 확인하는 척도입니다. 

개발이 끝난 후에는 만들어진 결과물의 평가 기준이 되기 때문에 개발에 앞서 반드시 이를 정리하는 작업을 우선적으로 진행해야합니다.

어떤 것을 개발할 것인지 목표가 명확해 지면 보다 상세하게 개발의 순서를 결정할 수 있습니다. 

일반적인 경우 개발 순서는 가장 먼저 데이터 베으스 관련 부분을 개발하고 컨트롤러 비즈니스 영역을 개발한 후 마지막으로 화면쪽을 개발 하게 됩니다.

이번 글과 이후 글에서는 게시물 관리를 만들어 내는 것입니다. 사용자는 리스트 화면에서 링크를 통해 새로운 게시물을 CRUD 할 수 있습니다. 

STEP 1. 먼저 등록 할 수 있는 화면을 만들어 주고 데이터베이스까지 등록되도록 작성합니다.

STEP 2. 등록된 결과를 확인하고 , 화면은 목록 페이지로 이동하므로 전체 목록 기능을 작성합니다.

STEP 3. 목록 작업이 완료되면 리스트의 특정 게시물을 선택해서 조회하는 화면을 작성합니다. 

STEP 4. 조회 화면에서는 'Modify' 버튼을 이용해서 수정 작업 페이지로 이동할 수 있습니다.

STEP 5. 조회 화면에서는 삭제를 선택해서 직접 삭제 처리를 할 수 있습니다. 삭제가 된 후는 다시 목록 페이지로 이동하게 되고, 결과 확인을 할 수 있습니다.

영역	준비	설명
데이터베이스 관련	관련 스키마, 계정의 생성	개발에 사용할 스키마를 정의하고, 개발에 필요한 사용자 계정을 생성합니다.
	테이블의 설계와 생성	실제 작업할 테이블을 설계하고, 각 테이블의 관계를 ERD 등을 사용해서 그려둡니다.
	더미(dummy) 데이터의 추가	테스트를 위한 가상의 의미 없는 데이터(dummy)를 추가해서 개발 시 결과를 확인 할 때 사용합니다.
스프링 MVC 관련	패키지 구조 결정	개발에 사용할 패키지 이름이나 코드 규칙 등을 미리 지정합니다.
	개발 역할 분담	팀원들 간의 개발 역할을 어떻게 할 것인지를 결정합니다. (수평적 혹은 수직적인 분할)
	테스트 방법의 수립	개발의 중간에 팀원들의 현재 상황을 올바르게 인식 할 수 있는 테스트 방법을 서로 공유하고, 이를 지키도록 합니다.
화면 관련	화면 방식의 결정	JSP 위주의 개발인지, HTML 위주와 JavaScript를 주로 사용하는 개발인지를 명확히 정리합니다.
	절대 경로, 상대 경로의 결정	페이지에서 사용하는 링크의 처리를 하나로 통일해서 진행합니다.

7.2 프로젝트의 생성

프로젝트는 'ex01'이라는 이름으로 STS상의 'Spring project'를 이용합니다. 

패키지 명은 'com.marshmello'로 진행하도록 하겠습니다.

'ex01' 프로젝트의 pom.xml을 사용해서 JDK의 버전과 스프링의 버전을 수정해줍니다.

프로젝트 속성 역시 JDK 1.8에 맞도록 변경합니다.

프로젝트에 필요한 라이브러리를 pom.xml을 이용해서 추가합니다.

	
		
			org.springframework
			spring-test
			${org.springframework-version}
		
		
		
			org.springframework
			spring-jdbc
			${org.springframework-version}
		
		
		
			mysql
			mysql-connector-java
			5.1.35
		
		
		
			org.mybatis
			mybatis
			3.2.8
		
		
		
			org.mybatis
			mybatis-spring
			1.2.2
		
		
		
			org.bgee.log4jdbc-log4j2
			log4jdbc-log4j2-jdbc4
			1.16
		

테스트를 올바르게 진행하기 위해서 JUnit의 버전과 Servlet의 버전을 변경합니다. 

	
		
			javax.servlet
			javax.servlet-api
			3.1.0
		
	
		
			junit
			junit
			4.12
			test
		

파일첨부 : pom.xml

마지막으로 설정과 관련된 파일들을 추가합니다. 파일들의 위치는 'src/main/resources'폴더를 이용합니다. log4jdbc.log4j2.properties 파일과 logback.xml,mybatis-config.xml 파일을 추가합니다. 

log4jdbc.log4j2.properties

log4jdbc.spylogdelegator.name=net.sf.log4jdbc.log.slf4j.Slf4jSpyLogDelegator

log4jdbc.log4j2.properties

logback.xml

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <include resource="org/springframework/boot/logging/logback/base.xml"/>

    <!-- log4jdbc-log4j2 -->
    <logger name="jdbc.sqlonly"        level="DEBUG"/>
    <logger name="jdbc.sqltiming"      level="INFO"/>
    <logger name="jdbc.audit"          level="WARN"/>
    <logger name="jdbc.resultset"      level="ERROR"/>
    <logger name="jdbc.resultsettable" level="ERROR"/>
    <logger name="jdbc.connection"     level="INFO"/>
</configuration>

파일첨부 : logback.xml

mybatis-config.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
  PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>

</configuration>

파일첨부 : mybatis-config.xml

모두 등록 후 화면

개발 패키지 구성

com.marshmello.controller - 스프링 MVC의 컨트롤러 패키지 

com.marshmello.dao - MyBatis의 DAO 패키지

com.marshmello.service - 서비스 인터페이스와 구현 클래스 패키지

com.marshmello.vo - Value Object가 사용하는 패키지

resources/mappers폴더 - MyBatis의 XML Mapper 위치

7.3 데이터베이스 관련 설정

DataSource는 MyBatis를 사용하기 위해서 반드시 root-context.xml을 사용해서 등록합니다. 

root-context.xml 수정

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">

	<!-- Root Context: defines shared resources visible to all other web components -->
	<bean id="dataSource"
		class="org.springframework.jdbc.datasource.DriverManagerDataSource">
		<property name="driverClassName" value="net.sf.log4jdbc.sql.jdbcapi.DriverSpy" />
		<property name="url" value="jdbc:log4jdbc:mysql://localhost:3306/marshmello?autoReconnect=true&useSSL=false" />
		<property name="username" value="root" />
		<property name="password" value="1234" />
	</bean>
</beans>

파일 첨부 : root-context.xml

DataSource의 'src/test/java' 폴더 내 테스트 코드 작성 

package com.marshmello.ex01;

import java.sql.Connection;

import javax.inject.Inject;
import javax.sql.DataSource;

import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(locations = { "file:src/main/webapp/WEB-INF/spring/*.xml" })
public class DataSourceTest {
	@Inject
	private DataSource ds;

	@Test
	public void testConnection() throws Exception {
		try (Connection con = ds.getConnection()) {
			System.out.println(con);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

}

파일 첨부 : DataSourceTest.java

실제 테스트는 try-with 구문을 이용해서 자동으로 Connection 객체가 close() 될 수 있도록 작성합니다. 

실행결과는 정상적으로 Connection 객체가 만들어 지는것을 확인할수 있어야 합니다.

테이블 생성 작업

만들어질 게시판의 테이블은 다음과 같이 작성합니다.

CREATE DATABASE SAMPLE;  USE SAMPLE;  CREATE TABLE TBL_BOARD(   BNO INT PRIMARY KEY AUTO_INCREMENT,   TITLE VARCHAR(200) NOT NULL,         CONTENT TEXT,         WRITER VARCHAR(50) NOT NULL,         REGDATE TIMESTAMP NOT NULL DEFAULT NOW(),         VIEWCNT INT DEFAULT 0);

컬럼별 설명

- BNO 글번호

- TITLE 글제목

- CONTEXT 글내용

- WRITER 작성자

- REGDATE 글 작성 시간

- VIEWCNT 조회수

7.4 스프링의 UTF-8 처리 필터 등록

웹 애플리케이션을 제작하다 보면 한글 처리에서 고생하는 경우가 많은데 UTF-8이 사용되는 경우는 스프링에서 제공하는 필터를 등록해주는 것을 권장합니다.

필터는 작성된 프로젝트 내 web.xml 파일을 사용해서 처리합니다.

        encodingFilter
        
            org.springframework.web.filter.CharacterEncodingFilter
    
    
            encoding
            UTF-8
        
	
	
        encodingFilter
        /*
	

7.5 CSS, Javascript 준비

모든 화면단은 Bootstrap을 이용해서 구성하는 방식을 사용합니다 부트스탭은 반응형 웹 페이지를 만들 때 사용하는 Twitter가 제공하는 오픈 소스입니다. 

부트스트랩을 사용해서 반응형 웹 페이지를 제작할 때 신경 쓰이는 부분은 많이 줄지만, 화면 전체의 레이아웃이나 제한 CSS를 설정하는 데는 많은 시간을 소모하게 됩니다. 이글 이후의 예제에서는 이러한 문제를 해결 하기 위해서 부트스트랩으로 만들어진 템플릿 페이지를 이용합니다.

'Admin LTE' 템플릿은 https://adminlte.io/ 에서 제공하는 오픈 소스로 부트스트랩을 사용해서 작성된 무료 템플릿입니다. 

Admin LTE는 기본적으로 반응형 웹 페이지의 레이아웃을 제공하고 화면 구성에 필요한 모든 CSS를 이용할 수 있습니다. 

다운로드 버튼을 눌러 소스를 다운받고 폴더의 압축을 풉니다.

현재 프로젝트의 'src/main/webapp/resources' 폴더 내에 bootstrap , dish, plugins 폴더를 만듭니다.

AdminLTE에 불필요한 파일을 지우고 필요한 파일만 사용하면 되는데 ,시간 관계상 제가 정리한 폴더를 가지고 진행 하도록 하겠습니다.

완성된 resources와 views는 첨부파일의 압축을 푼 후 셋팅해줍니다.

첨부파일 :

 

views.zip

resources.zip

모두 셋팅 후 프로젝트를 재 실행하면 다음과같은 화면이 나옵니다.

ex01.zip

이번글에서는 프로젝트 기본 셋팅과 데이터베이스 연동, UI 셋팅을 완료하였습니다. 

다음글에서는 전체 구조를 갖췄으니 본격적인 구현에 들어가도록 하겠습니다. 

수고하였습니다.!