$$config title: 포트폴리오 keywords: - IT - JAVA - MVC 패턴 $$ # 포트폴리오 기술 설명서 ## 제목 ## JAVA 기반 MVC 패턴 WB블로그 포트폴리오 기술 설명서(개발자 : 정보광) - 사이트 아직 배포 안함 - [소스코드](https://github.com/JeongBoKwang/WB_BLOG) - 블로그 - 해당 프로젝트는 JAVA 기반으로 MVC구조의 블로그이며, 개인 프로젝트 입니다. - WB블로그는 모든 사람들이 서로 생활, 정보 등을 글로 자유롭게 쓰며 공감하고 서로 공유할 수 있는 블로그 입니다. ## 목차 - 기술 스택 - 기능 설명 - 회원 - 회원가입 - 로그인 - 로그아웃 - 아이디 찾기 - 비밀번호 찾기 - 회원정보 수정 - 게시물 - 리스트 - 상세내용 - 작성 - 삭제 - 수정 - 조회수 - 좋아요 / 싫어요 - 댓글 - 작성 - 삭제 - 수정
#### 기술 스택 - 형상 관리 : Git Github - 배포 관리 : 미정 - 기술 스택 - Tomcat - JDK 1.8 - Servlet / JSP - JDBC - MariaDB - jQuery - Ajax - JAVA - HTML - CSS - JavaScript - Tailwind - CentOS (예정)
- 개발 툴 - STS - SQLYog - Maven - Git, Github - Visual Studio Code - Chrome - Windows 10
#### 기능설명 ##### 메인 페이지 ![메인](https://i.imgur.com/1gC6Ocr.png) ```java @RequestMapping("/usr/home/main") public String showMain() { return "usr/home/main"; } @RequestMapping("/") public String showRoot() { return "redirect:/usr/home/main"; } ``` - /usr/home/main 의 요청이 들어오면 return값에 의해 mian.jsp로 이동. - url 주소 /usr/home/main을 "/"로 변경 main.jsp ```js <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ include file="../common/head.jspf"%>

Welcome

저의 블로그에 놀러오신걸 환영합니다~!

SERVICES

DESIGN MANAGEMENT

JAVA DEVELOPE

BRAND DESIGN

<%@ include file="../common/foot.jspf"%> ``` - head와 foot은 모든 페이지에 다 나오기 때문에 common파일을 따로 만들어 jspf파일을 만들어 인클루드 시킴.
*** ##### 회원관련 기능 *** ###### 회원가입 UsrMemberController.java ``` java @RequestMapping("/usr/member/join") public String showJoin() { return "usr/member/join"; } ``` - /usr/member/join 요청이 들어오면 사용자에게 join.jsp로 화면을 보여준다. ![회원가입](https://i.imgur.com/dHugSKP.png) join.jsp ```js

뒤로가기 게시물 수정 게시물 삭제

``` - 좋아요/싫어요는 로그아웃 상태에서 비활성화 - 해당 게시물 작성자가 아니면 수정/삭제 비활성화 ```js 게시글 작성 ``` - 프론트에서 제목과 내용 공백 체크함. - 작성버튼을 누르면 Controller의 doWrite함수로 이동. UsrArticleController.java ```java @RequestMapping("/usr/article/doWrite") @ResponseBody public String doWrite(int boardId, String title, String body, String replaceUri) { // 게시글 작성 // 백엔드에서 공백 2차 체크 if (Ut.empty(title)) { return rq.jsHistoryBack("title(을)를 입력해주세요."); } if (Ut.empty(body)) { return rq.jsHistoryBack("body(을)를 입력해주세요."); } // articleService로 게시글 작성에 필요한 데이터를 넘김. ResultData writeArticleRd = articleService.writeArticle(rq.getLoginedMemberId(), title, body, boardId); int id = writeArticleRd.getData1(); if (Ut.empty(replaceUri)) { replaceUri = Ut.f("../article/detail?id=%d", id); } return rq.jsReplace(Ut.f("%d번 게시글이 작성되었습니다.", id), replaceUri); } ``` - ArticleService.java ```java public ResultData writeArticle(int memberId, String title, String body, int boardId) { articleRepository.writeArticle(memberId, title, body, boardId); int id = articleRepository.getLastInsertId(); return ResultData.from("S-1", Ut.f("%d번 게시물이 생성되었습니다.", id), "id", id); } ``` - ArticleRepository로 데이터 전달 - 작성한 게시글의 번호를 가지고 온다.(getLastInsertId) ArticleRepository.java ```java public void writeArticle(@Param("memberId") int memberId, @Param("boardId") int boardId, @Param("title") String title, @Param("body") String body); ``` - ArticleRepository.xml로 이동 - param()어노테이션 생략 가능 ```xml INSERT INTO article SET regDate = NOW(), updateDate = NOW(), boardId = #{boardId}, memberId = #{memberId}, title = #{title}, `body` = #{body} ``` - 해당 게시판에 게시글을 추가한다. *** ###### 삭제 - 상세보기 페이지에서 게시물 삭제를 누르게되면 사용자에게 한번더 물어보기위해 알림을 띄어준다. ![삭제확인 알림](https://i.imgur.com/Qt4Z9c9.png) - 확인을 누르면 /article/doDelete로 이동. UsrArticleController.java ```java @RequestMapping("/usr/article/doDelete") @ResponseBody public String doDelete(int id) { // 해당 게시글의 정보를 가져옴. Article article = articleService.getForPrintArticle(rq.getLoginedMemberId(), id); // 게시글 존재 유무 확인 if (article == null) { rq.jsHistoryBack(Ut.f("%d번 게시물이 존재하지 않습니다.", id)); } // 권한체크 if (article.getMemberId() != rq.getLoginedMemberId()) { return rq.jsHistoryBack("권한이 없습니다."); } // 삭제 실행 articleService.deleteArticle(id); return rq.jsReplace(Ut.f("%d번 게시물을 삭제하였습니다.", id), "../article/list"); } ``` - 현재 로그인한 멤버의 아이디와 해당 게시글의 작성자 아이디가 같은지 확인. ArticleService.java ```java public void deleteArticle(int id) { articleRepository.deleteArticle(id); } ``` - 삭제하려는 게시글의 id를 ArticleRepository로 넘김. ArticleRepository.java ```java public void deleteArticle(@Param("id") int id); ``` - ArticleRepository.xml로 연결 - param()어노테이션 생략가능 ArticleRepository.xml ```xml DELETE FROM article WHERE id = #{id} ``` - 해당 게시글 삭제 처리. *** ###### 수정 - 상세보기페이지에서 게시물 수정을 누르면 - /article/modify로 이동 ```java @RequestMapping("/usr/article/modify") public String showModify(Model model, int id) { // 수정하려는 게시글의 정보를 가져옴 Article article = articleService.getForPrintArticle(rq.getLoginedMemberId(), id); // 게시글 존재 유무 확인 if (article == null) { return rq.historyBackJsOnView(Ut.f("%d번 게시물이 존재하지 않습니다.", id)); } // 수정 권한 확인 ResultData actorCanModifyRd = articleService.actorCanModify(rq.getLoginedMemberId(), article); // 수정 권한이 없으면 메세지와 함께 히스토리백 if (actorCanModifyRd.isFail()) { return rq.historyBackJsOnView(actorCanModifyRd.getMsg()); } // model에 해당 게시글 값 추가 model.addAttribute("article", article); // jsp로 이동 return "usr/article/modify"; } ``` - model에 해당 게시글의 값을 추가해준다. modify.jsp ![게시글 수정](https://i.imgur.com/B0aXNlr.png) ```js 게시글 수정 게시물 상세페이지 게시물 삭제 ``` - 스크립트 절에서 공백체크를 해줌 - 기존에 작성했던 게시글의 내용을 그대로 보여줌 - 수정 버튼을 누르면 doModify함수로 이동한다. UsrArticleController.java ```java @RequestMapping("/usr/article/doModify") @ResponseBody public String doModify(int id, String title, String body) { Article article = articleService.getForPrintArticle(rq.getLoginedMemberId(), id); if (article == null) { return rq.jsHistoryBack(Ut.f("%d번 게시글이 존재하지 않습니다.", id)); } // 게시물 수정 권한 ResultData actorCanModifyRd = articleService.actorCanModify(rq.getLoginedMemberId(), article); if (actorCanModifyRd.isFail()) { return rq.jsHistoryBack(actorCanModifyRd.getMsg()); } articleService.modifyArticle(id, title, body); return rq.jsReplace(Ut.f("%d번 글이 수정되었습니다.", id), Ut.f("../article/detail?id=%d", id)); } ``` - 공백체크 - ArticleService로 데이터 넘김. ArticleService.java ```java public ResultData

modifyArticle(int id, String title, String body) { // 수정 진행 articleRepository.modifyArticle(id, title, body); // 방금 수정한 게시글의 데이터를 가져옴 Article article = getForPrintArticle(0, id); return ResultData.from("S-1", Ut.f("%d번 게시물이 수정되었습니다.", id), "article", article); } ``` ArticleRepository.java ```java public void modifyArticle(@Param("id") int id, @Param("title") String title, @Param("body") String body); ``` - ArticleRepository.xml연결 ArticleRepository.xml ```xml UPDATE article title = #{title}, `body` = #{body}, updateDate = NOW() WHERE id = #{id} ``` - ArticleService에서 가져온 데이터 수행. *** ###### 좋아요 / 싫어요 ![좋아요](https://i.imgur.com/xgzSfQL.png) ![싫어요](https://i.imgur.com/10bu2fE.png) detail.jsp ```js 좋아요 ? 싫어요 ? 좋아요 ? 싫어요 ? 좋아요 ? 싫어요 ? ``` - 좋아요/싫어요 수행시 알림. - 좋아요/싫어요 누른 후 취소할 시 처음 눌렀던 버튼 눌러달라는 알림. UsrReactionPointController.java ```java @RequestMapping("/usr/reactionPoint/doGoodReaction") @ResponseBody String doGoodReaction(String relTypeCode, int relId, String replaceUri) { // 현재 사용자가 게시글에 대한 리액션자격 확인. ResultData actorCanMakeReactionPointRd = reactionPointService.actorCanMakeReactionPoint(rq.getLoginedMemberId(), relTypeCode, relId); // 자격이 없으면 해당 메세지와 함께 돌려보냄. if (actorCanMakeReactionPointRd.isFail()) { return rq.jsHistoryBack(actorCanMakeReactionPointRd.getMsg()); } // 좋아요 액션 실행. ResultData addGoodReactionPointRd = reactionPointService.addGoodReactionPoint(rq.getLoginedMemberId(), relTypeCode, relId); return rq.jsReplace(addGoodReactionPointRd.getMsg(), replaceUri); } @RequestMapping("/usr/reactionPoint/doBadReaction") @ResponseBody String doBadReaction(String relTypeCode, int relId, String replaceUri) { // 현재 사용자가 게시글에 대한 리액션자격 확인. ResultData actorCanMakeReactionPointRd = reactionPointService.actorCanMakeReactionPoint(rq.getLoginedMemberId(), relTypeCode, relId); // 자격이 없으면 해당 메세지와 함께 돌려보냄. if (actorCanMakeReactionPointRd.isFail()) { return rq.jsHistoryBack(actorCanMakeReactionPointRd.getMsg()); } // 싫어요 액션 실행. ResultData addBadReactionPointRd = reactionPointService.addBadReactionPoint(rq.getLoginedMemberId(), relTypeCode, relId); return rq.jsReplace(addBadReactionPointRd.getMsg(), replaceUri); } @RequestMapping("/usr/reactionPoint/doCancelGoodReaction") @ResponseBody String doCancelGoodReaction(String relTypeCode, int relId, String replaceUri) { // 현재 사용자가 게시글에 대한 리액션자격 확인. ResultData actorCanMakeReactionPointRd = reactionPointService.actorCanMakeReactionPoint(rq.getLoginedMemberId(), relTypeCode, relId); // 자격이 없으면 해당 메세지와 함께 돌려보냄. if (actorCanMakeReactionPointRd.isSuccess()) { return rq.jsHistoryBack("이미 취소되었습니다."); } // 좋아요 취소 액션 실행. ResultData deleteGoodReactionPointRd = reactionPointService.deleteGoodReactionPoint(rq.getLoginedMemberId(), relTypeCode, relId); return rq.jsReplace(deleteGoodReactionPointRd.getMsg(), replaceUri); } @RequestMapping("/usr/reactionPoint/doCancelBadReaction") @ResponseBody String doCancelBadReaction(String relTypeCode, int relId, String replaceUri) { // 현재 사용자가 게시글에 대한 리액션자격 확인. ResultData actorCanMakeReactionPointRd = reactionPointService.actorCanMakeReactionPoint(rq.getLoginedMemberId(), relTypeCode, relId); // 자격이 없으면 해당 메세지와 함께 돌려보냄. if (actorCanMakeReactionPointRd.isSuccess()) { return rq.jsHistoryBack("이미 취소되었습니다."); } // 싫어요 취소 액션 실행. ResultData deleteBadReactionPointRd = reactionPointService.deleteBadReactionPoint(rq.getLoginedMemberId(), relTypeCode, relId); return rq.jsReplace(deleteBadReactionPointRd.getMsg(), replaceUri); } ``` - 해당 액션을 수행하기위해 reactionPointService에 데이터를 넘긴다. - doGoodReaction = addGoodReactionPoint - doBadReaction = addBadReactionPoint - doCancelGoodReaction = deleteGoodReactionPoint - doCancelBadReaction =deleteBadReactionPoint ReactionPointService.java ```java // 자격확인. public ResultData actorCanMakeReactionPoint(int actorId, String relTypeCode, int relId) { if (actorId == 0) { return ResultData.from("F-1", "로그인 후 이용해주세요."); } int sumReactionPointByMemberId = reactionPointRepository.getSumReactionPointByMemberId(relTypeCode, relId, actorId); if (sumReactionPointByMemberId != 0) { return ResultData.from("F-2", "리액션이 불가능합니다.", "sumReactionPointByMemberId", sumReactionPointByMemberId); } return ResultData.from("S-1", "리액션이 가능합니다.", "sumReactionPointByMemberId", sumReactionPointByMemberId); } public ResultData addGoodReactionPoint(int actorId, String relTypeCode, int relId) { // 현재 사용자가 어느 게시판에 몇번째 글에 좋아요를 했는지 저장 reactionPointRepository.addGoodReactionPoint(actorId, relTypeCode, relId); // 해당 게시글에 리액션 포인트 증가 switch (relTypeCode) { case "article": articleService.increaseGoodReactionPoint(relId); break; } return ResultData.from("S-1", "좋아요를 누르셨습니다."); } public ResultData addBadReactionPoint(int actorId, String relTypeCode, int relId) { // 현재 사용자가 어느 게시판에 몇번째 글에 싫어요를 했는지 저장 reactionPointRepository.addBadReactionPoint(actorId, relTypeCode, relId); // 해당 게시글에 리액션 포인트 감소 switch (relTypeCode) { case "article": articleService.increaseBadReactionPoint(relId); break; } return ResultData.from("S-1", "싫어요를 누르셨습니다."); } public ResultData deleteGoodReactionPoint(int actorId, String relTypeCode, int relId) { // 현재 사용자가 어느 게시판에 몇번째 글에 좋아요 취소를 했는지 저장 reactionPointRepository.deleteReactionPoint(actorId, relTypeCode, relId); // 해당 게시글에 리액션 포인트 감소 switch (relTypeCode) { case "article": articleService.decreaseGoodReactionPoint(relId); break; } return ResultData.from("S-1", "좋아요가 취소처리 되었습니다"); } public ResultData deleteBadReactionPoint(int actorId, String relTypeCode, int relId) { // 현재 사용자가 어느 게시판에 몇번째 글에 싫어요 취소를 했는지 저장 reactionPointRepository.deleteReactionPoint(actorId, relTypeCode, relId); // 해당 게시글에 리액션 포인트 증가 switch (relTypeCode) { case "article": articleService.decreaseBadReactionPoint(relId); break; } return ResultData.from("S-1", "싫어요가 취소처리 되었습니다"); } ``` - 현재 사용자가 어느 게시판에 몇번째 글에 해당 리액션을 했는지 저장하기위해 reactionPointRepository. 로 데이터를 넘김. - addGoodReactionPoint - addBadReactionPoint - deleteReactionPoint - deleteBadReactionPoint - relTypeCode로 어떤 게시판인지 알아낸뒤 해당 게시판에 해당 글의 리액션 포인트를 증감시키기위해 articleService. 로 데이터를 넘긴다. - increaseGoodReactionPoint - increaseBadReactionPoint - decreaseGoodReactionPoint - decreaseBadReactionPoint ReactionPointRepository.java ```java @Select(""" SELECT IFNULL(SUM(RP.point), 0) AS s FROM reactionPoint AS RP WHERE RP.relTypeCode = #{relTypeCode} AND RP.relId = #{relId} AND RP.memberId = #{memberId} """) int getSumReactionPointByMemberId(String relTypeCode, int relId, int memberId); @Insert(""" INSERT INTO reactionPoint SET regDate = NOW(), updateDate = NOW(), relTypeCode = #{relTypeCode}, relId = #{relId}, memberId = #{memberId}, `point` = 1 """) void addGoodReactionPoint(int memberId, String relTypeCode, int relId); @Insert(""" INSERT INTO reactionPoint SET regDate = NOW(), updateDate = NOW(), relTypeCode = #{relTypeCode}, relId = #{relId}, memberId = #{memberId}, `point` = -1 """) void addBadReactionPoint(int memberId, String relTypeCode, int relId); @Delete(""" DELETE FROM reactionPoint WHERE relTypeCode = #{relTypeCode} AND relId = #{relId} AND memberId = #{memberId} """) void deleteReactionPoint(int memberId, String relTypeCode, int relId); ``` - 데이터 요청 처리 ArticleService.java ```java public ResultData increaseGoodReactionPoint(int relId) { int affectedRowsCount = articleRepository.increaseGoodReactionPoint(relId); if (affectedRowsCount == 0) { return ResultData.from("F-1", "해당 게시물이 존재하지 않습니다.", "affectedRowsCount", affectedRowsCount); } return ResultData.from("S-1", "좋아요 수가 증가되었습니다.", "affectedRowsCount", affectedRowsCount); } public ResultData increaseBadReactionPoint(int relId) { int affectedRowsCount = articleRepository.increaseBadReactionPoint(relId); if (affectedRowsCount == 0) { return ResultData.from("F-1", "해당 게시물이 존재하지 않습니다.", "affectedRowsCount", affectedRowsCount); } return ResultData.from("S-1", "싫어요 수가 증가되었습니다.", "affectedRowsCount", affectedRowsCount); } public ResultData decreaseGoodReactionPoint(int relId) { int affectedRowsCount = articleRepository.decreaseGoodReactionPoint(relId); if (affectedRowsCount == 0) { return ResultData.from("F-1", "해당 게시물이 존재하지 않습니다.", "affectedRowsCount", affectedRowsCount); } return ResultData.from("S-1", "좋아요d 수가 감소되었습니다.", "affectedRowsCount", affectedRowsCount); } public ResultData decreaseBadReactionPoint(int relId) { int affectedRowsCount = articleRepository.decreaseBadReactionPoint(relId); if (affectedRowsCount == 0) { return ResultData.from("F-1", "해당 게시물이 존재하지 않습니다.", "affectedRowsCount", affectedRowsCount); } return ResultData.from("S-1", "싫어요 수가 감소되었습니다.", "affectedRowsCount", affectedRowsCount); } ``` - affectedRowsCount가 0이면 게시물이 존재하지 않는것 이므로 메세지와 함께 돌려보냄. - ArticleRepository로 데이터를 넘김. - increaseGoodReactionPoint - increaseBadReactionPoint - decreaseGoodReactionPoint - decreaseBadReactionPoint ArticleRepository.java ```java @Update("""