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

 - 이전 글

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

 

FE_PJT F-2. 예약: 한줄평 피드백

 - 그냥 돌아간다고 장땡이 아니더라, 역시 사람은 배워야 하는듯

수정할 내용

 - 웹 접근성 참고 후 프로젝트 적용

2020/03/02 - [Edu/BoostCourse - Web] - [BoostCourse] 웹 접근성

 

[BoostCourse] 웹 접근성

[프로젝트 작성 후 보완해야 하는 비기능성 요소] - 수정 및 수정이 필요한 근거 레이어 팝업 컨텐츠(Layer Popup Content) * 팝업 창 차단 기능이 있는 브라우저에서 시작적으로 팝업 창과 같은 효과를 내도록..

seokr.tistory.com

 - 웹 프론트엔드의 취약점 보안

2020/03/02 - [Edu/BoostCourse - Web] - [BoostCourse] 웹 프론트엔드 취약점

 

[BoostCourse] 웹 프론트엔드 취약점

[웹 프론트엔드 취약점] - View에서 Controller로 보낸 데이터의 유효성 검사 필요 - Spring Filter를 사용한 XSS(Cross-Site Scripting) 처리 필요 한줄평 400자 이상 입력 후 제출 시 백엔드에서도 체크할 수..

seokr.tistory.com

 - validation vs verification ( 검사와 검증 )

2020/03/02 - [Edu/BoostCourse - Web] - [BoostCourse] Verification and Validation

 

[BoostCourse] Verification and Validation

[Verification & Validation] - Verification (검증) - Verification Process는 문서, 설계, 코드, 프로그램을 체크하는 것. - 제품이 올바르게 만들어지고 있는지 체크, 요구사항, 설계 명세서에 따라 만들어지고..

seokr.tistory.com

시연 영상
프로젝트 수료

 

참고 사이트

 - 웹 접근성: https://www.wah.or.kr:444/Participation/guide.asp

[JavaDoc] 만들기

 - 해당 프로젝트 오른쪽 클릭 > Export > Javadoc

 

next > next 이후 Encoding 파라미터 설정 

 

프로젝트 경로 내에 doc 폴더로 생성

 

index.html 실행 시 화면

 - Packages, Classes, 등등 javadocs로 프로젝트 구성을 볼 수 있다.

Javadoc에 적용되는 주석 상태

 - 기본적으로 설정되어 있는 author는 적용

 - date를 생성하여 적용해봤지만 문서에는 적용이 안됨

 - 해당 클래스나 메서드에 설명은 /** .. */ 주석의 맨 위에 작성해야 나옴

 - 주석은 계속 수정이 필요. 

 

Javadoc 주석(/** .. */) 내에 작성한 내용이 수정되지 않는 것을 원하는 경우 <pre> ... </pre>안에 작성

 

 

 * 주석도 활용할 수 있는 형식으로 작성하도록 하자

[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 문서 만들기

 

[JavaDocs] Javadoc 문서 만들기

[JavaDoc] 만들기 - 해당 프로젝트 오른쪽 클릭 > Export > Javadoc next > next 이후 Encoding 파라미터 설정 프로젝트 경로 내에 doc 폴더로 생성 index.html 실행 시 화면 - Packages, Classes, 등등 javadoc..

seokr.tistory.com

 * 업로드 파일명 중복처리

 

 

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

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

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

 

Resource interpreted as Document but transferred with MIME type application/zip

With Chrome 12.0.742.112, if I redirect with the following headers: HTTP/1.1 302 Found Location: http://0.0.0.0:3000/files/download.zip Content-Type: text/html; charset=utf-8 Cache-Control: no-ca...

stackoverflow.com

 

[해결방안 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

 

[파일업로드] Ajax 방식

파일업로드 Ajax 방식의 핵심은 FormData 라는 브라우저에서 지원하는 클래스이다. FormData 는

과 같은 효과를 가져다주는 key/value 가 저장되는 객체이다. 태그처럼 데이터를 처리할 수 있게 해..

 

repacat.tistory.com

 

[오류 내용 확인]

[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

 

Uploading Files with Spring MVC | Baeldung

In this article, we focus multipart (file upload) support in Spring MVC web applications.

www.baeldung.com

 

# Network Management with NetStat

 

 - NetStat (네트워크 통계)는 라우팅 테이블, 인터페이스 통계 등을 볼 수 있을 뿐만아니라 수신 및 발신 네트워크 연결을 모니터링하기 위한 CLI 도구이다.

 - 이는 네트워크의 문제 해결과 성능 측정에서 매우 유용하다.

 - NetStat은 가장 기본적인 네트워크 서비스 디버깅 도구 중 하나로, 열려있는 포트와 포트에서 수신 중인 프로그램이 있는지의 여부를 알려준다.

 - NetStat은 리눅스 네트워크 관리자와 시스템 관리자가 네트워크 관련 문제를 모니터링하고 해결하고 네트워크 트래픽 성능을 결정하는 데 매우 중요하고 유용하다.

 

# List all LISTENING Ports of TCP and UDP connections

 - Listing all ports (both TCP and UDP) using netstat -a option.

# netstat -a | more

 

# List TCP Port connections

 - Listing only TCP (Transmission Control Protocol) port connections using netstat -at

# netstat -at

 

# List UDP Port connections

 - Listing only UDP (User Datagram Protocol) port connections using netstat -au

# netstat -au

 

# List all LISTENING Connections

 - Listing all active listening ports connections with netstat -l

# netstat -l

 

# List all TCP Listening Posts

 - Listing all active listening TCP ports by using option netstat -lt

# netstat -lt

 

# List all UDP Listening Posts

 - Listing all active listening UDP ports by using option netstat -lu

# netstat -lu

 

# List all UNIX Listening Ports

 - Listing all active UNIX listening ports using netstat -lx

# netstat -lx

 

# Show Statistics by Protocol

 - Displays statistics by protocol. By default, statistics are shown for the TCP, UDP, ICMP, and IP protocols. The -s parameter can be used to specify a set of protocols.

# netstat -s

 

# Show Statistics by TCP Protocol

 - Showing statistics of only TCP protocol by using option netstat -st

# netstat -st

 

# Show Statistics by UDP Protocol

# netstat -su

 

# Display Service name with PID

 - Displaying service name with their PID number, using option netstat -tp will display “PID/Program Name”.

# netstat -tp

 

# Display Promiscuous Mode

 - Displaying Promiscuous mode with -ac switch, netstat print the selected information or refresh screen every five second. Default screen refresh in every second.

# netstat -ac 5 | grep tcp

 

 

# Display Kernel IP routing

 - Display Kernel IP routing table with netstat and route command.

# netstat -r

 

 

# Show Network Interface Transactions

 - Showing network interface packet transactions including both transferring and receiving packets with MTU size

# netstat -i

 

# Show Kernel Interface Table

 - Showing Kernel interface table, similar to ifconfig command.

# netstat -ie

 

# Display IPv4 and IPv6 Information

 - Displays multicast group membership information for both IPv4 and IPv6.

# netstat -g

 

# Print Netstat Information Continuously

 - To get netstat information every few second, then use the following command, it will print netstat information continuously, say every few seconds.

# netstat -c

 

# Find non supportive Address

 - Finding un-configured address families with some useful information.

# netstat --verbose

 

# Find Listening Programs

 - Find out how many listening programs running on a port.

# netstat -ap | grep http

 

# Display RAW Network Statistics

# netstat --statistics --raw

 

# Display all ports in the LISTEN state

# netstat -an | grep LISTEN

 


 [ Option ]

   --verbose, -v
       Tell the user what is going on by being verbose. Especially print
       some useful information about unconfigured address families.

   --wide, -W
       Do not truncate IP addresses by using output as wide as needed. This
       is optional for now to not break existing scripts.

   --numeric, -n
       Show numerical addresses instead of trying to determine symbolic
       host, port or user names.

   --numeric-hosts
       shows numerical host addresses but does not affect the resolution of
       port or user names.

   --numeric-ports
       shows numerical port numbers but does not affect the resolution of
       host or user names.

   --numeric-users
       shows numerical user IDs but does not affect the resolution of host
       or port names.

   --protocol=family, -A
       Specifies the address families (perhaps better described as low level
       protocols) for which connections are to be shown.  family is a comma
       (',') separated list of address family keywords like inet, inet6,
       unix, ipx, ax25, netrom, econet, ddp, and bluetooth.  This has the
       same effect as using the --inet|-4, --inet6|-6, --unix|-x, --ipx,
       --ax25, --netrom, --ddp, and --bluetooth options.

       The address family inet (Iv4) includes raw, udp, udplite and tcp
       protocol sockets.

       The address family bluetooth (Iv4) includes l2cap and rfcomm protocol
       sockets.

   -c, --continuous
       This will cause netstat to print the selected information every
       second continuously.

   -e, --extend
       Display additional information.  Use this option twice for maximum
       detail.

   -o, --timers
       Include information related to networking timers.

   -p, --program
       Show the PID and name of the program to which each socket belongs.

   -l, --listening
       Show only listening sockets.  (These are omitted by default.)

   -a, --all
       Show both listening and non-listening sockets.  With the --interfaces
       option, show interfaces that are not up

   -F
       Print routing information from the FIB.  (This is the default.)

   -C
       Print routing information from the route cache.

'Basic > shell' 카테고리의 다른 글

[Shell] -ksh {파일명}.sh: not found  (0) 2019.09.05
[Shell] rsync  (0) 2019.09.03
[Shell] Exception Handling  (0) 2019.08.12
[Shell] 파일 찾기  (0) 2019.08.12
[shell] value too great for base (error token is "08")  (0) 2019.07.07

[사전 정보]

 - 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 값으로 경로를 가져와 다운로드 작성

+ Recent posts