[1-1] 웹 어플리케이션 제작

* 2024-08-29
- DB설계 및 DB구축
- 프로젝트 생성 및 index 페이지 띄우기
- 회원서비스 개발 세팅

ㅁ DB 구축 까지 끝났으면 이제 웹 어플리케이션 제작을 하면 된다.

웹 사이트 제작을 하기 위해 새로 이클립스로 프로젝트를 생성한다.

ㅁ 새 프로젝트 생성 & 설정

- 패키지 익스플로러 - 우클릭 - new - dynamic web project -

프로젝트이름 webApp - 그 아래 dynamic web module version이 4.0이어야함 - next -

default output folder는 build\classes가 아니라 src/main/webapp/WEB-INF/classes - next -

context root가 webApp인데 web으로 바꿈 - 그 아래 generate web.xml deployment descriptor 체크 - finish.

- context root(context path, 이 에플리케이션의 이름)는 기본적으로 프로젝트명으로 되어있는데 바꾸는걸 권장한다.

- 컴파일된 파일을 배포해야 해서 default output folder를 수정했다.

- 참고로 패키지 익스플로러 탭에서는 WEB-INF 폴더 안의 classes 폴더가 보여지지 않는다.

탐색기로는 확인 가능하다.

- 깃에 올렸다가 다른 곳에서 pull로 내려받고 오픈 프로젝트하면 이 컨텍스트 패스가 다시 프로젝트명으로 되어있다.

- 또 왼쪽 java build path 메뉴에서 source 탭 가보면 src/main/java라는 소스 폴더를 알려주고 있다.

그리고 아래에 default output folder를 확인할 수 있다.

다른 곳에서 받으면 default output folder도 build\classes로 초기화되어 있을 것이다.

ㅁ 추가 초반 설정

- 앞으로 필요한 패키지, 폴더를 만든다.

- 04_front-workspace > webapp 폴더에서 기존 화면 구현 당시 썼던 assets, views 폴더와 "메인페이지.html"를 가져와서,

C:\workspaces\05_jspServlet-workspace\webApp\src\main\webapp에 붙여넣는다.

- 그리고 assets 폴더 열어보면 image 폴더 하나 밖에 없는데 assets 폴더에는 다른 폴더들을 더 둘 수 있다.

assets 폴더는 정적인 요소들을 보관하는 폴더다.

image 폴더 외에도 js 파일, css 파일 등을 assets 폴더에 보관시킬 수 있다.

외부 라이브러리를 가져다쓰면 lib 폴더에 보관할 수 있다. (제이쿼리 등)

- assets 폴더에 js, css, lib 폴더를 만든다.

- (참고) 디렉토리 구조는 src/main에서 src/main/java와 src/main/webapp 폴더로 나뉜다.

ㅁ 서버 위에 webApp이라는 어플리케이션을 올려서 구동시킨다.

- 하단 Servers 탭에서 서버 우클릭 - add and remove - 기존 2개 어플리케이션은 내리고, webApp만 추가한다.

- 한 서버에 너무 많은 어플리케이션을 구동하면 서버 구동시 오래걸린다.

ㅁ index.jsp 만들기

- webapp 폴더에 "메인페이지.html"이 있는데 이렇게 있으면 안되고 "index.jsp"를 만들어야 한다.

- 패키지 익스플로러에서 webapp폴더 우클릭 - new - jsp 파일에서 "index.jsp" 파일을 만든다.

- 위와 같이 index.jsp가 만들어진다.

- 메인페이지.html을 열어서 일부 부분을 복사해온다.

- 부트스트랩 사용을 위한 4줄 복사해와서 head에 붙여넣었다.

- 그리고 body에 있는 모든 구문을 복사해와서 index.jsp의 body 태그 안에 붙여넣기 했다.

- 아래는 webApp > src > main > webapp > index.jsp 이다.

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<style>

header{height: 150px}

header a{color:black;}

</style>

</div>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

</table>

</form>

<!-- case2. 로그인후

<div>

<b>홍길동</b>님 환영합니다. <br><br>

<a href="">마이페이지</a>

</div>

-->

</div>

</header>

</li>

</li>

<a class="nav-link" href="#">일반게시판</a>

</li>

<a class="nav-link" href="#">사진게시판</a>

</li>

</ul>

</nav>

<h2 class="m-4">해당 페이지의 내용이 보여져야되는 자리</h2>

</div>

</section>

<style>

footer{

height: 200px;

border-top: 1px solid lightgray;

}

footer a{color:black}

.footer-info{

list-style: "- ";

padding-left:30px;

}

.footer-copyright{text-align:center}

</style>

</li>

<a class="nav-link" href="#">개인정보취급방침</a>

</li>

</li>

</li>

</ul>

<li>상호명 : GooDee Academy</li>

<li>개인정보책임자 : 주승재 / jsj@goodee.co.kr</li>

<li>본관 : (08505) 서울특별시 금천구 가산디지털2로 95</li>

</ul>

</div>

</footer>

</div>

</body>

</html>

- 메인페이지에 현재 header, nav, footer 영역이 다 기술되어 있다.

header, nav, footer는 이 페이지말고 다른 페이지에서도 계속 포함될 요소이기 때문에 따로 페이지로 제작한다.

- webApp > src > main > webapp > views > common 폴더에 공유해서 사용할 페이지를 보관한다.

ㅁ header.jsp 만들기

- webApp > src > main > webapp > views > common 폴더에 header.jsp 파일을 만든다.

- 포함될 페이지의 경우 굳이 전체 html 구문이 쓰여있을 필요가 없다.

상단의 페이지 지시어 빼고 싹 다 지운다.

- index.jsp에서 "header, nav start" 부터 "header, nav end"까지 모든 부분을 잘라와서 붙여넣기 한다.

이러면 header.jsp에는 현재 <style> 태그와 <header> 태그만 있는 상태다.

- 아래는 header.jsp 다.

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<- 부트스트랩 4줄 head 태그에 있던거 추가됨.

<style>

header{height: 150px}

header a{color:black;}

</style>

String contextPath = request.getContextPath(); // "/web" <- context path 변수에 담아둠.

<a href="<%=contextPath%>"><img src="<%= contextPath %>/assets/image/goodee_logo.png"></a> <- contextPath

</div>

<form action="<%= contextPath %>/login.me" method="post">

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

</table>

</form>

<!-- case2. 로그인후 (주석처리)

<div>

<b><%= loginUser.getUserName() %></b>님 환영합니다. <br><br>

<a href="<%=contextPath%>/myinfo.me">마이페이지</a>

<a href="<%=contextPath%>/logout.me">로그아웃</a>

</div>

-->

</div>

</header>

</li>

</li>

<a class="nav-link" href="#">일반게시판</a>

</li>

<a class="nav-link" href="#">사진게시판</a>

</li>

</ul>

</nav>

- header.jsp는 항상 어느 페이지든 포함(include)되어 있을 예정이다.

그래서 모든 페이지에 공통적으로 적용시킬 스타일이나 스크립트 구문이 있다면 header.jsp에 작성해도 된다.

- index.jsp에서 head 태그의 BootStrap 사용을 위한 구문 4줄을 header.jsp에 잘라서 가져다 놓는다.

부트스트랩 기능을 쓰려면 매 페이지마다 이 4줄이 들어가야 한다.

4줄의 2번째 줄 보면 jQuery도 들어가 있다.

- header.jsp에는 head, body 태그가 없다.

JSP 파일을 include할 때 그 파일은 호출되는 JSP 파일의 일부처럼 작동하므로,

head, body 등의 구조를 중복해서 작성할 필요가 없습니다.

(이미 head, body 태그가 있기 때문에)

- 맨 위의 import 지시어, 중간중간 스크립틀릿으로 조건문 작성한 부분은 아직 이 단계가 아님. (이 파일은 최종이다)

- index.jsp를 아래와 같이 수정한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<%@ include file = "/views/common/header.jsp" %>

<h2 class="m-4">해당 페이지의 내용이 보여져야되는 자리</h2>

</div>

</section>

<style>

footer{

height: 200px;

border-top: 1px solid lightgray;

}

footer a{color:black}

.footer-info{

list-style: "- ";

padding-left:30px;

}

.footer-copyright{text-align:center}

</style>

</li>

<a class="nav-link" href="#">개인정보취급방침</a>

</li>

</li>

</li>

</ul>

<li>상호명 : GooDee Academy</li>

<li>개인정보책임자 : 주승재 / jsj@goodee.co.kr</li>

<li>본관 : (08505) 서울특별시 금천구 가산디지털2로 95</li>

</ul>

</div>

</footer>

</div>

</body>

</html>

- index.jsp와 header.jsp가 같은 위치에 있지 않으므로,

include 지시어를 <%@ include file = "/views/common/header.jsp" %> 이렇게 작성한다.

(index.jsp는 현재 src/main/webapp 폴더에 있다)

- 같은 폴더에 있었다면 "header.jsp"만 하면 된다.

- 마찬가지로 common 폴더 우클릭 - new - jsp에서 footer.jsp를 만든다.

index.jsp에서 "footer start" 부터 "footer end"부분 사이를 잘라내서 footer.jsp에 붙여넣는다.

- 아래는 footer.jsp다.

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<style>

footer{

height: 200px;

border-top: 1px solid lightgray;

}

footer a{color:black}

.footer-info{

list-style: "- ";

padding-left:30px;

}

.footer-copyright{text-align:center}

</style>

</li>

<a class="nav-link" href="#">개인정보취급방침</a>

</li>

</li>

</li>

</ul>

<li>상호명 : GooDee Academy</li>

<li>개인정보책임자 : 주승재 / jsj@goodee.co.kr</li>

<li>본관 : (08505) 서울특별시 금천구 가산디지털2로 95</li>

</ul>

</div>

</footer>

- footer.jsp는 진짜로 붙여넣고 끝.

- http://localhost:8888/web/으로 context path까지 입력해서 index.jsp가 잘 나오는지 확인한다.

- 페이지 확대 비율이 100%인 상태를 기준으로 제작한다.

ㅁ 이미지 경로 제시법

- 지금은 운 좋게 이미지가 뜨고 있는데, 정적인 이미지 파일을 찾고자 할 때도 항상 절대경로 방식으로 써주는게 좋다.

- header.jsp의 img 태그를 찾아간다.

- 상대경로에서 ./ 현재 폴더는 항상 url 기준이다. <- http://localhost:8888/web/

만약 다른 페이지여서 url이 달랐으면 저 이미지는 보이지 않는다.

- context path는 곧 webapp 폴더를 가리킨다.

webapp폴더 내의 index.jsp 페이지여서 index.jsp와 assets 폴더가 같은 레벨에 있어서 저 경로로 이미지가 잘 보여진거다.

- 절대경로로 슬래시를 쓰면 context path 이전까지를 뜻한다.

그래서 context root인 web을 써줬다. 이게 webapp폴더를 뜻한다.

- 상대경로로 쓰면 url 기반으로 작동이 되기 때문에 여기선 잘 되지만 다른 페이지에선 작동이 안될 수 있다.

- 그런데 지금은 web이라는 context path로 진행하고 있지만 context path는 바뀔 수 있다.

나중에 실서버에 배포될 때는 context path가 얼마든지 변경될 수 있다.

- 그래서 context path를 제시할 때도 정적으로 박으면 안되고 동적으로 현재의 context path를 가져와서 적용되게끔 해야 한다.

- request 객체로부터 getContextPath() 메소드를 이용해서 context path를 얻을 수 있다.

- 이렇게 속성값 안에도 자바코드를 실행시켜서 출력식을 쓸 수 있다.

- request.getContextPath()는 "/web"을 반환한다. ("web"이 아닌)

- 웹 애플리케이션의 context root는 항상 슬래시(/)로 시작합니다.

이는 웹 서버가 애플리케이션의 루트 디렉토리를 명확히 구분하기 위한 표준 방식입니다.

컨텍스트 루트가 서버의 루트 경로부터 시작하기 때문입니다.

- 그런데 context path를 쓸 일이 많기 때문에 header.jsp 상단에 request.getContextPath()의 값을 변수에 미리 담아둔다.

이러면 다른 모든 페이지에서도 가져다 쓸 수 있다.

- 개발자도구(f12)의 elements 탭에서 context path를 확인할 수 있다.

ㅁ 회원서비스

- 회원서비스 개발 세팅 <- 여기 진행 중.

- 회원서비스_로그인
- 회원서비스_로그아웃
- 회원서비스_회원가입페이지로이동

- 회원서비스_회원가입요청
- 회원서비스_마이페이지요청
- 회원서비스_정보변경요청
- 회원서비스_비번변경요청
- 회원서비스_회원탈퇴요청

'05_Server (04. JSP 프로그래밍 구현)' 카테고리의 다른 글

[1-3] 회원서비스 로그인, 로그아웃 (0)	2024.09.07
[1-2] 회원서비스 개발 세팅 (이어서) (6)	2024.09.07
DB설계 및 구축 (+ 엑셀로 DB에 한번에 넣기) (5)	2024.09.02
화면구현 - 웹사이트 개발 화면 구현 (BootStrap) (3)	2024.08.28
[Servlet + JSP] 서블릿과 JSP 결합 (5)	2024.08.28

공부 블로그

[1-1] 웹 어플리케이션 제작

'05_Server (04. JSP 프로그래밍 구현)' 카테고리의 다른 글

티스토리툴바

[1-1] 웹 어플리케이션 제작

'05_Server (04. JSP 프로그래밍 구현)' 카테고리의 다른 글

관련글

티스토리툴바