에스알닷컴

[BoostCourse] 프로젝트 6. 예약관리 시스템: 한줄평 (BE)

 - 이전 글

2020/01/02 - [Edu/BoostCourse Web Project] - [부스트코스] 프로젝트 6. 예약관리 시스템: 한줄평 등록

 - 다음 글

2020/03/01 - [Edu/BoostCourse Web Project] - [부스트코스] 프로젝트6. 예약관리 시스템: 한줄평 (FE) 제출 [PASS & Feedback]

수정 할 내용 & 개선해야할 내용을 생각해내기 위한 포스팅

 - 반성 및 조금 더 생각해보기

 1. 아래 내용 보면 코드 작성 후, 오타 확인 ( 내용이 조금 많아졌다고, 기본적인 내용에 소홀한 듯 )

 2. 사용자가 많을 경우, 다수의 사용자가 동일한 파일명을 올릴 경우의 예외를 생각했으나 적용하지 않은점

 3. 기능이 돌아간다고, 간단한 예제 수준의 코드에서 개선하지 않은점

 4. 열심히 주석 했으나 javadoc으로 만들 수도 없는 형식으로 되어 있어서, 나만 쓰는 프로그램이 된다는 점

BE_PJT F-1. 예약관리 시스템: 한줄평

수정한 내용

[ FileController ]

 - 더 생각해서 불필요한 메서드 줄이기 ( 수정중 )

 - 각 메서드의 주석 작성시, 변경사항을 수정하지 않음

 - @PathVariable 제대로 알고 쓰기

 - 변수 표기 방식 통일하기

 - @PathVariable 제대로 알고 쓰기

[ ReservationServiceImpl ]

 - MultipartFile 클래스에 대해서 좀 보고 사용하기

[ FileUtils (파일 관련 로직 모아 놓은 클래스) ]

 - 경로 사용시 OS 생각해서 공통으로 사용할수 있는 방법을 찾아봤어야 했다.

 - 다수의 사용자가 이용할 경우 동일한 시간에 같은 파일을 올릴 경우에도 다른 파일명을 만들 수 있도록 하기

 ( UUID를 사용하다가 시간_파일명으로 수정했는데, 다시 생각해 볼 것)

 * Javadoc 만들어보기

2020/03/01 - [Edu/BoostCourse - Web] - [JavaDocs] Javadoc 문서 만들기

 * 업로드 파일명 중복처리

[이미지 다운로드 시 브라우저 내에 Console 오류]

 - 다운로드 구현 시 파일 다운로드는 정상적으로 되는데 브라우저 내에 콘솔에 오류가 뜸

https://stackoverflow.com/questions/6587393/resource-interpreted-as-document-but-transferred-with-mime-type-application-zip

[해결방안 1]

HTML5의 경우 <a> 태그 내에 download 속성을 추가

 * 단 chrome외에 브라우저는 정상작동이 되지 않음

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download

[현상]

Request processing failed; nested exception is org.springframework.web.multipart.MultipartException: Current request is not a multipart request

[기존 업로드 구현 방식]

 - multipartResolver를 bean으로 등록 CommonsMultipartResolver를 활용하여 파일 업로드 기능 구현

 - Ajax 호출로 파일 데이터를 전송

[문제점]

 - 기존에 사용하던 ajax 공통 호출 함수는 header를 각 호출 장소에서 설정하도록 작성

 - 파일 업로드를 위해 Content-Type에 multipart/form-data를 설정하여 호출했으나 오류발생

[해결방식]

 - 기본적인 Ajax 코드로 테스트하여 정상적인 기능 확인

 - setRequestHeader를 제거한 뒤 기존의 ajax 공통 함수 호출 테스트

[원인]

 - multipart/form-data로 데이터 전송 시 jquery에서는 contentType을 false로 설정하여 작성되는 글들을 확인

 - 왜 contentType을 multipart/form-data로 설정하면 안되는지 검색

[데이터 전송 실패일 때 Request Header]

[데이터 전송 성공일 때 Request Header]

 * Content-Type을 확인해보면 boundary의 유무 차이 확인할 수 있다.
 * multipart/form-data를 사용할 때는 Ajax 호출 시 contentType을 설정하지 않아야
정상적으로 multipart/form-data; boundary ...로 파일 이 전송된다.

https://repacat.tistory.com/38

[오류 내용 확인]

[2020-02-17 16:03:17.193] DEBUG [o.s.w.s.DispatcherServlet.initMultipartResolver:515] - Unable to locate MultipartResolver with name 'multipartResolver': no multipart request handling provided

[내용]

 - 파일업로드 기능 구현중에 테스트 프로젝트를 만들어 파일 업로드 기능을 구현한 뒤 부스트코스에 적용할 때 위와 같은 오류 발생

[원인]

 - WebMvcContextConfiguration 클래스에 multipartResolver bean으로 등록할 때 multiPartResolver 메서드로 등록

[해결책]

 - multipartResolver 메서드로 수정

참고

https://www.baeldung.com/spring-file-upload

[사전 정보]

 - View에서 파일을 선택할 수 있는 방법

 - 썸네일 이미지를 어떻게 보여줄 것인가

 - 파일을 업로드 할 때 서버에서 해야할 것들, 필요한 라이브러리

[파일 업로드 프로토타입 만들기]

 - 파일 선택 후 submit할 때, 파일 업로드가 될 수 있도록 프로토타입을 만듦

 - 일반적으로는 화면에 썸네일 이미지를 노출하기 위해서 비동기로 파일 업로드 한 뒤, 응답 값으로 이미지 경로를 받아 처리한다고 한다.

 - 하지만 여기서는 파일 선택 시 script를 이용하여 createObjectURL를 활용하여 썸네일 이미지를 노출하도록 한다.

파일 업로드 HTML 폼 작성

파일 업로드 핸들링 JS 작성

파일 업로드 Controller

[이미지 파일 외부 경로 설정 방법]

 1. 톰캣 사용할 경우 Server.xml 내에 <Context> 태그 사용하여 프로젝트 외부 폴더를 읽을 수 있도록 하기

 2. addResourceHandlers()에 registry에서 프로젝트 외부 파일 경로를 읽을 수 있도록 하기

 3. 이미지 호출 URL에 대한 Controller를 만들어 사용

[파일 다운로드 프로토타입 만들기]

 - View 구성

  1. href를 이용하여 '/naver/download?fileName=${파일명 }' url로 controller 호출

 - Controller

 1. 파일명, 파일 전체 경로, 파일 타입, 파일 용량 등을 response에 설정

 2. OutputStream을 통해 파일 쓰기

[프로젝트에 적용해야 할 부분]

 - 파일 업로드 시 DB에 파일 경로 저장

 - 업로드 시 thumbnail은 JS 사용

 - 업로드 후 내용 볼 때 섬네일 이미지는 한줄평 이미지의 id 값으로 이미지 호출 controller를 활용하여 thumbnail 출력

 - 다운로드 시 한줄평 이미지의 id 값으로 경로를 가져와 다운로드 작성

[BoostCourse] 프로젝트 6. 예약관리 시스템: 한줄평 등록

 - 다음 글

2020/02/29 - [Edu/BoostCourse Web Project] - [부스트코스] 프로젝트6. 예약관리 시스템: 한줄평 (BE) 제출 [PASS & Feedback]

2020/03/01 - [Edu/BoostCourse Web Project] - [부스트코스] 프로젝트6. 예약관리 시스템: 한줄평 (FE) 제출 [PASS & Feedback]

 - 총 정리

Summery Contents

 * 이 글은 웹 프로그래밍 과정을 진행하면서 "개인적인" 생각을 정리한 글입니다.
 * 잘못된 부분, 이해가 안 되는 부분 또는 더 좋은 생각이 있으신 분들은 댓글 남겨주세요.

프로젝트 6 기본 기능 다이어그램

 프로젝트 6 기능 구현 후, 다중 파일로 기능 변경

프로젝트 6 내용은 아니나 흐름상 필요해보이는 기능 

시연 영상

개선해야 할 내용

 - 슬라이드 구현한 내용으로 기능은 작동하나 스크립트 오류 발생

[BoostCourse] 프로젝트 5. 예약관리 시스템: 예약하기 (FE)

 - 이전 글

 - [부스트코스] 프로젝트 5. 예약관리 시스템: 예약하기 분석 및 설계
 - [부스트코스] 프로젝트 5. 예약관리 시스템: 예약하기(BE) 제출 [PASS & Feedback]

피드백

개선할 사항

 - 공통 API 호출 함수인 getAjax()의 함수명 수정 ->  callAjax()
 - 소스코드 구조 개선 필요 (단일 책임의 원칙:SRP)
 - 의도에 맞는 변수명 개선 (이름 지정 규칙: JavaScript Naming Conventions)
 - 특정 상황에 사용할 수 있는 정규표현식이 아닌 포괄적으로 사용할 수 있도록 하기

시연 영상

- 기본적으로 예약하기, 예약확인하기 화면이 영상에 보여야 함.
- 예약하기시 -, + 버튼을 클릭해서 숫자가 변경되는 부분이 영상에 보여야 함.
- 예매자 정보를 입력하고 총매수가 변경되는 것이 영상에 보여야 함.
- 연락처 정보에 숫자와 숫자가 아닌 문자를 입력하는 과정이 영상에 보여야 함.
- 약관의 접기/보기를 클릭해서 변경되는 화면이 영상에 보여야 함.
- 동의버튼을 클릭해서 변경되는 화면이 영상에 보여야함.
- 예약내용을 모두 올바르게 입력해서 '예약하기' 버튼이 선택가능한 상태로 활성화 되는과정이 영상에 보여야함.
- 이메일을 유효하지 않은 정보를 입력해봄.
- 취소를 눌러서 취소된 예약이 그부분이 노출되는지가영상에 보여야 함.