⭐MVC 패턴

경로 설정

MVC 패턴으로 코드를 수정하는 과정에서 JSP 페이지를 사용자가 요청할 수 없는 곳에 두기 위한 절차
1. 사용자가 요청하게 하지 않을 페이지는 WEB-INF에 view라는 폴더 만들어서 두기
2. Controller 내에서 getRequestDispatcher에 전달되는 경로 바꿔주기

request.getRequestDispatcher("/WEB-INF/view/notice/list.jsp").forward(request, response);

JSTL

fmt 태그

• 패턴을 지정해 숫자 출력

<fmt:formatNumber value="1000.1" pattern="#,###.#"/> // 출력 결과: 1,000.1
<fmt:formatNumber value="10000.12" pattern="#,###.#"/> // 출력 결과: 10,000.1

예제1) 페이지 정보 출력

<c:set var="lastPage" value="${count/10 + (count % 10 == 0 ? 0 : 1)}" /> 
// pageContext 저장소에 lastPage라는 키가 저장됨

<span class="text-strong">${(empty param.p)?1:param.p}</span> / ${fn:substringBefore(lastPage, '.')} pages
// lastPage에 담긴 값에서 소수점을 제외(${fn:substringBefore(lastPage, '.')})하고 출력

예제2) 페이지 출력

<section class="page-status mt-3">
    <h1 class="d-none">현재 페이지 정보</h1>                            
    <div>
    	<c:set var="lastPage" value="${count/10 + (count % 10 == 0 ? 0 : 1)}" />
    	<c:set var="lastPage" value="${fn:substringBefore(lastPage, '.')}" />
        // lastPage에 담긴 값에서 소수점을 제외한 값을 다시 lastPage 변수에 담기
        
        <span class="text-strong">${(empty param.p)?1:param.p}</span> / ${lastPage} pages
        // p로 받은 parameter가 null 또는 빈값이면 1을, 그렇지 않으면 p로 받은 paremeter 값을 출력하기
    </div>
</section>
<nav class="pager mt-3">
    <h1 class="d-none">페이저</h1>
    <div class="button">이전</div>
    <ul>
    <c:set var="page" value="${empty param.p ? 1: param.p }" /> <!-- 기본값 대입 -->
    <c:forEach var="i" begin="1" end="10">
    	<c:if test="${i <= lastPage}">
    		<li><a class="${(page == i) ? 'text-strong' : ''}" href="list?p=${i}&f=${param.f}&q=${param.q }">${i}</a></li> 
            	// page 변수가 i의 값과 같으면 text-strong이라는 클래스가 적용됨
    	</c:if>
    </c:forEach>                          
  </ul>
    <div class="button">다음</div>
</nav>

파일 업로드

인코딩 설정

// 인코딩 타입을 multipart/form-data로 설정하기
<form action="reg" method="post" enctype="multipart/form-data"> 
	<table border="1">
              <tr>
                  <th>첨부파일</th>
                  <td colspan="3">
                      <input type="file" name="f"> 
                  </td>
              </tr>
    	</table>
	<div>
		<input type="submit" value="저장">
		<a href="list.jsp">취소</a>
	</div>
</form>

1. application/x-www-form-urlencoded
   • default 값으로, 모든 문자들을 서버로 보내기 전에 인코딩됨을 명시
2. multipart/form-data
   • 폼 데이터가 여러 부분으로 나뉘어 서버로 전송되는 것을 의미

서블릿 설정

• max-file-size: 업로드 가능한 파일의 최대 사이즈
• max-request-size: 여러 개의 파일 업로드 시, 업로드 가능한 총 사이즈

파일 업로드를 위한 코드

// 입력 스트림을 통해 파일을 읽고 출력 스트림을 통해 파일 출력
Part fpart = request.getPart("f"); // name 속성에 "f" 값을 입력해준 파일을 가져오기, 반환 타입이 파트
String fileName = fpart.getSubmittedFileName(); // 전송된 파일 이름
InputStream fis = fpart.getInputStream(); // 파일 입력 스트림

ServletContext application = request.getServletContext(); // 어플리케이션의 저장소 역할, 다른 서블릿에서도 작업을 이어가려면 동일한 도구, 저장소(ServletContext)가 필요
String path = "/upload"; // 업로드할 경로
String realPath = application.getRealPath(path); // 실제 물리 경로를 얻어냄

File pathFile = new File(realPath); // 파일 만들기
if(!pathFile.exists()) // 파일이 없으면
	pathFile.mkdirs(); // 경로를 만들어줌

String filePath = realPath + File.separator + fileName; // 운영체제마다 파일 구분자가 다르므로 File.separator로 파일 구분자 사용
FileOutputStream fos = new FileOutputStream(filePath);

byte[] buf = new byte[1024];
int len = 0;

while((len = fis.read(buf, 0, 1024)) >= 0)
	fos.write(buf, 0, len);

fos.flush();
fos.close();
fis.close();

결과 화면

• 공지사항 작성 페이지에서 게시글을 작성하며 파일 업로드
  
• 공지사항 세부내용 페이지에서 업로드한 파일 확인 가능
  
• 코드로 설정한 경로에 파일이 업로드됨
  

🐥마무리

오늘은 파일 업로드에 대해 배웠다! 현재 진행 중인 프로젝트에서 이미지 파일을 업로드하는 부분이 있는데 오늘 배운 것을 활용해 빨리 적용해봐야겠다. 그 날 그 날 배운 내용들을 프로젝트에 바로 적용해보는 건 정말 좋은 공부방법 같다. 얼른 남은 기능들도 열심히 만들어보자!

참고 사이트

JSTL fmt 태그 사용하기