02.07 국비학원 87일차 (업로드 이미지 삭제, AJAX-회원가입 적용 예시)

- 이미지 업로드한 게시글 삭제시 저장된 이미지도 삭제하는 기능 추가

 

▷ Service (기존 delete 메서드에 이미지 삭제 로직 추가)

▷ DAO (db에 저장된 이미지 삭제할 수 있도록 기능 추가)

▷ mapper

 

삭제 테스트용 게시글 새로 작성함 (귀여운뚜루.jpg, 뚜루.jpg 업로드)

realPath 에 각각의 이미지가 uuid 로 저장됨

게시글 목록에서 작성한 이미지 삭제 test 글을 삭제하기

db의 이미지 테이블에서 새로 올린 boradId 51 의 이미지는 삭제된 것을 확인할 수 있다.

 

 

 

• Ajax

- 클라이언트와 서버간에 데이터를 교환할 때 비동기로 데이터를 교환할 수 있도록 하는 기능
- 동기 통신은 클라이언트가 서버에 요청을 했을 때 서버의 응답이 오기전까지 클라이언트는 어떠한 동작을 할 수 없는 형태의 통신이다. (클라이언트와 서버간의 요청 - 응답이 서로 동기화 되어 있다)
- 비동기 통신은 클라이언트가 서버에 요청을 했을 때 서버의 응답이 오지 않아도 클라이언트는 다른 작업을 할 수 있는 형태의 통신이다. (클라이언트와 서버간의 요청 - 응답이 서로 동기화 되어 있지 않다)
- AJAX를 사용하면 페이지를 새로고침하지 않아도 서버에 데이터 요청을 할 수 있다.
 (전체 페이지를 서버에서 받아 처리하는 것이 아닌 일부의 데이터만 받아서 처리할 수 있게 됨)
- AJAX를 통해 서버와 데이터를 교환할 때 주로 JSON 형식의 데이터를 교환하게 된다.
- AJAX를 사용하기 위한 라이브러리로 jQuery를 사용하는 것이 대표적이다.

JSON : (JavaScript Object Notation) 자바스크립트 객체 형식의 데이터 포멧을 가지는 데이터 형식.

             키: 값 형식의 구조를 사용하여 문자열, 숫자, 불린, 리스트 등의 데이터를 표현

 

○ 회원가입창에 Ajax 적용하여 중복 아이디인지 아닌지 확인

▷ JSP (join)

jquery 가 사용된다.

▷ Servlet (UserIdCheckController 새로 생성)

JSON 사용 형식 확인

회원가입 창에 아이디를 입력하면 새로고침 하지 않아도 입력input 태그 옆에 span 태그가 만들어져 바로 유효 아이디인지 확인 가능하다 (비동기)