공부하는블로그

th:if에 대해 배움.

팔로우와 팔로우취소 기능을 위한 버튼 만들어놓고 처음 페이지를 들어갔을때 팔로우 상태 비교를 한 다음에

그 결과에 따라 팔로우 혹은 팔로우취소 라는 버튼이 나오길 원함.

그래서 생각한건 th:if 사용 혹은 script에서 미리 설정해서 버튼의 value값에 입력해주는것을 생각.

알아보니 $(document).ready(function(){}); 을 사용하면 dom이 모두 나온 뒤 실행이 된다 하여 

버튼값을 설정해 보았으나 실패...

$(document).ready(function(){$('#follow').val('팔로우');});

이렇게 적었었다.

아예 안됨. input type=button으로 작성하고 value="" value는 이렇게 비워놨으나 안들어감 ㅠㅠ

지금 시간이 너무 빠듯해서 그냥 if문을 써야겠다 하고 th:if를 사용하기로하고 검색.

<input type="button" th:if="${fcount == 0}" id="follow" name="follow" value="팔로우">
<input type="button" th:if="${fcount == 1}" id="followcancel" name="followcancel" value="팔로우취소">

이렇게 작성했고 내 생각에는 그럼 버튼이 옆으로 두칸을 차지하며 이 밑에있는 쪽지보내기 버튼을 옆으로 밀어낼것

같다는 생각을 하며 별로 맘에 안들것같은데... 하고있었으나!

안밀어냄.

팔로우 취소 버튼으로 변경되어도 저 자리에서 생긴다!

jsp에서는 버튼에 안입히고 table에 입혀서 몰랐는데 jsp도 이렇게 되는지는 의문

어쨋든 해결!

th:if 는 이렇게 사용하고 else는 th:unless 로 사용한다.

체크박스 값 넘기는거에서 에러 발생.

쪽지를 보내기위해 하나의 쪽지를 선택해서 상대방의 아이디를 쪽지 보내기 폼으로 보내줘야 하는데

그 값이 안넘어 가는 에러.....

처음에는 ajax로 하려 했으나 ajax는 페이지 이동에서는 사용하지 않는다 하여 스크립트로 하는 방법을 모색.

그러나 컨트롤러에서 값을 받아주지 못했다. 계속 null이 발생.

해결방법은 script에서 추가해주고 해결했다

$(function(){
    $("#send").click(function(){
        var count = $(".select_note input:checked").length;
        var chk;
        $("input[name=check]:checked").each(function(){
            chk = ($(this).attr("data-sendId"));


        });
        
        console.log(chk);
        if(count == 0){
            alert("선택된 쪽지가 없습니다.")
        }else {
            if (count > 1) {
                alert("하나만 선택해주세요.")
            } else {
                alert("쪽지보내러 ㄱㄱ");

                $("#sending").submit();

                location.href='noteSending?receiveId='+chk;
                alert("쪽지보내러 ㄱㄱ");
            }
        }
    });
    });

이렇게 보냈었는데

url에 id값도 뜨고 값도 안넘어가고 바로 버림.

계속 똑같은 얘기가 나왔었던것이 form으로 해결하면 간단하다.

form으로 보내는게 맞다 라는 답변글을 많이 봐왔기 때문에

최대한 form을 이용해서 해결하려고 찾아봄.

그 결과

<div class="container">
    <form action="/noteSending" method="post" id="sending" name="sending">

    <input type="button" id="send" name="send" value="쪽지보내기">
    <input type="button" id="delete" name="delete" value="삭제" >
    <table class="table table-hover" >
        <tr>
            <th><input type="checkbox" name="allcheck" id="allcheck"/></th>
            <th>쪽지내용</th>
            <th>보낸사람</th>
        </tr>

        <th:block th:each="send : ${sendnote}">
        <tr>
            <td class="select_note">
                <input type="checkbox" name="check" id="check" th:data-No="${send.msgNo}"
                th:data-sendId="${send.memberId}"/>
            </td>
            <td th:onclick="'javascript:'" th:text="${send.msgContents}"/><!-- onclick에 ajax 연결 경로-->
            <td th:text="${send.memberId}"/>
        </tr>

        </th:block>

    </table>
        <input type="hidden" id="idval" name="idval" value=""/>
    </form>
</div>
</body>

<script>
    $(function(){
    $("#send").click(function(){
        var count = $(".select_note input:checked").length;
        var chk;
        $("input[name=check]:checked").each(function(){
            chk = ($(this).attr("data-sendId"));


        });
        document.sending.idval.value=chk;
        console.log(chk);
        if(count == 0){
            alert("선택된 쪽지가 없습니다.")
        }else {
            if (count > 1) {
                alert("하나만 선택해주세요.")
            } else {
                alert("쪽지보내러 ㄱㄱ");

                $("#sending").submit();

                /*location.href='noteSending?receiveId='+chk;
                alert("쪽지보내러 ㄱㄱ");*/
            }
        }
    });
    });
</script>

form태그 내에 input type="hidden"을 하나 추가해주고 name을 idval로 잡았다.

그리고 value는 비워둠.

스크립트에는 chk에 체크한 체크박스 내의 memberId값을 넣어주었고

그 밑에다가 document.sending.idval.value=chk; 로 idval로 잡은 input의 value에 chk를 넣어주었다.

document.폼이름.히든이름.value

이러니까 value값이 넘어가고 컨트롤러에서도 idval로 잡아서 그대로 모델에 넣어주고

페이지 이동

바로 출력됨!!!!!!!!!!!

이거 올려주신분은 php로 작업을 하시는 분이었으나 어차피 html똑같이 쓰고 스크립트 썼으니

그게 그거겠지

다른 방법이 있을것 같긴한데 일단 좀 찾아봐야될듯....

구글에는 고정으로 입력해둔 체크박스 값 가져가는거 밖에 안나와서 개고생함 ㅠㅠ

아 그리고 주의사항.

이 경우는 하나의 값만 보내는것이기 때문에 input 태그를 th:each밖에 빼야함.

처음에는 안에 들어가있었는데 그랬더니 값도 안들어가는데다가 반복으로 다 들어감.

생각해보니 여러개 보낼때는 이 방법이 안될듯

에디터 이미지 업로드 폴더 webapp으로 변경 경로 문제, 사진 등록하면 엑박 문제 해결.

구성은 이렇게 되어있다.

업로드 경로는 기본으로 잡히기때문에 크게 손 댈것 없이

String filePath = request.getSession().getServletContext().getRealPath("image/board/");

이렇게 잡아준다. 그럼 업로드 해결됨.

사진 엑박같은 경우는 경로를 찾지 못했었는데 webconfig에서 설정으로 찾았다.

registry.addResourceHandler("/image/**")
                .addResourceLocations("/image/");

이부분을 몇번이나 수정해가면서 했는데 알고보니 Locations에서 "classpath:/image/" 이렇게 작성한게 문제...

classpath를 써주는 순간 webapp이 아닌 resources에서 찾는다.

그러니까 못찾을 수 밖에...

classpath를 제거하고 /image/만 작성해주면 경로가 자동으로 webapp/image/...로 잡히게 된다.

그리고 컨트롤러에서 

sb = new StringBuffer();
            sb.append("&bNewLine=true")
                    .append("&sFileName=").append(oldName)
                    .append("&sFileURL=").append("/image/board/").append(saveName);

이렇게 작성해준다.

http://localhost8080:  에 계속 집착했었는데

/image/board/이렇게 써도 상관없다...

엑박없이 충분히 잘 출력됨.

오히려 localhost로 잡는게 경로설정이 더 짜증나는듯....

에디터 이제 끝 ㅠ

병합 중 security 에러발생.

일단 컨트롤러에서 @Resource 지워주고 @Autowired 적용하니 500에러로 변경.

mapper를 인식 못함.

boardList를 찾아오라고 했으나 찾지 못하고 NullPointException발생.

xml내의 id와 동일하게 mapper를 바꿔주니 해결.

단 mapper에 @Repository 를 적용하면 다시 500에러.

@Mapper만 정상 작동.

insert페이지에서 에디터 출력 안되는 에러 발생.

크롬 개발자 콘솔 창에서 X-Frame-Options to 'deny' 에러가 발생.

X-Frame-Options HTTP 응답 헤더는 해당 페이지를 <frame> 또는 <iframe>,<object>에서

렌더링 할 수 있는지 여부를 나타내는데 사용한다.

사이트 내 콘텐츠들이 다른 사이트에 포함 되지 않도록 하여 ClickJacking 공격을 막기 위해 

이 헤더를 사용한다.

이 설정은 사용자가 X-Frame-Options를 지원하는 브라우저를 통해 페이지에 접근할 경우에만 

보안된다.

즉, 보안을 security에서 제공하는 기능이고 이것 때문에 외부 콘텐츠인 에디터가 출력이 되지 않았던 것이다.

오류 해결 방법으로는 SecurityConfig.java에 있는 configure(HttpSecurity httpSecurity) 메소드 내에

httpSecurity

             .and()
             .headers()
             .frameOptions().disable()

이렇게 추가해주었다.

자료가 굉장히 부족한 편이어서 이것저것 다 해봤고 view에서 

<meta http-equiv="X-Frame-Options" content="deny">

이것도 작성 해봤으나 전혀 의미없었다.

다른 블로그에서는 이 meta태그는 전혀 아무런 영향도 끼치지 않으니 쓰지 말라고 한다.

처음에 configure에 작성할때는 

httpSecurity
            .and()
            .headers()
            .addHeaderWriter(new StaticHeadersWriter("X-Content-Security-Policy", "script-src 'self'"))
            .frameOptions().disable()
            

이렇게 작성했었는데 4번째 라인인 .addHeaderWriter는 지워줘도 정상 작동한다.

이게 X-Frame-Options의 보안을 깨고 에디터를 출력해주는 것인 듯 하다.

하지만 보안을 위해 넣어둔 기능인 만큼 다른 방법이 있거나 아니면 안쓰는 쪽으로 하는게 낫지 않을지....라는 생각

에디터 이미지 경로 설정에서 에러 발생.

처음 샘플 게시판을 만들때는 webapp에서 html을 만들고 thymeleaf를 사용하며 이미지폴더도 webapp에 넣어뒀으나

팀 프로젝트 구조는 resources/img/...로 경로를 잡아주었다.

하지만 경로 설정이 전혀 안되는 오류가 발생.

계속 C:\Users\palyo\AppData\Local\Temp\tomcat-docbase.6798108938226834884.8080\.....

이 경로로만 입력이 됨.

해결방법으로는 .getRealPath("resources/board/"); 를 잡아주고 

File file = new File("src\\main\\resources\\board");

이렇게 강제적으로 경로를 다 잡아줌.

에디터에 정보출력 해주는 sb.append에는

.append("http://localhost:8080/board/")

로 board에서 이미지값을 불러오도록 설정함.

강사님께서 절대 추천하는 방식이 아니라고 하셨고 현재 정 방법이 없으니 이렇게라도 만들었다.

기본 경로가 webapp으로 잡히기때문에 webapp에 저장하는게 편한 방법이고

실제로는 보통 서버 혹은 서버 컴퓨터 내의 폴더에 저장하기 때문에 사실상 거의 안쓰는 방식이라고 생각하면 될듯하다.

어제 해결 못했던 엑박 해결.

.append의 경로에 /main이 끼어있었다...

현재 이미지폴더의 경로는 webapp/resources/photoUpload인데

.append("http://localhost:8080/main/resources/photoUpload/")로 되어있어서

경로가 src\main\webapp\main\resources\photoUpload로 잡혀서 미리보기가 안되었던 것.

해결 후

게시글 상세페이지에서 업로드한 글 확인 중

에디터에서 작성한 글은 <p>태그로 들어간다는것을 확인했고

그 결과 th:text="${}"로 출력을 해주면 태그가 달린 그상태 그대로 출력이 되는것을 확인했다.

그래서 th:utex="${}"로 변경해서 에디터에서 작성한 그대로 출력이 되도록 수정.

에디터 적용 중 사진 업로드를 하면 사진을 업로드할 서버 URL셋팅이 필요하다는 에러가 발생했다.

해결은 controller에서 다중파일 업로드를 담당하는 multiplePhotoUpload 내의

filePath를 내가 지정한 경로로 제대로 설정해 주지 않았기 때문에 발생했다.

경로를 /resources/photoUpload/로 설정하고

아래 sb.append에서 .append("http://localhost:8080/.......").append(saveName);

이 부분의 경로를 잡아주었다.

이제 사진 업로드를 누르면 프로젝트 내의 지정 폴더로 이미지가 잡히지만

에디터 미리보기에서는 엑박이 발생했다.....

인텔리제이에서 th:text="${list.bno} 로 에러발생.

An error happened during template parsing

라는 에러가 발생했고 해결방법은

인텔리제이 setting에서

*thy를 검색 후

Editor 밑의 Inspections로 들어가서 안에 모든 체크를 해제.

그렇게 하니까 밑줄도 사라지고 뷰도 출력됨.

중요한건

에러 다시 확인하려고 다시 체크하고 돌렸으나 그대로 출력.

설정문제인듯....

질문게시판 list에서 테이블 row를 눌렀을 때 에러.

tr에 onclick을 주고 이동하길 원했으나 누르면 bno값이 NumberFormatException이 발생하며 이동 불가능.

<tr th:onclick="location.href="'/detail/${board.bno}/'">

이렇게 작성했으나 bno값이 원래는 int이고 넘어가는 값은 string이라서 받아주질 못했음.

jsp에서는 넘겨줄때 자동으로 변환되기때문에 가능하다고 함.

지금은 thymeleaf로 변경중이라 html을 사용해야해서 다시 하고 있는데 html에서는 안되는듯.

html에서는 보통은 script로 bno값을 보내주고 script내에서 해결한다고 함.

일단 한번에 할 수 있는 방법도 있을 것 같아서 강사님과 찾아본 결과

<tr th:onclick="'location.href=\''+@{/detail/{bno}(bno=${board.bno})}+'\''">

이렇게 작성해서 해결.

문제없이 이동하며 detail페이지에서도 값을 정상적으로 받아와서 출력.

intelli J 내에서는 @에 붉은색 밑줄이 생기며 위와 같은 에러메시지가 뜨지만

콘솔이나 작동면에서는 문제가 없음.

이것 외에는 다른것은 script로 보내는 방법 써볼 예정.

에디터 적용 안됨.

강사님 카페에서 작년에 해두셨던 타임리프 적용과 jsp적용 샘플 받아서 실행해보니 실행가능.

현재 다른점이 없어서 찾아봐야함.

어딘가 변경하셨던것 같다고 하시는데

일단 view단이랑 husky, 2Skin은 동일.