Web Project 생성
Web 환경구축 > IntelliJ Web Project 생성 및 구성 참고
index.jsp
Web Server 접속 시, 기본적으로 출력되는 문서입니다. bootstrap 템플릿을 활용하여 간단한 게시판을 구성했습니다. 시멘틱 웹 형태로 작성되었으며 header와 footer 부분은 외부 파일로 작성 후 JSP 기능을 활용하여 가져옵니다.
게시판은 menu bar를 사용하여 다른 페이지로 이동할 수 있는데, 각 페이지에 header와 footer는 공통으로 사용되기 때문에 별도의 파일로 생성하는 것이 유지보수 차원에서 효율적입니다.
- index.jsp CODE
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <!DOCTYPE html> <html lang="en"> <%-- header.jsp 파일 불러오기--%> <%@include file="header.jsp"%> <div class="container-fluid text-center"> <div class="row content"> <div class="col-sm-2 sidenav"> <p><a href="#">Link</a></p> <p><a href="#">Link</a></p> <p><a href="#">Link</a></p> </div> <div class="col-sm-8 text-left"> <h1>Welcome</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <hr> <h3>Test</h3> <p>Lorem ipsum...</p> </div> <div class="col-sm-2 sidenav"> <div class="well"> <p>ADS</p> </div> <div class="well"> <p>ADS</p> </div> </div> </div> </div> <%-- footer.jsp 불러오기--%> <%@ include file="footer.jsp"%> </html>
Web Server 접속 화면
왜 index.jsp 파일이 자동으로 열리는가?
tomcat 폴더 내부의 conf 폴더를 확인하면 web.xml 파일이 있다. 해당 파일에서 기본으로 실행될 파일을 결정하는데 그 형태는 아래와 같다.
welcome-file-list 태그는 웹 애플리케이션이 실행될 때 자동으로 실행될 파일을 정의하며, 위에 정의된 file부터 순차적으로 찾고 첫 번째로 발견되는 파일을 실행한다.
<!-- ==================== Default Welcome File List ===================== -->
<!-- When a request URI refers to a directory, the default servlet looks -->
<!-- for a "welcome file" within that directory and, if present, to the -->
<!-- corresponding resource URI for display. -->
<!-- If no welcome files are present, the default servlet either serves a -->
<!-- directory listing (see default servlet configuration on how to -->
<!-- customize) or returns a 404 status, depending on the value of the -->
<!-- listings setting. -->
<!-- -->
<!-- If you define welcome files in your own application's web.xml -->
<!-- deployment descriptor, that list *replaces* the list configured -->
<!-- here, so be sure to include any of the default values that you wish -->
<!-- to use within your application. -->
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>header, footer
header와 footer를 만들고 여러 웹 페이지에 추가하는 것으로 공통 인터페이스를 쉽게 추가, 유지보수 할 수 있다.
- header.jsp CODE
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> /* Remove the navbar's default margin-bottom and rounded borders */ .navbar { margin-bottom: 0; border-radius: 0; } /* Set height of the grid so .sidenav can be 100% (adjust as needed) */ .row.content {height: 450px} /* Set gray background color and 100% height */ .sidenav { padding-top: 20px; background-color: #f1f1f1; height: 100%; } /* Set black background color, white text and some padding */ footer { background-color: #555; color: white; padding: 15px; } /* On small screens, set height to 'auto' for sidenav and grid */ @media screen and (max-width: 767px) { .sidenav { height: auto; padding: 15px; } .row.content {height:auto;} } </style> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.jsp">Logo</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="index.jsp">Home</a></li> <li><a href="memberform.jsp">회원가입</a></li> <li><a href="loginform.jsp">로그인</a></li> <li><a href="boardform.jsp">게시판</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </div> </nav> - footer.jsp CODE
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <footer class="container-fluid text-center"> <p>Footer Text</p> </footer> </body>
공통부를 적용한 페이지
header, footer를 추가하는 지시문
JSP를 사용하여 웹 페이지를 생성하는 과정
- 클라이언트가 웹 브라우저를 통해 웹 서버에 요청
- 요청된 URL에 따라 Servlet 컨테이너 또는 JSP 컨테이너 동작
- 서버측에서 index.jsp 파일 탐색
- JSP 파일 컴파일(JSP 파일 내의 Java 코드와 HTML 코드가 Java 서블릿 코드로 변환됨)
- 컴파일된 후에 서블릿 클래스로 로드되고 실행됨
- JSP 파일에 포함된 include 지시문은 서블릿 코드로 변환될 때, 해당 JSP 파일의 내용을 포함하게 됨
- Servlet 코드 실행
index.jsp의 내용과header.jsp,footer.jsp의 내용이 합쳐져 HTML 문서로 생성- 이 HTML 문서가 웹 서버에서 생성되어 클라이언트로 전송된다
Web Project 배포
배포 파일을 빌드한다. 빌드 유형을 직접 설정할 수 있다. exploded를 선택했다면 압축이 해제된 형태로 배포 파일이 생성된다. 그렇지 않다면 .war확장자를 가진 압축 파일이 생성된다.
tomcat web server 디렉토리의 webapp 내부에 압축이 해제된 배포 파일을 복사하면 도메인/배포 디렉토리명 형태로 접근할 수 있다. 압축 파일을 위치시키면 tomcat이 실행되는 과정에서 자동으로 압축 해제한다.
배포 파일 빌드
생성된 배포 파일
myHome 디렉토리가 압축된 형태의 배포 파일
myHome_war_exploded 디렉토리가 압축 해제된 형태의 배포 파일
tomcat 서버 실행 후 접속
./startup.sh bin 폴더 아래의 startup.sh 스크립트 파일을 실행하여 tomcat 서버를 실행할 수 있다.
webapp 폴더 밑의 root 폴더에 웹 프로젝트 배포 파일을 넣었다면 localhost:8080으로 배포한 서비스에 접근할 수 있다. 우리는 webapp 폴더 밑에 배포 디렉토리를 새롭게 복사하여 넣었으므로 localhost:8080/[배포 디렉토리명]으로 접근할 수 있다.
