HTML 내에서 메뉴 클릭 이벤트를 처리

JavaScript/jQuery를 사용하여 HTML 내에서 메뉴 클릭 이벤트를 처리하고, 해당 메뉴 항목을 클릭했을 때 특정 페이지를 로드하는 작업을 수행

$(function(){
    let $section = $('section');
    
    // 메뉴 클릭 이벤트 처리 시작
    $("nav>ul>li>a").click((e) => {
        let resource = $(e.target).attr('href');
        
        switch (resource) {
            case 'login.html':
            case 'signup.html':
            case 'productlist.html':
                $section.load(resource, function(responseTxt, statusTxt, xhr) {
                    if (xhr.status === 404) {
                        alert(resource + ' 이 없습니디.');
                    } else if (xhr.status === 500) {
                        alert('서버 오류 확인하세요.');
                    }
                });
                break;
        }
        return false; // 링크 기본 동작을 막음
    });
});

코드 해석:

1. $(function() {...}):
   • 이 구문은 문서가 준비되었을 때 실행되는 jQuery의 문법이다. 페이지의 HTML 문서가 완전히 로드되면 이 코드 블록 안의 내용이 실행된다.
2. let $section = $('section');:
   • section 태그를 jQuery 객체로 선택하여 $section 변수에 저장한다. 이 변수는 이후 section 요소를 동적으로 수정하는 데 사용된다.
3. $("nav>ul>li>a").click((e) => {...}):
   • nav 태그 내의 ul > li > a 요소들에 클릭 이벤트를 설정한다. 이 링크들이 클릭되면 해당 링크에 연결된 URL(href 속성값)을 확인하고, 해당 페이지를 로드하는 작업을 수행한다.
   • e는 이벤트 객체로, 클릭된 요소와 관련된 정보들을 담고 있다.
4. let resource = $(e.target).attr('href');:
   • 클릭된 링크(a 태그)의 href 속성 값을 가져와 resource 변수에 저장한다. resource는 로드할 HTML 파일의 이름을 담고 있다.
5. switch(resource) {...}:
   • switch 문을 사용하여 resource 값에 따라 로드할 HTML 파일을 결정한다. login.html, signup.html, productlist.html 파일에 대해서만 처리하고, 이 외의 파일은 처리하지 않는다.
6. $section.load(resource, function(responseTxt, statusTxt, xhr) {...});:
   • section 요소에 resource(로드할 HTML 파일)의 내용을 삽입한다. load 메서드는 지정된 파일을 서버에서 요청하여 응답을 section에 삽입하는 방식으로 동작한다.
   • function(responseTxt, statusTxt, xhr)은 로드가 완료된 후 호출되는 콜백 함수이다. 이 함수는 로드된 내용, 상태, 응답 객체를 처리한다.
7. if (xhr.status === 404) {...}:
   • 응답 상태가 404일 경우, 즉 요청한 페이지를 찾을 수 없을 때 경고 메시지를 표시한다.
8. else if (xhr.status === 500) {...}:
   • 응답 상태가 500일 경우, 즉 서버에 문제가 있을 때 경고 메시지를 표시한다.
9. return false;:
   • 클릭 이벤트의 기본 동작인 링크 이동을 막기 위해 false를 반환한다. 이렇게 하면 페이지가 새로 로드되지 않고, section 내에 콘텐츠만 로드된다.

주요 기능:

• 메뉴 클릭 이벤트: 사용자가 메뉴 항목을 클릭하면 해당 링크에 지정된 HTML 파일(login.html, signup.html, productlist.html)이 section 요소 안에 동적으로 로드된다.
• HTTP 상태 코드 처리: 로드된 페이지의 상태 코드가 404이면 "페이지가 없음", 500이면 "서버 오류"를 사용자에게 경고로 표시한다.
• 기본 동작 방지: 링크를 클릭하더라도 페이지가 새로 로드되는 대신, section 내에서 내용이 변경된다.

이 코드는 메뉴를 클릭하면 해당 HTML 파일을 section 영역에 동적으로 로드하며, 파일이 없거나 서버에 문제가 있을 경우 적절한 오류 메시지를 표시하는 기능을 한다.