[개발잡담] 220719 개발 일기

프로젝트 진행 과정 메모

진행하고자 한 것 게시판 글 등록시 메뉴를 이중 셀렉트문으로 설정할 예정
(대분류 셀렉트박스 값를 선택함에 따라 소분류 셀렉트박스에 뜨는 후보값도 달라짐)
옵션값은 미리 만들어둔 DB에서 받아와서 반영
처음 구상 A셀렉트 박스 값을 먼저 DB에서 받아와서 뿌려주고 자바스크립트 onchange를 통해
A셀렉트 값이 변경될때마다 함수를 실행해서 B 셀렉트 옵션을 뿌려주도록 할 예정
쿼리문은 WHERE절로 #{A셀렉트값} 해주면 쉽게 끌어올수 있을것이라 예상
진행 과정 (7/18~19)

첫번째 셀렉트박스 작업때 사용했던 LIST<HASHMAP> 방식을
두번째 셀렉트박스에서도 사용해 매핑 및 컨트롤러 까지의 모델작업 진행했으나,
더블셀렉트문을 사용하기 위해서는 자바스크립트 사용이 필수적이었고
AJAX로 끌어오기에는 MAP 방식이 다소 번거로운 점을 확인함.
생각해보니 중복값이 필요없고, 상위 셀렉트박스로 1개의 옵션만 받아 하위값를 출력할 것이기에
LIST<DTO>형식을 사용하는것이 좋지 않을까 떠올랐고
그렇게 한다면 조건은 String으로만 받아넣어주면 되기에 훨씬 간편한 방법이겠다 생각함
따라 기존설정한 매퍼 포함 DAO, SERVICE, CONTROLLER 전면 수정

매퍼 수정 전

<select  id="selectList2"  parameterType="java.util.HashMap"  resultMap="subResult">

매퍼 수정 후

<select  id="selectsubList2"  parameterType="subDTO"  resultMap="subResult">

DAO 수정 전

public List<subDTO> selectsubList(HashMap<String, String> codeList) throws  DataAccessException

DAO 수정 후

public List<subDTO> selectsubList2(String main_code) throws  DataAccessException

service,controller는 그대로 끌어오는 과정이라 생략

리스트형식으로 컨트롤러까지 작성한 후 프론트단 수정

프론트단 셀렉트문

<select  name="cate_m"  id="cate_m"  onchange="categoryChange(this)">

스크립트 단

<script>
	function categoryChange(e) {
	/* console.log("테스트");
	alert("테스트"); */

	var _main_code = $('#cate_m').val();
	alert(_main_code);

	$.ajax({
		type: 'post',
		url: '/select/sub.do',
		data: {main_code : _main_code},
		success: function(result){
		
		/* alert('테스트'); */

		}
	})
};
	
	...

하위 셀렉트문을 DB로 받아오기전, 일단 상위 셀렉트문을 선택할때 하위옵션으로 넘어가는 작업은 잘 실행되는지를 먼저 체크해봄
그런데 이클립스 콘솔창에는 아무런 에러가 뜨지 않으나
대분류를 바꿔도 수기입력해둔 소분류값이 아무런 변화가 없는 현상을 보임
→ 웹 소스창 띄워 확인한 결과 AJAX 404에러. 404의 경우라면 맵핑 문제일 가능성이 높을듯 보여 컨트롤러와 재확인 하였으나 변화 없음.
컨트롤러에서 @ResponseBody 정상적으로 붙여져있는 상태라 컨트롤러 매핑문제는 아니라 판단
타입문제를 전송하는쪽, 받는쪽 모두 post타입으로만 단일화 시켰으나 변화 없음.

우선 어느 흐름에서 오류가 나는것인지 찾는게 우선일듯 하여

onclick 실행여부
ajax 넘어가기 전
컨트롤러 넘어온 후
컨트롤러에서 쿼리값 실행 후
다시 프론트로 넘어온 후 총 5단계 순서로 나누어 테스트를 해봄

onclick 실행 뒤 alert(“테스트”) 정상 실행됨
따라 자바스크립트의 실행문제는 아니어 2번 시도. 이 때 ajax succes후 테스트 부분 출력 안되는것 발견
확인결과 컨트롤러에서 이동할때는 미리 한 뎁스를 거치도록 설정해둔 것을 생각하지 않고
단순하게 uri=리퀘스트맵핑을 똑같이 맞추두었고, 일전에 맵핑체크할때도 오탈자만 확인하면서 놓친 기초적인 실수였다
→ url 값을 ${contextPath}/select/sub.do로 변경해 오류 수정. 컨트롤러에 정상적으로 넘어가는것 확인함

그러나 이번에는 알림창은 정상적으로 발생하나 알림창에 원하는 값이 정상적으로 출력되지 않는 문제가 발생
’’ 라는 공백문장만 출력되었다
쿼리~서비스단계에서 값을 못 가지고오는것인지 프론트단에서 전달된 값을 출력하지 못하는것인지 확인하기위해

컨트롤러에서 값을 콘솔에 테스트 출력
프론트단에서 값을 alert 테스트 출력 확인결과 컨트롤러 단에서부터 출력이 되지 않았고 값 추출에 이상이 있음을 확인

다시 맵퍼부터 차례로 확인하고 프론트단까지 체크해보았지만
코드상의 흐름에는 문제가 없었고 변수 지정을 잘못해주었나 확인해보았음
문제는 두번째 셀렉트박스의 쿼리 리턴타입을 MAP에서 LIST로 변경할때 FK인 code(컬럼명)을 입력하도록 설정해두었는데, 첫번째 셀렉트박스 선택값을 표현명 및 value값을 모두 name(컬럼명)으로 받아와 생긴 문제
컬럼값을 입력하고 있으니 내용이 뜨지 않는게 너무나 당연했다
이부분은 HTML만 수정하면 바로 해결될것같다.

IM