SSM 프레임워크와 EasyUI를 활용한 기업용 OA 시스템 구축

1. Spring 프레임워크 핵심 기능 구현

1.1 의존성 주입(DI) 구조 설계

Spring의 IoC 컨테이너는 애플리케이션 구성 요소 간 결합도를 낮추는 핵심 기술입니다. 아래 예제는 어노테이션 기반 자동 주입 구현 방식을 보여줍니다:

@Service
public class AccountService {
    @Autowired
    private AccountRepository accountRepo;
    // 서비스 로직 구현
}

AccountService 클래스는 @Autowired 어노테이션을 통해 AccountRepository 인스턴스를 자동으로 주입받습니다. 이 구조는 테스트 용이성과 모듈화된 코드 유지에 유리합니다.

1.2 AOP를 통한 공통 관심사 처리

로깅, 트랜잭션 관리 등 반복적 기능을 분리하기 위한 AOP 구현 예시:

@Aspect
@Component
public class RequestLogger {
    @Before("execution(* com.corp.service.*.*(..))")
    public void logRequest(JoinPoint joinPoint) {
        // 요청 로깅 로직 구현
    }
}

@Aspect 어노테이션과 포인트컷 표현식을 사용하여 특정 패키지 내 메서드 호출 시 로깅 기능을 자동으로 적용합니다.

2. SpringMVC 기반 웹 애플리케이션 개발

2.1 DispatcherServlet 구성

웹 요청 처리의 핵심인 DispatcherServlet 설정 방법:

<servlet>
    <servlet-name>mainServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/config/app-servlet.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>

컨텍스트 설정 파일(app-servlet.xml)에는 컴포넌트 스캔, 뷰 리졸버 등 MVC 구성 요소가 정의됩니다.

2.2 컨트롤러와 요청 매핑

@Controller
@RequestMapping("/user")
public class UserController {
    @GetMapping("/profile")
    public String showProfile(Model model) {
        model.addAttribute("user", new User());
        return "profile";
    }
}

@Controller 어노테이션으로 선언된 클래스는 HTTP 요청을 처리하며, @RequestMapping으로 URL 경로를 매핑합니다.

3. MyBatis 데이터 접근 계층 구현

3.1 MyBatis 기본 구성

<configuration>
    <properties resource="db.properties"/>
    <environments default="prod">
        <environment id="prod">
            <transactionManager type="JDBC"/>
            <dataSource type="UNPOOLED">
                <property name="driver" value="${jdbc.driver}"/>
                <property name="url" value="${jdbc.url}"/>
            </dataSource>
        </environment>
    </environments>
    <mappers>
        <mapper resource="mappers/EmployeeMapper.xml"/>
    </mappers>
</configuration>

데이터베이스 연결 정보와 매핑 파일 위치를 정의하는 MyBatis 핵심 구성입니다.

3.2 Mapper 인터페이스와 SQL 매핑

public interface EmployeeMapper {
    Employee selectById(int id);
    void insert(Employee emp);
}
<mapper namespace="com.corp.mapper.EmployeeMapper">
    <select id="selectById" resultType="Employee">
        SELECT * FROM employees WHERE id = #{id}
    </select>
    <insert id="insert">
        INSERT INTO employees(name, department) 
        VALUES(#{name}, #{department})
    </insert>
</mapper>

인터페이스 메서드와 XML 매핑 파일의 SQL 문이 1:1로 대응되는 구조입니다.

4. Maven 프로젝트 관리

4.1 의존성 관리 구조

<dependencies>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>5.3.9</version>
    </dependency>
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis-spring</artifactId>
        <version>2.0.7</version>
    </dependency>
</dependencies>

pom.xml 파일에 선언된 의존성은 자동으로 하위 모듈로 전파되며, 빌드 시 classpath에 포함됩니다.

4.2 빌드 프로필 관리

<profiles>
    <profile>
        <id>dev</id>
        <properties>
            <env>development</env>
        </properties>
    </profile>
    <profile>
        <id>prod</id>
        <properties>
            <env>production</env>
        </properties>
    </profile>
</profiles>

개발/운영 환경별로 다른 설정을 적용할 수 있는 프로파일 기능입니다.

5. EasyUI 프론트엔드 개발

5.1 레이아웃 구성

<link rel="stylesheet" href="themes/default/easyui.css">
<link rel="stylesheet" href="themes/icon.css">
<script src="jquery.min.js"></script>
<script src="jquery.easyui.min.js"></script>
$('#mainLayout').layout({
    regions: [{
        name: 'north',
        content: '<h3>헤더 영역</h3>',
        height: 80
    }, {
        name: 'center',
        content: '<div style="padding:10px">메인 콘텐츠</div>'
    }]
});

EasyUI 레이아웃 컴포넌트를 사용하여 복잡한 페이지 구조를 간단히 구현할 수 있습니다.

5.2 데이터 그리드 구현

<table id="grid" class="easyui-datagrid" style="width:100%">
    <thead>
        <tr>
            <th field="id">ID</th>
            <th field="name">이름</th>
        </tr>
    </thead>
</table>
$('#grid').datagrid({
    url: '/api/employees',
    pagination: true,
    pageSize: 20,
    pageList: [10,20,30]
});

서버 사이드 페이징을 지원하는 데이터 그리드 구성 방법입니다.

6. 비동기 통신 구현

6.1 jQuery 기반 AJAX 요청

$.ajax({
    url: '/api/data',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log('응답 데이터:', data);
    },
    error: function(xhr, status, err) {
        console.error('요청 실패:', err);
    }
});

JSON 형식의 응답을 처리하는 AJAX 통신 예시입니다.

6.2 Java에서의 JSON 처리

// Jackson 라이브러리 사용
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(employee);

// Gson 라이브러리 사용
Gson gson = new Gson();
String json = gson.toJson(employee);

Java 객체를 JSON 문자열로 변환하는 두 가지 대표적인 방법입니다.

태그: Spring MyBatis maven EasyUI AJAX

8월 11일 07:46에 게시됨