새창으로 열기

구글링해서 가져왔다. 몇개는 안 먹히는것 같은데 더 알아봐아 할듯

<a href="/user/profileUpdateForm"
       onclick="window.open(this.href, '_blank', 'width=1200,height=900, toolbars=no, 
                scrollbars=no, resizable=no'); return false;">
       <div class="user-img">
            <img src="${user.photo == null ? '/images/default_profile.png' : user.photo}" 
                 class="rounded" alt="Cinque Terre" style="max-width: 80px;">
       </div>
</a>

특정 게시물을 삭제하기

여러개의 게시글이 존재할때 삭제버튼으로 특정한 게시글만 삭제하기 위해서는 게시글의 id가 필요하다
특히 모달을 이용해서 한번더 삭제 확인을 할 경우 해당 id 를 저장할곳이 필요했다.
왜냐하면 jstl의 forEach 를 이용해서 id를 모달에 전달해야 했는데 코드중복을 피하기 위해 반복문 밖에 모달을 두면 모달버튼에 id를 넣어서 전달해야 했다.

예를 들어 아래와 같은 삭제 버튼에 id를 전달해줘야 한다.

<button type="button"
    class="btn btn-danger btn-sm mb-2" data-bs-toggle="modal" data-bs-target="#dModal"
       style="float: right;" onclick="event.preventDefault();
       deleteBtn(event, ${rDto.resumeId});">이력서 삭제
</button>

위 코드는 <c:forEach items="${rDtos}" var="rDto"> 안에 존재하고 rDto.resumeId를 통해서 게시글 id를 함수에 전달한다.

자바스크립트에서 해당 id를 전역변수에 저장 시켰다.

let deleteId ;
    function deleteBtn(event, resumeId) {
       event.stopPropagation();
       deleteId = resumeId;
	}

열린 모달창에서 있는 삭제 버튼은 deleteResume() 를 실행시킨다.

<button type="button" onclick="deleteResume()"
   class="btn btn-primary">삭제하기
</button>

deleteResume() 함수는

            function deleteResume() {
                $.ajax({
                    type: "delete",
                    url: "/resume/" + deleteId +"/delete",
                    dataType: "json"
                }).done((res) => { // 20X 일때
                    alert(res.msg);
                    location.href = "/user/resume";
                }).fail((err) => { // 40X, 50X 일때
                    alert(err.responseJSON.msg);
                });
            }

전역변수 deleteId 를 가져와서 해당 delete 요청을 보낸다.

상단 진행바

몇가지 코드만 추가하면 된다.
스타일

.header {
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
    background-color: #F1F1F1;
}

.progress-container {
    width: 100%;
    height: 8px;
    background: #CCCCCC;
}

.progress-container .progress-bar {
    width: 0;
    height: 8px;
    background: #4CAF50;
}

body

        <div class="header">
            <div class="progress-container">
                <div class="progress-bar progress-bar-striped progress-bar-animated"></div>
            </div>
        </div>

자바스크립트

        window.onscroll = function () {
            progressBar()
        };

        function progressBar() {
            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            var scrolled = (winScroll / height) * 100;
            document.getElementsByClassName("progress-bar")[0].style.width = scrolled + "%";
        }

창닫고 부모창 새로고침

                    window.close();
                    window.opener.location.reload();