❤ 김춘장이의 위키백과 - 나만의 공부 기록 Tistory ❤
gayulz - Overview
개발자가 되고싶은 개발어린이💟. gayulz has 11 repositories available. Follow their code on GitHub.
github.com
GitHub - gayulz/EMBAD_project: EMBAD , MY PROJECT
EMBAD , MY PROJECT. Contribute to gayulz/EMBAD_project development by creating an account on GitHub.
github.com
🙏 양해의 말씀
그동안 포스팅을 잠시 미뤘다.
마지막 프로젝트에 집중하고 싶었고, 이 프로젝트는 이력서에도 포트폴리오에도 첨삭되는 거라
옵시디언에 열심히 중간중간 메모 하며 포스팅만 미루었다.
지금은 최종 PPT가 완료되고, 포트폴리오 정리를 하면서 미루었던 포스팅을 다시 올려 본다
HTML, CSS파일 JSP파일에 적용하기
크게 어려운 건 없었다.
기존에 만들어 놓은 코드에서 JSP문법에 필요한 문법을 추가한 부분이었고
CSS를 webapp디렉터리 안에 resources디렉터리에 별도로 빼려고 했으나, Javascript를 하면서
너무 귀찮기도 했다.. 음..
그래서 JSP파일에 HTML과 CSS를 같이 적용하기로 하고
반복되는 코드인 head와 footer만 include 하는 방식으로 하기로 했다.
이런 방식으로 진행하였고 jsp파일에 적용할 때엔
<%@ include file="/WEB-INF/views/include/header.jsp" %>이런 식으로 진행을 했다.
include를 왜 했나요?
주로 header와 footer는 모든 페이지에 동일한 방식이다 보니
매번 작성하는 것보다 차라리 별도로 나눠서 하는 방법이 반복도 줄이고 좋을 것 같았다.
header.jsp 파일 코드
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
<title>응급구조사와 응급실 연계 시스템</title>
<style>
*{
margin:10px;
padding:0px;
box-sizing: border-box;
}
body{
display: inline-block;
display: block;
}
.header{
width: 100%;
height: 100px;
display: flex;
flex-direction: row;
justify-items: space-between;
align-items: center;
text-align: center;
}
#header__left{
display: flex;
height: 100%;
width: 30%;
}
#headerImg{
background-image: url("<%=request.getContextPath()%>/resources/image/headers.png");
width: 79px;
height: 80%;
background-size:contain;
}
#header__right{
display: flex;
width: 60%;
font-size: 20px;
}
#title{
display: flex;
align-items: center;
font-size: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="header">
<div id="header__left">
<div id="headerImg"> </div>
<div id="title"> EMBAD </div>
</div>
<div style="width: 40%;"></div>
<div id="header__right">
<div>
<a class="nav-link" aria-current="page" href="/navMenu1Page"> 응급실 찾기 </a>
</div>
<div>
<a class="nav-link" href="/navMenu2Page" >병원 접수 내역</a>
</div>
<div>
<a class="nav-link " href="/navMenu3Page" aria-disabled="true">정보 변경</a>
</div>
<div>
<a class="nav-link" href="/logout" aria-disabled="true">로그아웃</a>
</div>
</div>
</div>
<p class="placeholder-wave">
<span class="placeholder col-12 bg-primary"></span>
</p>
</body>
editStaff.jsp 파일 코드
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%--<%@ page session="false" %>--%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<style>
section {
margin: 10px 10px 10px 10px;
width: 99%;
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
}
button {
width: 150px;
border: none;
font-weight: bold;
}
</style>
</head>
<body>
<%@ include file="/WEB-INF/views/include/header.jsp" %>
<section>
<div style="margin:0; padding:0; width: 100%; height: 800px; display: flex; flex-direction: column; align-items: center;">
<div style="width:100%; height: 50px;"></div>
<div class="shadow p-3 mb-5 bg-body-tertiary rounded" style="width: 50%; height: 750px;">
<p class="fs-1">⚙️ 내 정보 수정 </p>
<div class="mb-3">
<c:set var="vo" value="${vo}" scope="request"/>
<form action="/editStaffInfo" method="POST" id="editStaffForm">
<fieldset disabled>
<label class="form-label">이름</label>
<div>
<input type="text" class="form-control" placeholder="${vo.staffName}" readonly>
</div>
<label class="form-label">Email</label>
<div>
<input type="email" class="form-control" value="${vo.staffEmail}" id="staffEmail" placeholder="${vo.staffEmail}" readonly>
</div>
</fieldset>
<label for="inputPassword5" class="form-label">Password</label>
<div>
<input type="password" id="inputPassword5" class="form-control" name="staffPass"
aria-describedby="passwordHelpBlock" placeholder="영문5자리이상 / ` , & , $ , % 사용불가">
</div>
<label for="inputPassword5" class="form-label">연락처</label>
<div>
<input type="text" id="phoneNumber1" style="width: 10%;"/> - <input
type="text" id="phoneNumber2" style="width: 20%;"/> - <input
type="text" id="phoneNumber3" style="width: 20%;">
</div>
<button type="submit" class="btn btn-primary" style="width: 100%; margin-top: 10px"> 수정 완료</button>
</form>
</div>
</div>
</div>
</section>
<%@ include file="/WEB-INF/views/include/footer.jsp" %>
<script>
function goToInfo() {
location.href = "<%=request.getContextPath()%>/navMenu1Page"
}
</script>
<script src="<%=request.getContextPath()%>/resources/javascript/hospitalDataAPI.js"></script>
<script src="<%=request.getContextPath()%>/resources/javascript/emailCheckProcess.js"></script>
<script src="<%=request.getContextPath()%>/resources/javascript/singup.js"></script>
<script src="<%=request.getContextPath()%>/resources/javascript/editStaff.js"></script>
</body>
</html>
지금처럼 header와 footer의 코드를 없애고 중간에 section만 작성하면 돼서 편리했다
추가로 폰트에 대한 설정이라던지, 공통으로 들어가야 하는 CSS설정은 header에 정의를 했다.
그래서 header를 include 하게 되면 기본적인 CSS설정이 모두 적용되는 효과를 보았다.
JSP 란?
JSP파일은 JavaServer Pages 약자로 Java언어를 기반으로 웹 페이지를 동적으로 생성하는 데 사용되는 파일 형식이다.
HTML코드와 JAVA코드를 혼합하여 웹 페이지를 생성하며 주로 웹 애플리케이션 개발에서 사용한다
✨ 특징
동적 웹페이지를 생성하기 위한 서버 사이드 스크립트 언어이다.
HTML과 함께 JAVA코드를 포함하여 클라이언트에게 동적으로 생성된 콘텐츠를 제공한다
템플릿 형태로 사용할 수 있으며 include 지시문을 사용해 다른 jsp파일을 포함시킬 수 있다.
✨ 장점
JSP파일을 주로 사용하는 헤더, 사이드바, 네비바, 푸터 등 이런 파일로 나눈 뒤 include를 사용하여 조합하면 모듈화가 가능하다
수정 시 해당 파일만 수정하면 되기 때문에 유지보수가 편리하다
모든 페이지에서 동일하게 보이기 때문에 일관성 유지에 용이하다
✨ Spring에서 역할
스프링 MVC 아키텍처에서 View를 담당하며 클라이언트에 동적 콘텐츠를 제공하는 데 사용된다
컨트롤러가 모델로부터 전달 한 데이터를 표시해 주며 모델과 뷰 사이의 데이터전달을 지원한다
JSP는 이 데이터를 화면에 렌더링 하여 사용자에게 보여준다
추가로 HTML폼을 생성하거나 사용자의 입력을 받을 수 있고 이 입력을 다시 스프링 컨트롤러로 전송할 수 있다.
✨ JSP와 비슷한 View템플릿
대표적으로 Thymeleaf가 많이 쓰는 것으로 보인다
추가로 FreeMarker, Velocity, Mustache, Handlebars가 있다.
'👀 Side Project > Eᴍʙᴀᴅ (23.12~24.01)' 카테고리의 다른 글
| 공공데이터포털 API serviceKey 오류/SERVICE KEY IS NOT REGISTERED ERROR/해결 (0) | 2024.01.28 |
|---|---|
| 공공데이터포털 API 적용 및 구현 (1) | 2024.01.28 |
| Javascript 서버요청/비동기통신/노드제어 (2) | 2024.01.28 |
| ER다이어그램, ERD, Spring구축 (0) | 2024.01.07 |
| HTML/CSS 작업 (0) | 2024.01.04 |
