너굴의 개발주니어에서 시니어되기

java.math.BigDecimal cannot be cast to java.lang.Integer 이란 에러는

DB에서 BigDecimal 형식의 값을 int 변수에 넣을 때 발생 하였다.

해결 방법으로는

BigDecimal 내장 함수인 intValueExact()

혹은

intValue()

를 사용 하면 된다.

<textarea>

<text>태그와 같은 기능을 수행하지만 

<input type='text'>, <text>는 한 줄의 텍스트를 입력 받게 된다.

반면

<textarea> 의 경우 여러 줄의 text 값을 입력 받을 때 사용하게 되는 텍스트 박스이다.

<textarea> 내의 엔터가 포함 된 text를 입력 하게 되고 해당 값을 자바스크립트 등으로 값을 출력해보면 

아래의 그림 처럼 값을 얻을수 있다.

- 화면 textarea 입력 화면

- jquery를 이용하여 textarea 값을 확인 

- textarea의 값을 자바 단에서 받은 값 

보통 우리는 화면에서 textarea의 값을 jquery를 이용하여 값을 가져오고 ajax를 통해 자바단(controller) 로 값을 던지게 된다.

이를 DB에 저장하고 추루 이 값을 그대로 출력했을때는 아래의 그림 처럼 엔터값(줄바꿈) 이 적용 안되는 것을 볼 수 있다.

이는 TEXTAREA의 값은 TEXT 값이고 이 안에서 엔터(줄바꿈) 값은 \n 으로 표현된다.

이를 <br> 로 치환하여 db 저장 하면 출력시 아래의 화면 같이 줄바꿈이 적용되어 표현이 된다.

하지만 아래 그림처럼 해당 값을 수정해야 될 경우가 있을 때는 아래처럼 줄바꿈을 나타내는 <br> 이 text로 표현 되어 나오게 된다.

이러한 경우를 다 고려 했을 때 다음과 같이 2가지 방법을 사용 할 수 있다.

1, textarea 값을 DB 저장 후 수정이 가능 할 경우 

textarea 값을 치환 없이 DB 저장 -> 수정 시에는 그대로 값을 출력,  단순 값 출력일 경우 '\n'을 <br> 태그로 수정하여 출력

2. textarea 값을 DB 저장 후 단순 출력 만 할 경우

textarea 값의 엔터값(줄바꿈) '\n' 을 <br> 로 치환 하여 DB 저장 -> 후에 DB 값 그대로 출력

- JSP에서는 <c:if> 는 사용되지만 <c:else> 는 사용할수 없다.

그래서 보통 두가지의 경우를 나타낼때는 아래의 형식을 사용하였는데

<c:choose>

    <c:when></c:when>

    <c:otherwise></c:otherwise>

</c:choose>

불필요하게 코드가 길어 지는 느낌이 들어 삼항연산자를 찾게 되었고

사용법은 보통의 삼항연산자 사용과 동일하였다.

${ value 연산자 value ? true 일 때 값 : false 일 때 값}

${key eq 'value' ? 'true' : 'false'}

load의 정의

웹 페이지의 내용을 동적으로 교체하기 위해서 Ajax로 서버에서 데이터 json 형식으로 받아 HTML 요소를 생성하여 페이지내의 원하는 위치의 

내용을 바꾸는 작업을 많이 합니다. jQuery의 .load() 메소드는 주어진 URL로부터 HTML 데이트를 받에서 jQuery 셀력터로 선택된 위에에 넣어 줌으로써 동적으로 페이지의 내용을 교체하는 작업을 간단하게 처리할 수 있도록 해줍니다.

출처: https://offbyone.tistory.com/235 [쉬고 싶은 개발자]

적용 사래 

한 페이지에서 댓글을 입력, 수정, 삭제 등의 작업을 한다. 

첫 구현은 ajax 후 페이지 리로드 되도록 작업 

$.post(url, dataParam, function (result) {
    if (result.resultCode === 'success') {
        alert("댓글 삭제 완료");
        location.reload();
    }
    else {
        alert("댓글 삭제 실패");
    }
})

하지만 댓글의 경우 작업 하나하나마다 페이지가 리로드 되면 사용성이 현저하게 떨어지기에 해당 페이지에서 댓글 작업 이후에는 댓글 부분만 변경 되도록 수정

댓글 관련 부분을 언제나 동적으로 가져와야 되기에 따로 jsp 파일로 빼놓고 필요한 곳에서 include 시킴

<div id="comment_container">
    <jsp:include page="comment.jsp"/>
</div>

댓글 입력, 삭제, 수정 등의 작업 ajax 에서 success 리턴 값을 받으면 댓글을 새로 조회하는 url을 호출 한다. 

여기서 comment_container 라는 div 안의 내용을 댓글을 조회하는 url에서 리턴 해주는 값으로 교체한다는 

load 함수를 사용한다.

$.post(url, dataParam, function (result) {
    if (result.resultCode === 'success') {
        alert("댓글 입력");
        var url = "/echoline/reloadComment?requestNo=" + $('#click-requestNo').val() + "&requestIndex=" + $('#requestIndex').val() + "&status=" + $('#status').val();
        $('#comment_container').load(url);


    }
    else {
        alert("회원가입 실패");
    }
})

load 함수의 파라미터 정의

Query .load() 메소드 사용법은 다음과 같습니다. 세 가지 인자를 가질 수 있습니다.

.load( url [, data ] [, complete ] )    반환값: jQuery

- url : 데이터를 받을 URL을 나타내는 문자열입니다.

- data : 선택적인 인자로 URL 로 요청을 보낼 때 같이 보낼 데이터로 자바스크립트 객체 또는 문자열 입니다.

- complete : 요청이 완료되면 호출되어질 콜백함수 입니다. Function( String responseText, String textStatus, jqXHR jqXHR )

출처: https://offbyone.tistory.com/235 [쉬고 싶은 개발자]

현상

 - td 안에 에디터에서 저장한 값을 표현할때 그대로 넣으면 td 값을 넘어서 img 이미지가 넘쳐서 보이게 된다. 

 해결

  - css의 max-width를 이용

.request-service__commentTable td img {
   max-width:100%;
}

위와 코드는 해당 클래스 명 아래 td 안에 있는 img 태그에는 모두 max-width를 적용한다라는 뜻이다.

img에 width, height 가 설정되어있어도 우선순위가 더 높은 max-width를 따라가게 된다. 

< max-width 적용 전 >

< max-width 적용 후 >

이미지가 눌려서 깨지는 현상이 발생하지만 전체 이미지를 다 볼 수 있게 된다.

toString() 메서드는 Date 객체의 시간을 문자열로 반환합니다.

var event = new Date('August 19, 1975 23:15:30');
console.log(event.toString());
// expected output: Tue Aug 19 1975 23:15:30 GMT+0200 (CEST)
// (note: your timezone may vary)

[javascript,jquery] 특정 요소의 크기에 따라 윈도우 창 크기 자동 변경

상황 : 이미지를 가지고 있는 특정 내용을 '상세보기' 등의 버튼을 이용하여 팝업으로 해당 내용을 출력 한다.

초기 설정 한 팝업 크기 이후에 컨텐츠에 포함된 이미지가 전체가 다 나오도록 자동으로 창 크기 변경이 필요

var width = $('target').width();
var height = $('target').height();
window.resizeTo(width,height);

word-break

word-break 는 말 그대로 단어를 자르는 겁니다. 기복적으로 줄이 넘어갈 때는 단어단위로 잘려서 넘어가게 되어 있습니다. 그래서 띄어 쓰기를 하지 않고 글을 쓴다면 한 단어로 인식하여서 width 를 넘어가도 줄바꿈이 되지 않습니다. 그럴 때 word-break 를 사용해주면 줄바꿈이 가능하게 됩니다.

출처 : http://htglss.tistory.com/31

사진의 예로 

빨간 네모 안에 글이 word-break를 적용하기 전 기존에 설정된 width 값을 넘어서 단어가 표시된다.

아래의 사진은 word-break를 적용한 내용이다. 

또 한가지 컨텐츠 내 엔터, 스페이스바가 있을 경우 자동으로 word-break를 걸어주기도 한다.