$$config title: JSP 커뮤니티 사이트 기술설명서 keywords: - IT - 기술설명서 - Spring - JAVA - MVC $$ # ? 개요 - 스프링 + 자바 기반의 게시판 형식의 커뮤니티 사이트 - 기본적인 커뮤니티 사이트에 필요한 기능 구현 - [Spring is Coming 사이트 바로가기](https://sic.public.sncode.kr/) # ? 원격 저장소 - [깃허브 리포지터리 바로가기](https://github.com/jiin-coder/sb_c_2022) # ? 사용된 기술 ## 형상 & 배포 관리 ``` - GitHub - Docker - Tomcat ``` ## 기술 스택 ``` - JDK - Java - Spring - MariaDB - HTML / CSS3 / JavaScript - jQuery - tailwind - daisy UI - TOAST UI editor ``` ## 개발 환경 ``` - STS - SQLyog - MariaDB - Maven - Visual Studio Code - Chrome - Windows 10 ``` ## 서비스 환경 ``` - NginX - MariaDB - Docker - CentOS 7 ``` ## 기능 현황 | 기능| 구현 | 배포 | 테스트 | | --- | -- | --- | --- | | 글 CRUD | ✔️ | ✔️ | ✔️ | | 게시판 페이징 | ✔️ | ✔️ | ✔️ | | 게시글 추천 | ✔️ | ✔️ | ✔️ | | 검색 | ✔️ | ✔️ | ✔️ | | 댓글 작성 | ✔️ | ✔️ | ✔️ | | TOAST UI editor 에디터 지원 | ✔️ | ✔️ | ✔️ | | 공지게시판 | ✔️ | ✔️ | ✔️ | | 자유게시판 | ✔️ | ✔️ | ✔️ | | 회원가입 | ✔️ | ✔️ | ✔️ | | 회원정보 수정 | ✔️ | ✔️ | ✔️ | | 로그인 | ✔️ | ✔️ | ✔️ | | 로그아웃 | ✔️ | ✔️ | ✔️ | ## Release # ? 요구사항 ## 요구사항 분석표 | RQ-ID | 화면명 | 요구사항명| 요구사항내용 | 날짜 | 작성자 | 진행사항 | 버전명 | | --- | -- | --- | --- | --- | -- | --- | --- | | RQ-0001 | 공통 | 상단 메뉴 구성 | 네비게이션 관련 메뉴를 구성한다. 게시판과 홈 화면으로 이동할 수 있다.| 3/31 | 김지애 | 반영 | 0.01 | | RQ-0002 | 공통 | 하단 영역 | 사이트의 이름과 로고가 있다. | 3/31 | 김지애 | 반영 | 0.01 | | RQ-0003 | 메인 화면 | 가운데 영역 | 공지게시판과 자유게시판이 있다. | 3/31 | 김지애 | 반영 | 0.01 | | RQ-0004 | 게시판 | 가운데 영역 | 해당 게시판의 게시글의 리스트가 있다. - 글 10개씩 1페이지 (아래) | 3/31 | 김지애 | 반영 | 0.01 | | RQ-0005 | 게시판 | 가운데 영역 | 검색바가 있다. - 내비게이션 오른쪽 하단 | 3/31 | 김지애 | 반영 | 0.01 | | RQ-0006 | 게시판 | 가운데 영역 | 글 작성 버튼이 있다. - 네비게이션바 왼쪽에서 2번째 | 3/31 | 김지애 | 반영 | 0.01 | | RQ-0007 | 게시글 | 가운데 영역 | 위에서부터 게시물 번호, 작성/수정일자, 작성자, 조회수, 추천수, 제목, 내용이 노출된다. | 3/31 | 김지애 | 반영 | 0.01 | | RQ-0008 | 게시글 | 가운데 영역 | 게시글 내용 중앙에 추천 버튼이 있다. | 3/31 | 김지애 | 반영 | 0.01 | | RQ-0009 | 게시글 | 가운데 영역 | 게시글 박스 아래에 댓글이 있다. 댓글 밑에 댓글 작성 폼이 있다. | 3/31 | 김지애 | 반영 | 0.01 | | RQ-0010 | 로그인 화면 | 가운데 영역 | 로그인 폼이 있다.| 3/31 | 김지애 | 반영 | 0.01 | | RQ-0011 | 회원가입 화면 | 가운데 영역 | 회원가입이 가능하다. - 내비게이션의 로그인 오른쪽 옆 | 3/31 | 김지애 | 반영 | 0.01 | ## 회원 - 회원가입이 가능하다. - 로그인과 로그아웃이 가능하다. - 마이페이지에서 회원정보 수정이 가능하다. ## 글쓰기 - 로그인한 회원이 글 쓰기가 가능하다 - 본인이 작성한 글은 수정과 삭제가 가능하다 ## 검색 - 게시물 제목, 내용으로 검색이 가능하다 ## 추천 - 게시글에 대한 추천이 가능하다 ## 댓글 - 게시글에 댓글 작성이 가능하다 - 본인이 작성한 댓글은 삭제가 가능하다 # ⚙️ 기능 ## 회원 - 회원가입 - 로그인 - 로그아웃 - 마이페이지 ## 게시판 - 게시글 작성 • 수정 • 삭제 - 게시글 리스팅 - 게시글 리스팅 페이징 - 게시글 추천하기 ## 댓글 - 게시글에 댓글 작성 - 댓글 삭제 ## 추천 - 좋아요 / 취소 - 싫어요 / 취소 ## 검색 - 게시글의 제목, 내용으로 게시글 검색 # ? 주요 폴더 및 파일 - `log4j.xml` : Logging 설정 파일 - `src/main/java` : Java Source 디렉토리 - `src/main/resources` : 설정 파일 - `DB` : 스키마 관리 - `src` : jsp 폴더 - `pom.xml` : Maven 관련 파일 # ? 서버 구조 $$uml !theme mars frame 작업자PC { frame 윈도우10 { frame 크롬 { } } } frame 운영서버머신 { frame CentOS7(public．sncode．kr,_172．17．0．1) { circle 172．17．0．1――8008 circle 172．17．0．1――443 circle 172．17．0．1――3306 frame 도커 { frame nginx――1 { circle nginx――1――443 } frame mariadb――1 { circle mariadb――1――3306 } frame tomcat――1{ circle tomcat――1――8080 } } } } 크롬 --> "172．17．0．1――443":1． https://sic．public．sncode．kr 로 접속 "172．17．0．1――443" --> "nginx――1――443" : 2． 외부 443 => nginx__1 내부 443 "nginx――1――443" --> "172．17．0．1――8008" : 3． nginx proxy manager 에 의해 => 외부 8080 "172．17．0．1――8008" --> "tomcat――1――8080" : 4． 외부 8008 => tomcat__1 내부 8080 "tomcat――1――8080" -[#green]-* "172．17．0．1――3306" : 5． DB 쿼리, 내부 8080 => 외부 3306 "172．17．0．1――3306" -[#green]-* "mariadb――1――3306" : 6． 외부 3306 => mariadb__1 내부 3306 $$ # ? 톰캣 구조 설명에 앞서 - 기본호스트를 tomcat.public.473.be 으로 가정 - 톰캣에 현재 2개의 호스트가 추가된 상황이라고 가정 - site9.public.473.be - site10.public.473.be $$uml @startwbs * 톰캣 ** 기본호스트 *** 매니저앱 *** 호스트매니저앱 *** 루트앱 *** docs앱 *** examples앱 ** site9.public.473.be 호스트 *** 매니저앱 *** 루트앱 ** site10.public.473.be 호스트 *** 매니저앱 *** 루트앱##1 *** 루트앱##2 @endwbs $$ ## 톰캣 구성요소 개요 설명에 앞서 - 기본호스트를 tomcat.public.473.be 으로 가정 - 톰캣에 현재 2개의 호스트가 추가된 상황이라고 가정 - site9.public.473.be - site10.public.473.be *** 1. `톰캣` - 스프링부트앱을 탑재할 수 있는 컨테이너 - 설치직후에는 기본호스트만 존재 - 호스트매니저앱에서 여러개의 호스트 추가 가능 2. `기본호스트` - 설치직후에는 기본적으로 5개의 앱을 가지고 있다. - 매니저앱, 호스트매니저앱, 루트앱, docs앱, examples앱 3. `매니저앱` - 각 호스트마다 하나씩 존재 - 자신이 속한 호스트에서 소속된 다른 앱들을 관리하는데 사용하며, 원격배포시에 사용된다. 4. `호스트매니저앱` - 톰캣당 1개씩 존재 - 호스트 추가, 삭제 가능 5. `루트앱` - 호스트명만으로 구성된 URL로 접속했을 때 나오는 앱 - ex) site9.public.473.be 호스트의 루트앱 주소는 https://site9.public.473.be 이다. 6. `docs앱` - 톰캣 공식문서가 담겨있는 앱 7. `examples앱` - 톰캣 예제 소스코드가 담겨있는 앱 *** - 앱의 URL 구성 : 호스트/앱이름 - ex) 기본호스트의 docs앱의 URL은 : https://tomcat.public.473.be/docs 이다. - 보통 톰캣에 새로운 사이트 추가 시, 호스트매니저로 호스트를 추가한 후, 해당 호스트안에 루트앱만 추가 - 예전에 도메인이 귀했을 때는, 하나의 호스트에 여러개의 앱을 넣어서 사용했었지만 현재는 그렇지 않다. - 호스트내에 이름이 같은 앱은 존재할 수 없다. - 다만 병렬배포라고 해서, 버전을 달리하면 똑같은 앱이 하나의 호스트내에 여러개 존재할 수 있다. - 이 상황에서는 사용자가 접근했을 때 톰캣이 버전이 더 높은 앱을 노출시킨다. # ? 배포 구조 ## 배포 중단배포 순서도 - 호스트 : `sic.public.sncode.kr` $$uml !theme toy autonumber box "작업PC" actor 개발자 entity 작업PC end box box "서버" entity 톰캣 entity 호스트의_매니저앱 entity 호스트의_루트앱__v1 end box 개발자 -> 작업PC : tomcat7:redeploy 작업PC -> 작업PC : ROOT##1.war파일 생성(앱 v1) 작업PC -> 톰캣 : war파일 업로드 톰캣 -> 호스트의_매니저앱 : war파일 전달 호스트의_매니저앱 -> 호스트의_루트앱__v1 : 배포버전이 기존과 일치하기 때문에 기존앱 중지 호스트의_루트앱__v1 -> 호스트의_매니저앱 : 중지완료 호스트의_매니저앱 -> 호스트의_루트앱__v1 : 새 war 파일 압축해제하여 다시 앱실행 개발자 -> 호스트의_루트앱__v1 : 사이트 접속하여 잘 배포되었는지 확인 $$ ## 배포 무중단배포 순서도(톰캣의 병렬배포기능을 이용한) - 호스트 : `sic.public.sncode.kr` $$uml !theme toy autonumber box "작업PC" actor 개발자 entity 작업PC end box box "서버" entity 톰캣 entity 호스트의_매니저앱 entity 호스트의_루트앱__v1 entity 호스트의_루트앱__v2 end box 개발자 -> 작업PC : tomcat7:redeploy 작업PC -> 작업PC : ROOT##2.war파일 생성(앱 v2) 작업PC -> 톰캣 : war파일 업로드 톰캣 -> 호스트의_매니저앱 : war파일 전달 호스트의_매니저앱 -> 호스트의_루트앱__v2 : 기존의 앱버전(v1)보다 상위버전(v2)이\n들어왔기 때문에 새 앱(v2) 생성 호스트의_매니저앱 -> 호스트의_루트앱__v1 : 더 이상 손님 받지 말고,\n세션개수가 0이 되면 알아서 종료해라. 개발자 -> 호스트의_루트앱__v2 : 사이트 접속하여 잘 배포되었는지 확인 호스트의_루트앱__v1 -> 호스트의_루트앱__v1 : 물려있는 세션의 개수가 0개가 되었습니다.\n저는 그럼 이만 종료하겠습니다. $$ # ? 모델링 : ERD $$uml entity Member { ** 회원 테이블 ** ** 소프트딜리트 테이블 ** --- * id 번호, PK * regDate 등록날짜 * updateDate 갱신날짜 --- * delStatus 삭제여부(0=미삭제,1=삭제) delDate 삭제날짜 --- * loginId 로그인아이디 * loginPw 로그인비밀번호 * name 이름 * nickname 별명 * cellphoneNo 휴대전화번호 * email 이메일 --- * authLevel 권한레벨(권한레벨 : 3=일반,7=관리자) } entity Article{ ** 게시물 테이블 ** --- * id 번호, PK * regDate 등록날짜 * updateDate 갱신날짜 --- * memberId 회원번호, FK * boardId 게시판번호, FK --- * title 제목 * body 내용 * goodReactionPoint 좋아요수 * badReactionPoint 싫어요수 * hitCount 조회수 } entity Reply{ ** 댓글 테이블 ** ** 모프테이블 ** --- * id 번호 * regDate 등록날짜 * updateDate 갱신날짜 --- * memberId 회원번호, FK * relTypeCode 관련데이터종류코드, MORPH_FK_TYPE * relId 관련데이터번호, MORPH_FK --- * body 내용 --- * value TEXT expireDate DATETIME } entity Board{ ** 게시판 테이블 ** --- * id 번호, PK * regDate 등록날짜 * updateDate 갱신날짜 --- * code 코드(유니크) * name 이름(유니크) --- * value TEXT expireDate DATETIME } entity ReactionPoint { ** 반응점수 테이블 ** ** 모프테이블 ** --- * id 번호 * regDate 등록날짜 * updateDate 갱신날짜 --- * memberId 회원번호, FK * relTypeCode 관련데이터종류코드, MORPH_FK_TYPE * relId 관련데이터번호, MORPH_FK --- * point 반응점수 } entity Attr{ ** 다용도 영속변수 테이블 ** ** 모프테이블 ** --- * id 번호, PK * regDate 등록날짜 * updateDate 갱신날짜 --- * relTypeCode 관련데이터종류코드, MORPH_FK_TYPE * relId 관련데이터번호, MORPH_FK * typeCode 변수종류타입 * type2Code 변수종류타입2 --- * value TEXT expireDate DATETIME } Attr }o..|| Member Reply }o..|| Article Article }o..|| Member Reply }o..|| Member ReactionPoint }o..|| Member Article }o..|| Board ReactionPoint }o..|| Reply ReactionPoint }o..|| Article $$ # ? 기술설명 ## ✅ 메인화면 ![메인화면](https://i.imgur.com/LC3byRi.png) ```java @Controller public class UsrHomeController { @RequestMapping("/usr/home/main") public String showMain() { return "usr/home/main"; } @RequestMapping("/") public String showRoot() { return "redirect:/usr/home/main"; } } ``` ```html <%@ 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. Corrupti praesentium placeat aperiam eius fugit numquam harum expedita quisquam aliquid corporis a iure rem cumque illum dolor provident modi vitae voluptates.

<%@ include file="../common/foot.jspf"%> ``` # ✅ 로그인/로그아웃 ![로그인](https://i.imgur.com/GjD83Kv.png) ![사용자 확인](https://i.imgur.com/bD9YRcn.png) ## 소스코드 ### `Controller` ```java /* 로그인 시 ProcessingUrl */ @RequestMapping("/usr/member/doLogin") @ResponseBody public String doLogin(String loginId, String loginPw, @RequestParam(defaultValue = "/") String afterLoginUri) { 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()), afterLoginUri); } // http://localhost:8011/usr/member/doLogin?loginId=user1&loginPw=user1 /* 로그인 시 page */ @RequestMapping("/usr/member/login") public String showLogin() { return "usr/member/login"; } /* 로그아웃 시 ProcessingUrl */ @RequestMapping("/usr/member/doLogout") @ResponseBody public String doLogout(@RequestParam(defaultValue = "/") String afterLogoutUri) { rq.logout(); return rq.jsReplace("로그아웃 되었습니다.", afterLogoutUri); } ``` # interceptor ▶ MyWebMvcConfigurer - Interceptor - Controller - Service - Repository - Vo ## `BeforeActionInterceptor.java` ```java @Component public class BeforeActionInterceptor implements HandlerInterceptor { private Rq rq; public BeforeActionInterceptor(Rq rq) { this.rq = rq; } @Override public boolean preHandle(HttpServletRequest req, HttpServletResponse resp, Object handler) throws Exception { req.setAttribute("rq", rq); return HandlerInterceptor.super.preHandle(req, resp, handler); } } ``` ## `NeedLoginInterceptor.java` ```java @Component public class NeedLoginInterceptor implements HandlerInterceptor { private Rq rq; public NeedLoginInterceptor(Rq rq) { this.rq = rq; } @Override public boolean preHandle(HttpServletRequest req, HttpServletResponse resp, Object handler) throws Exception { if (!rq.isLogined()) { if ( rq.isAjax() ) { resp.setContentType("application/json; charset=UTF-8"); resp.getWriter().append("{\"resultCode\":\"F-A\",\"msg\":\"로그인 후 이용해주세요.\"}"); } else { String afterLoginUri = rq.getAfterLoginUri(); rq.printReplaceJs("로그인 후 이용해주세요.", "../member/login?afterLoginUri=" + afterLoginUri); } return false; } return HandlerInterceptor.super.preHandle(req, resp, handler); } } ``` ## `NeedLogoutInterceptor.java` ```java @Component public class NeedLogoutInterceptor implements HandlerInterceptor { private Rq rq; public NeedLogoutInterceptor(Rq rq) { this.rq = rq; } @Override public boolean preHandle(HttpServletRequest req, HttpServletResponse resp, Object handler) throws Exception { if (rq.isLogined()) { if ( rq.isAjax() ) { resp.setContentType("application/json; charset=UTF-8"); resp.getWriter().append("{\"resultCode\":\"F-B\",\"msg\":\"로그아웃 후 이용해주세요.\"}"); } else { rq.printHistoryBackJs("로그아웃 후 이용해주세요."); } return false; } return HandlerInterceptor.super.preHandle(req, resp, handler); } } ``` # ✅ 회원가입 ![회원가입](https://i.imgur.com/NJALnZ9.png) ## 소스코드 ### `Controller` ```java /* 회원가입 시 id 중복체크 */ @RequestMapping("/usr/member/getLoginIdDup") @ResponseBody public ResultData getLoginIdDup(String loginId) { if (Ut.empty(loginId)) { return ResultData.from("F-A1", "loginId를 입력해주세요."); } Member oldMember = memberService.getMemberByLoginId(loginId); if (oldMember != null) { return ResultData.from("F-A2", "해당 로그인아이디는 이미 사용중입니다.", "loginId", loginId); } return ResultData.from("S-1", "사용가능한 로그인아이디 입니다.", "loginId", loginId); } /* 회원가입 시 ProcessingUrl */ @RequestMapping("/usr/member/doJoin") @ResponseBody public String doJoin(String loginId, String loginPw, String name, String nickname, String cellphoneNo, String email, @RequestParam(defaultValue = "/") String afterLoginUri) { if (Ut.empty(loginId)) { return rq.jsHistoryBack("F-1", "loginId(을)를 입력해주세요."); } if (Ut.empty(loginPw)) { return rq.jsHistoryBack("F-2", "loginPw(을)를 입력해주세요."); } if (Ut.empty(name)) { return rq.jsHistoryBack("F-3", "name(을)를 입력해주세요."); } if (Ut.empty(nickname)) { return rq.jsHistoryBack("F-4", "nickname(을)를 입력해주세요."); } if (Ut.empty(cellphoneNo)) { return rq.jsHistoryBack("F-5", "cellphoneNo(을)를 입력해주세요."); } if (Ut.empty(email)) { return rq.jsHistoryBack("F-6", "email(을)를 입력해주세요."); } ResultData joinRd = memberService.join(loginId, loginPw, name, nickname, cellphoneNo, email); if (joinRd.isFail()) { return rq.jsHistoryBack(joinRd.getResultCode(), joinRd.getMsg()); } String afterJoinUri = "../member/login?afterLoginUri=" + Ut.getUriEncoded(afterLoginUri); return rq.jsReplace("회원가입이 완료되었습니다. 로그인 후 이용해주세요.", afterJoinUri); } // http://localhost:8011/usr/member/doJoin?loginId=fpahstiq123&loginPw=sbs123414&name=%EB%B0%95%EC%84%B1%ED%99%94&nickname=%EB%B3%84%EC%9D%B4&cellphoneNo=01020181024&email=fpahstiq123@naver.com /* 회원가입 시 page */ @RequestMapping("/usr/member/join") public String showJoin() { return "usr/member/join"; } ``` ### `Service` ```java /* 회원가입 */ public ResultData join(String loginId, String loginPw, String name, String nickname, String cellphoneNo, String email) { // 기존에 로그인id 중복체크 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-7", 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); } ``` ### `Repository` ```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); ``` # ✅ 마이페이지 ![마이페이지](https://i.imgur.com/kWf3sS0.png) ## 소스코드 ```java /* 마이페이지 page */ @RequestMapping("/usr/member/myPage") public String showMyPage() { return "usr/member/myPage"; } ``` # ✅ 회원정보 수정 ## 수정 전 비밀번호 확인 ![수정 전 비밀번호 확인](https://i.imgur.com/03DPXjG.png) ## 소스코드 ### `Controller` ```java /* 회원정보 수정 전 비밀번호 확인 ProcessingUrl */ @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); } /* 회원정보 수정 전 비밀번호 확인 page */ @RequestMapping("/usr/member/checkPassword") public String showCheckPassword() { return "usr/member/checkPassword"; } /* url에 회원정보 수정인증키 발급 후 수정페이지로 이동 */ @RequestMapping("/usr/member/modify") public String showModify(String memberModifyAuthKey) { if ( Ut.empty(memberModifyAuthKey)) { rq.historyBackJsOnView("memberModifyAuthKey(이)가 필요합니다."); } ResultData checkMemberModifyAuthKeyRd = memberService.checkMemberModifyAuthKey(rq.getLoginedMemberId(), memberModifyAuthKey); ; if (checkMemberModifyAuthKeyRd.isFail()) { return rq.historyBackJsOnView(checkMemberModifyAuthKeyRd.getMsg()); } return "usr/member/modify"; } ``` ### `Service` ```java /* 회원수정 인증키 생성*/ public String genMemberModifyAuthKey(int actorId) { String memberModifyAuthKey = Ut.getTempPassword(10); attrService.setValue("member", actorId, "extra", "memberModifyAuthKey", memberModifyAuthKey, Ut.getDateStrLater(60 * 5)); return memberModifyAuthKey; } /* 회원수정 인증키 일치체크*/ public ResultData checkMemberModifyAuthKey(int actorId, String memberModifyAuthKey) { String saved = attrService.getValue("member", actorId, "extra", "memberModifyAuthKey"); if ( !saved.equals(memberModifyAuthKey)) { return ResultData.from("F-1", "일치하지 않거나 만료되었습니다."); } return ResultData.from("S-1", "정상적인 코드입니다."); } ``` ## 회원정보 수정 ![회원정보 수정 2](https://i.imgur.com/lgUt7AB.png) ![회원정보 수정 3](https://i.imgur.com/tFfaVbB.png) ## 소스코드 ### `Controller` ```java /* 회원정보 수정 ProcessingUrl */ @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(), "/"); } ``` ### `Service` ```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", "회원정보가 수정되었습니다."); } ``` ### `Repository` ```java /* 회원정보 수정*/ @Select(""" """) void modify(int id, String loginPw, String name, String nickname, String email, String cellphoneNo); ``` # ✅ 게시글 검색 - 리스트의 상단 검색창에서 글의 제목, 내용으로 게시물 검색 가능 - 소스코드는 아래 게시물 리스팅 소스코드에서 확인하실 수 있습니다. ![게시글 검색](https://i.imgur.com/8eP3Vxq.png) # ✅ 게시물 리스팅 - 게시판 (공지게시판, 자유게시판) - 로그인시 상세화면에서 수정, 삭제 가능 ![게시물 리스팅](https://i.imgur.com/UpfT1eI.png) ## 소스코드 ### `Controller` ```java /* 게시물 리스트 page */ @RequestMapping("/usr/article/list") public String showList(Model model, @RequestParam(defaultValue = "1") int boardId, @RequestParam(defaultValue = "title,body") String searchKeywordTypeCode, @RequestParam(defaultValue = "") String searchKeyword, @RequestParam(defaultValue = "1") int page) { Board board = boardService.getBoardById(boardId); if (board == null) { return rq.historyBackJsOnView(Ut.f("%d번 게시판은 존재하지 않습니다.", boardId)); } int articlesCount = articleService.getArticlesCount(boardId, searchKeywordTypeCode, searchKeyword); int itemsCountInAPage = 10; int pagesCount = (int) Math.ceil((double) articlesCount / itemsCountInAPage); List

articles = articleService.getForPrintArticles(rq.getLoginedMemberId(), boardId, searchKeywordTypeCode, searchKeyword, itemsCountInAPage, page); model.addAttribute("boardId", boardId); model.addAttribute("page", page); model.addAttribute("board", board); model.addAttribute("pagesCount", pagesCount); model.addAttribute("articlesCount", articlesCount); model.addAttribute("articles", articles); return "usr/article/list"; } ``` ### `Service` ```java /* 게시글 페이징 */ public List

getForPrintArticles(int actorId, int boardId, String searchKeywordTypeCode, String searchKeyword, int itemsInAPage, int page) { int limitStart = (page - 1) * itemsInAPage; int limitTake = itemsInAPage; List

articles = articleRepository.getForPrintArticles(boardId, searchKeyword, searchKeywordTypeCode, limitStart, limitTake); for (Article article : articles) { updateForPrintData(actorId, article); } return articles; } ``` ### `Repository` ```java @Select(""" """) public List

getForPrintArticles(int boardId, String searchKeyword, String searchKeywordTypeCode, int limitStart, int limitTake); ``` ### `jsp` ```html <%@ 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"%>

게시물 개수 : ${articlesCount}개

번호	작성날짜	수정날짜	조회	추천	작성자	제목
${article.id}	${article.forPrintType1RegDate}	${article.forPrintType1UpdateDate}	${article.hitCount}	${article.goodReactionPoint}	${article.extra__writerName}	${article.title}

<%@ include file="../common/foot.jspf"%> ``` # ✅ 게시물 상세페이지 - 조회수, 글번호 조회 가능 - 추천 가능 - 댓글 가능 ![게시물 상세](https://i.imgur.com/luJSpW4.png) ### `Controller` ```java /* 게시글 상세 page */ @RequestMapping("/usr/article/detail") public String showDetail(Model model, int id) { Article article = articleService.getForPrintArticle(rq.getLoginedMemberId(), id); model.addAttribute("article", article); List replies = replyService.getForPrintReplies(rq.getLoginedMember(), "article", id); int repliesCount = replies.size(); model.addAttribute("replies", replies); ResultData actorCanMakeReactionPointRd = reactionPointService.actorCanMakeReactionPoint(rq.getLoginedMemberId(), "article", id); model.addAttribute("actorCanMakeReaction", actorCanMakeReactionPointRd.isSuccess()); if (actorCanMakeReactionPointRd.getResultCode().equals("F-2")) { int sumReactionPointByMemberId = (int) actorCanMakeReactionPointRd.getData1(); if (sumReactionPointByMemberId > 0) { model.addAttribute("actorCanCancelGoodReaction", true); } else { model.addAttribute("actorCanCancelBadReaction", true); } } return "usr/article/detail"; } ``` ### `Service` ```java /* 게시글 조회 (1개씩) */ public Article getForPrintArticle(int actorId, int id) { Article article = articleRepository.getForPrintArticle(id); updateForPrintData(actorId, article); return article; } /* 댓글리스트 가져오기 */ public List getForPrintReplies(Member actor, String relTypeCode, int relId) { List replies = replyRepository.getForPrintReplies(relTypeCode, relId); for (Reply reply : replies) { updateForPrintData(actor, reply); } return replies; } ``` ### `Repository` ```java @Select(""" """) public Article getForPrintArticle(@Param("id") int id); ``` # ✅ 게시물 댓글 ### `Controller` ```java /* 게시글 상세 page */ @RequestMapping("/usr/article/detail") public String showDetail(Model model, int id) { Article article = articleService.getForPrintArticle(rq.getLoginedMemberId(), id); model.addAttribute("article", article); List replies = replyService.getForPrintReplies(rq.getLoginedMember(), "article", id); int repliesCount = replies.size(); model.addAttribute("replies", replies); ResultData actorCanMakeReactionPointRd = reactionPointService.actorCanMakeReactionPoint(rq.getLoginedMemberId(), "article", id); model.addAttribute("actorCanMakeReaction", actorCanMakeReactionPointRd.isSuccess()); if (actorCanMakeReactionPointRd.getResultCode().equals("F-2")) { int sumReactionPointByMemberId = (int) actorCanMakeReactionPointRd.getData1(); if (sumReactionPointByMemberId > 0) { model.addAttribute("actorCanCancelGoodReaction", true); } else { model.addAttribute("actorCanCancelBadReaction", true); } } return "usr/article/detail"; } ``` ### `Service` ```java /* 댓글 생성 */ public ResultData writeReply(int actorId, String relTypeCode, int relId, String body) { replyRepository.writeReply(actorId, relTypeCode, relId, body); int id = replyRepository.getLastInsertId(); return ResultData.from("S-1", Ut.f("%d번 댓글이 생성되었습니다.", id), "id", id); } /* 댓글리스트 가져오기 */ public List getForPrintReplies(Member actor, String relTypeCode, int relId) { List replies = replyRepository.getForPrintReplies(relTypeCode, relId); for (Reply reply : replies) { updateForPrintData(actor, reply); } return replies; } /* 댓글 가져오기 */ public Reply getReply(int id) { return replyRepository.getReply(id); } /* 게시물 하나당 actorCanDelete와 actorCanModify를 담을 수 있도록 */ private void updateForPrintData(Member actor, Reply reply) { if (reply == null) { return; } ResultData actorCanDeleteRd = actorCanDelete(actor, reply); reply.setExtra__actorCanDelete(actorCanDeleteRd.isSuccess()); ResultData actorCanModifyRd = actorCanModify(actor, reply); reply.setExtra__actorCanModify(actorCanModifyRd.isSuccess()); } /* 댓글 삭제가 가능한지 확인 */ private ResultData actorCanModify(Member actor, Reply reply) { if (actor == null) { return ResultData.from("F-1", "댓글이 존재하지 않습니다."); } if (reply.getMemberId() != actor.getId()) { return ResultData.from("F-2", "권한이 없습니다."); } return ResultData.from("S-1", "댓글 삭제가 가능합니다."); } /* 댓글 수정이 가능한지 확인 */ private ResultData actorCanDelete(Member actor, Reply reply) { if (actor == null) { return ResultData.from("F-1", "댓글이 존재하지 않습니다."); } if (reply.getMemberId() != actor.getId()) { return ResultData.from("F-2", "권한이 없습니다."); } return ResultData.from("S-1", "댓글 수정이 가능합니다."); } /* 댓글 삭제 완료메세지*/ public ResultData deleteReply(int id) { replyRepository.deleteReply(id); return ResultData.from("S-1", Ut.f("%d번 댓글을 삭제하였습니다.", id)); } /* 댓글 수정 완료메세지*/ public ResultData modifyReplyRd(int id, String body) { replyRepository.modifyReply(id, body); return ResultData.from("S-1", Ut.f("%d번 댓글을 수정하였습니다.", id)); } /* 업데이트된 댓글들로 불러오기*/ public Reply getForPrintReply(Member actor, int id) { Reply reply = replyRepository.getForPrintReply(id); updateForPrintData(actor, reply); return reply; } ``` ### `Repository` ```java /* 댓글리스트 불러오기 */ @Select(""" SELECT R.*, M.nickname AS extra__writerName FROM reply AS R LEFT JOIN `member` AS M ON R.memberId = M.id WHERE R.relTypeCode = #{relTypeCode} AND R.relId = #{relId} ORDER BY R.id DESC """) List getForPrintReplies(String relTypeCode, int relId); ``` # ✅ 게시물 추천 ![게시물 추천](https://i.imgur.com/ancL12p.png) ## 소스코드 ### `Controller` ```java /* 게시글 상세 page */ @RequestMapping("/usr/article/detail") public String showDetail(Model model, int id) { Article article = articleService.getForPrintArticle(rq.getLoginedMemberId(), id); model.addAttribute("article", article); List replies = replyService.getForPrintReplies(rq.getLoginedMember(), "article", id); int repliesCount = replies.size(); model.addAttribute("replies", replies); ResultData actorCanMakeReactionPointRd = reactionPointService.actorCanMakeReactionPoint(rq.getLoginedMemberId(), "article", id); model.addAttribute("actorCanMakeReaction", actorCanMakeReactionPointRd.isSuccess()); if (actorCanMakeReactionPointRd.getResultCode().equals("F-2")) { int sumReactionPointByMemberId = (int) actorCanMakeReactionPointRd.getData1(); if (sumReactionPointByMemberId > 0) { model.addAttribute("actorCanCancelGoodReaction", true); } else { model.addAttribute("actorCanCancelBadReaction", true); } } return "usr/article/detail"; } ``` ### `Service` > `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", "좋아요 수가 감소되었습니다.", "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); } ``` > `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); } /* 좋아요 증가 (최대 1번) 및 메세지 */ 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", "좋아요 처리 되었습니다"); } /* 싫어요 증가 (최대 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", "싫어요 취소처리 되었습니다"); } ``` ### `Repository` ```java /* 0 or 1로 결과 반환 : 리액션 가능한지 확인*/ @Select(""" """) int getSumReactionPointByMemberId(String relTypeCode, int relId, int memberId); /* 좋아요 리액션 포인트 추가 : +1 */ @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); /* 싫어요 리액션 포인트 추가 : +1 */ @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); ``` # ✅ 게시물 작성/수정/삭제 - 로그인 후에만 글 작성, 수정, 삭제 가능 - 내가 작성한 글에만 수정, 삭제할 수 있도록 권한 부여 - 작성, 수정, 삭제 완료 후 성공메시지 노출 # ✅ 게시물 작성 : 중 ![게시물 작성](https://i.imgur.com/Mdu58lR.png) # ✅ 게시물 작성 : 완료 ![게시물 작성 완료](https://i.imgur.com/b1HUO5l.png) ## 소스코드 ### `Controller` ```java /* 게시글 등록 ProcessingUrl */ @RequestMapping("/usr/article/doWrite") @ResponseBody public String doWrite(int boardId, String title, String body, String replaceUri) { if (Ut.empty(title)) { return rq.jsHistoryBack("title(을)를 입력해주세요."); } if (Ut.empty(body)) { return rq.jsHistoryBack("body(을)를 입력해주세요."); } ResultData writeArticleRd = articleService.writeArticle(rq.getLoginedMemberId(), boardId, title, body); int id = writeArticleRd.getData1(); if (Ut.empty(replaceUri)) { replaceUri = Ut.f("../article/detail?id=%d", id); } return rq.jsReplace(Ut.f("%d번 글이 생성되었습니다.", id), replaceUri); } ``` ### `Service` ```java /* 게시물 작성 */ public ResultData writeArticle(int memberId, int boardId, String title, String body) { articleRepository.writeArticle(memberId, boardId, title, body); int id = articleRepository.getLastInsertId(); return ResultData.from("S-1", Ut.f("%d번 게시물이 생성되었습니다.", id), "id", id); } ``` ### `Repository` ```java public int getLastInsertId(); ``` # ✅ 게시물 수정 ![게시물 수정](https://i.imgur.com/QA00kh9.png) ## 소스코드 ### `Controller` ```java /* 게시글 수정 ProcessingUrl */ @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)); } /* 게시글 수정 page */ @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.addAttribute("article", article); return "usr/article/modify"; } ``` ### `Service` ```java /* 게시글 조회 (1개씩) */ public Article getForPrintArticle(int actorId, int id) { Article article = articleRepository.getForPrintArticle(id); updateForPrintData(actorId, article); return article; } /* 게시글 수정 or 삭제 업데이트 메세지*/ private void updateForPrintData(int actorId, Article article) { if (article == null) { return; } ResultData actorCanDeleteRd = actorCanDelete(actorId, article); article.setExtra__actorCanDelete(actorCanDeleteRd.isSuccess()); ResultData actorCanModifyRd = actorCanModify(actorId, article); article.setExtra__actorCanModify(actorCanModifyRd.isSuccess()); } /* 게시글 수정 가능 확인 메세지 */ public ResultData actorCanModify(int actorId, Article article) { if (article == null) { return ResultData.from("F-1", "권한이 없습니다."); } if (article.getMemberId() != actorId) { return ResultData.from("F-2", "권한이 없습니다."); } return ResultData.from("S-2", "게시물 수정이 가능합니다."); } /* 게시글 수정 메시지 */ 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); } ``` ### `Repository` ```java /* 게시글 가져오기 */ @Select(""" """) public Article getForPrintArticle(@Param("id") int id); public void modifyArticle(@Param("id") int id, @Param("title") String title, @Param("body") String body); ``` # ✅ 게시물 삭제 ![게시물 삭제](https://i.imgur.com/s5hIzSU.png) ## 소스코드 ### `Controller` ```java /* 게시글 삭제 ProcessingUrl */ @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"); } ``` ### `Service` ```java /* 게시글 조회 (1개씩) */ public Article getForPrintArticle(int actorId, int id) { Article article = articleRepository.getForPrintArticle(id); updateForPrintData(actorId, article); return article; } /* 게시글 삭제 */ public void deleteArticle(int id) { articleRepository.deleteArticle(id); } ``` ### `Repository` ```java /* 게시글 가져오기 */ @Select(""" """) public Article getForPrintArticle(@Param("id") int id); /* 게시글 삭제 */ public void deleteArticle(@Param("id") int id); ``` # ? 테스트 내역 ### 회원가입 - 테스트통과 : 통과 - 테스트날짜 : 2022-03-30 - 테스트수행인 : 김지애 ### 회원가입시 아이디 중복체크 및 비밀번호 재확인 - 테스트통과 : 통과 - 테스트날짜 : 2022-03-30 - 테스트수행인 : 김지애 ### 로그인 - 테스트통과 : 통과 - 테스트날짜 : 2022-03-30 - 테스트수행인 : 김지애 ### 로그아웃 - 테스트통과 : 통과 - 테스트날짜 : 2022-03-30 - 테스트수행인 : 김지애 ### 게시물 작성, 수정, 삭제 - 테스트통과 : 통과 - 테스트날짜 : 2022-03-30 - 테스트수행인 : 김지애 ### 게시물 추천 - 테스트통과 : 통과 - 테스트날짜 : 2022-03-30 - 테스트수행인 : 김지애 ### 게시물 댓글 - 테스트통과 : 통과 - 테스트날짜 : 2022-03-30 - 테스트수행인 : 김지애 ### 게시물 검색 - 테스트통과 : 통과 - 테스트날짜 : 2022-03-30 - 테스트수행인 : 김지애 ## 이상 포트폴리오 기술 설명을 마치겠습니다. 긴 글 읽어 주셔서 감사합니다.