🌈이미지 수정 코드 수정

프로젝트에서 이미지를 넣고 불러오는 과정에서 생긴 글이다.

이미지 파일form를 통해서 서버에 파일을 넣고, db에는 파일이름만 subString으로 잘라서 저장했다.
그래서 저장하는 것 어렵지 않게 구현에 성공했다. 진짜 문제는 이미지를 불러와서 사용하는 것이였다.

메뉴 상세조회 페이지(해결 한 찍은 사진 ㅠ)

진짜 문제는 위에 사진처럼 이미지에 내가 DB에 넣은 이미지를 불러와서 화면 띄어야 했다. 그런데 내가 배운 적이 없었다고 생각이 들었지만, 일단 부딪혀 봤다, 언제나 그렇듯이 ㅋㅋ 일단 아래 코드를 보면서 설명해보겠다.

처음 코드

<tr>
			<td>${data.MNO}</td>
			<td><input type="text" id="m_Name" name="m_Name" value="${data.MNAME}"></td>
			<td>${data.CNAME}</td>
			<td><input type="text" id="m_Price" name="m_Price" value="${data.MPRICE}"></td>
			<td>
				<img id="m_Img" name="m_Img" src="${data.MIMG}">
				<input type="button" value="이미지파일선택" id="fileBtn"/>
			</td>
			<td><input type="text" id="m_Note" name="m_Note" value="${data.NOTE}"></td>
		</tr>
		</table>
		<input type="hidden" id="userNo" name="userNo" value="${sUSERNo}"/>
		<input type="hidden" id="m_File" name="m_File" value="${data.MIMG}"/>
		<input type="hidden" id="img_Cnt" name="img_Cnt" value="0"/>
		</div> <!--content end  -->
	</div>  <!--content_Area end  -->

이렇게 했더니 화면에 이미지가 나오지 않고, DB에 넣었던 파일이름이 나왔다.
그래서 다음에 바로 이미지를 불러 올 때는 경로가 필요하니 일단 경로를 찾아서 붙여보았다.

<input type="hidden" id="m_File" name="m_File" value="resources/upload/+"${data.MIMG}+"/>

정말 위에 코드처럼 작성해서 시도했고, 저 당시에는 몰랐지만, 지금은 뭐가 문제였는지 알고 있다.
그래서 어떻게 해야 불러올 수 있을까 고민을 하고 같이 공부하는 친구의 조언을 얻어서 컨트롤러에서 경로를 붙여서 데이터에 넣어주는 방법을 선택했다.

컨트롤러

@RequestMapping(value="/Menu_Edit")
	public ModelAndView Menu_Edit(
			@RequestParam HashMap<String, String> params,
			ModelAndView mav) throws Throwable{
		
		HashMap<String, String> data = ijhService.getMd(params)
			
			String path = "resources/upload/"+data.get("MIMG");
			data.put("MIMG", path);
		
		mav.addObject("data", data);
		System.out.println("수정 데이터 보자"+data);
		mav.setViewName("jh/Menu_Edit");
		
		return mav;
		
	}

//메뉴 상세보기
	@RequestMapping(value="/Menu_Dtl")
	public ModelAndView Menu_Dtl(
			@RequestParam HashMap<String, String> params,
			ModelAndView mav) throws Throwable {
		
		HashMap<String, String> data = ijhService.getMd(params);
		//사진 경로 붙여주는 곳
		
		  if(Integer.parseInt(String.valueOf(data.get("EFLAG"))) == 1) {
		  
		 String path = "resources/upload/"+data.get("MIMG"); 
                 data.put("MIMG", path);
                 }
		 
		System.out.println("상세보기 데이터"+data);
		mav.addObject("data", data);
		mav.setViewName("jh/Menu_Dtl");
		return mav;
	}

이 방법의 문제점은 이미지를 불러오는 곳 마다 앞에 경로가 붙여서 파일이 깨져서 더 이상 불러오지 못했고, 그다음 문제점은 DB에 들어가 있는데 파일 명이 바뀌어서 저장된다는 문제가 발생했다.

그때의 내가 생각한 방법은 이미지를 수정한 여부에 따른 테이블 만들어 값을 부여한 다음 값에 따른 조건 처리를 추가해서 해결 했다.

문제점들을 해결하면서 사용할 수 있는 방법이 없을까? 고민하면서 점심을 먹고 난 뒤 수업 때 배웠던 코드를 보던 중 에 이런 코드를 발견했다.

<a href="resources/upload/${data.B_FILE}" download="${fn:substring(data.B_FILE,20,len)}">

바로 내가 위에서 문법을 잘못 써서 실패했던 방법의 이유와 내가 고민했던 해결책이 바로 이 코드에 있었다 !!!
그래서 바로 실행으로 옮겼고 역시 나 모든 문제를 해결했고 코드도 수정했다.

디테일 이미지
<tr>
			<td>${data.MNO}</td>
			<td>${data.MNAME}</td>
			<td>${data.CNAME}</td>
			<td>${data.MPRICE}</td>
			<td><img id="m_Img" alt="메뉴 이미지" src="resources/upload/${data.MIMG}"></td>
			<td>${data.NOTE}</td>
		</tr>

컨트롤러

//메뉴 상세보기
	@RequestMapping(value="/Menu_Dtl")
	public ModelAndView Menu_Dtl(
			@RequestParam HashMap<String, String> params,
			ModelAndView mav) throws Throwable {
		
		HashMap<String, String> data = ijhService.getMd(params);
		//나의 과오를 잊지않기 위해서 주석으로 남겨 놓았다.	
		/*
		 * if(Integer.parseInt(String.valueOf(data.get("EFLAG"))) == 1) {
		 * 
		 * String path = "resources/upload/"+data.get("MIMG"); data.put("MIMG", path); }
		 */
		System.out.println("상세보기 데이터"+data);
		mav.addObject("data", data);
		mav.setViewName("jh/Menu_Dtl");
		return mav;
	}

🔥교훈: 시간을 두고 고민하고 노력하자, 반드시 질적변화를 위해서 양적변화가 먼저 일어나야 한다.
그리고 과거에 적은 코드는 그때 당시에 내가 최선을 다해서 작성한 코드임을 잊지말자.
아직 나는 모르는게 많고, 할줄 아는 게 많이 없는 개발자지만 절대 힘든순간이 온다고 포기는 안된다.