zeroOne

에이작스를 사용해 데이터 테이블을 만들고 검색기능을 사용할때 

검색버튼을 클릭시 

function search() {
  $('.dt_game_with_btn_table.table').DataTable().ajax.reload(null, true);
}

에이작스를 리로드하여

data: function (d) {
  let data = {
    "page": parseInt(d.start / d.length),
    "size": d.length,
    "sort": columnsDefine[d.order[0].column].column,
    "direction": d.order[0].dir.toUpperCase(),
    "keyword": d.search.value,
    "gameMode": $("#gameMode").val(),
    "gameMethod": $("#gameMethod").val(),
    "start": makeStartDate($("#endAt").val()),
    "end": makeEndDate($("#endAt").val()),
    "homeAlleyName": $("#homeAlleyName").val(),
    "awayAlleyName": $("#awayAlleyName").val(),
    "status": $("#status").val(),
    "gameMemberNumber":$("#gameMemberNumber").val()
  };

검색데이터를 서버로 보내준다 .

여기서 리로드에 옵션이있는데 

function search() {
  $('.dt_game_with_btn_table.table').DataTable().ajax.reload(null, true);
}

reload(callback, resetpage); 을줄수가 있는데

앞에 callback은 잘모르겠다 null값이 디폴트이니 주고   뒤에 resetpage의경우 default가 true이고 검색시 무조건 1페이지로 이동한다.

false로 되어있을경우 어떻게 되는지 살펴보자

12번페이지까지있는 데이터가있다고 할때 12번페이지에서 검색옵션을 3번페이지까지 있는 필터를 설정하고 검색하면 여전히 12번페이지에 머물르고 있어 데이터가 없다고 오류가 발생한다.

그러나 truer값을 주면 검색시 무조건 1페이지로 이동하여 문제 해결~!

참고:

https://datatables.net/reference/api/ajax.reload()

에이작스를 이용해서 데이터테이블을 만들고 그안에 데이터를 뿌려주는데 

아래와 같이 테이블이 이쁘지가 않게 나왔습니다.

데이터가 가운데 정렬도 되어있지않고 시간도 너무 이쁘지가 않네요.

먼저 가운데 정렬을 하는법은 

$('.dt_game_with_btn_table.table').css("text-align", "center");

이렇게 css속성을 center 로 보내주시면 됩니다.

그러면 이렇게 테이블이 깔끔하게 가운데 정렬이 됩니다!

그리고 필요한 컬럼은 width 를 정의해주셔서 2라인으로 만들어주시거나 넓이를 조절해 주시면 됩니다 .

날짜 관련 데이터를 매핑하다가 이걸 String 으로 해야할지 ,Date으로해야할지 LocalDateTime 으로 해야할지 궁금해졌다.

우선 String이나 Long 으로 받아도 데이터 매핑은 가능하다 하지만 데이터가 

2022-02-09 14:43:45.990000

이런식으로 들어가 있으면 데이터를 다시 조작해야하는 굉장히 골치가아픈일이 발생한다.

그래서 Date이나 LocalDateTime을 이용해야 하는데 

두가지가 무슨차이인지 조금 의문이었다.

결론적으로

Date,Calrendar 클래스 사용시의문제점

• 월값이 0부터 시작한다 (1월 ->0)
• 다른 언어와 달리 기본날짜, 시간 클래스가 불변객체가 아니다
• private final 로 지정해둔 Date을 사용하는등 방어복사기법이 필요하다.
• 특정 시간대의 날짜를 생성하거나, 년/월/일을 통한 날짜연산을 위해서는 Date클래스와 Calenmdar클래스를 함께 사용해야한다.
• 중간 객체를 사용하는것 자체도 불편하며 Calendar객체의 생산비용이 비싼편이다.
• 이외에도 여러 상수 필드를 사용하여 잘못된 입력에도 오류가 발생하지 않는등의 불편함이 있다.

이런 많은 문제가 있다고한다 .

그렇기 때문에 자바 8부터 출시된 java.time(joda.time) 을 이용하면 된다. 

간만에 프로젝트 오류가 발생했다.

갑자기 발생해서 당황했는데
빈생성 못할때 

gradle clean 하고 다시 build 해주면 된다...

유효성검사는 view단에서 할수있고 controller단에서 할수 있다.

이번에 정리할 것은 그중에서 view단에서 jquery.validate.min.js를 이용하여 유효성검사하는 방법이다.

먼저 라이브러리를 추가해준다.

<script th:src="@{/static/app-assets/vendors/js/forms/validation/jquery.validate.min.js}"></script>

다음 html에서 유효성검사를 할 구역을 설정해준다.

<form>
	<div class="form-validate">
    	<input type="text" class="form-control" id="subject" name="subject" required/>
	</div>
</form>

그리고 js파일에서 validate을 설정해준다.

$('.form-validate').validate({
	rules: {
    	name: required : true
    },
    messages : {
    	subject: "필수 입력 값입니다."
    },
    submitHandler:function () {
    	save();
    }
  })

이렇게 유효성검사가 가능하다

자바 코딩을 하다보면 Getter, Setter, Constructor 등 매번 반복적인 코딩을 하게되는데 롬복은 이러한 수고를 획기적으로 줄여줄수 있는 자바 개발 라이브러리이다.

@AllArgsConstructor

• 클래스의 모든 필드에 대한 생성자를 자동으로 생성해준다.(파라미터를 모두 포함한다)
• 멤버 변수의 순서를 바꾸면 기존 생성자의 파라미터 순서가 바뀐다.

@Data
@AllArgsConstructor
public class User {
	private String name;
	private String contact;
	private String address;
}

// User(String, String, String); 생성자가 만들어진다.

@Builder

• 객체내의 필드를 골라서 생성할 수 있다. (멤버필드가 많을때 유용하다.)

@NoArgsConstructor

• 기본 생성자를 생성해준다.
• User user= new User();

그렇다면 어떨때 사용하면 될까

 기본 생성자는

클래스에 생성자가 하나도없을때 기본으로 생성된다.

그러나 @AllArgsConstructor 를 사용했을때

기본생성자가 생성되지않으므로

이렇게 멤버필드 전부가있는 생성자와 기본생성자 둘다 선언하고 싶을때

@NoArgsConstructor를 같이 사용해주면 된다.

참고 자료

https://youtu.be/JouPeMHj3Po