고정 헤더 영역
상세 컨텐츠
본문
오늘은
오늘은 드디어 메인 페이지의 작업을 마쳤습니다
음... 버그도 다 잡고 z-index를 활용해서 버튼 문제도 해결하고
js의 코드도 열심히 짜서 사진이 자동으로 넘어가고 하는
기능들도 구현을 다 했는데
백엔드 파트를 맡은 팀원들 쪽에서 jsp 파일로 코드를 옮겨가면
버그가 발생하는 경우가 많다고 하여
js 코드를 제외하고 html과 css 만으로 코드를 작성해달라고 통보를 해왔습니다
프론트에서 js를 빼면 시체와 다를바가 없는데
잘 모르는 부분이라고 해서, 버그가 발생한다고 해서
아예 빼버리자고 하니.. 반박을 하고싶었지만
솔직히 프론트를 실질적으로 혼자 도맡아 하고 있었던 입장에서는
어찌할 도리가 없었습니다
의욕에 불타 열심히 지금까지 해왔던 저였지만
이번일을 계기로 팀 프로젝트의 방향에 길을 잃게되어
어찌할바를 모르겠기에
팀 프로젝트로 바쁜 와중에 생각을 한번 깊게 해보아야겠습니다
학원 수업
프로젝트 기간에도 멈추지 않는 수업... 강사님의 열정에 따라 오늘도 수업을 진행하였습니다
maincontroller에서의 파일 업로드와 경로
String realFolder ="C:\\jspworks\\members\\src\\main\\webapp\\upload";
int maxSize = 10*1024*1024; //10MB
String encType = "utf-8"; //파일이름 한글 인코딩
DefaultFileRenamePolicy policy = new DefaultFileRenamePolicy();
//5가지 인자
MultipartRequest multi = new MultipartRequest(request, realFolder, maxSize, encType, policy);
// 폼 데이터 닫기
String title = multi.getParameter("title");
String content = multi.getParameter("content");
// 세션 가져오기(id)
String id = (String)session.getAttribute("sessionId");
//file 속성
Enumeration<?> files = multi.getFileNames();
String filename = "";
while(files.hasMoreElements()) { //파일이름이 있는 동안 반복
String userFilename = (String)files.nextElement();
//실제 저장될 이름
filename = multi.getFilesystemName(userFilename);
}
// db에 저장
Board b = new Board();
b.setTitle(title);
b.setContent(content);
b.setFilename(filename);
b.setId(id);
// write()호출, 실행
bDAO.write(b);
nextPage = "/board/boardlist.jsp";
server.xml
<Context docBase="members" path="/" reloadable="true" source="org.eclipse.jst.jee.server:members"/>
<Context docBase="C:\\jspworks\\members\\src\\main\\webapp\\upload" path="/upload" reloadable="true"/>
jsp 파일
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<script src="https://kit.fontawesome.com/bf7b37fa88.js" crossorigin="anonymous"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글 상세보기</title>
<link rel="stylesheet" href="resources/css/style.css">
</head>
<body>
<c:if test="${empty sessionId }">
<script type="text/javascript">
alert("로그인이 필요합니다");
location.href="/loginform.do";
</script>
</c:if>
<jsp:include page="../header.jsp"/>
<div id="container">
<section id="board_view">
<h2>글 상세보기</h2>
<table>
<tbody>
<tr>
<td>
<input type="text" name="title" value="${board.title}" readonly>
</td>
</tr>
<tr>
<td>
<c:if test="${not empty board.filename}">
<div>
<img src="../upload/${board.filename}" alt="">
</div>
</c:if>
<br>
${board.content}
</td>
</tr>
<tr class="viewhit">
<td>
<p> 작성자: ${board.id}
</td>
<td>
<p> 작성일: ${board.createDate}
</td>
<td>
<p> 조회수: ${board.hit}
</td>
</tr>
<tr class="uploadfile">
<td>
<c:choose>
<c:when test="${not empty board.filename}">
${board.filename}<a href="filedown.do?filename=${board.filename}"> [다운로드] </a>
</c:when>
<c:otherwise>
<c:out value="첨부파일이 없습니다 "/>
</c:otherwise>
</c:choose>
</td>
</tr>
<tr>
<td>
<c:if test="${sessionId eq board.id}">
<a href="/updateboardform.do?bno=${board.bno}">
<button type="button" class="ud_btn">수정</button>
</a>
<a href="/deleteboard.do?bno=${board.bno}" onclick="return confirm('정말로 삭제하시겠습니까?')">
<button type="button" class="ud_btn">삭제</button>
</a>
</c:if>
<a href="/boardlist.do">
<button type="button" class="list_btn">목록</button>
</a>
</td>
</tr>
</tbody>
</table>
<!-- 댓글 영역 -->
<h3 class="replytitle"> 댓글 <i class="fa-regular fa-comment-dots"></i></h3><br>
<c:forEach items="${replyList}" var="reply">
<div class="reply">
<p>작성자: ${reply.replyer}</p>
<p>${reply.rcontent}</p>
<p>
<span>(작성일: <fmt:formatDate value ="${reply.rdate}" pattern="yyyy-MM-dd HH:mm:ss a"/>)</span>
<c:if test="${sessionId eq reply.replyer}">
<a href="/updatereplyform.do?bno=${board.bno}&rno=${reply.rno}">수정</a>
| <a href="/deletereply.do?bno=${board.bno}&rno=${reply.rno}" onclick="return confirm('정말로 삭제하시겠습니까?')">삭제</a>
</c:if>
</p>
</div>
</c:forEach>
<!-- 댓글 등록 -->
<form action="/insertreply.do" id="replyform">
<input type="hidden" name="bno" value="${board.bno}">
<input type="hidden" name="replyer" value="${sessionId}">
<p>
<textarea rows="4" cols="50" name="rcontent"
placeholder="댓글을 남겨주세요"></textarea>
</p>
<c:if test="${not empty sessionId}">
<button type="submit">등록</button>
</c:if>
</form>
<!-- 로그인한 사용자만 댓글 등록 가능 -->
<c:if test="${empty sessionId}">
<div class="replylogin">
<a href="/loginform.do">
<i class="fa-solid fa-user"></i>로그인한 사용자만 댓글 등록이 가능합니다
</a>
</div>
</c:if>
</section>
</div>
<jsp:include page="../footer.jsp"/>
</body>
</html>
반려동물 온라인 쇼핑몰 페이지 만들기
* html 코드
<div class="mid-top">
<div class="main-prod-show"> <!-- 제일 큰 사진으로 주요 제품 등을 보여줌 -->
<div class="main-prod">
<a href=""><img id="main-prod-pic1" class="main-prod-pic" src="img/main_product/main-pic1.jpg" alt=""></a>
</div>
<div class="main-prod">
<a href=""><img id="main-prod-pic2" class="main-prod-pic" src="img/main_product/main-pic2.jpg" alt=""></a>
</div>
<div class="main-prod">
<a href=""><img id="main-prod-pic3" class="main-prod-pic" src="img/main_product/main-pic3.jpg" alt=""></a>
</div>
<div class="main-prod">
<a href=""><img id="main-prod-pic4" class="main-prod-pic" src="img/main_product/main-pic4.jpg" alt=""></a>
</div>
<div class="main-prod">
<a href=""><img id="main-prod-pic5" class="main-prod-pic" src="img/main_product/main-pic5.jpg" alt=""></a>
</div>
</div>
<div class="main-pic-button"> <!-- 버튼 클릭으로 메인 사진 선택 -->
<!-- <button class="pic1" onclick="selectPic(0)"></button>
<button class="pic2" onclick="selectPic(1)"></button>
<button class="pic3" onclick="selectPic(2)"></button>
<button class="pic4" onclick="selectPic(3)"></button>
<button class="pic5" onclick="selectPic(4)"></button> -->
</div>
</div>
* script 코드
function mainProdPicChange() {
let pic1 = document.querySelector("#main-prod-pic1");
let pic2 = document.querySelector("#main-prod-pic2");
let pic3 = document.querySelector("#main-prod-pic3");
let pic4 = document.querySelector("#main-prod-pic4");
let pic5 = document.querySelector("#main-prod-pic5");
let pics = [pic1, pic2, pic3, pic4, pic5];
pics.forEach((pic, index) => {
if (index === 0) {
pic.style.opacity = 1;
} else {
pic.style.opacity = 0;
}
});
pics.forEach(pic => {
pic.style.transition = "opacity 1s ease-in-out";
});
let currentIndex = 1;
setInterval(() => {
pics[currentIndex].style.opacity = 1;
for (let i = 0; i < pics.length; i++) {
if (i !== currentIndex) {
pics[i].style.opacity = 0;
}
}
currentIndex = (currentIndex + 1) % pics.length;
}, 3000);
}
function createButtonClickHandler(index) {
return function() {
selectPic(index);
};
}
function selectPic(index) {
let pics = [
document.querySelector("#main-prod-pic1"),
document.querySelector("#main-prod-pic2"),
document.querySelector("#main-prod-pic3"),
document.querySelector("#main-prod-pic4"),
document.querySelector("#main-prod-pic5")
];
pics.forEach((pic, i) => {
if (i === index) {
pic.style.opacity = 1;
} else {
pic.style.opacity = 0;
}
});
pics.forEach(pic => {
pic.style.transition = "opacity 0.5s ease-in-out";
});
}
for (let i = 0; i < 5; i++) {
let newButton = document.createElement('button');
newButton.className = 'pic' + (i + 1);
newButton.addEventListener('click', createButtonClickHandler(i));
mainPicButtonDiv.appendChild(newButton);
}
지금까지 팀 프로젝트를 하면서
스크립트 코드로 기능 구현을 하는것에 재미를 많이 붙였었는데
백엔드 파트 팀원들이 js 코드를 낯설어해서
더이상 사용하지 못하게 되어 너무나 아쉽습니다
하지만 팀 프로젝트는 팀 프로젝트고
저는 프론트엔드가 목표이기 때문에
멈추지않고 혼자서라도 계속 구현해 나갈 생각입니다
2023. 12. 14 (목)
'프로그래머가 될거야!' 카테고리의 다른 글
| 프로그래머 도전기 88일차 (2) | 2023.12.19 |
|---|---|
| 프로그래머 도전기 87일차 (0) | 2023.12.16 |
| 프로그래머 도전기 85일차 (0) | 2023.12.12 |
| 프로그래머 도전기 84일차 (0) | 2023.12.11 |
| 프로그래머 도전기 83일차 (0) | 2023.12.10 |
