순서 1. 삭제 버튼 태그에 data-file 속성 삽입 2. 삭제 메서드 작성 3. 메서드 적용 4. 테스트 1. 삭제 버튼 태그에 data-file 속성 삽입 업로드 이미지 출력에서 이미지를 업로드하면, 태그가 추가되어 썸네일 이미지가 뷰에 출력되도록 했습니다. 새롭게 출력되는 태그들 중 이미지 삭제를 위해 만든 class 속성 값이 imgDeleteBtn인 태그가 있는데, 해당 태그에 파일 경로 데이터를 data-file 속성을 활용하여 넣었습니다. data-file 속성의 속성 값은 출력되는 파일 경로입니다. 파일 경로는 이미 UTF-8로 인코딩 해 둔 fileCallPath 변수에 저장했었기 때문에 그대로 사용했습니다. 2. 삭제 메서드 작성 미리 보기 이미지 제거 및 서버에 이미지 파일 삭제 ..
순서 1. 방향성 2. 메서드 작성 1. 방향성 이미지 삭제 기능을 수행하는 URL 매핑 메서드를 작성했습니다. 이미지 파일 삭제를 위해 가장 핵심이 되는 메서드는 File 클래스의 delete() 메서드입니다. 해당 메서드를 사용하기 위해선 File 클래스를 인스턴스화 하여 사용해야 합니다. 삭제할 파일을 대상으로 하는 File 객체를 생성하기 위해 생성자에 대상 파일의 경로인 문자열 데이터를 파라미터로 부여해야 합니다. 따라서 삭제할 대상의 파일 경로가 필요하기 때문에 URL 매핑 메서드의 파라미터로 파일 경로인 fileName을 부여했습니다. 파일 삭제를 수행하는 URL 매핑 메서드는 뷰에서 비동기 방식으로 요청을 하고 수행 결과를 반환하기 때문에 비동기 요청을 수행하도록 작성했습니다. 비동기 요청..
순서 1. 태그 추가 및 CSS 설정 추가 2. 이미지 출력 메서드 작성(showUploadImage()) 3. 사용자가 정의한 값 즉 이미지만 선택할 수 있도록 태그에 속성 추가 4. encodeURIComponent() 메서드 적용 1. 태그 추가 및 CSS 설정 추가 업로드 파일 선택 태그 바로 아래 업로드 한 이미지를 볼 수 있도록 코드를 추가했습니다. 이후 CSS 설정을 추가했는데, 따로 작성하지 않고 해당 insertProduct.jsp 파일에 바로 추가했습니다. 2. 이미지 출력 메서드 작성(showUploadImage()) AJAX success 속성의 콜백 함수에 전달받은 이미지 데이터를 활용하여 이미지가 출력되도록 코드를 작성했습니다. 작성할 코드량이 많았기 때문에 콜백 함수 내부에 작..
순서 1. 전체 방향 2. URL 매핑 메서드 작성 및 File 객체 생성 3. 'Content Type' 명시 및 데이터 파일 변환 4. 테스트 1. 전체 방향 '파일 경로(유동 경로)' + '파일 이름' 데이터를 파라미터로 전달받고, 해당 데이터에 맞는 이미지 파일을 찾아 뷰(VIEW)에 이미지 데이터를 전송했습니다. 이미지 파일을 주고받기 위한 데이터 타입은 byte 배열(byte [])로 했습니다. 이미지 파일은 바이너리 파일 범주에 들어가기 때문입니다. URL 매핑 메서드의 반환 타입은 ResponseEntity 객체를 사용했습니다. ResponseEntity의 경우 HTTP response 메시지의 header와 status를 조작할 수 있기 때문입니다. 이미지 출력 메서드 구현 방식 파라미터..
순서 1. 전체적 방향 2. MIME TYPE 데이터 얻기 3. MIME TYPE 체크 및 데이터 반환 4. 뷰(VIEW) 처리 5. 테스트 1. 전체적 방향 전달받은 파일이 이미지인지 체크하기 위해 파일의 MIME TYPE 속성을 활용했습니다. MIME TYPE이란 파일이 어떠한 종류의 파일인지에 대한 정보가 담긴 라벨(Label)입니다. Java에선 파일의 MIME TYPE을 반환해주는 메서드를 제공하는데, nio 패키지 Files 클래스의 probeContentType() 메서드입니다. probeContentType() 메서드를 호출하여 반환받은 MIME TYPE에 대한 데이터가 image인지 확인하여 image인 경우 업로드 코드가 그대로 실행되고, 아닌 경우 상태 코드 400을 뷰에 반환하도록 ..
순서 1. 이미지 정보를 객체에 저장 2. RequestEntity 리턴 3. RequestMapping produces 속성 추가 4. AJAX success 속성 추가(뷰) 5. 테스트 1. 이미지 정보를 객체에 저장 이미지 한 개만을 처리하는 경우 AttachImageVO를 인스턴스화 하여 각 정보를 바로 담으면 됩니다. 하지만 제 프로젝트에서 업로드를 수행하는 URL 매핑 메서드의 경우 여러 개의 이미지 파일을 전달받고 처리할 수 있도록 설계되어 있습니다. 따라서 ArrayList 자료 구조를 활용했습니다. for 문 밖 상단에 List 타입의 참조 변수를 선언하고 ArrayList 생성자로 초기화합니다. /* 이미저 정보 담는 객체 */ List list = new ArrayList(); for..
순서 1. 고려사항 2. AttachImageVO 3. Jackson-databind 라이브러리 추가 1. 고려사항 왜 정보를 보내는가? 업로드한 이미지 정보를 상품 등록 과정에서 함께 DB에 저장하기 위해서입니다. 또한 업로드한 이미지를 사용자가 미리 볼 수 있도록 하기 위함입니다. 어떤 정보를 보낼 것인가? DB에 업로드한 이미지 정보를 저장한다는 것은 결국 이미지를 화면에 출력하기 위함입니다. 따라서 이미지를 화면에 출력시키기 위해 이미지가 저장된 경로와 파일의 이름이 필요합니다. 뷰로 전송할 이미지 정보는 곧 DB에 저장될 데이터이기 때문에 어떤 방식으로 보관할 것인지 정해야 합니다. 저는 파일 경로와 파일 이름 데이터를 따로 보관 및 관리하는 방법으로 진행했습니다. 어떤 방식으로 뷰에 전송할 것..
순서 1. 비율 축소 적용 2. 이미지 생성 및 저장(Thumbnailator 라이브러리 사용) 1. 비율 축소 적용 원본 이미지 크기를 개발자가 지정한 비율에 따라 축소되도록 보완했습니다. 먼저 bo_image를 선언 및 초기화한 코드 아래에 비율을 저장할 변수를 선언합니다. 비율은 소수점 값으로도 지정할 수 있도록 double 타입으로 했습니다. double ratio = 3; 원본 이미지 비율을 지정 값으로 줄이기 위해선 원본 이미지 너비와 높이를 위에서 지정한 비율로 나누면 됩니다. 해당 작업을 위해 원본 이미지의 너비와 높이를 알아내야 하는데, BufferedImage 클래스의 getWidth(), getHeight() 메서드를 사용하면 됩니다. 원본 이미지인 bo_image 객체에 getWid..
썸네일 이미지 생성 및 저장 이미지가 여러 개인 경우, 특히 저장된 이미지가 용량이 큰 경우엔 홈페이지를 운영하는 사람과 홈페이지를 사용하는 사람 모두에게 부담이 됩니다. 이미지를 많이 호출하게 되면 트래픽량을 많이 소모하는 원인이 됩니다. 서버를 대여해서 해당 홈페이지를 운영하는 입장에선 트래픽량에 따라 지불해야 되는 비용이 달라지기 때문에 민감한 사항입니다. 해당 홈페이지를 사용하는 이용자 입장에선 데스크톱, 노트북으로 이용하는 경우엔 부담이 덜하지만, 휴대폰을 통해 특히 와이파이를 사용하지 않고 이미지를 많이 호출하는 페이지로 이동할 경우 로딩 시간과 데이터 소모량이 많게 됩니다. 따라서 원본 이미지를 보여주는 것이 아닌 원본보다 크기를 줄인 이미지 즉 썸네일을 보여준다면, 위의 문제점을 다소 보완..
