글쓰는 감자

Controller에서 Pageable을 파라미터로 받아 사용하기 위해 import 되어야 할 것은

import org.springframework.data.domain.Pageable;

위의 코드와 같다!!

BooleanBuilder를 찾을 수 없다고 오류가 뜬다. 이 때에는 import를 확인해봐야한다.

import com.querydsl.core.BooleanBuilder;

위와 같이 경로가 정확한지 판단한다!! querydsl에 대한 의존성을 pom.xml에 추가해두지 않으면 임의로 import 하기 때문에 pom.xml 파일을 꼭 확인해보길..

    <!--    Querydsl-->
    <dependency>
      <groupId>com.querydsl</groupId>
      <artifactId>querydsl-jpa</artifactId>
    </dependency>
    <dependency>
      <groupId>com.querydsl</groupId>
      <artifactId>querydsl-apt</artifactId>
      <scope>provided</scope>
    </dependency>
    
     <!--      Querydsl-->
      <plugin>
        <groupId>com.mysema.maven</groupId>
        <artifactId>apt-maven-plugin</artifactId>
        <version>1.1.3</version>
        <executions>
          <execution>
            <goals>
              <goal>process</goal>
            </goals>
            <configuration>
              <outputDirectory>target/generated-sources/java</outputDirectory>
              <processor>com.querydsl.apt.jpa.JPAAnnotationProcessor</processor>
            </configuration>
          </execution>
        </executions>
      </plugin>

❗ Query관련 Domain 설정 또한 의존성이 없으면 maven compile 해도 파일이 자동 생성이 안된다. ❗

템플릿마다 폴더 구성이 다르기 때문에 먼저 main화면부터 띄워서 구성을 확인해보는 게 좋다.

보통 index.html 파일이 메인화면일 가능성이 크다.

• /resources 안으로 본인의 환경과 구성에 맞게 폴더들을 생성하고 파일들을 집어 넣어주면 된다.
  
  • 먼저 static과 templates 폴더를 생성한다.
  • templates에 뷰화면을 띄우는 html을 집어넣는다.
  • static에 css, image, js 등의 파일들을 넣는다.
• /resources/templates안
  • controller에 맞게 폴더들 생성(뷰 화면)
  • fragments 폴더 생성(top menu나 footer와 같은 매 뷰마다 들어가는 것들)
• /resources/static안
  • css, js, images, font를 자신의 생각대로 구성해 넣는다.

예시

현재 진행하고 있는 프로젝트의 resources폴더이다.

본인이 먼저 어떻게 정리할 건지 생각하고 진행하면 좋겠다.

❗ fragments 파일을 생성해두면 뷰 화면의 코드를 줄일 수 있어 좋다:) ❗

이는 front와 연결 짓기 위한 util파일이다.

간단히 설명하면, controller안에 있는 이름을 가져와서 javascript window.controllerName에 집어넣는다.

public class ControllerNameInterceptor extends HandlerInterceptorAdapter {

  @Override
  public void postHandle(HttpServletRequest request, @NonNull HttpServletResponse response,
      Object handler, ModelAndView modelAndView) throws Exception {
    super.postHandle(request, response, handler, modelAndView);

    String controllerName = "";
    String methodName = "";

    if (handler instanceof HandlerMethod) {
      HandlerMethod handlerMethod = (HandlerMethod) handler;
      controllerName = handlerMethod.getBeanType().getSimpleName().replace("Controller", "");
      methodName = handlerMethod.getMethod().getName();
    }

    String queryString = request.getQueryString() != null ? "?" + request.getQueryString() : "";
    request.setAttribute("queryString", queryString);
    request.setAttribute("controllerName", controllerName);
    request.setAttribute("methodName", methodName);
  }
}

위와 같이 util 폴더에 ControllerNameInterceptor.java파일을 만든다.

그 후 아래와 같이 front쪽 스크립트 필요한 곳에 넣어준다.

• fragments/head.html : 이 파일은 모든 css 파일들을 모아둔 파일이다.

  <script th:inline="javascript">
    /*<![CDATA[*/
    window.contextRoot = /*[[ @{/} ]]*/'/';
    window.controllerName = /*[[ ${controllerName} ]]*/'';
    const numberFormatter = Intl.NumberFormat('en-US');
    /*]]>*/
  </script>

• fragments/common-script.html : 이 파일은 모든 js 파일들을 모아둔 파일이다.

  <script th:inline="javascript">
    /*<![CDATA[*/

    var controllerName = /*[[ ${controllerName} ]]*/'';

    $(document).on('click', '.menu', function () {
      window.controllerName = $(this).data('menuname');
    });

    let nav = $('#nav');
    const nav_link = nav.children('a');

    nav_link.each(function (index, el) {
      if ($(el).data('menuname') === controllerName) {
        $(el).addClass('active');
      } else {
        $(el).removeClass('active');
      }
    })


  </script>

위의 코드와 같이 controllerName을 받아올 수 있다.

❗ 단, controller폴더 안 파일 이름 설정을 controllerName + Controller라고 정확하게 해줘야한다.

ex) HomeController라고 하면 controllerName은 Home이다! ❗

예제 도메인) https://realyun99.tistory.com:8080/mange/newpost?type=post#yj

Properties

Methods

예제

• 새 페이지로 이동하기

window.location.assign("http://www.naver.com"); //or
window.location = "http://www.naver.com";

• 현재 페이지 새로고침

window.location.reload(true);

• replace()를 사용해 새 페이지로 이동하기

function reloadPageWithHash() {
  var initialPage = window.location.pathname;
  window.location.replace('http://www.naver.com/#' + initialPage);
}

1. https://html5up.net/

템플릿이 많지는 않지만 퀄리티가 좋음!(무료)

2. https://themewagon.com/theme_tag/free/

생각보다 다양한 템플릿들 존재!(무료)

3. https://bootstrapthemes.co/items/free-bootstrap-templates/

다운 받으려면 sns에 공유하기를 해야만 한다. 하지만 좋은 반응형 템플릿들이 있음(무료)

4. https://themeforest.net/

자주 구매하는 곳(유료)