본문 바로가기
공부기록

5월 22일 Spring - 홈페이지 게시글

by project100 2023. 5. 22.

게시글 목록 번호

1. 번호 고정

2. 누르는 번호를 가운데 ex) 구글  가운데 1/2, start+1 end +2

start end

 

생성자 = 초기화

 


글쓰기

1. wirteForm.jsp

2. controller

3. 글쓰기에서 뒤로가기 버튼처리

뒤로가기 버튼을 눌렀을 때 임시저장된 페이지가 아니라 서버 검색을 하고 다시 출력될 수 있도록 조치가 필요함

 

 

 

 

File upload

HTML의 <input> 태그의 file type은 기본적인 파일 선택 창을 제공한다.

 

Multi-part : 한 웹 문서 안에 문자와 바이너리 데이터(이미지, 동영상, 음성 및 기타 형식의 파일 등)가 함께 포함되어 있는 상황

 

MIME(Multipurpose Internet Mail Extension)

전자우편(e-mail)을 위한 인터넷 표준 포맷

content-type :  문서에 포함딘 내용을 구성한 형태 지정,

                        기본형태 text/plain이나 text/html

                        다종의 내용이 포함 multipart/......

 

Multi-part를 위한 설정(application.properties)

업로드 파일 용량 설정

- 업로드 파일의 최대 크기 : max-file-size

- 요청 객체에 담을 수 있는 최대 크기 : max-request-size

기본값 각 10MB (생략 시 )

 

 

Spring framework에는 multi-park 라이브러리가 기본 포함되어 있기 때문에 추가할 dependency는 없음.

# multi-part file upload setting
spring.servlet.multipart.max-file-size=4MB
spring.servlet.multipart.max-request-size=8MB

용량이 커지면 서버에 부담이 갈 수도 있기 때문에 적당량으로 설정하는 것이 필요

 

form 태그에 enctype="multpart/form-data"를 추가(파일 업로드 처리 시 반드시 필요함)

enctype="multipart/form-data"
파일 태그는 디자인 변경이 용이하지 않기 때문에 label 태그를 사용하여 CSS 처리(이때 파일 태그는 숨김 처리)

 

대신 선택한 파일명을 보이기 위해서 js로 파일명을 도 다른 input태그에 출력함
파일이 1개일 경우 :  파일명을 그대로 출력
파일이 2개 이상일 경우 : '첫번째 파일명 외 00개'로 출력

기본적으로 파일 선택 시 파일 1개, 파일 3개 라고 출력됨

 

input 태그 file 타입은 'mutiple' 속성으로 단일 파일 선택 또는 다중 파일 선택을 하도록 설정할 수 있음. 

※ multiple과 multi-part는 관계없음!

 

form 태그 내 input 태그에 readonly 속성을 부여하면 해당 input 태그는 전송에서 제외된다. (hidden은 전송됨)

 

 

파일을 처리하는 상황
1. 한 html 문서에 하나의  file input 태그가 있는 경우

  1) 단일 파일 전송 - 배열 중 0번만 사용하는 형태

  2) 다중 파일 전송(multiple 속성을 작성한 경우) - 배열(기본)

2. 한 html 문서에 여러개의 file input 태그가 있는 경우(이중배열, 반복문을 중첩해서 사용, 기본)
  1) 단일 파일 전송
  2) 다중 파일 전송(multiple 속성을 작성한 경우)
  3)  단일 파일 전송과 다중 파일 전송이 혼용된 경우
 

Spring의 파일 처리 부분을 반복을 중첩하여 처리하는 코드로 작성

 

 

서버에 업로드 파일 저장 방식

1) 내용과 파일을 함께 저장

BLOB 타입으로 파일을 2진 바이너리 데이터로 처리하여 문자열처럼 글 내용과 같이 저장(문서 중간에 파일이 들어간 형태) 예 )  블로그 같은 형식 네이버 스마트에디터

2) 내용과 파일을 따로 저장

내용은 DB로, 파일은 파일 서버나 특정 폴더로 저장, 파일의 정보를 저장할  DB 테이블(컬럼)이 필요

 

파일 저장 시 파일의 이름을 변경하는 것이 필요하다.

why? 여러 사람이 자신만의 파일을 업로드 하는 것이 아니라, 여러 사람이 제각각 파일을 업로드 하는데 이 때 파일명이 동일한 경우도 발생한다. 나중에 업로드한 파일만 존재하고, 이전 파일은 덮어써서 없어지게 됨 => 이름을 변경하여 저장

파일 이름에는 시간(밀리초)을 사용

 

파일 정보를 저장할 때 함께 저장하는 데이터(비파일)의 키값이 외래키로 저장되어야 한다.

문제) 데이터의 키 값은 무엇인가?

Mybatis에서 selectkey 기능을 제공

insert 처리에서 발생한 자동 생성된 키값을 구하는 용도

 

오라클, mysql은 자동 키값을 만드는 방법이 다름

mysql은 insert 후에 만들어짐

 

참고) WYSIWYG(What You See Is What You Get)

보이는 데로 얻는 (처리한)다.

한컴 워드, MS-word,  웹용 에디터 등

내용과 다양한 파일(이미지, 영상, 음성 등)을 함께 저장/편집할 수 있는 방식

 

Mybatis에서 키값을 구하는 방법

selectkey를 사용한다. selectkey는 강의 자료에 22p

 

게시글 만들기

4. board Dao - boarddao.xml

5. boardSevice

6. controller 연결 

 

포인트 

1. boardService

2. memberdao - memberdao.xml

3. boardSevice

 

HttpSession 사용법(object로 저장)

로그인 성공 정보나 사용자가 접속을 한 상황에서 유지해야 할 데이터가 있을 경우 세션을 사용한다.

1) 세션에 데이터 저장 

  session.setAttribute("식별명", 데이터 객체);

2) 세션에 데이터 불러오기(형변환 필요)

  session.getAttribute("식별명");

3) 세션에 데이터 삭제(로그 아웃에 활용 가능)

  session.removeAttribute("식별명");

4) 세션 자체를 삭제(로그 아웃 처리 시)

  session.invalidate();

 

세션에 데이터를 갱신(수정)하는 경우 setAttribute를 사용.

이때, 식별명을 같은 값으로 하면 기본데이터를 덮어쓴다.

 

세션에 시간 제한 걸기(톰캣 기본값 30분)

session.setMaxInactiveInterval(초);

1시간 = 60 * 60

 

 

로그아웃처리

header.jsp 링크 이름 logout

homecontroller 

mebmerService 

 

로그아웃 후 뒤로 가기 했을 때 로그인의 남아있는 정보를 보이지 않도록 막아주는 것은 마지막에 처리!