Apricoding

css를 적용하던 중 width가 적용이 안 되길래 보니 invalid property value 에러가 떠 있었다.

식은 분명 맞는 것 같은 데... 뭐가 잘못된 걸까 찾아보니 연산자 전후로 띄어쓰기를 안 해서 그런 거였다... 

↓

띄어쓰기를 해주니 깔끔하게 해결..!

※ calc() 함수를 사용할 때는 연산자 앞뒤로 띄어쓰기를 잘 하자!

오라클로 ERD 출력하는 방법

1. 파일 - Data Modeler - 임포트 - 데이터 딕셔너리

2. 데이터 딕셔너리 임포트 마법사에서 접속한 계정명 선택

3. 임포트하려는 스키마/데이터베이스 선택

4. 임포트하려는 객체(테이블) 선택

5. ERD 출력 완료!

📌 JSP 코드 (adminVocDeleteProcess.jsp)

<%
    String vid = request.getParameter("vid");

    VocDAO dao = new VocDAO();
    boolean result = dao.getDeleteAnswerResult(vid);
    
    if(result) {
        out.write("delete");
    } else {
        out.write("fail");
    }
    
    if(result) {
        response.sendRedirect("admin_voc_write.jsp?vid=" + vid);
    } else {
        response.sendRedirect("../errorPage.jsp");
    }
%>

• vid 파라미터를 통해 삭제할 답변 ID를 전달받음
• VocDAO의 getDeleteAnswerResult 메서드를 통해 삭제 결과를 확인
• 결과에 따라 "delete" 또는 "fail" 문자열을 반환

📌 Ajax를 이용한 답변 삭제 팝업 (JavaScript)

$("#btnAnswerDelete").click(function() {
    var con = confirm("답변을 삭제하시겠습니까?");
    
    if(con) {
        $.ajax({
            url: "adminVocDeleteProcess.jsp?vid=<%=vo.getVid()%>",
            dataType: "text",
            success: function(result) {
                if(result.trim() === "delete") {
                    alert("답변이 삭제 되었습니다.");
                    $(location).attr("href", "admin_voc_list.jsp");
                } else {
                    alert("삭제에 실패했습니다. 잠시 후 다시 진행해주세요.");
                }
            }
        });
    }
});

• confirm 팝업을 통해 삭제 여부를 확인
• Ajax를 통해 adminVocDeleteProcess.jsp에 vid 전달
• 결과값이 "delete"이면 삭제 완료 후 목록 페이지로 이동
• "fail"인 경우 삭제 실패 알림 표시

getUrlParams();

function getUrlParams() {
    var search = window.location.search;
    var params = search.substring(1).split("&");
    var result = {};

    for(var i=0; i<params.length; i++) {
        result[i] = params[i].split("=");
    } 

    return result[0][1]
}

📌 on 함수란?

• 하나의 요소에 여러 이벤트를 동시에 적용할 수 있는 jQuery 메서드

✅ 여러 요소에 동일 이벤트 적용

$("#box01, #box02").on("click", function() {
    alert($("#box01").val() + $("#box02").val());
});

• #box01, #box02 두 요소에 동시에 click 이벤트를 적용
• click 시 두 요소의 값을 합쳐서 알림(alert) 표시

✅ 여러 이벤트를 한 요소에 적용

$(selector).on({ 
    click: function() { 
        // 클릭 시 실행할 함수 
    },
    change: function() { 
        // 변경 시 실행할 함수 
    },
    mouseenter: function() { 
        // 마우스 엔터 시 실행할 함수 
    }
});

• click, change, mouseenter 등 여러 이벤트를 한 번에 지정 가능
• 각 이벤트마다 별도의 함수를 설정 가능