DAY-75 Spring 라이브러리, ajax, 프로필 이미지 변경

💻2022-06-20

❗ 수업을 듣고, 개인이 공부한 내용을 적은 것 이기에 오류가 많을 수도 있음

1️⃣ Jackson Databind 라이브러리

• 스프링에서 ajax 이용 시 gson 대신 jackson databind 라이브러리 이용
• jackson databind는 string , list, 객체 타입 모든 데이터를 전달 할 수 있다.

HomeController.java

• dto와 list 두 개를 반환해야 한다 / 다른 종류의 list 2개를 한번에 반환 해야 하는 경우
• 반환 값은 딱 하나 여야 한다 -> dto와 list를 담는 무언가가 있어야 한다 → HashMap 이용

output2.jsp

• HomeController에서 넘어온 data는 객체 형태(json)이며, list와 dto 값이 들어있다.

2️⃣ 동적으로 생성된 요소에 이벤트 주기(삭제)

HomeController.java

output2.jsp

• 페이지가 로드 될 때는 deleteBtn이 존재하지 않아서(ajax로 생성했기에) 이벤트가 발생하지 않는다 → 부모의 요소인 tbody에 이벤트를 걸어준다

3️⃣ Controller 생성

1. Controller 어노테이션 붙여주기
2. servelt-context.xml 에서 component-scan의 범위를 바꿔주기

🔔 기능별 Mapping 하는 법

MemberController

• jsp의 .mem .sh 이런 작업들을 스프링에서는 Mapping으로 명시해준다

4️⃣ 이미지 미리 보기 (FileReader 이용)

• FileReader : javascript에서 동기 방식으로 이미지 업로드 구현하는 경우,선택한 이미지를 사용자 화면에 미리 보여줘야 할 때 사용
• 사용자가 profile_image 파일 태그를 이용해 프로필 사진(이미지)을 선택했을 때, profile_default 이미지 태그에 선택된 사진을 띄워주는 작업
• 제로초 블로그

signup.jsp

1. FileReader 생성 후, 사용자가 선택한 이미지의 데이터 값을 FileReader에 넣어준다.
2. FileReader가 새로 담겼을 때 이미지의 주소 값을 새롭게 변경 해준다

5️⃣ 여러 개의 파일 올리기(commons 라이브러리)

• commons fileupload 라이브러리 이용
• servlet-context.xml에 bean 생성 해야 한다

• 이때, id는 반드시 multipartResolver 이여야 한다

❗org.springframework.validation.BeanPropertyBindingResult 에러 발생

signup.jsp

• id가 profile_image인 input의 name이 “profile_image”이다

MemberController.java

• 현재 MemberDTO의 변수 중 profile_image가 존재한다. → Type mismatch에러 발생
• 즉 MultipartFile를 사용할 때는 DTO에 존재하는 변수명을 사용 해선 안된다.

💡 해결 방법

singup.jsp에서 id가 profile_image인 input의 name을 다른 이름 ex) file로 변경 후 MemberController.java에서 값을 받는 인자도 file로 변경을 해준다

signup.jsp

MemberController.java