오늘은 쿠키를 사용하는 방법 +
웹페이지에서 파일을 업로드하는 코딩을 알아보겠다!
쿠키 (Cookie)
서버가 DB에 모든 데이터를 저장하지 않고
클라이언트의 컴퓨터에도 데이터를 저장하는 것을 '쿠키'라고 한다.
a.jsp에서 쿠키를 생성하고 데이터를 보내면 -> b.jsp에서 받아서 화면이 구현되도록 하겠다.
[a.jsp]
<%
Cookie c1 = new Cookie("name","inna");
Cookie c2 = new Cookie("age","40");
Cookie c3 = new Cookie("addr","seoul");
Cookie c4 = new Cookie("tel","010-123-1234");
c1.setMaxAge(0);
c2.setMaxAge(-1);
c3.setMaxAge(10);
response.addCookie(c1);
response.addCookie(c2);
response.addCookie(c3);
response.addCookie(c4);
%>각 부분별로 설명하겠다.
<1>
첫 번째 부분은 쿠키를 만들어주는 코딩이다.
괄호 왼쪽에 있는 변수에 오른쪽에 있는 값을 넣어준다.
<2>
setMaxAge는 쿠키가 화면에 남아있는 시간을 설정해 준다.
0은 바로 삭제되며, -1은 끝까지 남아있고, 10은 10초 후에 삭제된다는 의미이다.
'초'를 기준으로 지정할 수 있다.
c4는 다음 파일에서 새로운 값으로 씌워줄 것이기 때문에 지정하지 않았다.
<3>
리스폰스를 통해 클라이언트 컴퓨터로 쿠키를 보낸다.
c1부터 c4까지 각각의 값들을 입력해 준다.
마지막으로 <body> 영역에 하이퍼링크로 b.jsp로 연결되도록 하였다.
[b.jsp]
<%
Cookie c4 = new Cookie("tel",null);
response.addCookie(c4);
Cookie[] c = request.getCookies();
%>먼저 c4의 값을 새롭게 설정해 주고 다시 데이터를 보낸다.
쿠키는 여러 개이므로 배열로 받아낸다.
c4 역시 포함되어 있다.
<body>
<%
if(c!=null){
for(Cookie ck : c){
out.print("쿠키이름: ");
out.print(ck.getName());
out.print(", 쿠키값: ");
out.print(ck.getValue() + "<br/>");
}
}
%>
</body>웹페이지에 보일 부분이다.
쿠키가 있다면 확장 for문이 실행된다.
쿠키 생성 코딩에서 괄호 속 앞부분이 name이고 뒤의 값이 value로 처리된다.
파일 업로드
웹페이지에서 파일을 업로드하여 실제로 파일과 데이터베이스에 올라가도록 해보겠다.
파일 업로드는 물리적인 파일을 생성하는 것과 DB에 저장하는 2가지로 나뉘므로, 각 코딩을 알아보겠다.
클라이언트에서 서버로 파일을 업로드하기 위해서는
1. 서버의 어디에 저장할지 '위치'
2. 파일 경로가 존재하지 않을 시 '경로 만들기'
3. 허용되는 '파일 사이즈'
를 설정해줘야 하며, 이 역시 함께 알아보겠다.
처음의 페이지에서 업로드할 파일을 선택하면, 그 데이터가 다음 페이지로 넘어가면서 저장이 되고 파일 정보가 나오도록 구현할 것이다.
[a.jsp]
<body>
<form action="b.jsp" method="post" enctype="multipart/form-data">
제목: <input type="text" name="subject"/><br/>
파일: <input type="file" name="upload"/><br/>
<input type="submit" value="전송"/>
</form>
</body>'전송' 버튼을 누르면 submit을 통해 action이 실행되도록 하며, enctype에 multipart를 입력해 줌으로써 파일을 전송하겠다는 의미를 담는다.
파일에는 type을 파일로 설정해 준다.
[b.jsp]
<%
request.setCharacterEncoding("UTF-8");
String root = pageContext.getServletContext().getRealPath("/");
String path = root + "pds" + File.separator + "saveData";
File f = new File(path);
if(!f.exists()){
f.mkdirs();
}
String encType = "UTF-8";
int maxFileSize = 10*1024*1024;
try{
MultipartRequest mr = new MultipartRequest(request,path,maxFileSize,encType,new DefaultFileRenamePolicy());
out.print("제목: " + mr.getParameter("subject") + "<br/>");
out.print("서버에 저장된 파일 이름: " + mr.getFilesystemName("upload") + "<br/>");
out.print("업로드한 파일명: " + mr.getOriginalFileName("upload") + "<br/>");
out.print("파일 타입: " + mr.getContentType("upload") + "<br/>");
File file = mr.getFile("upload");
out.print("파일 크기: " + file.length() + "<br/>");
}catch(Exception e){
}
%>root는 위치를 자동으로 찾아가도록 하게 한다.
path에는 파일 경로를 입력해 주며, root 값을 넣고 추가로 파일들을 작성한다.
Fil.eseparator는 역슬러시이다. pds 폴더 안의 savaData폴더를 경로로 지정하겠다는 것이다.
물론 String path = "c:\\pds\\saveData"; 이렇게 해줘도 된다!
밑에는 mkdirs를 통해 없으면 해당 경로에 파일을 만들도록 한다.
파일 타입과 최대 사이즈를 설정해 준 다음, try~catch문으로 파일을 업로드한다.
파일 업로드는 앞서 말했듯이, 물리적인 파일과 DB에 파일을 저장하는 2가지로 나뉜다.
먼저 물리적인 파일을 저장해 주는 MultipartRequest를 입력해 준다.
파일은 request에 담기며, 뒤의 내용들은 이미 지정해 주었던 변수들이다.
그다음에 DB에 저장하기 위해 파일 정보를 추출해야 한다.
getFilesystemName와 getOriginalFileName의 차이점은
2개의 파일을 업로드할 때 파일명이 같다면 혼란이 오기 때문에, OriginalFileName은 실제 파일명이고 SaveFileName은 파일명1, 파일명2와 같이 시스템이 인식하도록 서버에 저장되는 다른 이름이다. 따라서 각각을 구해주는 것이다.
값을 넣어주어 출력하며 getFile을 통해 받아낸다.
모든 코딩이 끝났다면!
실제 파일 경로와 퀀텀 DB 각각을 확인하여 동일한 파일이 있는지 확인하면 성공이다.
이렇게 해서
쿠키 사용법과 파일 업로드 방법에 대한 코딩을 알아보았다!
2월 23일 수업 🌓
'개발 교육 TIL > front-end' 카테고리의 다른 글
| [JSP/Servlet] 필터(Filter) 사용법 및 Encoding 예제 (0) | 2022.02.24 |
|---|---|
| [JSP/Servlet] 파일 다운로드 방법 및 예제 (0) | 2022.02.24 |
| [Servlet] 회원가입-로그인창 만들기 (session) (0) | 2022.02.22 |
| [Servlet] 게시판 만들기 (0) | 2022.02.22 |
| [Servlet] 상속, doGet/Post 방식, setAttribute, EL, JSTL (0) | 2022.02.21 |
