반응형
@Getter
@NoArgsConstructor //??
@Entity
@Table
public class Board {


@NoArgsConstructor

Lombok을 사용하면 생성자도 자동으로 생성할 수 있습니다. @NoArgsConstructor 어노테이션은 파라미터가 없는 기본 생성자를 생성해주고, @AllArgsConstructor 어노이션은 모든 필드 값을 파라미터로 받는 생성자를 만들어줍니다. 마지막으로 @RequiredArgsConstructor 어노테이션은 final이나 @NonNull인 필드 값만 파라미터로 받는 생성자를 만들어줍니다. 


출처 : http://www.daleseo.com/lombok-popular-annotations/




@Column
@Enumerated(EnumType.STRING)
private BoardType boardType;


@Enumerated

Enum 타입 매핑용 어노테이션. 

자바 enum형과 데이터베이스 데이터 변환을 지원.

실제로는 자바 enum형이지만 데이터베이스에서는 String형 변환하여 저장 하겠다는 선언 




@OneToOne(fetch = FetchType.LAZY)
private User user;


@OneToOne

 현재의 도메인과 현재 도메인의 필드인 User 도메인이 1:1 관계라는 것을 설정하는 어노테이션 

실제 DB에 저장 될 때는 User 객체가 저장되는 것이 아닌 User 도메인의 PX 값이 저장 됨.

fetch 는 eager  // lazy 두 종류가 있고

전자는 처음 Board 도메인을 조회할 대 즉시 관련 User 객체를 조회 하는 의미

후자는 User객체를 조회하는 시점이 아닌 객체가 실제로 사용 될 때 조회 한다는 의미




반응형
반응형

스프링부트 환경에서 리소스(css, js, img 등)을 화면단에서 import 할때 경로 추가 하는 방법


spring 에서는 xml에서 따로 리소스 경로를 입력 해줘야 됐었지만


springboot 에서는 아마 이러하 작업들을 spring-boot-starter-web 에서 이 모든 작업을 미리 해주기에 우리는 따로 설정 없이 사용 할 수가 있다.

이래서 점점 springboot로 다 넘어가는 추세인것 같다.



아래와 같은 폴더 구조일때 정적 자료들은 resources/static/**  모두 넣으면 된다. 

보편적으로 css, js, img 의 폴더 구조를 만들고 사용 하고 있다.





화면단에서는 아래와 같이 사용 할 수 있다. 이미 static 아래로 리소스 경로가 잡혀있기에 그 아래 css, js, img 의 상대 경로를 추가 하면 사용 가능하다.

th: prefix가 들어간 구문은 타임리프에서 사용하는 구문

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<title>Title</title>
<link rel="stylesheet" type="text/css" th:href="@{/css/style.css}">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>


반응형
반응형

spring 환경에서 session(세션) 시간을 변경 할 수 있다.


spring 내 web.xml 에 아래와 같이 설정

 - 시간 기준은 '분'

<session-config>
<session-timeout>60</session-timeout>
</session-config>



spring 뿐만 아니라 웹 서버 환경에서도 설정할수 있다.


Apach Tomcat 기준 

apache-tomcat-x.x.x\conf\web.xml


위 web.xml 에서도 동일 하게 


<session-config>
<session-timeout>30</session-timeout>
</session-config>



로 설정 할 수 있다.


둘의 우선순위는 어느 곳의 우선순위가 더 높은 지는 추후 확인 해봐야 될것 이다.

반응형
반응형
$('html').scrollTop(0);


페이징 후에 화면을 맨 위로 즉 상단으로 올릴수 있다.



반응형
반응형

가령 a 태그, button을 페이지 로딩 후에 강제로 클릭 되었으면 하는 경우가 있다.


이때는 jquery의 trriger 함수를 이요하면 된다.


1
$('#아이디').trigger("click");
cs



다만 a 태그의 경우 위와 같이 사용할 경우 적용이 되지 않는다.

a태그의 경우 아래와 같이 변경하여 사용한다.


1
$("#a태그아이디").get(0).click();
cs





반응형
반응형


1
2
3
4
5
6
7
8
9
<input type='hidden' id='checkvalue' value='yes'/>
 
<script>
    var data = []
    if($('#checkvalue').val() === 'yes') {
        alert("체크벨류의 값은 yes");
        data.put($('#checkvalue').val());
    }
</script>
cs


위와 같은 코드처럼 우리는 jquery를 이용하여 해당 객체를 가져오고 가져온 객체에 val()함수를 사용해서 값을 가져오는 식으로 많이 사용한다.


하지만 $를 이용하여 객체를 가져오는 경우 즉 $()를 사용하는건 함수를 사용하는 것인 것을 잘 알지 못한다

즉 $('#checkvalue').val()즉를 두번 사용한 경우 함수를 두번 호출한 경우고 잦은 함수 호출은 성능에 영향을 끼치게 된다.




1
2
3
4
5
6
7
8
9
10
<input type='hidden' id='checkvalue' value='yes'/>
 
<script>
    var data = [];
    var $checkValue = $('#checkvalue').val();
    if($checkValue === 'yes') {
        alert("체크벨류의 값은 yes");
        data.put($checkValue);
    }
</script>
cs



위처럼 jquery변수에 한번 값을 불러온 뒤 jquery변수를 계속 해서 사용하는 것이 좋은 방법이다.


jquery는 자바스크립트를 빠르고 간단하게 사용 할 수 있다는 장점을 가지고 있지만,

반대로 jquery 내부적으로 그만큼 많은 작업을 수행하고 있다는 점에서 자바스크립트만 사용한 것보다 약 10배 이상은 느리다는 단점이 있다.



jquery 뿐만 아니라 javascript를 사용할 때도 

예를 들어 반복문을 사용할 때 

반복문을 실행할 lenght도 변수에 넣어서 사용해야 올바른 사용 법이다.


1
2
3
4
5
6
<script>
    for (var i = 0; i < array.length; i++) { ... }
 
    var length = array.length;
    for (var i = 0; i < length; i++) { ... }
</script>
cs




해당 자료는 블로그 https://www.zerocho.com/category/jQuery/post/57c3a8821efc521700a70918

의 자료를 기초로 제작 하였습니다.

반응형
반응형


우리가 사용하는 Jquery 는 사실 상당히 느리고 브라우저에 과부하를 줄 수 있는 라이브러리다.


사실 이런 사실을 모른체 편하다는 이유로 계속 사용하였고, append()를 사용 할 때도 시간이나 성능 등을 생각지 않고 사용하였다.


append를 그냥 사용하는 것은 성능에 매우 부담이 가는 작업이다. 

아래와 같은 작업을 수행할때 브라우저는 array 크기에 맞춰 3번을 페이지를 새로 그려야 하는 작업을 수행하게 된다.

array 크기가 동적으로 늘어나 수천개가 되면 브라우저에 엄청난 성능저하를 가져오게 된다.


1
2
3
4
5
6
7
8
9
10
11
12
    <div class='test1'>
    </div>
 
    <script>
        $(function () {
            var $test1 = $('.test1');
            var array = ['aaa','bbb','cccc'];
            array.forEach(function (item) {
                $test1.append('<strong>' + item + '</strong>');
            });
        })
    </script>
cs



이때 사용할 수 있는게 jquery의 documentFragement이다.

$frag 라는 이름의 가상 메모리 공간을 만들고, 그 안에 append를 할 경우 브라우저 성능에는 지장을 주지않게 된다.

그렇게 몇번, 몇천번 append 작업을 거친 뒤 만들어진 $frag 를 우리는 원하는 test1 div 에 한번만 append 하게 되면 된다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <div class='test1'>
    </div>
 
    <script>
        $(function () {
            var $test1 = $('.test1');
            var $frag = $(document.createDocumentFragment());
            var array = ['aaa','bbb','cccc'];
            array.forEach(function (item) {
                $frag.append('<strong>' + item + '</strong>');
            });
            $test1.append($frag);
        })
    </script>
cs



해당 작업은 평소 개발하면서 append 함수를 많이 사용하는데 위의 잘못된 방식으로 개발을 해오고 있어

고찰 하고자 블로그로 작성하게되었다.


해당 내용은 아래의 블로그 내용을 참조로 작성하였습니다.

https://www.zerocho.com/category/jQuery/post/57c3a8821efc521700a70918


반응형
반응형
1
2
<input type="radio" name="rdoOptionFlag" value="Y"> <s:message code="LBL0470" text="동의"/>
<input type="radio" name="rdoOptionFlag" value="N"> <s:message code="LBL0471" text="동의하지 않음"/>
cs


위와 같이 라디오 버튼을 구현 했을시 

jquery 를 이용하여 체크된 라디오 버튼의 값, 혹은 라디오 버튼의 체크 여부를 확인할 수 있다.


1
var rdoNecessaryFlag =$('input[name=rdoNecessaryFlag]:checked').val();
cs




위와 같이 사용하면 value 에 설정한 값을 가져올수 있다. 


만약


1
2
<input type="radio" name="rdoOptionFlag" > <s:message code="LBL0470" text="동의"/>
<input type="radio" name="rdoOptionFlag" > <s:message code="LBL0471" text="동의하지 않음"/>
cs


value 의 값을 따로 설정 하지 않을시 체크를 하지 않으면 'undefined'가 뜨게 되고

체크를 하였다면 'on' 이라는 값을 출력하게 된다.



또한 


라디오버튼, 체크박스의 체크 여부를 확인하기 위해서는 아래와 같이 사용하면 된다.


1
var rdoNecessaryChcek = $('input[name=rdoNecessaryFlag]').is(':checked');
cs

1
2
3
$('input:radio[name=이름]').is(':checked');
 
$('input:checkbox[name=이름]').is(':checked');
cs


반응형

+ Recent posts