85일차(Thymeleaf, 다중 조건)

Thymeleaf

spring 실행할 때 서버에서 에레 메세지를 띄울 때 자주 보이는게 Thymeleaf 어쩌구이다.

그래서 도대체 Thymeleaf가 뭐길래 얘가 자꾸 뜨는걸까 하고 검색해봤다.

 

타임리프는 흔히 View Template(뷰 템플릿)이라고 부른다.

뷰 템플릿은 컨트롤러가 전달하는 데이터를 이용하여 동적으로 화면을 구성할 수 있게 해준다.

 

타임리프thymeleaf 는 자바 라이브러리이며,

웹과 웹이 아닌 환경 양쪽에서 텍스트, HTML, XML, Javascript, CSS

그리고 텍스트를 생성할 수 있는 템플릿 엔진이다.

 

웹 애플리케이션에서 뷰View 계층 에 보다 적합하지만, 오프라인 환경에서 많은 형태로 처리가 가능하다.

스프링 MVC와의 통합 모듈을 제공하며, 애플리케이션에서 JSP로 만든 기능들을 완전히 대체할 수 있다.

 

 

* JSP : HTML코드에 Java 코드를 넣어 동적인 웹 페이지를 생성하는 웹 어플리케이션 도구

 

 

[Spring Boot] 타임리프(Thymeleaf)란?

THYMELEAF_TEMPLATE_ENGINE.md

JSP란?

 

---

협업

나는 issue에 기능 추가할 때나 오류로 인해 문제가 생겨 내가 해결하지 못할 때,

기능을 다른것으로 제안할 때 등등 issue를 많이 활용하는데

 

오늘 느낀 것이 내가 오류를 발견해서 올리면 내가 해결하고 끝나고

내가 기능 제안이나 팀 활동 하는 것에 대해서 Github에 올리면 시간이 꽤 지난 후에 보시는 것 같다.

슬랙에 질문을 드리면 답이 느리거나 답을 안하고 넘어가는 경우가 있어서 어떻게 해야할지 모르겠다.

 

오늘도 issue로 내가 해야하는 기능에 대해 어떤 방법으로 할지 issue에 올렸는데 빨리 진행하려면 

바로 물어보는게 나을 것 같아서 게더에서 말을 하려고 했는데 다들 안계셨다.

이 문제에 대해서 얘기를 드렸더니 슬랙을 자주 확인한다고 하셨다. 

 

 

---

조건문

주소 입력 안했을 때 default 값으로 무언가를 입력해놓을지

아니면 그냥 내버려둘까에 대해 고민하다가 조건문을 만들게 되었다.

 

사진을 등록 안하거나 글을 작성하지 않았을 때

alert창을 띄우고 빈 값이 아닐 경우 등록하기로 넘어가게 코드로 작성했다.

 

주소를 입력하지 않았을 때는 처음에만 alert창을 띄우고

두번째 등록하기 버튼을 클릭했을 경우엔 그냥 넘어가게 했다.

 

여기서 문제가 난게 주소를 입력하지 않았을 때 alert 창을 띄우고

count 변수에 1을 추가한 후 count가 1이 되면 자동으로 등록이 되도록 했는데 

사진을 등록안하거나 글을 작성하지 않았을 때 alert창을 띄워야 하는데 그냥 등록하는 걸로 되었다.

 

그래서 나는 다중 조건을 작성하게 되었다.

or은 || 로 작성하고 and는 &&로 작성하는 것을 알게 되어서

주소 입력을 안하면 alert창을 띄우는 것이 아니라

 

if 사진 등록을 하지 않거나 || 게시글을 작성하지 않았을 시 → alert 창 

else {

사진 등록을 하고 && 게시글을 작성하고 && 주소 입력을 안했을 시 → alert 창 , count +=1

사진 등록을 하고 && 게시글을 작성하고 && 주소 입력을 안함 && count == 2 → saveUpload()

게시글 작성을 하고 && 주소 입력하고 && 사진 업로드 안했을 시 → alert 창

주소 입력을 하고 && 사진 등록을 하고 && 게시글 작성을 안했을 시  → alert 창

}

이런식으로 작성했다.

 

 

그런데 주소 미 입력 시 주소 alert 창이 뜨고 저장이 되는 현상이 발생했다.

 

 

 

 

이유를 몰라서 고민하다가 주소는 미 입력해도 저장을 할 수 있기 때문에

alert 창 대신에 confirm을 이용하기로 했다.

 

 

confirm을 이용해서 주소 입력을 원할 경우 취소버튼을 누르면 그 화면으로 유지되어야 하는데

자꾸 업로드가 되어서 아래 else 문이 문제일 것 같아 수정했다.

            if ( ($("#writerArticle").val().length != 0) && ($("#addressSearch").val().length !=0) && ($("#product_image")[0].files[0] == undefined) ) {
                alert("사진 업로드가 필요해요! 😆")
            } else { saveArticle() }

            if ( ($("#addressSearch").val().length !=0) && ($("#product_image")[0].files[0] != undefined) && $("#writerArticle").val().length == 0) {
                alert("글 작성이 필요해요! 🐕")
            } else { saveArticle() }

 

else문을 없애고 if문으로 완벽하게 작성할 경우에만 업로드 되는 함수를 실행하게 했다.

 

if ( ($("#writerArticle").val().length != 0) && ($("#addressSearch").val().length !=0) && ($("#product_image")[0].files[0] == undefined) ) {
    alert("사진 업로드가 필요해요! 😆")
}
if ( ($("#addressSearch").val().length !=0) && ($("#product_image")[0].files[0] != undefined) && $("#writerArticle").val().length == 0) {
    alert("글 작성이 필요해요! 🐕")
}
if (($("#writerArticle").val().length != 0) && ($("#addressSearch").val().length !=0) && ($("#product_image")[0].files[0] != undefined)) { saveArticle() }

 

 

그랬더니 내가 의도한 대로 실행이 되었다.

 

 

 

 

전체 코드

 

function checkUpload() {
        if ( ($("#product_image")[0].files[0] == undefined) || ($("#writerArticle").val().length == 0) ) {
            alert("사진 혹은 글 작성은 필수입니다 😭")
        } else {
            // 주소 입력 확인
            if ( ($("#product_image")[0].files[0] != undefined) && ($("#writerArticle").val().length != 0) && ($("#addressSearch").val().length ==0) ) {
                let addressConfirm = confirm("주소 입력 정말 안하실 건가요??🥺");
                if (addressConfirm) {
                    saveArticle()
                }
                else {
                    alert('주소 입력을 위해 업로드 작성 화면으로 돌아갑니다.');
                }
            }

            if ( ($("#writerArticle").val().length != 0) && ($("#addressSearch").val().length !=0) && ($("#product_image")[0].files[0] == undefined) ) {
                alert("사진 업로드가 필요해요! 😆")
            }
            if ( ($("#addressSearch").val().length !=0) && ($("#product_image")[0].files[0] != undefined) && $("#writerArticle").val().length == 0) {
                alert("글 작성이 필요해요! 🐕")
            }
            if (($("#writerArticle").val().length != 0) && ($("#addressSearch").val().length !=0) && ($("#product_image")[0].files[0] != undefined)) { saveArticle() }
        }
    }