혼자서 웹 서비스 만들어보기 - 2

혼자서 웹 서비스 만들어보기 - 2

https://github.com/remagine/webNovel/tree/develop

1. Css, Js 라이브러리 추가하기

 화면을 이쁘게, 멋있게 동작 시켜주는 멋진 Css,JS 라이브러리를 추가해보겠습니다.

 보통 이런 라이브러리들은 Jquery를 기반으로 움직이기 때문에 Jquery도 추가해야 합니다.

 CDN Link를 넣어주는 방법과 직접 프로젝트에 넣어주는 방법이 있는데

 프로젝트에 넣어주는 법을 사용했습니다.

 다음은 메이븐 프로젝트의 표준 디렉토리 구조입니다.

 

src폴더 안에 main 폴더 안을 주목하세요. 우리는 각종 css, js 들을

/src/main/webapp 폴더 안에 넣을 것입니다.

 

 

 1. bootstrap - css, js 

 2. ckeditor - 위지위그 에디터

 3. jquery-1.11.2 (ie8 지원은 1버젼만 됩니다)

bootstrap으로 기본적인 css를 잡을 것입니다.

혹시 에디터가 필요하다면 ckEditor를 사용하고

기본적으로 jquery가 필요합니다.

2. template 관리하기

 보통의 프로젝트는 /src/main/webapp 폴더에 jsp나 html을 둡니다. 

 그래야만 외부에서 직접 경로로 접근이 안되기 때문입니다.

 그러나 현재 프로젝트에선 

 webapp 폴더 밖에 있어도 경로로 접근이 안됩니다.

 spring dispatcher servlet이 미리 기동할때 등록한 bean url이 아니면 접근할 수 없게 하기 때문입니다.

 안에 넣어도 밖에 두어도 되지만

 편의상 밖에 두고 진행하기로 했습니다. 

 application-dev.properties 폴더에 보면 

 현재 template의 full path 정보가 있습니다. 

 

이렇게 한 후

Spring-boot mvc config를 설정합니다. 

 

package com.arthur.webnovel.config;
 
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.autoconfigure.web.ServerProperties;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.env.Environment;
import org.springframework.web.servlet.config.annotation.DefaultServletHandlerConfigurer;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.ViewResolverRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
 
import com.ctlok.springframework.web.servlet.view.rythm.RythmConfigurator;
import com.ctlok.springframework.web.servlet.view.rythm.RythmViewResolver;
 
@Configuration
@EnableWebMvc
public class MvcConfig extends WebMvcConfigurerAdapter {
    @Autowired
    private Environment env;
 
    @Override
    public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
        configurer.enable();
    }
 
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**").addResourceLocations("/static/");
    }
 
    @Override
    public void configureViewResolvers(ViewResolverRegistry registry) {
        registry.viewResolver(viewResolver());
    }
 
    @Bean
    public RythmConfigurator rythmConfigurator() {
        RythmConfigurator configurator = new RythmConfigurator();
 
        String base = env.getProperty("rythm.base-directory");
        if (! StringUtils.endsWith(base, "/")) {
            base = base + "/";
        }
        configurator.setRootDirectory(base);
        configurator.setMode(env.getProperty("rythm.mode"));
        return configurator;
    }
 
    @Bean
    public RythmViewResolver viewResolver() {
        RythmViewResolver resolver = new RythmViewResolver(rythmConfigurator());
        resolver.setSuffix(".rythm");
        return resolver;
    }
 
    @Bean
    public ServerProperties getServerProperties() {
        return new ServerCustomization();
    }
 
}

이렇게 설정하게 되면 외부 접근도 막을 수 있고, webapp폴더 밖에 template를 둘 수 있습니다.