각 페이지의 title을 변경해야 하는 경우 해결 방법

예시 이미지

 

예시 이미지

 
 
Java로 개발한 사이트인데, 개인적으로 역대급으로 접근성 마크 따기 힘들었던 힘들었던 사이트였다...
내가 다음에 이런 문제를 맞닥뜨렸을 때, 잊을까봐 정리해두는 중이다.
 
 

 
 
쉽게 말하자면, 저기 title 부분을 페이지마다 개별적으로 변경하라는 것이다.
'국가수리과학연구소'는 연구소명이고, 그 뒤로는 1depth | 2depth | 탭 메뉴 이런 순서로 나와야 하는 것인데,
사실 이건 개발 영역이라 개발자 분께 해결 요청을 드렸으나,
개발 문제로 인해 페이지 별로 저걸 뿌려줄 수 없다는 답변을 받았다. 사실 잘 알아듣지 못했다.
 
 
리더님과 머리를 맞대고 나온 코드가 아래와 같다.
리더님께서 생각해낸 잔머리 코드... 저를 살리셨습니다 +_+
 
각 페이지에 공통적으로 있는 요소들을 찾아 변수에 담고, 그걸 title에 넣도록 했다.
탭 메뉴가 있는 페이지도 있고, 없는 페이지도 있어서 아주 애를 먹었다. 
또 본인 인증 페이지에서는 단계별로 세부적인 title을 담아야 해서 잔머리 잘 쓰면서 규칙을 찾는 것이 아주 중요했다.
 
여기는 신기하게 요소들이 변수에 잘 담기지도 않았다.
아직도 원인은 제대로 파악하지 못했는데, console로 일일이 찍어가면서 찾는 것(?)의 중요성을 여기서 더 뼈저리게 깨달았다.
 
 

const titleTxt = () => {
	$(window).on('load', function () { 

		setTimeout(function () {
		    const homepageTitle = $('.header_logoeng h1 a img').attr('alt');
		    let pageTitle = homepageTitle;
		    
		    const depth1Element = $('.location .home').next('div').find('> a > span');
		    if (depth1Element.length > 0) {
		        const depth1Title = depth1Element.text();
		        pageTitle += ' | ' + depth1Title;
		    }
		   
		    var depth2Element = $('.location .home').next('div').next('div').find('> a > span');
		    if (depth2Element.length > 0) {
		        var depth2Title = depth2Element.text();
		        pageTitle += ' | ' + depth2Title;
				 
		    }

		    const depth3Element = $('.location .home').next('div').next('div').next('div').find('> a > span');
		    if (depth3Element.length > 0) {
		        const depth3Title = depth3Element.text();
		        pageTitle += ' | ' + depth3Title;
		    } 
		    
		    // 예외처리
		    // 장비공동활용 현황
		   if (depth2Element.length > 0 ) {
			   if ($('.reserve_step').length > 0) {
				   var stepText = $('.reserve_step .step.on > p').text();
				   pageTitle += ' | ' + '예약신청 ' + stepText;
			   }
		   }
		   
		   const tabs = $('.nav-pills');
		   if (tabs.length > 0) {
			   $('.nav-pills > li.active > a > span').remove();
			   const text = $('.nav-pills > li.active > a').text();
			   const result = text.trim();
			   
			   if(!pageTitle.includes(result)) {
				   pageTitle += ' | ' + $('.nav-pills > li.active > a').text();
			   }
		   }
		   
		   // 알림마당 > 문의사항 > QnA > 본인 인증 후
		   if (depth2Element.length > 0 ) {
			   if ($('.qa_wrap').length > 0) {
				   pageTitle += ' | ' + '개인정보 수집 및 이용 안내 및 등록화면'
			   }
		   }
		   
		   // 아코디언 메뉴
		   const accordions = $('.right_nav.panel-group');
		   if (accordions.length > 0) {
			   pageTitle += ' | ' + $('.panel-group .panel-collapse .panel-body > ul > li.active > a').text();
		   }
		   
		   // 게시판 상세(뷰) 페이지
		   if(depth2Element.length > 0) {
				 if($('.board_body').length > 0) {
					 const boardTitle = $('.board_header > h2').text();
					 pageTitle += ' | ' + boardTitle + '상세 페이지';
				 }
		   }
		   
		   $('title').text(pageTitle);
		   
		}, 100)
	    
	});
}

$(function () {
	//play
	titleTxt();
})

 
 
역대급으로 효율적이지 못한 야매 코드이지만, 이런 야매 방법이 업무에 도움이 되기도 합디다..?