Dev Record

0. Setting

1. node.js 설치

2. vue 설치

bash

// (cmd 관리자 실행)
> npm install vue

// 설치확인
> npm vue -v

3. vue cli 설치

bash

// (cmd 관리자 실행)
> npm install -g @vue/cli c

// 설치확인
> vue -V

1. Spring Boot Project Initialize

Spring Initializr를 통해 Spring Boot 프로젝트를 생성

•  개발환경
  • Visual Studio Code
  • Java 11
  • Spring Boot 2.7.17

2. Controller

java

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {

    @GetMapping("/")
    public String index() {
        return "index.html";
    }
}

• Vue.js 가 Build 될 때 생성된 index.html을 return 한다.

3. Vue 프로젝트 생성

• src/main/java처럼 src/main/vue 로 폴더 구조를 가져가기 위해
• 관리자 권한으로 실행한 cmd에서 프로젝트의 src\main 로 이동하여 vue.cmd create [프로젝트 명]

bash

src\main> vue.cmd create vue --no-git // src\main에서 폴더와 함께 설치

vue create 사용 시

1. 프로젝트 폴더 구조 생성
2. 필요한 종속성 설치
3. git init 명령어를 사용하여 프로젝트 폴더에 Git Repository를 초기화 하게 되는데,

--no-git 은 git init을 건너뛰게 된다.

이후 Vue 버전 선택 하게되면 아래와 같이 Vue 프로젝트가 생성된다.

Vue.js를 빌드하면 Spring Boot 내 프로젝트로 빌드 파일이 생성되며, Spring Boot 배포 파일들과 함께 웹 서버로 배포하는 방식이다.

4. Config & Build

src\main\vue 에서 Build Directory와 devServer의 proxy를 설정하기 위해 vue.config.js 수정해준다.

javascript

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  outputDir: '../resources/static', // Build Directory
    devServer: {
        proxy: 'http://localhost:8080' // Spring Boot Server
    }
})

이후 Vue 프로젝트를 cmd에서 Build해준다.

bash

>npm run build

빌드 후 outputDir 경로에 .vue 파일들이 html, css, js 파일로 변환되고, Spring을 실행하여 localhost:8080 로 접속해보면 Vue로 생성된 화면이 출력되는 것을 확인할 수 있다.

App.vue 파일이 메인 페이지에 해당하기 때문에 앞으로는 해당 파일에 코드를 작성해주면 된다.

5. npm run serve

• 스프링 부트 애플리케이션은 별다른 설정이 없으면 8080 포트를 사용하게 된다. 따라서, Vue 개발용 서버는 따로 설정해주지 않으면 자동적으로 8081, 8082, 8083... 포트를 사용하게 된다.
• 매번 npm run build 하여 변경사항을 확인할 수 없기에, React와 같이 Hot Reload 기능을 지원하는

npm run serve로 (8081) 개발하면 된다.

6. Vue Extention Tip

코드 하이라이팅, 오류 검사, 코드 포맷, 디버깅, 자동완성 등을 지원하는 VS Code Extention은 다음과 같다.

• Vetur
• Vue - Official : 
• vue3-snippets-for-vscode

Vetur 설치시 발생하는

vetur can't find ‘tsconfig.json’ or ‘jsconfig.json’ 이나

vetur can't find "package.json' 에러에 대한 해결방법은 해당 포스트 참고

0. Apache Tiles란?

Apache Tiles는 Template Composition Framework로, 웹 어플리케이션의 재사용 가능한 템플릿을 관리하고 구성하는데 사용된다.

페이지의 공통 요소(ex, header, footer, sidebar, ..etc)를 별도의 타일로 정의하고 이를 여러 페이지에서 재사용하는 방식으로 사용된다.

이는 주로 Java 기반의 웹 어플리케이션에서 사용되며, JSP(JavaServer Pages)와 함께 사용되는 경우가 많다.

2021.03.02 기준으로 3.0.8버전까지 나왔으며 더 이상 지원하지 않는다고 한다. 공식 문서

1. System Requirements (3.0.8)

• Spring Boot 3.x 이상에서는 tiles 3 지원 하지 않으니 주의
• JDK 7.0 or above
• Servlet 2.5 or above
• JSP 2.1 or above
  공식 문서

2. Directory Structure

dir

src/
├── main/
│   ├── java/
│   │   └── com/
│   │       └── example/
│   │           └── demo/
│   │               ├── DemoApplication.java
│   │               ├── controller/
│   │               │   └── Controller.java
│   │               └── config/
│   │                   └── TilesConfig.java
│   ├── resources/
│   │   ├── static/
│   │   ├── templates/
│   │   └── application.yml
│   └── webapp/
│       ├── resources/
│       │   ├── css/
│       │   └── js/
│       └── WEB-INF/
│           ├── jsp/
│           │   └── index.jsp
│           ├── tiles/
│           │   ├──layout/
│           │   │  └── layout_default.jsp
│           │   ├──view/
│           │   │  ├── footer.jsp
│           │   │  └── header.jsp
│           │   └── tiles.xml
│           └── web.xml
└── test/

3. 설정 및 사용 (v3.0.5)

3.1 Dependency

gradle

implementation 'org.apache.tiles:tiles-jsp:3.0.5'

maven

<dependency> <!-- tiles -->
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-jsp</artifactId>
    <version>3.0.5</version>
</dependency>

<dependency> <!-- javax.jstl -->
    <groupId>javax.servlet</groupId>
    <artifactId>jstl</artifactId>
</dependency>

3.2 application.yml

yml

spring:
  mvc:
    view:
      prefix: /WEB-INF/jsp/
      suffix: .jsp

Spring MVC는 기본적으로 resources - templates라는 폴더에 있는 index.html을 찾아 렌더링한다.

• JSP 파일의 위치와 접미사를 정의하여 Spring MVC가 JSP파일을 찾을 수 있도록 설정한다.
• prefix: JSP 파일이 위치한 디렉토리를 지정
• suffix: JSP 파일의 접미사를 지정

3.3 TilesConfig.java

java

package com.example.demo.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.view.tiles3.TilesConfigurer;
import org.springframework.web.servlet.view.tiles3.TilesView;
import org.springframework.web.servlet.view.tiles3.TilesViewResolver;

@Configuration
public class TilesConfig {

    @Bean
    public TilesConfigurer tilesConfigurer() {
        TilesConfigurer tilesConfigurer = new TilesConfigurer();
        tilesConfigurer.setDefinitions(new String[]{"/WEB-INF/tiles/tiles.xml"});
        tilesConfigurer.setCheckRefresh(true);
        return tilesConfigurer;
    }

    @Bean
    public TilesViewResolver tilesViewResolver() {
        TilesViewResolver viewResolver = new TilesViewResolver();
        viewResolver.setOrder(TilesView.class);
        return viewResolver;
    }
}

TilesConfigurer

• setDefinitions 메서드를 사용하여 Tiles 정의 파일 경로 설정
• setCheckRefresh를 true로 설정하여 Tiles 정의 파일이 변경될 때마다 새로고침하도록 설정

TilesViewResolver

• setViewClass를 사용하여 뷰 리졸버가 사용할 뷰 클래스 타입을 설정 -> Tiles 뷰를 렌더링하는데 사용

3.4 layout_default.jsp

jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div>
            <!-- header -->
            <tiles:insertAttribute name="header"/>

            <!-- body -->
            <tiles:insertAttribute name="body"/>

            <!-- footer -->
            <tiles:insertAttribute name="footer"/>
          </div>
    </body>
</html>

• insertAttribute name 은 tiles.xml에서 설정한 put-attribute name과 일치해야한다.

3.5 header.jsp / footer.jsp

jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<div class="header">
    <h2>Header</h2>
</div>

jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<div class="footer">
    <h4>Footer</h4>
</div>

3.6 tiles.xml

xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN" "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>

<!-- [ layout.default ] -->
    <!-- ( LAYOUT ) -->
    <definition name="layout.default" templateExpression="/WEB-INF/tiles/layout/layout_default.jsp">
        <put-attribute name="header" expression="/WEB-INF/tiles/view/header.jsp"/>
        <put-attribute name="body" expression=""/>
        <put-attribute name="footer" value="/WEB-INF/tiles/view/footer.jsp"/>
    </definition>

        <!-- ( EXTENDS ) -->
        <definition name="index" extends="layout.default">
            <put-attribute name="body" expression="/WEB-INF/jsp/index.jsp"/>
        </definition>
        <definition name="*/*" extends="layout.default">
            <put-attribute name="body" expression="/WEB-INF/jsp/{1}/{2}.jsp"/>
        </definition>
        <definition name="*/*/*" extends="layout.default">
            <put-attribute name="body" expression="/WEB-INF/jsp/{1}/{2}/{3}.jsp"/>
        </definition>
        <definition name="*/*/*/*" extends="layout.default">
            <put-attribute name="body" expression="/WEB-INF/jsp/{1}/{2}/{3}/{4}.jsp"/>
        </definition>

</tiles-definitions>

• definition: Tiles 정의를 나타냄. 각 정의는 특정 레이아웃이나 페이지 구성을 나타냄
  • name : 정의의 이름. 이 이름을 사용하여 Tiles를 참조할 수 있다.
  • templates : 기본 템플릿 파일의 경로 (공통 레이아웃을 정의)
• put-attribute: 템플릿의 각 부분을 정의한다.
  • name : 자리 표시자
  • value : 자리 표시자에 해당하는 파일의 경로 또는 값
• 위 코드의 경우 /index 로 들어오는 페이지는 layout.default를 확장하여 정의하며 body 부분은 /WEB-INF/jsp/index.jsp 파일로 설정된다.
• /* 과 {} 를 통해 들어오는 url에 대해 전역적으로 jsp 파일을 맵핑할 수 있다.

3.7 Controller.java

java

package com.example.jspprac.auth.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class Controller {

    @GetMapping("/")
    public String home() {
        return "index";
    }    
}

WEB-INF 안에 있는 JSP 파일에 접근하기 위해서는 Spring MVC 컨트롤러나 서블릿을 사용해야 한다.

WEB-INF는 웹 애플리케이션의 보안 및 구조를 위해 사용되며, 직접 브라우저를 통해 접근할 수 없기 때문이다.

반대로 외부 유저가 접근해도 문제없는, 보안성이 중요하지 않을 경우 WEB 디렉토리를 통해 a태그로 이동하도록 설계해도 된다.

Controller의 return값과 Tiles.xml에서 definition에 정의한 name이 반드시 일치해야 해당 tiles를 탄다.

3.8 index.jsp

jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>

4. Result

최종적으로 index.jsp 는 빈 페이지지만 layout_default를 extend 하고 있기 때문에

jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<html>
    <head>
    </head>
    <body>
        <div>
            <!-- header -->
            <tiles:insertAttribute name="header"/>

            <!-- body -->
            <tiles:insertAttribute name="body"/>

            <!-- footer -->
            <tiles:insertAttribute name="footer"/>
          </div>
    </body>
</html>

위와 같이 페이지가 만들어지며,

tiles.xml에 맵핑해 놓은 jsp파일 또한

jsp

<put-attribute name="header" expression="/WEB-INF/tiles/view/header.jsp"/>
<put-attribute name="body" expression=""/>
<put-attribute name="footer" value="/WEB-INF/tiles/view/footer.jsp"/>

반영되고,

최종적으로 아래와 같이 html이 완성된다.

jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<html>
    <head>
    </head>
    <body>
        <div>
            <!-- header -->
            <div class="header">
                  <h2>Header</h2>
            </div>

            <!-- body -->

            <!-- footer -->
            <div class="footer">
                <h4>Footer</h4>
              </div>
        </div>
    </body>
</html>