$$config title: 스프링부트 커뮤니티 사이트 기술 설명서 keywords: - IT - 스프링부트 $$ # ? 스프링부트 커뮤니티 사이트 기술서 - 사이트 아직 배포안함. - [소스코드](https://github.com/sungbum1004/sb_c_2021_2nd) - 해당 프로젝트는 JAVA 기반으로 MVC구조의 커뮤니티 사이트 이며, 개인 프로젝트 입니다. - 회원가입을 통해 자유롭게 이용할 수 있도록 구현하였습니다. # 목차 - 기술 스택 - 기능 테스트 - 기능 설명 - 회원 - 회원가입 - 로그인 - 로그아웃 - 회원정보 수정 - 게시물 - 리스트 - 상세내용 - 작성 - 삭제 - 수정 - 조회수 - 좋아요 / 싫어요 - 댓글 - 작성 - 삭제 - 수정 ## 기술 스택 - 형성 관리 : Git Github - 배포 관리 : 미정 - 기술 스택 - Tomcat - JDK 1.8 - Servlet / JSP - JDBC - MariaDB - jQuery - Ajax - JAVA - HTML - CSS - JavaScript - Tailwind --- - 개발 툴 - STS - SQLYlog - Maven - Git, Github - Visual Studio Code - Chrome - Windows 10 ## 기능 테스트 - ✔ 회원가입 - 테스트통과 : 통과 - 테스트날짜 : 2021-07-31 - 테스트수행인 : 조성범 - ✔ 로그인 - 테스트통과 : 통과 - 테스트날짜 : 2021-08-14 - 테스트수행인 : 조성범 - ✔ 로그아웃 - 테스트통과 : 통과 - 테스트날짜 : 2021-08-14 - 테스트수행인 : 조성범 - ✔ 회원정보 수정 - 테스트통과 : 통과 - 테스트날짜 : 2021-09-26 - 테스트수행인 : 조성범 - ✔ 게시물 작성 - 테스트통과 : 통과 - 테스트날짜 : 2021-08-15 - 테스트수행인 : 조성범 - ✔ 게시물 리스트 - 테스트통과 : 통과 - 테스트날짜 : 2021-08-15 - 테스트수행인 : 조성범 - ✔ 게시물 상세내용 - 테스트통과 : 통과 - 테스트날짜 : 2021-08-08 - 테스트수행인 : 조성범 - ✔ 게시물 삭제 - 테스트통과 : 통과 - 테스트날짜 : 2021-08-08 - 테스트수행인 : 조성범 - ✔ 게시물 수정 - 테스트통과 : 통과 - 테스트날짜 : 2021-08-14 - 테스트수행인 : 조성범 - ✔ 게시물 조회수 - 테스트통과 : 통과 - 테스트날짜 : 2021-08-28 - 테스트수행인 : 조성범 - ✔ 게시물 좋아요 / 싫어요 - 테스트통과 : 통과 - 테스트날짜 : 2021-09-27 - 테스트수행인 : 조성범 - ✔ 댓글 작성 - 테스트통과 : 통과 - 테스트날짜 : 2021-09-27 - 테스트수행인 : 조성범 - ✔ 댓글 삭제 - 테스트통과 : 통과 - 테스트날짜 : 2021-09-27 - 테스트수행인 : 조성범 - ✔ 댓글 수정 - 테스트통과 : 통과 - 테스트날짜 : 2021-09-26 - 테스트수행인 : 조성범 ## 기능 설명 ### 메인 페이지 ```java @RequestMapping("/usr/home/main") public String showMain() { return "usr/home/main"; } ``` - /usr/home/main 의 요청이 들어오면 return값에 의해 main.jsp로 이동 #### main.jsp ```java <%@ 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"%>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae eaque tenetur quis aut quidem sed doloribus? Quasi illo laborum labore iste optio sit dolorum vel nemo aliquid rerum excepturi tempore.

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

로그인아이디
로그인비밀번호
이름
별명
휴대전화번호
이메일
회원가입

<%@ include file="../common/foot.jspf"%> ``` - 회원가입 버튼을 누르면 입력된 데이터를 가지고 UsrMemberController.java의 doJoin함수로 이동 #### UsrMemberController.java ```java @RequestMapping("/usr/member/doJoin") @ResponseBody public ResultData doJoin(String loginId, String loginPw, String name, String nickname, String cellphoneNo, String email) { if (Ut.empty(loginId)) { return ResultData.from("F-1", "loginId(을)를 입력해주세요."); } if (Ut.empty(loginPw)) { return ResultData.from("F-2", "loginPw(을)를 입력해주세요."); } if (Ut.empty(name)) { return ResultData.from("F-3", "name(을)를 입력해주세요."); } if (Ut.empty(nickname)) { return ResultData.from("F-4", "nickname(을)를 입력해주세요."); } if (Ut.empty(cellphoneNo)) { return ResultData.from("F-5", "cellphoneNo(을)를 입력해주세요."); } if (Ut.empty(email)) { return ResultData.from("F-6", "email(을)를 입력해주세요."); } ResultData joinRd = memberService.join(loginId, loginPw, name, nickname, cellphoneNo, email); if (joinRd.isFail()) { return (ResultData) joinRd; } Member member = memberService.getMemberById(joinRd.getData1()); return ResultData.newData(joinRd, "member", member); } ``` - 해당 데이터를 가지고 memberService.join으로 넘김. - 만약 회원가입이 실패햇으면 joinRd.isFail()로 해당 실패 - 만약 회원가입이 실패했으면 joinRd.isFail()로 해당 실패 메세지와 함께 다시 회원가입 창으로 이동. - 회원가입에 성공하면 성공 메세지와 함께 로그인창으로 이동. ![image](https://i.imgur.com/ciimNfz.png) #### MemberService.java ```java public ResultData join(String loginId, String loginPw, String name, String nickname, String cellphoneNo, String email) { // 로그인아이디 중복체크 Member oldMember = getMemberByLoginId(loginId); if (oldMember != null) { return ResultData.from("F-7", Ut.f("해당 로그인아이디(%s)는 이미 사용중입니다.", loginId)); } // 이름+이메일 중복체크 oldMember = getMemberByNameAndEmail(name, email); if (oldMember != null) { return ResultData.from("F-8", Ut.f("해당 이름(%s)과 이메일(%s)은 이미 사용중입니다.", name, email)); } // 리포지터리로 데이터 넘김 memberRepository.join(loginId, loginPw, name, nickname, cellphoneNo, email); int id = memberRepository.getLastInsertId(); return ResultData.from("S-1", "회원가입이 완료되었습니다. 다시 로그인 해주세요", "id", id); } ``` - getMemberByLoginId() 로그인 아이디 중복체크. - getMemberByNameAndEmail() 이름+이메일 중복체크. - memberRepository.getLastInsertId() 방금 생성된 회원의 회원번호를 가져옴. - Controller로 형식에 맞춰 데이터를 넘김. #### MemberRepository.java ```java @Insert(""" INSERT INTO `member` SET regDate = NOW(), updateDate = NOW(), loginId = #{loginId}, loginPw = #{loginPw}, `name` = #{name}, nickname = #{nickname}, cellphoneNo = #{cellphoneNo}, email = #{email} """) void join(@Param("loginId") String loginId, @Param("loginPw") String loginPw, @Param("name") String name, @Param("nickname") String nickname, @Param("cellphoneNo") String cellphoneNo, @Param("email") String email); ``` - 해당하는 데이터를 DB에 추가. - @Param() 어노테이션은 생략 가능하다. ### 로그인 #### UsrMemberController.java ```java @RequestMapping("/usr/member/login") public String showLogin() { return "usr/member/login"; } ``` - /usr/member/login 요청이 들어오면 login.jsp로 이동 ![image](https://i.imgur.com/3RsktMv.png) #### login.jsp ```java <%@ 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"%>

로그인아이디
로그인비밀번호
로그인	회원가입

<%@ include file="../common/foot.jspf"%> ``` - 각 a태그를 클릭하면 해당 기능에 해당되는 jsp와 controller의 함수로 이동. #### UsrMemberController.java ```java @RequestMapping("/usr/member/doLogin") @ResponseBody public String doLogin(String loginId, String loginPw) { if (Ut.empty(loginId)) { return rq.jsHistoryBack("loginId(을)를 입력해주세요."); } if (Ut.empty(loginPw)) { return rq.jsHistoryBack("loginPw(을)를 입력해주세요."); } Member member = memberService.getMemberByLoginId(loginId); if (member == null) { return rq.jsHistoryBack("존재하지 않은 로그인아이디 입니다."); } if (member.getLoginPw().equals(loginPw) == false) { return rq.jsHistoryBack("비밀번호가 일치하지 않습니다."); } rq.login(member); return rq.jsReplace(Ut.f("%s님 환영합니다.", member.getNickname()), "/"); } ``` - 백엔드에서 Ut.empty()로 2차 공백 체크. - MemberService로 해당 데이터 전달. - 로그인 성공시 로그인 하기전의 페이지로 이동. #### MemberService.java ```java public Member getMemberByLoginId(String loginId) { return memberRepository.getMemberByLoginId(loginId); } ``` - MemberRepository로 해당 데이터 전달. #### MemberRepository.java ```java @Select(""" SELECT * FROM `member` AS M WHERE M.loginId = #{loginId} """) Member getMemberByLoginId(@Param("loginId") String loginId); ``` - 입력 로그인 아이디에 해당하는 데이터 추출. ### 로그아웃 ![image](https://i.imgur.com/XXoRXVz.png) #### UsrMemberController.java ```java @RequestMapping("/usr/member/doLogout") @ResponseBody public String doLogout() { rq.logout(); return rq.jsReplace("로그아웃 되었습니다.", "/"); } ``` - 세션에 저장되어 있는 member 값을 제거후 메인페이지로 이동. ### 회원정보 수정 - 로그인을 하게 되면 상단의 mypage 메뉴가 나오게 된다. - mypage를 클릭하면 아래와 같은 창이 나오게 된다. ![image](https://i.imgur.com/CSzYlHM.png) #### myPage.jsp ```java

로그인아이디	${rq.loginedMember.loginId}
이름	${rq.loginedMember.name}
별명	${rq.loginedMember.nickname}
이메일	${rq.loginedMember.email}
휴대전화번호	${rq.loginedMember.cellphoneNo}
비고	회원정보수정

``` - 회원정보수정을 누르면 사용자가 맞는지 비밀번호로 한번더 확인하기위해 UsrMemberController의 checkPassword로 이동. ![image](https://i.imgur.com/K1P3f5A.png) #### checkPassword.jsp ```java <%@ 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"%>

로그인아이디	${rq.loginedMember.loginId}
로그인비밀번호
비밀번호 확인

<%@ include file="../common/foot.jspf"%> ``` #### UsrMemberController.java ```java @RequestMapping("/usr/member/doCheckPassword") @ResponseBody public String doCheckPassword(String loginPw, String replaceUri) { if (Ut.empty(loginPw)) { return rq.jsHistoryBack("loginPw(을)를 입력해주세요."); } if (rq.getLoginedMember().getLoginPw().equals(loginPw) == false) { return rq.jsHistoryBack("비밀번호가 일치하지 않습니다."); } if ( replaceUri.equals("../member/modify") ) { String memberModifyAuthKey = memberService.genMemberModifyAuthKey(rq.getLoginedMemberId()); replaceUri += "?memberModifyAuthKey=" + memberModifyAuthKey; } return rq.jsReplace("", replaceUri); } ``` - 보안을 위한 인증키 생성 (genMemberModifyAuthKey). - 인증키 생성후 modify로 이동. #### MemberService.java ```java public String genMemberModifyAuthKey(int actorId) { String memberModifyAuthKey = Ut.getTempPassword(10); attrService.setValue("member", actorId, "extra", "memberModifyAuthKey", memberModifyAuthKey, Ut.getDateStrLater(60 * 5)); return memberModifyAuthKey; } ``` - 현재시간 기준으로 5분뒤 시간을 가져옴. (Ut.getDateStrLater) - memberModifyAuthKey에 인증키 10자리 저장. - attr이라는 부가정보 테이블을 추가 및 데이터 저장. (attrService.setValue) #### modify.jsp ![image](https://i.imgur.com/5sdjQEg.png) #### UsrMemberController.java ```java @RequestMapping("/usr/member/modify") public String showModify(String memberModifyAuthKey) { // 인증키 공백 확인 if (Ut.empty(memberModifyAuthKey)) { return rq.historyBackJsOnView("memberModifyAuthKey(이)가 필요합니다."); } // 입력된 인증키가 실제 인증키와 같은지 확인 ResultData checkMemberModifyAuthKeyRd = memberService.checkMemberModifyAuthKey(rq.getLoginedMemberId(), memberModifyAuthKey); // 실패시 히스토리백 if (checkMemberModifyAuthKeyRd.isFail()) { return rq.historyBackJsOnView(checkMemberModifyAuthKeyRd.getMsg()); } return "usr/member/modify"; } ``` - 인증키가 비어있는지 확인. - 입력된 인증키가 실제 인증키와 같은지 확인. (checkMemberModifyAuthKey) - 확인이 끝나면 modify.jsp로 이동 #### MemberService.java ```java public ResultData checkMemberModifyAuthKey(int actorId, String memberModifyAuthKey) { // attr에서 데이터 추출 String saved = attrService.getValue("member", actorId, "extra", "memberModifyAuthKey"); if (!saved.equals(memberModifyAuthKey)) { return ResultData.from("F-1", "일치하지 않거나 만료되었습니다."); } return ResultData.from("S-1", "정상적인 코드입니다."); } ``` - 인증키와 5분이 넘어는지 확인후 성공 실패 여부 리턴. #### modify.jsp ```java let MemberModify__submitDone = false; function MemberModify__submit(form) { if (MemberModify__submitDone) { return; } form.loginPw.value = form.loginPw.value.trim(); if (form.loginPw.value.length > 0) { form.loginPwConfirm.value = form.loginPwConfirm.value.trim(); if (form.loginPwConfirm.value.length == 0) { alert('비밀번호확인을 입력해주세요.') form.loginPwConfirm.focus(); return; } if (form.loginPw.value != form.loginPwConfirm.value) { alert('비밀번호확인이 일치하지 않습니다.'); form.loginPwConfirm.focus(); return; } } form.name.value = form.name.value.trim(); if (form.name.value.length == 0) { alert('이름을 입력해주세요.') form.name.focus(); return; } form.nickname.value = form.nickname.value.trim(); if (form.nickname.value.length == 0) { alert('별명을 입력해주세요.') form.nickname.focus(); return; } form.email.value = form.email.value.trim(); if (form.email.value.length == 0) { alert('이메일을 입력해주세요.') form.email.focus(); return; } form.cellphoneNo.value = form.cellphoneNo.value.trim(); if (form.cellphoneNo.value.length == 0) { alert('휴대전화번호를 입력해주세요.') form.cellphoneNo.focus(); return; } MemberModify__submitDone = true; form.submit(); } ``` - 프론트에서 공백체크 ```java

로그인아이디	${rq.loginedMember.loginId}
새 로그인비밀번호
새 로그인비밀번호 확인
이름
별명
이메일
휴대전화번호
회원정보수정

``` - 회원정보수정을 누르면 입력된 데이터를 가지고 UsrMemberController.java의 doModify함수로 이동 #### UsrMemberController.java ```java @RequestMapping("/usr/member/doModify") @ResponseBody public String doModify(String memberModifyAuthKey, String loginPw, String name, String nickname, String email, String cellphoneNo) { if (Ut.empty(memberModifyAuthKey)) { return rq.jsHistoryBack("memberModifyAuthKey(이)가 필요합니다."); } // 인증키 및 시간 체크 ResultData checkMemberModifyAuthKeyRd = memberService.checkMemberModifyAuthKey(rq.getLoginedMemberId(), memberModifyAuthKey); if (checkMemberModifyAuthKeyRd.isFail()) { return rq.jsHistoryBack(checkMemberModifyAuthKeyRd.getMsg()); } if (Ut.empty(loginPw)) { loginPw = null; } if (Ut.empty(name)) { return rq.jsHistoryBack("name(을)를 입력해주세요."); } if (Ut.empty(nickname)) { return rq.jsHistoryBack("nickname(을)를 입력해주세요."); } if (Ut.empty(email)) { return rq.jsHistoryBack("email(을)를 입력해주세요."); } if (Ut.empty(cellphoneNo)) { return rq.jsHistoryBack("cellphoneNo(을)를 입력해주세요."); } ResultData modifyRd = memberService.modify(rq.getLoginedMemberId(), loginPw, name, nickname, email, cellphoneNo); return rq.jsReplace(modifyRd.getMsg(), "/"); } ``` - 백엔드에서 공백 2차 체크 진행. - 인증키 체크 진행. - 데이터들을 memberService로 넘김 - 수정이 끝나면 메인 페이지로 이동 #### MemberService.java ```java public ResultData modify(int id, String loginPw, String name, String nickname, String email, String cellphoneNo) { memberRepository.modify(id, loginPw, name, nickname, email, cellphoneNo); return ResultData.from("S-1", "회원정보가 수정되었습니다."); } ``` - 데이터를 다시 리포지터리로 넘김 - DB추가가 되면 ResultData로 메세지를 리턴함. #### MemberRepository.java ```java @Select("""