Servlet ■ 폴더 구조 관리하기

 

 

프로그래밍 기초 - 폴더 구조 관리하기

사전 준비

1. webapp 아래에 index.jsp 파일을 생성하고, Quiz3 - home.html 코드를 붙여넣기.

2. views 폴더 생성

3. 기능별 폴더 생성

4. 사용했던 .html 파일들을 각 폴더에 맞게 JSP 파일로 삽입.

 

 

폴더 구조 관리하기 (CSS)

1. src/main/webapp/resources 폴더 추가.

2. src/main/webapp/resources 아래에 css, js 폴더 추가.

3. 위에서 생성한 css 폴더 아래에 board, common, member 폴더 생성.

 

폴더 구조 관리하기 (CSS 파일 분리)

 

1. 가져온 main.css 파일 나누기 - member

member.css 파일 생성 및 main.css의 "로그인/회원가입 폼 스타일링" 주석 아래 코드 옮기기.

2. 가져온 main.css 파일 나누기 - board

board.css 파일 생성 및 main.css의 "게시물 목록 테이블 스타일링" 주석 아래 코드 옮기기.

3. 가져온 main.css 파일 나누기 - common

common/main.css 파일을 생성하고 나머지 코드 옮겨넣기.

4. 최종적으로 생성된 폴더 구조

 

 

폴더 구조 관리하기 (JSP)

views 아래에 common 폴더 생성.

common 폴더 아래에 footer, head, header, nav JSP 파일 생성.

 

1. 설명 - footer

아래의 HTML 코드를 footer.jsp 파일에 옮기기.

2. 설명 - nav

아래의 HTML 코드를 nav.jsp 파일에 옮기기.

3. 설명 - header

아래의 HTML 코드를 header.jsp 파일에 옮기기.

 

common 외 board.jsp, portfolio.jsp 등 jsp 파일에 head, header, nav, footer 관련된 코드 삭제

 

각각 삭제한 영역에 include 작성

 

폴더 구조 관리 이유

1. 코드 관리 용이성
   • 각각의 폴더에 있는 파일들의 역할이 분명해집니다.
   • 하나의 파일에 있던 코드가 줄어들어 필요한 코드를 쉽게 찾아서 확인할 수 있습니다.
2. 유지보수의 편리함
   • 공통적으로 사용되는 파일(common)에 수정사항이 생길 경우 해당되는 모든 페이지를 수정할 필요 없이, 해당 파일 하나만 수정하면 됩니다.

 

 

오늘은 Servlet 폴더 구조관련하여 jsp 활용하는법을 정리하고 공부를 진행했습니다!
월요일 시작입니다. 다들 화이팅 그럼 20000!!