$$config title: [실습]? 스프링부트 커뮤니티 게시판 구현 keywords: - IT - 스프링부트 $$ # 프로젝트 세팅 - 로컬메인 : [http://localhost:8011/user/home/main](http://localhost:8011/user/home/main) - [GIT 주소](https://github.com/donhyuck/community-demo_2022_04) ## 프로젝트 관련 오류가 발생할 때 확인하는 방법 - Window -> Show view -> Problems : 오류확인 - 확인이 안될경우 maven확인 - 프로젝트명 우클릭 -> Maven -> Update Project - 파일을 인식못할땐, 프로젝트명 클릭 F5 - 도저히 안되면 Project -> 클릭 clean ## sts설정사항 - Window - preference-Workspace-other-UTF-8, Apply - Window - preference-JSON, CSS, HTML, JSP, XML (files검색)-UTF-8, Apply - Window - preference-Emmet- jsp, jspf 추가 - Window - preference-Java-editor-Typing - 체크해제 escape~ - Window - preference-font-Colors and Fonts - 선택 Basic -Text font - 글꼴, 크기설정 - Window - preference-html- Editor- Formaatting, Element설정 `abbr, acronym, basefont, big, cite, q, u` - Ctrl+H - Customize - File Search만 남기기, 체크 Case sensitive, 체크 Resource in active editor ## 스프링부트 의존성 추가 Lombok MyBatis Framework MySQL Driver Spring Boot DevTools Spring Web # 스프링부트 관련 설명 ## 스프링부트 요청, 응답 모델(단순) - 참고 - 웹서비스 [https://slog.gg/p/4657](https://slog.gg/p/4657) $$uml 브라우저 -> 스프링부트 : 요청(URL, 파라미터, 쿠키) 스프링부트 -> 브라우저 : 응답(웹문서, 쿠키) $$ ## 스프링부트 요청, 응답 모델 $$uml 브라우저 -> 웹서버 : 요청 웹서버 -> 스프링부트 : 요청 스프링부트 -> MariaDB : 요청 MariaDB -> 스프링부트 : 응답 스프링부트 -> 웹서버 : 응답 웹서버 -> 브라우저 : 응답 $$ ## Maven에 대하여 - 프로젝트 : 손님 - pom.xml : 주문서 의존성(dependency) : 규격에 맞게 적기만 하면 자동으로 받아온다. 실제 파일 경로 : C:\Users\donhy\.m2\repository * 가끔 도저히 안될땐 다 지우고 다시 받을 수 도 있다. - Maven : 음식점 [https://mvnrepository.com/](https://mvnrepository.com/) 빌드, 배포 등 역할을 도움 $$uml 프로젝트 -> Maven : 주문서(URL, 파라미터, 쿠키) Maven -> 프로젝트 : 영수증(웹문서, 쿠키) $$ # 기능 익히기 - 선택자, flex, grid - [CSS 익히기 - 57강](https://codepen.io/jangka44/live/abWWEqJ) - [JS 익히기](https://programmers.co.kr/learn/courses/3) [JS 익히기 - 풀이](https://codepen.io/jangka44/live/ExWwyKK) # 게시글 CRUD - 게시물 컨트롤러에 게시물추가, 목록보기 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/edf757c20e0dbc728a57f6d3b169d87bb13d8e2c) - 테스트 케이스 생성 메서드 추가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/1f5fd4f56e5f39aa9182e39fcd81ab46f42392db) - writeArticle 메서드를 통해서 중복제거 (writeArticle) [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/fb5cbd366b3b45a20148d4e1dbb6e5ce311b92e2) - 게시글 한개 가져오기, 게시글 삭제 기능 추가 (doDelete) [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/8ecd121ba803d191fefbb135818b70b50dbfe154) - 게시글 수정 기능 추가 (doModify) [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/5f498204587801a3f6c00ed875c1118ef19eb752) - 게시글 상세보기 기능 추가(getArticle) [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/024c2605922271b15613393e8fac958aac75c5db) # MVC 개념과 스프링부트에서의 MVC 순서 : C - M - V - 프로그램을 나눠서 개발하면 유지보수도 편하고 프로그램 확장성도 좋아진다. - C (Controller) 점원처럼 가장 앞에서 고객의 요청을 받아들인다. 간단한 검사, 서비스로의 연결 고객의 요청을 받아서 M,V를 컨트롤 - M (Service, Repository, DB) service : 실제 기능을 담당 Repository : service의 요청을 받고, DB연결 DB : 물리적으로 데이터가 저장됨, 재료창고 - V (JSP) 접시 보여주는 역할 # SQL을 xml파일로 옮김 쿼리문이 복잡해지고, 기능이 추가될 경우 대비하여 편리하게 DB접근가능하다. [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/3b3ce81a6bcba4e81b263d8de67e8b58839ef5ed) - 게시물 수정시 입력된 정보만 수정, 공백(미입력) 일때 수정처리 제외 set테그로 감싸면 조건에 따라 title, body가 없을 경우에도 자동으로 set을 붙이며 마지막에 쉼표(,)가 되어도 자동으로 제외된다. ```html (생략..) title = #{title}, `body` = #{body}, updateDate = NOW(), (생략..) ``` [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/d0e52075cb94a2fdf33b3a00300a7ce14a36843d) # 테일윈드 도입 - 직접받기 [https://cdnjs.com/](https://cdnjs.com/) cdn -> 검색/ tailwindcss -> 상단 최신버전 url 복사 `https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css` - [테일윈드 치트시트](https://nerdcave.com/tailwind-cheat-sheet) # 회원가입 기능 ### DB회원 테이블 추가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/863543db914084dfb63390420563866451574cf2) ### MemberRepository추가 MemberController > MemberService > MemberRepository [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/d791ab50ab2d31d66f1cfdae4b63fe86f2cbaf57) ### 회원가입 기능 추가 - 회원가입처리후 회원정보보기 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/014c3d93cb6370c1a088bc2dfa48d7a0684a456a) - 회원가입시 중복로그인아이디 확인 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/d36335f8e59e793e18fcdb8fcb5729576dcbd222) - 입력데이터 유효성체크, 공백 체크 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/afa982e62be039a4177f316b3696feb5067b8df6) # util 도입 - 입력데이터 유효성체크, 공백 체크를 개선하여 함수로 처리 - Ut.empty 추가 / 회원가입시 중복 이름,이메일 확인 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/d823ef064f026c341aca0888a31c22834cbe1d29) - Ut.format 추가 / 복잡한 문장 구성을 편하게 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/2e74f42847e0e69ddce56111f1185068ff8a7640) # 범용 보고서 클래스 ## ResultData 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/e97ef745d9c1d6daf4faf6d55afb4c430b85e400) ## 게시글 적용 - 게시물 목록, 상세보기 기능에 ResultData 적용 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/3f7d7649cfef2edad1866964d477532864537121) - 게시물 작성 기능에 ResultData 적용 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/4fa8becf117566b6171044a7623e0c95c48ab086) - doAdd메서드에 적용 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/8ecbe7d5b799c812100b4c49fd1ec6eddcaea54f) - doModify,doDelete메서드에 적용 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/110c068129dd2e2522c4127b6fd04dea00ca4336) ## 회원적용 - 회원가입 기능에 ResultData 적용 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/7c06d70d38535e190f97522379ac65c4b18b9371) - UserMemberController, MemberService 에 ResultData 제너릭 적용 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/e99cd0db6c8898a0d7c959a354cba3f8c645e305) ## 제너릭 적용 - ResultData클래스에 제너릭 기능 추가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/8ecbe7d5b799c812100b4c49fd1ec6eddcaea54f) doAdd메서드에 적용, 이전에는 int로 형변환했던 대신에 제너릭을 도입해서 integer값을 받는다. - 제너릭을 적용할 경우 리턴값은 해당 기능이 성공적으로 작동했을 경우 반환되는 값을 기준한다. # 로그인 기능추가 - 로그인 기능 추가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/7b5ef83e605a143bd6b4a65cff496c6de0c2fd8a) 로그인정보(아이디, 비밀번호)입력확인, DB에 등록된 회원인지 확인, 입력된 비밀번호 일치여부확인 확인된 회원의 번호를 세션에 지정 - 로그아웃 기능 추가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/768b9fc207012d1bcd4135f2befaf60279453c90) 세션에 지정된 회원번호가 있는지 확인, 있으면 로그아웃, 없을 경우 이미 로그아웃상태임을 알림 # 권한체크로 게시글 기능 개선 DB -> 게시물 테이블에 회원번호칼럼 추가 Controller -> 게시물 작성 기능(doAdd) 세션에 지정된 회원번호가 있는지 확인하여 로그인 여부 체크 로그인한 회원의 회원번호를 게시글물 정보에 포함 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/e813fa5883060ce81521ac2d654ff498dc20f24f) - 게시글 수정, 삭제시 로그인확인, 권한체크 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/881da3f8ddd103ee50bd7538c7bc3d4428ec8ad1) - 게시물 수정시 권한체크개선(actorCanModify 메서드 도입) [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/25ff92d3eaac2db913a4f5d777ec864cba12fcc6) - ResultData 에 data1Name 추가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/80e8c63c8b7d52e424d02886eb12752c5886593c) # SQL 로거 적용 - DB에 접근하는 마이바티스의 퀴리문을 콘솔로 확인할 수 있다. - log4jdbc.log4j2.properties / logback-spring.xml 파일 필요 - application.yml 설정 driver-class-name과 url 변경 필요 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/9b5820456aba52b1870a72bf61fc7495392486fd) - SQl로거 적용 후 Log파일을 gitignore에 추가 LOG_PATH_IS_UNDEFINED 폴더가 생기는 버그 해결 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/0dc1577663ffc7de5c01d5a422ddfe62421ddbe1) # JSP 적용 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/b180026bccfa01817246b4ed918367144d0aed78) - JSP, JSTL 의존성 추가 - application.yml 설정 prefix, suffix prefix: /WEB-INF/jsp/ suffix: .jsp 위와 같이 설정함으로써 경로생략이 가능하다. - 루트페이지 구현 "(/WEB-INF/jsp)/user/home/main(.jsp)" -> ```java @RequestMapping("/user/home/main") public String showMain() { return "/user/home/main"; } ``` # 게시글 목록 페이지 구현 - @ResponseBody를 제거하고 String 타입으로 변경 - model에 목록정보를 담아서 JSP파일로 넘긴다.(return jsp파일경로) [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/bc76c8f0531da81ca2184f015c3c6e6f44d9ee04) - 메인페이지 구현, 상단바 추가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/19cb6dc644cd39fc5cc111d75108b0e032f5fc1c) # 페이지 개선 ### 폰트적용 (GmarketSansLight) - 각 jsp파일마다 css,js를 지정해야한다. -> 개선필요 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/2edf2f7162687a0efc8ec4ef65178ea0c6c9c838) ### 공통 내용을 head.jspf 와 foot.jspf 로 모으기 - `${ pageTitle }`로 페이지 제목을 설정하고 - 공통부분을 묶어두고, 이를 제외한 body를 구성한다. [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/7a7044ccb79a93593e594394f40c510e1dc0a144) ### 라이브러리 적용 - 폰트변경 / 에스코어드림Lt 폰트 적용 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/c7cac296c5739f1d926c6ace9de8c1b6023e2f04) - 프론트엔드 공통 라이브러리 불러오기/ 제이쿼리, 테일윈드, 폰트어썸 적용 [테일윈트 치트시트](https://nerdcave.com/tailwind-cheat-sheet) [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/4f8f878fcc027a1580b186b6d39b9855de4545f1) ### 페이지 꾸미기 - 페이지 레이아웃 꾸미기 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/53027ee9657ff6d71aa7436e8bfaa2867a0ce0dd) - 게시글 목록 꾸미기 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/10bc68caba1dc3438bbd0d75f8e05a9df48176f9) - 데이지 UI에서 명시적으로 다크모드 끄기, 무조건 라이트 모드로 설정 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/c6359cb6f0511cd39258b6db9a453a15ea8046af) # 게시글 페이지 구현 - 게시글 상세 페이지 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/91f4fb6d22a6c33e7ea0b5f3b850a1db64414366) - 게시글 목록 작성자 표시 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/38d14c2bdf7752b9264e5d842d5714c9eaa6fc34) - 게시글 상세 페이지 작성자 표시 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/a4cf416fb82c542a68732018a9da82b1aacb376b) - 출력용 게시물 가져올 때, 액터 정보 넘겨서 더욱 자세한 정보 생성하기 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/1e095035eb262ea9153c29824c7708edbba3ea00) - 게시물 삭제 후 replace로 이동, jsHistoryBack, jsReplace 메서드 적용 삭제 기능 후 나아가 작성, 수정, 회원가입 등 정보를 입력받아 기능이 처리 될때, 뒤로가기를 눌렀을 때 다시 재요청되는 경우를 막아야함 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/c474acd9e505bea980308e7d7965f4f5990b639d) # BeforeAction 인터셉터 - Rq 클래스 도입으로 로그인 여부와 관련된 중복된 로직 제거 게시글 작성, 수정, 삭제 등 회원확인, 로그인여부가 필요한 로직이 다수 중복되어 있었다. 이를 HttpServletRequest 클래스를 도입하고, session에 접근해서 로그인정보를 가져온다. [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/641513afacd5dd99ed6db3825afcb639e38f9c3e) - 인터셉터가 필요한 이유 하지만 로그인 정보를 매번 가져오는 객체를 만드는 것보다는 그 앞에서 만드는 것에 효과적이다. 컨트롤러 앞선에서 이러한 기능을 수행하는 BeforeAction 인터셉터 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/f145d9a987f1de450f264e7fb4c0a35d84482587) ### BeforeAction 인터셉터 등록 ```java @Configuration public class MyWebMvcConfigurer implements WebMvcConfigurer { // beforeActionInterceptor 인터셉터 불러오기 @Autowired BeforeActionInterceptor beforeActionInterceptor; // 이 함수는 인터셉터를 적용하는 역할을 합니다. @Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(beforeActionInterceptor).addPathPatterns("/**").excludePathPatterns("/resource/**") .excludePathPatterns("/error"); } } ``` - `@Configuration` -> 프로그램이 시작하면 맨 처음 읽는다. - 또한, @Component 가 BeforeActionInterceptor 에 있어야 불러올 수 있다. [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/5e6f8449184706d799a3fbc281d193983b097f73) ### BeforeAction 인터셉터 적용 - Rq객체를 BeforeAction 인터셉터에서 대표로 한번만 만들기 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/0232c12b2c03a44231a6a73b46016a42d0fd3a32) - NeedLogin인터셉터 구현 및 등록 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/27340415254fa05820aa65bb4934ea5127a70e8f) ### NeedLogin인터셉터 개선 - NeedLogin인터셉터가 여러 액션들을 대신해서 자격없는 요청들을 앞선에서 거름 자동 생성자 -> @NoArgsConstructor ```java @Component public class NeedLoginInterceptor implements HandlerInterceptor { @Override public boolean preHandle(HttpServletRequest req, HttpServletResponse resp, Object handler) throws Exception { Rq rq = (Rq) req.getAttribute("rq"); if (!rq.isLogined()) { rq.printHistoryBackJs("로그인 후 이용해주세요."); return false; } return HandlerInterceptor.super.preHandle(req, resp, handler); } } ``` - 사용자에게 메시지를 노출하기 위해선 response가 필요하여 response, request를 받는 `Rq(HttpServletRequest req, HttpServletResponse resp)` 로 변경 - 로그인 되지 않은 사용자의 경우, 로그인이 필요함을 알리고 되돌리기 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/7c1104144e7e888317654e4d9189aaf1dfc55e77) # 로그인, 로그아웃 - 로그인 페이지 구현 head에서 로그인, 로그아웃에 따라 상단바 변경 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/93848ccc522be96ce7c1d643696274d9c4e429b5) - 로그인 처리에 Rq 적용 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/a6b42ba930d1862f7180ecef9b0d7dc549fa8d88) - 로그아웃 처리에 Rq 적용, 로그아웃 후 목록으로 되돌아가기 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/191fcd57187f6b2d56fd648a4690d3d490b1e528) # 게시글 수정 - 게시물 수정폼을 보여주기전 체크 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/32db5488e624cfed972f0fa4118116d7082597d4) ## 게시물 수정 폼 구현, 게시물 수정 후 자바스크립트로 처리 - modify 메서드는 게시글 존재여부를 확인하고 메세지를 보여야한다. - @ResponseBody를 쓸 수 없고 return 값에 해당하는 jsp파일을 찾는다. - 그래서 historyBackJsOnView를 도입 - 로그인 확인은 인터셉터 addInterceptors가 담당 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/d62b70616414e18a1c79164495984489c88b3d50) # 테일윈드 도입 - 테일윈드jit에서 테일윈드로 변경, 데이지UI적용 - 데이지 UI버튼꾸미기 [https://daisyui.com/](https://daisyui.com/) [https://tailwindcss.com/](https://tailwindcss.com/) [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/73c950bbc774656b1d0c02db616c00058e8695f0) - 데이지UI적용하여 로그인,상세,수정 페이지 꾸미기 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/143015fd906cc32710c8290a889b89a894ee4973) # 게시글 작성 - 게시글 작성폼 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/e3bcde1a4e653c5941577ed52ccde94eceecfde0) - 게시물 작성 폼의 후처리를 자바스크립트로 수행 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/7a5686094bda67004432f3ad28ca9f5022a6722c) # 멀티게시판 구현 공지사항 게시판, 자유게시판 - DB 게시판 스키마 추가, 멀티게시판 개념 적용 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/3a8bea770a7e336cc6b7a8704317e8ae324f849f) - Board 서비스, 리포지터리 추가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/6d6bf4f615bc636042a9b55a83d4eb6c7bd3cbd2) - 선택된 게시판 이름을 페이지 제목으로 노출 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/fd7393f89aed3b0dba8c4d6a3a1663ef7a52e975) - 존재하지 않는 게시판 알림, 선택된 게시판에 해당하는 게시물만 노출 ```html @Select(""" """) ``` if 문에서 boardId가 0이 아니면 해당하는 게시글을 가져오고 0일 경우 if문이 성립안되고 전체게시글을 가져오게 된다. [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/033a9f64b66faad403a21999423ae595e7ea4ec4) - 등록된 게시물 갯수 표시 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/ef25f00b9e772bba80044aeddaea4be958f4c5b1) # Rq 객체 ## Rq 객체 생성 ### Rq 객체 생성 간소화 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/dd1350e9c7f87b01a1336d37c40893d499ef507c) ### Rq 객체의 생성을 스프링에 맡김 - 매번 rq객체를 생성하지 않고 한번 생성함 UserArticleController, UserMemberController, NeedLoginInterceptor 에서 `HttpServletRequest req` 제거 - 다만 ArticleService, BoardService 와 같은 객체는 사용이 많아도 객체가 매번 만들어질 필요가 없는 반면 rq는 각각의 요청별로 하나씩 생겨야 한다. 이때 의존성 주입을 필요로 한다. ### Rq.java 의존성주입 ``` @Component @Scope(value = "request", proxyMode = ScopedProxyMode.TARGET_CLASS) ``` - Component로 rq가 의존성주입 대상임을 선언 - Scope에서 객체가 하나만 존재하는게 아니라 각 요청별로 하나씩 존재하게 설정
- Rq.java 에서 자신을 받음 this.req.setAttribute("rq", this); ### BeforeActionInterceptor 에서 Rq객체 생성 제거 이제는 Rq 객체가 자동으로 만들어지기 때문에 BeforeActionInterceptor 에서 rq를 만들 필요가 없음 ### initOnBeforeActionInterceptor 도입 - 홈메인페이지에서 로그인 상태에서도 jsp가 로그인을 인식하지 못하는 문제가 있었다. 이를 위해 initOnBeforeActionInterceptor 메서드를 도입 이 메서드는 Rq 객체가 자연스럽게 생성되도록 유도하는 역할을 한다. - BeforeActionInterceptor 에서 호출하여 UserHomeController에서 로그인 확인을 할 수 있다. BeforeActionInterceptor 에서 Rq 객체를 좀 더 확실하게 생성되도록 유도하기 위함 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/843443979d38bd305bb0f9747e3374c7288365d8) ## Rq 객체 설명 - 요청과 응답에 관련하여 해당하는 Request와 Response가 있다. 서버와 통신을 위한 Session도 있다. - 기능마다 많은 접근이 있게 되기 때문에 제일앞에서 소통하는 역할이 있으면 편리하다. - Rq를 두어 프로그램의 모든 로직에서 접근은 Rq로만 한다. ## Rq 프록시 객체 설명, BeforActionInterceptor 에서 굳이 rq의 메서드를 호출하는 이유. 1장 ```java @Component @Scope(value = "request", proxyMode = ScopedProxyMode.TARGET_CLASS) public class Rq { } ``` ### Component - `Component`가 의미하는 것은 개발자가 new로 객체를 만들어 관리하는 것이 아니라 Spring시스템이 언제 만들고 언제 지울지 등의 이 객체의 생명을 관리한다. - 단일로 존재한다면, 실행되는 동안 1개만 만들고 여러 로직에서 그 한개를 사용하게 된다. @Scope를 붙이면서 접속할때마다 생성되도록 한다. ### BeforeActionInterceptor - 한편, 최초로 생성되는 BeforeActionInterceptor를 보자. - BeforeActionInterceptor가 1번 실행되는 반면 여기서 생성되는 rq는 여러번 생성되야 한다. 인터셉터의 생성자는 1번만 실행되는데, 가능한걸까? - 이때, 발휘되는게 ScopedProxyMode이다. 인터셉터에서 생성되는 rq는 실제rq가 아니고, 일종의 대리인이다. ### rq객체의 작동 - 여기저기 rq가 있는데, 어떻게 행동하게 되는가? - 사용자가 요청을 보내면 그 요청에 위한 내부처리를 하면서 관련된 로직이 수행된다. - 여기서 자동으로 연관된 rq가 생성되어 쓰인다. 만일, 로직상 rq객체가 필요없는 경우라면, 만들지 않는다. - 컨트롤러, 서비스, 리포지터리는 요청이 10000개가 있어도 1개가 생성되고 실행된다. - 겉으로 보기엔 rq또한 1번 생성되는 것 같지만 프록시모드를 했기에 지금 현재 rq에 해당하는 걸로 간다. - initOnBeforeActionInterceptor를 왜 호출한건가? 메서드 작동에는 문제없이 처리되더라도 jsp에서 로그인 정보에서 문제가 생긴다. 컨트롤러에서 굳이 실행하지 않아도 항시 보여주는 상단바의 경우 rq.isLogined() 와 같은 코드를 처리할 수 없게 된다. ### 무작정 처음부터 rq를 무조건 만드는 방식을 수정-> 필요할 때만 만듬 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/476d0652feda4ff74fb731754acba4ab533f1f66) - 기존방식은 로직마다 해당하는 rq객체가 쓰인다. 하지만 rq가 전혀 안쓰이더라도 객체가 생성된다. - 필요한 경우마다 rq객체가 쓰이는 방식으로 변경 - Rq => BeforeActionInterceptor `req.setAttribute("rq", rq);` Rq에서가 아니라 인터셉션에서 rq를 어트리뷰트 # 게시글 작성시 등록될 게시판 선택 - doWrite 메서드에서 게시판 선택 boardId 를 매게변수로 받음 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/d02a3ee9d22e38db58bec017e1881ed5acab2472) ## 방법 1. select 테그 - 토글 메뉴바로 선택 - 처음엔 selected 선택사항문구를 사용자에게 알리고 disabled로 다시 선택되지 않게함 ```html 게시판 선택 ``` ## 방법 2. lable 테그 - 원형 선택란으로 선택 ```html 게시판 선택 공지 자유 ``` # 페이징 기능 ## 페이징 기능 01/ 게시물 리스트 page 파라미터 처리 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/02e523090a23a17123fb936d9d8b18e4d7d04b18) UserArticleController ```java public String showArticleList(Model model, @RequestParam(defaultValue = "1") int boardId, @RequestParam(defaultValue = "1") int page) { ..생략 } ``` `@RequestParam(defaultValue = 1) int boardId` - boardId를 매개변수로 받는데, 값이 안들어오면 오류가 발생한다. 이를 막기위해 defaultValue값을 1로 설정한다. - 페이징을 위해 필요한 메서드 ```java List

articles = articleService.getForPrintArticles(rq.getLoginedMemberId(), boardId, itemsCountInAPage, page); ``` 한 화면에 보이는 게시글을 가져오는 getForPrintArticles 를 보면 로그인정보, 게시판번호, 한페이지에 들오가는 게시글 수, 요청한 페이지 로 구성한다. ## 페이징 기능 02/ 페이지 하단 메뉴바 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/68f83d4c6aea9539ac2c2a2d68fec8cbc4e5698c) ## 페이징 기능 03/ 페이지 메뉴의 크기를 동적으로 조절 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/0a1169e308845131ffa630543226b16077296ee2) - 게시글이 많아질때 보기 편하기 위해 페이지를 도입했다. 더욱 게시글이 많아져서 페이지번호가 많아지게 되어 한화면에 페이지 메뉴바도 무한정 길어지는건 곤란하다. - 페이지 바를 리스팅하기 위한 pagesCount가 필요하다. `int pagesCount = (int)Math.ceil((double)articlesCount / itemsCountInAPage);` 전체 게시글 수를 한페이지 당 게시글 수로 나누어 구한다. - 처음 목록 페이지를 띄웠을 때 page값이 없어서 1페이지에 타겟팅이 안되어있다. controller에서 defaultValue로 1을 부여했고, 이를 Attribute에 담아서 넘긴다. - 임의로 설정한 20대신, 전체게시글 수에 따라 페이지 수를 조절한다. ## 페이징 기능 04/ 페이지 메뉴의 최대크기를 지정 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/35ca83cfab82950b2e04cd06852ff2d5044efa9b) - pageMenuArmlen 양팔벌리기 처럼 좌우로 5칸씩 페이지 번호를 리스트로 보여준다. 또한 양끝의 처음과 끝에서는 경계를 넘어서지 않게 한다. - 제일처음과 끝으로 가는 버튼 추가 1페이지와 마지막 페이지가 버튼이 되도록 끝단에서 멀어져 중간페이지일때 보이기 ## 페이징 기능 05/ 사용자가 이용중인 게시판에서 페이지 이동이 되도록 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/ab3cfc57722206a319eef2280df86404adb3e538) - 공지사항게시판에서 페이지이동은 잘 작동되지만 자유게시판에서 페이지 이동을 요청하면 다시 공지사항게시판에서 해당 페이지로 넘어간다. - 이는 게시판정보인 boardId를 기억못하고, 잃어버리기 때문이다. 따라서 각 요청마다 boardId를 담아서 처리한다. # 검색 기능 ## 검색 기능 01/ 리스트에서 검색타입과 검색어에 따라, 총 게시물 수 계산 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/467a26884f82f05c089e1f3f65396dd7b85657a5) - CONCAT을 사용한 이유 MyBatis로 쿼리문을 보낼때 #{aaa} => 'aaa' 로 변환된다. 검색기능의 경우 키워드가 포함되는 것을 찾는데, '%#{aaa}%' => '%'aaa'%' (x) 이처럼 잘못된 요청이 되어버린다. - CONCAT은 문자열을 합치는 함수이다. CONTCAT으로 MyBatis의 문법적한계를 피한것이다. CONTCAT('%', '홍길동', '%') => '%홍길동%' 적절한 요청으로 보낼 수 있다. ## 검색 기능 02/ 게시물 검색어에 따라 게시물 필터, 게시물 페이지메뉴에 검색어 유지 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/6803ee0866ea857bde9166cf5f1a8179a7918c1f) - pageBaseUri 요청정보를 간격한게 표현 게시판분류, 검색타입, 검색어를 받고, 추후 추가 기능을 구현해도 추가하기 간편하다. ## 검색 기능 03/ 게시글목록 꾸미기, 검색박스 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/4968d2ed8909889af5a65c2201db0239e7c9af51) - data-value 사용자 정의 속성 최초 1회 'select[data-value]' 와 같은 속성을 찾는다. 그리고 각각에서 data-value을 가져온다. head에서 common.js를 defer로 설정하여 제일나중에 실행되게됨 # 조회수 기능 ## 조회수 기능 01/ 게시물 상세페이지를 열람하면 조회수 1 증가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/dc0d0b3631449097d7779a86b8da3378263a4a64) - DB에서 hitCount칼럼을 추가 ## 조회수 기능 02/ 별도의 조회수 증가 메서드 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/b3e547d6a0841739e142706f28fa956055cd1d76) - ajax 방식으로 구현 ## 조회수 기능 03/ 조회수 증가를 ajax로 실행 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/f3ba1c303b2c96eaadb3f3bb177c7053c0a68b40) - 게시글 상세보기 요청을 하면 해당 게시물에 대한 정보를 보면서, 조회수도 증가해야 한다. ## 조회수 기능 04/ 조회수 증가 성공에 대한 답장에, data2(글 번호) 정보 추가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/c59da6d4e917e518d65b12a0b0df2b1b8d7cdc8e) - 답장에는 조회수(조회를 하여 증가된 조회수)에 대한 정보가 있었고, 추가로 data2인 해당 게시글에 대한 정보를 담았다. ``` {resultCode: "S-1", msg: "조회수가 1만큼 증가합니다.", data1Name: "hitCount", data1: 22, data2Name: "id",…} data1: 22 data1Name: "hitCount" data2: 7156 data2Name: "id" fail: false msg: "조회수가 1만큼 증가합니다." resultCode: "S-1" success: true ``` ## 조회수 기능 05/ localStorage도입, 브라우저가 한번 읽은 게시물에 대해서는 조회수 증가 요청 안함 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/5320f8b65e35956eae1a1740aecf3bf9197af755) - 지금까지는 게시글 상세페이지에서 새로고침(F5)을 하면 조회수가 증가했다. 이를 한번 읽은 게시글에 대해서 조회수가 증가하지 않게 한다. - 우선, 조회수가 매번 증가하는 이유 -> 매번 ArticleDetail__increaseHitCount(); 가 실행되기 때문 - 필요한건 어떤 게시물에서 조회수를 증가했는지 확인하고, 증가했다면 더 이상 증가를 안하는 작업이 수행되어야 한다. - 참고 - localStorage와 sessionStorage [https://ko.javascript.info/localstorage](https://ko.javascript.info/localstorage) if문의 조건을 localStorage.getItem(localStorageKey) 로 설정하면 이미 이러한 정보가 있으면, return끝낸다. 없으면, true로 조회한 것으로 선언한다. # 추천 기능 ## 리액션포인트 테이블 추가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/65f9bc4152f71226ec2adc71a989a5679def6adb) 리액션의 조건 - 로그인 상태에서 가능 - 한 게시글에 대해 한 번만 가능해야함 - relTypeCode 게시글, 댓글, 회원 관리를 위해 구분하는 역할 ## 시간출력관련 함수를 Article 클래스에 만들어서 JSP에서 사용 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/7a201b208425aba93d0df4187f31afdf6f8b8085) - 테이블에서 td테그에서 th테그로 변경하면 엑셀에서 열고정처럼 스크롤을 좌우이동해도 안넘길수있다. ## 추천 기능 01/ 게시글 목록에서 추천수 보기 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/07f2bf85cd16bf07a88d43f5aaaa56ac3d7874be) - 게시글정보를 가져올때 처리되는 쿼리문 - LEFT JOIN 기존엔 article에 member테이블이 조인되었다. 여기에 추천정보를 위해 reactionPoint 테이블을 조인한다. 추천정보가 없을수있으므로 LEFT JOIN을 사용한다.(이경우엔 INNER JOIN을 사용하면 안오게 된다.) - 서브쿼리? select구문을 다시 하나의 테이블로 여김 - GROUP BY a.id 1대1 매칭이 안되어 어떤 게시글은 3개, 어떤건 2개 ,1개가 나온다. 각 게시글별 정보를 가져온다. - SUM(rp.point) 그룹화를 하면 한개의 정보만 가져오기 때문에 전체 포인트를 합하여 point로 둔다. - 포인트계산 `IF(rp.point > 0, rp.point, 0)` 0보다 크면, 그 값을 그대로, 크지 않으면 0, 즉 양수만 합한다. -> 추천 `IF(rp.point < 0, rp.point, 0)` 0보다 작으면, 그 값을 그대로, 작지 않으면 0, 즉 음수만 합한다. -> 비추천 `IFNULL(SUM(IF(rp.point > 0, rp.point, 0)), 0)` 연산한 결과가 값이 없는 null이면, null 대신 0으로 설정 - 리포지터리에서 쿼리문을 실행할때 오류가 발생한다. 이는 마이바티스와 문법상 차이이며, if문에서 비교할때 `>` == `>` `<` == `<` ## 추천 기능 02/ 상세페이지, 수정페이지에서도 추천수 노출 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/15637a31f8848c95f4a6dd603c9a8269ca1cddf2) ## 추천 기능 03/ 각 게시물에서 좋아요와 싫어요 버튼 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/83bc7df4cf55dca8d85323cfe1635ceb6f1c1812) getSumReactionPointByMemberId 의 값이 0이면 좋아요 혹은 싫어요를 안한 상태이므로 버튼이 보인다. ## 추천 기능 04/ 쿼리속도 최적화를 위해서, article 테이블에 좋아요, 싫어요 칼럼 추가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/6f6d67334015db0516a9db116c549d8aa7464717) - 조회수 article테이블의 칼럼 - 추천수 reactionPoint테이블에서 join으로 참조하여 가져와야함 ## 추천 기능 05/ 추가한 칼럼을 토대로 ArticleRepository변경, article 테이블에서 좋아요, 싫어요 수를 손쉽게 가져옴 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/e6490ff4d5b2cb923df7dfe4ec4824be56751ced) ## 리액션포인트서비스, 리액션포인트리포지터리 도입 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/f3945fad755830e86119d5213ae8cf174d9cd3d0) - 게시글 뿐만 아니라 댓글에도 관여를 하기 때문에, 더 유연한 작업을 위해 도입 ## 추천 기능 06/ 리액션포인트컨트롤러 도입, 리액션 요청전 로그인 확인 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/046b45c3a440f106ebbecdc5f4260c50ad3d329a) - .excludePathPatterns("/favicon.ico"); 페이지 상단의 아이콘은 단순요청이므로 제외처리 ## 추천 기능 07/ 리액션포인트컨트롤러, 서비스에서 좋아요, 싫어요 요청처리 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/7f9a2fdc4c60cf9db1392df4538c477a39f6748e) ## 추천 기능 08/ 리액션포인트리포지터리에서 좋아요, 싫어요 요청처리 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/c0b2704df039bd4ab60417f492beef15689a0ef2) - 좋아요 혹은 싫어요 요청이 오면 1) 인터셉트에서 로그인 여부 확인 2) ReactionController 로 이동 컨트롤러에서는 추천할 수 있는지와 요청을 처리하는 것을 부탁한다. 3) ReactionService에게 리액션할 수 있는지 부탁하면 회원이 있는지 확인하고 4) ReactionRepository에서 해당회원이 해당 게시글에 대해 이력이 있는지 확인 ReactionPoint의 합이 0일때 true로써, 이전에 좋아요, 싫어요가 처리된적이 있는지 확인한다. 여기까지가 오면 회원이 좋아요, 싫어요를 할 수있으므로 요청을 처리한다. 5) 이후 ReactionService 에서 사용자의 요청을 처리하기 위해 ReactionRepository, ArticleRepository 로 보낸다. 6) 이때, reactionPoint와 함께 relTypeCode인 article에 대해서도 갱신되어야 한다. - 절차상 ReactionService 가 ArticleRepository 에게 바로 보내는 것보단 ArticleService에게 넘겨서 ArticleRepository 에서 해당 요청 처리를 넘기는 것이 적절하다. ## 추천 기능 09/ getCurrentUri() 구현, 좋아요, 싫어요 처리 후 기존 uri로 이동 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/d1b348d2f500785cd1e5d9a551fd2e0a94b749f8) - url안에 url을 넣을 때 인코딩하여 넣는다. 디코드는 자동으로 된다. - 어디론가 가기전에 현재 위치를 기억해야 한다. - 요청을 보낼때 부터 `replaceUri=${rq.currentUri}"`로 하여금 처리다하고 다시 돌아오도록 한것 ## 추천 기능 10/ 좋아요 취소버튼, 싫어요 취소버튼을 조건에 따라 노출 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/5610ac5602ee3cbdacaef8ca74f0c806282426d1) - reactionPointService의 actorCanMakeReactionPoint 메서드 변경 boolean -> ResultData 타입변경 단순히 true, false만으로는 왜 안되는지 알 수 없다. - detail 메서드에서 좋아요, 싫어요를 할 수 있는지 확인한다. 로그인이 필요하며, 이전에 리액션을 했을 경우sumReactionPointByMemberId 값이 0이 아니므로 못한다. 더나아가 그 합이 0보다 크면 (양수) 좋아요를 했던 것, 0보다 작으면 (음수) 싫어요를 했던 것 - btn-outline속성으로 색채우기 안된상태로 두어서 좋아요, 싫어요가 안된 상태임을 명시한다. ## 추천 기능 11/ 좋아요, 싫어요 처리 기능 수정 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/a1e6c155143e47c54970a42e4c8018c289aa8cb0) - +내 프로필 버튼 추가 ## 추천 기능 12/ 좋아요, 싫어요 취소기능 추가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/3d80b882640e893555b6606f3d5231419d37ea81) - ArticleRepository 의 decreaseGoodReactionPoint 의 경우 delete가 아닌 update이다. 그저 숫자를 줄이는 명령이다. - detail에서 기능 연결을 유의 `if test=" ~~"` - ${ actorCanMakeReaction } 라면 사용자는 좋아요 or 싫어요 를 요청할 수 있다. - ${ actorCanCancelGoodReaction } 와 ${ actorCanCancelBadReaction } 에서는 해당 게시글에 대해 로그인 중인 사용자가 요청한 의견이 반영되어있다. - 또한 앞선 요청을 취소한 이후 다른 의견을 받는다.(예 먼저 좋아요를 취소해주세요) 동일한 의견을 다시 누르면 취소 처리를 한다. ## 추천 기능 13/ 좋아요, 싫어요 처리, 취소처리 알람을 ResultData 처리 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/5a4f4dc718c2d9ec69c2cc17a53b56d7f7ac6c98) - 서비스에서 실패, 성공에 따라 메세지가 출력된다. # 댓글 기능 ## 댓글 기능 01/ 댓글 테이블 추가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/5b0ec5e98ea64349ae98f3dcd9fb1adfea928915) ## 댓글 기능 02/ 게시글 상세 페이지에서 댓글작성 폼 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/80c97715cd3e6aae32643498019e4178c340849c) - 기존에 구현한 게시글 작성 페이지에서 잘라넣음 ## 댓글 기능 03/ 댓글작성 폼 체크(미입력방지, 최소 2글자 이상작성) [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/9ad614c579568bdbdbb059df7a62cb5326e17f9b) - ReplyWrite__submitForm 스크립트로 미입력방지, 최소 2글자 이상작성 으로 요청을 받아들인다. ## 댓글 기능 04/ 댓글작성 기능 추가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/94c34ccfbb24bdc8210a882daea77b2ca3d9f2e1) - Reply구현 ## 댓글 기능 05/ 특정 게시글에 등록된 댓글 갯수 보기 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/2d640c9c2646d7361ea14c494da85b1c7904aa0e) - int repliesCount = replies.size() reply리포지터리 측으로 댓글 목록을 가져오고 리스트의 사이즈를 갯수로 설정한다. ## 댓글 기능 06/ 댓글 테이블에 인덱스 걸기 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/60ff4040f01e1f746d2fd4ecb5d2b7ce9cff9cdf) - 전체를 살피고 원하는 조건에 해당하는 댓글을 가져오는 방식이었다. 하지만 인덱스를 이용해서 탐색속도를 높일 수 있다. 효율적으로 정보를 가져온다. - WHERE절에서 relTypeCode, relId 순서로 검색하면 자동으로 색인탐색모돌 바뀐다. ## 댓글 기능 07/ 댓글 리스트 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/ddce5034c488f6b1754f56f06071a376ca02873f) ## 댓글 기능 08/ 댓글작성시 줄바꿈이 적용되도록 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/80b82e589f513cdf54397c25543966441079ff99) ## 댓글 기능 09/ 댓글 수정, 댓글 삭제 버튼 구현, 수정,삭제 권한은 작성자에게 있도록 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/cce744c333b193c89c06cc7827358680eeb9077f) ## 댓글 기능 10/ 댓글 삭제 기능 추가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/85c60fafd86536d87c69f3e92f180fd61e65f4ac) ## 댓글 기능 11/ 댓글 수정 페이지 구현 - 로그인 상태가 아닐 경우 댓글 권한 제외 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/5187f2598daa91ea2a32412093e587bd26659cdf) ## 댓글 기능 12/ 댓글 수정 페이지에서 게시글 제목 정보함께 보기 - 해당 게시글 전체정보를 가져오고, 제목만 선별 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/72808c98e2f6905e75e65268605812105a37ed9a) ## 댓글 기능 13/ 댓글, 게시글 수정시 내용입력 확인 스크립트 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/3943ee08d3231f53e999c0d7d85358bd5547f1de) ## 댓글 기능 14/ 댓글 수정 기능 추가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/85d5d4579ca392fc79e8277fd81a4a5aa0bbeb38) # 회원정보 기능 ## 회원정보 기능 01/ 마이페이지 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/807dc88750aa446bde33b00d5002af43f151a3bc) ## 회원정보 기능 02/ 인터셉터 설정에서 로그인이 필요한 경로추가, uri인코딩 - 비밀번호 확인은 회원정보 수정 이외에도 필요한 경우가 있을 것이다. [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/0fd73ddc96bbcb2db30aa72f168fa0d88f9245ae) 방법 1 - replaceUri 를 이용해서 비밀번호확인 후 경로이동을 수행한다. - 또한, import하여 사용해야 한다. ```java <%@ page import="com.ldh.exam.demo.util.Ut"%> ...생략 회원정보수정 ``` 인코딩한 uri경로 : `replaceUri=${ Ut.getUriEncoded('../member/modify') }` 실제 브라우저에서 처리경로 : `회원정보수정` 방법 2 - rq로 이용하면, import가 필요없다. - 대신 rq에 getUriEncoded 메서드를 구현해야 한다. ## 회원정보 기능 03/ 비밀번호 확인 페이지 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/325df011477ba7396d289719950e54e03848889d) ## 회원정보 기능 04/ 비밀번호 확인 기능 추가, NeedLogoutInterceptor 구현, 인터셉터 설정 - 인터셉터 설정에서 로그아웃이 필요한 경로추가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/419fb1ed7f9c28fb7f715d0e511b490e10b906d2) ## 회원정보 기능 05/ 회원정보 수정 페이지 구현 [참고 - HTML 입력 양식 (Forms) | HTML 입력(input) 요소 타입(type)](https://www.devkuma.com/docs/html/html-%EC%9E%85%EB%A0%A5-input-%EC%9A%94%EC%86%8C-%ED%83%80%EC%9E%85-type/) [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/ccda2145e7c9a7fcd78506c4458ade4530e39562) ## 회원정보 기능 06/ 회원정보 수정시 내용입력 확인 스크립트 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/878a7046795351af79d689c3226459c2c71d4053) - 입력을 안하면 기존 비밀번호로 유지 - 새비밀번호를 입력하면, 비밀번호 확인과 비교 ## 회원정보 기능 07/ 회원정보 수정 기능 추가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/5b122446578c2527f90c5b196be043fe0b9ab22e) - MemberRepository에서 매개변수 값이 들어오거나 안들어올 수 있으므로 set테그 내부에서 if조건문을 적용하였으며, script로 감싸서 확실하게 적용한다. ## 회원정보 기능 08/ attr 테이블 추가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/6bad83b797a54ef5e52368b86861330e70f83d1b) - 회원과 관련되었고 필요한 정보일 경우 회원이 비밀번호 변경후 경과한 날짜, 이메일 인증 코드, 이달의 우수회원 선정 등등 - 일부에게 해당되는 설정을 전체 테이블에 칼럼으로 설정하면, 몇명에게만 의미가 있고 데이터 낭비를 초래한다. - attribute -> attr 테이블에서 회원과 관련된 부가정보를 다룸 ## 회원정보 기능 09/ attr서비스, 리포지터리 구현, Ut 메서드 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/915b968819103f42ff588c26a2c2a1f135e1805b) - MemberService 메서드 내 ``` attrService.setValue("member", memberId, "extra", "authKeyForMemberModify", authKeyForMemberModify, Ut.getDateStrLater(60 * 5)); ``` `Ut.getDateStrLater(60 * 5)`는 5분뒤 시간을 가져오는 것이고, 유효기간이 된다. 그 앞은 변수가 된다. ## 회원정보 기능 10/ 회원정보 수정을 위한 비밀번호 체크시 인증코드 생성 기능 추가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/4a553a8ba4973da65d0d81a241986631faeadaff) - Attr테이블에 대하여 UNIQUE INDEX (`relTypeCode`, `relId`, `typeCode`, `type2Code`)로 설정했다. 해당 조합은 unigue하다. 즉 동일한 경우는 없다. - AttrRepository내 setValue는 insert쿼리를 날린다. 따라서 동일한 조합으로 insert를 시도하면 에러가 발생할 것이다. 이를 ON DUPLICATE KEY UPDATE 로 DUPLICATE KEY 가 실행되어 값만 바뀌게 한다. ```java // 인증코드 생성 if (replaceUri.equals("../member/modify")) { String authKeyForMemberModify = memberService.genAuthKeyForMemberModify(rq.getLoginedMemberId()); replaceUri += "?authKeyForMemberModify=" + authKeyForMemberModify; } ``` ## 회원정보 기능 11/ 회원정보 수정시 인증코드 체크 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/d51df4a32b9f8b7509109d584006c92f6e1d9750) - 인증코드가 없이 접근하는 경우 쫓아내야 한다. - 막는 경우는 인증번호가 없을때, 사용자가 임의로 값을 넣을 때 ```java // 인증코드 체크 if (Ut.empty(authKeyForMemberModify)) { return rq.historyBackJsOnView("인증코드가 필요합니다."); } ``` # Rq객체 개선 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/476d0652feda4ff74fb731754acba4ab533f1f66) - 무작정 처음부터 rq를 무조건 만드는 방식을 수정-> 필요할 때만 만듬 # 토스트 UI적용 - 토스트 UI 사용 [https://slog.gg/p/6333](https://slog.gg/p/6333) [CODEPEN - 토스트UI 라이브러리 적용](https://codepen.io/donhyuck/pen/ZErvvQM?editors=1010) ## 토스트UI 적용 01/ 라이브러리 도입 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/aab54fc9d1def557e5cf935ff0518c645773c0f3) [CODEPEN - 토스트UI 라이브러리 적용](https://codepen.io/donhyuck/pen/ZErvvQM?editors=1010) - 토스트UI 라이브러리 불러오기 가져다 쓰는 것을 전제로 필요한 부분만 구별하기 ### 일반적인 작성폼 $$codepen https://codepen.io/donhyuck/embed/XWZZYBX?default-tab=html%2Cresult&editable=true $$ ### 토스트UI를 일반적인 작성폼에 적용 - 글작성을 더욱 다채롭게 할 수 있다. $$codepen https://codepen.io/donhyuck/embed/WNMMyKm?default-tab=html%2Cresult&editable=true $$ ## 토스트UI 적용 02/ 게시글 작성 페이지에서 토스트UI 적용, 스크립트 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/c0308957edad348afbd91ed3abc4376f8a04f6e7) - 작성은 toast-ui-editor 속성 적용 - 라이브러리를 적용하고 사용하기 위해선 토스트속성을 걸어야 한다. 또한, 내용을 제출하기 위해서, hidden으로 input테그를 쓴다. ## 토스트UI 적용 03/ 게시글 상세, 수정 페이지에서 토스트UI 적용 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/c1086ee62acae349b5d4d1748febab97e2447233) - 입력한 모든 것을 넘겨준다. form.body.value = markdown; - 작성과 수정에 있어서는 toast-ui-editor 속성을 상세페이지에서는 toast-ui-viewer 속성을 이용한다. ## 토스트UI 적용 04/ 토스트에디터 결과에도 폰트 적용 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/e57a9971a79607db9f55662b8cdc63d46b6f1ca2) ```html html>body, html>body .toastui-editor-contents, html>body .ProseMirror, html>body .toastui-editor-md-code, html>body .toastui-editor-md-code-block { font-family: "S-CoreDream-3Light"; } ``` # 파비콘 구현 - 탭 메뉴에서 로고를 보여준다. [https://favicon.io/](https://favicon.io/) [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/228af7a114d95961232a784549f125f95f644132) # 로그인 개선 ## 로그인 개선 01/ 로그인이 필요한 요청의 경우, 로그인 페이지로 이동 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/07613b4360f9756a16c8f20967fc030e93c36679) - rq클래스에서 printReplaceJs 메서드로 msg와 url을 담는다. ## 로그인 개선 02/ 로그인 후 원래 가려던 페이지로 이동 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/b34adc77db686c16fadfe11d561fb9c2b8ee9152) - afterLoginUri 어느 페이지에서 로그인페이지로 이동했는지 기억 - 로그인 페이지 jsp로 이동하는 처리를 할 때, 해당 페이지를 기억하고 로그인 처리후 이동한다. ## 로그인 개선 03/ 로그인 후 머물렀던 페이지로 이동 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/7d590e999e2434d4bcabc50193bfd5c3626bad93) - jsp에서는 롬복처럼 작성가능 ${ rq.isLogined() } -> ${ rq.logined } - 사용성이 증가했다고 볼 수 있다. 일부 기능은 로그인이 필요한데, 로그인이 되면 원래 요청대로 페이지 이동을 하고 - 일반 기능을 사용하다가도, 로그인 후 기존 페이지로 돌아올 수 있다. ## 로그인 개선 04/ 로그인 후 접근 할 수 없는 페이지의 경우, afterLoginUri 없이 로그인 페이지로 이동 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/234233090d44f9a0815be188a5b6ed04bd5dfb4f) - 로그인 페이지에서 다시 로그인을 하려고 한다면 현재 url을 afterLoginUri삼아서 계속 중복되는데, 이를 막기 위한 작업 - 현재 페이지는 requestUri `String requestUri = req.getRequestURI();` requestUri가 로그인 페이지라면 `case "/user/member/login":` 원래 의도대로 afterLoginUri를 그대로 한다. return Ut.getUriEncoded(paramMap.get("afterLoginUri")); - 로그인 이후 성립되지 않는 페이지들 회원가입, 아이디 찾기, 비밀번호 찾기 들 또한 오류를 방지하기 위해 추가한다. ## 로그인 개선 05/ getAfterLoginUri 메서드에서 null을 리턴하는 버그 수정 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/7a3a74356dee618e376149343a8139f091e14d35) - Ut의 getStrAttr메서드는 `String getStrAttr(Map map, String attrName, String defaultValue)` attrName가 있으면 attrName를 문자열로 리턴하고, 없다면 defaultValue를 리턴한다. - 돌아갈 uri가 없다면, 자동으로 메인으로 이동된다. ## 로그인 개선 06/ 로그아웃 후 다시 원래페이지로 돌아가도록 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/d32a1ad93d3183092fbe9452a5051e7cd33aa8b4) # 상세보기 기능 개선 ## 상세보기 개선 01/ 게시물 상세페이지에서 게시물 리스트로 이동시 listUrl 파라미터를 가지고 감 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/d65b4d6e144267a1689802aa421a45c9bc938d8b) - getArticleDetailUriFromArticleList 게시판 목록에서 이동하는 상세페이지 - 사용자가 검색어와 조건들을 두었을때 뒤로가기 했다록 날리지 않고, 둘 수 있다. ## 상세보기 개선 02/ 댓글 작성, 수정과 삭제 기능이후 이전에 머물렀던 URI유지 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/aef423be6fca6d9a95b857c7e0134804f0f3d848) - 댓글 작성 후, 기존 상세페이지 URI가 바뀌는 버그 수정 - 상세페이지에 접속 후, 댓글 수정이나 삭제를 해도 원래 상세페이지 URI 유지 - 관건은 파라미터와 매게변수를 신경쓸 것 # 회원가입 기능 개선 ## 회원가입 개선 01/ 회원가입 페이지 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/3f4ed8e40e9d1521c66d40cb8a859d3fc9be14db) 회원가입 기능에 rq객체 적용 ## 회원가입 개선 02/ 회원가입 페이지 내용입력 스크립트 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/b52b00f29baea1ce85fe3c9bd763a4f7a9f4efc5) - 비밀번호, 비밀번호 확인 일치 여부 확인 - 인터셉터에 해당 경로가 있는지 확인해야 한다, ```java ir.addPathPatterns("/user/member/join"); ir.addPathPatterns("/user/member/doJoin"); ``` ## 회원가입 개선 03/ doJoin메서드를 Rq객체 이용하여 처리 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/7c1cd406169e8bee677828e032ecfc3ad92287fd) - 성공/실패 코드를 담아서 처리 메세지출력하는 메서드를 jsHistoryBack를 'F-?' 'S-?'등으로 코드내용도 매게변수로 담는다. ## 회원가입 개선 04/ afterJoinUri적용하여 로그인 페이지로 이동하도록 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/5ff669ee558e83f8d56a0f64663d829c602cfbad) ## 회원가입 개선 05/ 회원가입 시 ajax로 로그인아이디 중복체크 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/1fbf8ed71645e89876196109ab167c67ef37b9f5) ``` function checkLoginIdDup(el) { } ...생략 onkeyup="checkLoginIdDup(this);" ``` - onkeyup 키를 입력할때마다 checkLoginIdDup 기능을 사용한다. -ajax form전송 ``` ``` - 통상 get으로 명명하면 ajax를 의미한다. - 회원가입시 체크하게 되므로 로그아웃인터셉터 추가 `ir.addPathPatterns("/user/member/getLoginIdDup");` ## 회원가입 개선 06/ 로그인 아이디 중복 체크 -> 시도 횟수를 줄이기, 엘리먼트 높이 변동 제거 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/c48f15a2f127ad9e785661d6c54d94f7594af49c) - onkeyup 키를 떼어낼 때마다 작동 - 로그인 아이디가 사용가능 or 사용불가 인지 확인을 한다. 그런데 그 통신하는 사이에는 값이 없어서 깜빡이처럼 메세지가 나타났다가 사라진다. - 통신확인 개발자모드(F12) - 네트워크 -> Fetch/XHR탭 - 로그인 아이디 중복 체크 시도 횟수를 줄이기 ```js if (validLoginId == form.loginId.value) { return; } ``` - 추가 입력, 수정이 없더라도 방향키 등에도 계속 통신이 되는 것을 방지 현재까지 확인된 validLoginId와 입력된 loginId가 같으면 넘어감 - 회원가입시 로그인아이디중복체크시 마다 엘리먼트 높이 변동 제거 ```js $('.loginId-msg').html('

확인중..

'); ``` ## 회원가입 개선 07/ lodash 라이브러리의 debounce 함수적용하여 통신줄이기 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/d07a0b667cc987ffba8294edd5e03885e29562c4) - 타이핑을 하는 중에도 아이디중복을 체크하는 상태인데, 이는 매번 통신을 하는 셈이다. 하지만, 그럴 필요가 없고 타이핑을 마치고 잠깐지나면 중복체크를 하는 것이 효과적이다. - debounce (막음) 요청이 몰려도 호출하지 않는다. 요청이 끊기고 잠잠해지면 그때 한번 호출 한다. - throttle (둔감) 요청이 몰리면 중간중간 한번씩 호출한다. # ajax 요청이면, 인터셉터에서도 그에 맞게 json 으로 응대 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/245bc56cf211b33cf238d2a66248411bff7fb868) - 인터셉터에서 AJAX인지 확인하고(isAjax) 아니면 json방식으로 처리 - rq객체에서 isAjax를 담당 해당 요청이 ajax 요청인지 아닌지 체크 # 테마변경 기능 ## 테마변경 기능 01/ 테마변경으로 밝게보기, 어둡게 보기 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/9e027670c6e58e549dc15b86303d97fba8b3a10d) - javascript구현 - 제이쿼리 불러온 이후로 스크립트 작성 ``` ...생략 function Theme__applyTo(themeName) { $('html').attr('data-theme', themeName); } ``` - html의 data-theme 속성을 변경한다. ## 테마변경 기능 02/ 테마변경시 토글기능 적용 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/123c05452a4a2e333f5c71fbd6e220f84f85a238) ## 테마변경 기능 03/ 다크모드에서 테이블선을 흰색으로, 테이블 보더 색상 변경 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/c5f9fa1b7db495be6576c9065f67d3f163948f31) ## 테마변경 기능 04/ 토스트에디터, 게시물상세보기에도 테마디자인적용 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/32f121d27b59066787fe325cc7226703e8c33459) ``` 다크모드 추가 ``` - ToastEditor__init(), ToastEditorView__init() -> 테마설정 추가 - `location.reload();` 변경후 사용자가 새로고침버튼을 별도로 누르지 않도록 # 관리자모드 기능 ## 관리자모드 기능 01/ 관리자컨트롤러구현, 회원목록을 위한 리포지터리 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/38e0863c32cd669ad1ca7e2b7ba2fe2a2eed0814) ## 관리자모드 기능 02/ 관리자페이지 - 회원 목록 영역 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/9a957e2cfff87a1392db87ba6528d29b571a221c) ## 관리자모드 기능 03/ 관리자페이지 - 검색박스 영역 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/16cc3bda406bba64312a27732526a76e4bd67afe) ## 관리자모드 기능 04/ 관리자페이지 - 검색박스 회원구분 기능추가, 날짜표현간결히, 페이지 추가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/8578c0ac80da7e572e53f91178179ec827257951) ## 관리자모드 기능 05/ 관리자계정만 관리자페이지에 접근가능하도록 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/fe93d257d981d75f08d2c36ba833b98ec593b7bc) ## 관리자모드 기능 06/ 체크박스로 회원일부선택, 전체선택 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/8f1a3ef605ea3ee7370e01c8f15049540114f266) - 전체선택 전체선택박스의 상태를 확인하고, 그 상태대로 체크 다시 클릭하면 박스가 해제되고, 동일하게 다른 박스도 해제상태가 적용된다. - 일부선택 선택된 박스수가 전체박스수와 같으면, 전체박스도 체크상태가 된다. ## 관리자모드 기능 07/ 관리자회원리스트의 페이징 나오도록 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/01c8bcc01098a0c08c137c6e561d7e8e8c870625) ## 관리자모드 기능 08/ loginId 칼럼에 유니크 인덱스 설정, 테스트용 회원정보 추가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/b1af662313da1a59d05279f228b4cdd6bfee8c58) ## 관리자모드 기능 09/ 멀티삭제폼 구현, 삭제할 회원 선택 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/33f5668a6fe91a39b2c270ce3d4fb4e5a67ec4b7) - `const values = $('.checkbox-member-id:checked').map((index, el) => el.value).toArray();` map방식으로 값을 가져와 정렬한다. `.checkbox-member-id:checked` : 선택된 회원들 이들을 0번째, 1번쨰 ... 으로 값을 가져오게된다. - document['do-delete-members-form'].ids.value = values.join(','); 전역변수 document, 그 안에 폼이름`do-delete-members-form`을 적어 접근한다. - `` 그러면 공백인 value에 해당 값이 들어가고 쉼표(,)로 구분된다. - 회원번호를 전송할 수 있다. ## 관리자모드 기능 10/ 선택삭제 기능구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/654b4332b778e214693248b3ef79208d29350b5c) # 추가작업 - 게시글 상세페이지 개선, 컨트롤러 정리 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/55f5682ae5120fae24b69ae211e10339a59bae3e) - 회원가입 페이지 개선 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/67afb695bdd5e164bf60bfafd1eec643a4a1be8e) # 아이디 찾기 ## 아이디찾기 기능 01/ 아이디 찾기 페이지 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/4eaf7c08f0a236b2c4f0f5ece6a3785332bd4013) ## 아이디찾기 기능 02/ 아이디 찾기 기능추가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/d06644ff5e8c9c58bb567cbaa9935d7ec878a215) - 아이디 찾기가 실패하면 뒤로 가기 성공하면 로그인 페이지로 ## 아이디찾기 기능 03/ 아이디 찾기 페이지에서 스크립트 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/f8dd2dddfc7167f064056377e134dbaebafb3874) # 비밀번호 찾기 ## 비밀번호 찾기 기능 01/ 비밀번호 찾기 페이지 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/e74eaeb32c14538d1bd02ee0370e7b2568f333b7) ## 비밀번호 찾기 기능 02/ 비밀번호 찾기 기능추가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/036175bd6248d922f41428bc7bacaa603fbb2a7f) - 아이디 찾기와 유사하게 입력값과 저장된 회원의 정보와 비교하여 일치하면 비밀번호를 알려주었다. - 하지만 바로 비밀번호를 알려주는 것은 적절치 않으며, 임시비밀번호를 제공하고 사용자에게 정보변경을 하도록 한다. ## 비밀번호 찾기 기능 03/ 임시 비밀번호 발급을 위한 암호화메서드 추가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/39664c826ce329a1508d0e0482c4435bb0bfc85c) ## 비밀번호 찾기 기능 04/ notifyTempLoginPwByEmail 메서드동작을 위해 siteName추가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/7ec1239240a43ba045f49cf15d1d8a0a5db59153) - siteName 은 설정파일에 의해 정의되는 것이 좋다. application.yml 에서 custom 에 있는 정보를 가져와서 넣는다. ## 비밀번호 찾기 기능 05/ MailService, 의존성추가, setTempPassword로 임시비빌번호 부여하고 메일발송 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/e3eee2b6b48737784621dc989c3f50bf490215f9) - setTempPassword, 임시비밀번호를 해당 회원의 비밀번호로 설정한다. - 헬로우월드 알림봇 => auwqumcjeergtrqs ## 비밀번호 찾기 기능 06/ 아이디칮기, 비밀번호 찾기 시도에서 jsReplace사용 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/76ccf555955067628bd907a06b2010028d5c6f96) # 비밀번호 암호화 ## 비밀번호 암호화 01/ 비밀번호를 암호화하여 관리 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/66434e42d53751daca66998ee73e7828f481ffc2) - 구글 검색 'java sha256' 외부라이브러리는 별도의 프로젝트에서 테스트 후 도입 - 암호화를 하면 문자열 길이가 늘어나기 때문에 데이터 베이스에서 loginPw속성을 변경해야 한다. 더불어 기존 회원에 대해서도 비밀번호를 암호화해서 저장한다. - 회원가입시 비밀번호를 암호화 하고 로그인시에도 암호화해서 비교한다. - 임시비밀번호는 사용자에겐 생성된 암호대로 보내고 임시비밀번호로 설정할 때에도 암호화해서 저장한다. ## 비밀번호 암호화 02/ 비밀번호 찾기, 회원정보 수정시 비밀번호 암호화, 회원정보 수정 후 로그아웃 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/2594861b010a6611e25ba299bbeb8b8036b3dce5) ## 비밀번호 암호화 03/ 로그인 스크립트 구현, 비밀번호 암호화를 브라우저에서 수행 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/017e2c08321485f2887beb2a9585d88cdb79edcf) - 실무에서 사용되는 암호화방식 DB에 저장되기 전에 암호화가 이루어지면, 통신중간에 해킹을 당하면, 원문그대로의 암호가 노출된다. 그래서 브라우저에서 암호화가 이루어지는 것이 안전하다. ## 비밀번호 암호화 04/ 로그인 비밀번호를 입력받는 스크립트에서 비밀번호 암호화 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/6d8ac420181b0abd915b68222dbf5e67e6e7b537) - 사용자에겐 입력받는 값은 loginPwInput이고, 암호화된 비밀번호 loginPw로 요청을 처리한다. ## 비밀번호 암호화 05/ 임시 비밀번호 발급시 암호화 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/827f1d70affdc23b88671a343d25a4cbd8a9639f) ## 회원정보 기능 12/ 마이페이지 추가 수정 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/8c356748d2490a9d5f47d2bf2893ef7e5a26afd3) ## 회원정보 기능 13/ 회원정보 수정개선, 비밀번호 암호화 적용 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/90ef68cb1aa9ef3085bc5d985d5d52f06cd74641) ```java if (form.loginPwInput.value.length > 0) { form.loginPw.value = sha256(form.loginPwInput.value); form.loginPwInput.value = ''; form.loginPwConfirm.value = ''; } ``` - 사용자가 입력한 비밀번호가 있을때 암호화처리 ## 비밀번호 암호화 06/ 임시 비밀번호로 로그인시 비밀번호 변경을 권유 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/6a24ce82b2fd02b8284d85ae90b16312a88a4440) - 임시비밀번호를 AttrService로 관리 - 임시비밀번호 발급시 attrService.setValue를 한다. `attrService.setValue("member", actor.getId(), "extra", "useTempPassword", "1", null);` member객체 중 회원번호에 대한 정보이며, typeCode 구분으로 "extra", "useTempPassword"이면 1의 값으로 설정한다. 만료는 null 즉, 만료일이 없는 상태로서 별도의 변경이 없으면 그대로 있다. - 로그인 할때 isUsingTempPassword 메서드로 해당회원에 대해 1값이 들어있다면 임시비밀번호를 사용중인 회원에게 비밀번호 변경을 권유하고, 마이페이지로 이동한다. - 이후 회원정보 수정을 요청하면 modify메서드를 처리하며 - 명시적으로 임시비밀번호를 사용하지 않으니, 해당 회원에 대한 "useTempPassword" 를 제거한다. ```java if (loginPw != null) { attrService.remove("member", memberId, "extra", "useTempPassword"); } ``` ## 비밀번호 암호화 07/ 90일 지난 패스워드는 변경권유 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/efd3dcfe796c9773dd00bbe7278cd90a9283ebc1) - attr테이블, 추가정보테이블을 활용하여 기능구현 - 이제부터 회원가입시 등록일, 수정일을 관리한다. 회원가입(doJoin), 비밀번호 변경(doModify) setValue로 만료일 90일을 설정한다. - 로그인할때는 이 만료일이 안 지났는지 확인한다. ```java public boolean isExpiredPassword(int memberId) { return attrService.getValue("member", memberId, "extra", "isExpiredPassword").equals("0") == false; } ``` isExpiredPassword값이 0인가? 만료기간이 1이면 만료상태(false), 0이면 만료기간 남음(true) ## 비밀번호 암호화 08/ 비밀번호 변경 free 기간을 50일로 변경 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/189f674fd5427882767563002f3c93ab87ded6cc) - 로직에서 설정값을 변경해야 하는 경우는 변경요청에 대해 개발자의 대응이 번거롭다. - memberServcie에서 setFreeDaysOfExpiredPasswordLater함수를 수행하여 처리한다. - 비밀번호 변경이 생기는 시점은 회원가입시, 회원정보 수정시 비번변경을 할 경우이다. 생성, 변경 이후 50일 간은 변경요청을 보내지 않는다. - 현재 비밀번호가 만료된 것을 알리면서, 몇일이 지나간건지도 함께 알려준다. getFreeDaysOfExpiredPassword는 사용중인 비밀번호가 얼마나 사용했는지 알려주는 함수이다. application.yml 파일 custom을 freeDaysOfExpiredPassword: 50로 설정하면, 만료기간변경을 위해 소스코드를 뒤적일 필요가 없어진다. ## 비밀번호 암호화 09/ 비밀번호 만료기간을 넘긴 회원에게 변경 권유를 헤더에 표시 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/7ff42af9f94cdeb76b0c358e765232dad085f775) - rq객체에 만료기간초과에 대한 정보를 담아서 넘긴다. 사용자는 어느 페이지던지 헤더에서 비밀번호 변경 알림을 본다. - 해당 알림으로 비밀번호 확인 페이지로 이동하고, 회원정보 수정페이지로 넘어간다. - 이후 다시 로그인하면 알림을 뜨지 않는다. ## 비밀번호 암호화 10/ loginedMember와 isExpiredPassword를 세션에 저장 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/4b38630018cdd98a6738c2416a51dbc24e41ca8c) - 세션에는 loginedMemberId만 저장되고 있는데, 회원에 대한 정보를 저장하고자 아래처럼 구현했다. ```java public void login(Member member) { session.setAttribute("loginedMemberId", member.getId()); session.setAttribute("loginedMember", member); } ``` - 세션에서 객체를 저장하면 마치 얼리는 것처럼 객체직렬화가 된다. 객체에 변화가 생겼을때 이전버전과 호환이 안된다. - 따라서 객체를 JSON화 시켜서 세션에 저장한다. - `@JsonIgnoreProperties(ignoreUnknown = true)`역할 Member객체를 json에 담고, 주르륵 담는데, getAuthLevelName()도 있으니깐 담았다. 그런데 이걸다시 풀려고 보니 AuthLevelName을 어디둬야하는지 모르는 문제가 발생했다. 이때, 모르는 것을 무시하도록 설정한것 - 이 작업으로 DB접근을 줄일 수 있다. 한번 DB에서 정보를 받아서 세션에 저장한다. 이후로는 세션에서 쓰기때문에 DB에 접근을 안하고도 가져다 쓸 수 있다. ## 비밀번호 암호화 11/ DB에서 등록한 회원에게 비밀번호 만료 알림이 안가도록 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/7cac8bb925e85b99401dddbf52896488fbfd9d39) - 테스트 데이터 삽입 내용을 변경 # 게시물 목록 꾸미기 ## 게시물 목록 꾸미기 01/ 게시글 목록 페이지 꾸미기 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/c7df28bbc578212730ad5c35f4b4a2c2595a8359) ## 게시물 목록 꾸미기 02/ 목록에서 해당 게시글의 어느정보로도 상세페이지로 이동, 테이블 상단추가 수정 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/c57e9d583997c3f2f1bdbb3e26c5e4411dca1b29) ## 게시물 목록 꾸미기 03/ 삭제된 회원의 저장된 기존 게시글에 '삭제된_회원' 표시 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/b365a0b37bdd3be2e32540f15053f6ac05c30ce9) > 리포지터리 수정 #### 리포지터리 수정 01/ sql을 xml로 이동 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/189e8a8497756c65229e60e42a03f222696c6562) #### 리포지터리 수정 02/ Mybatis에서 ResultType이 아닌 ResultMap을 사용해서 ForPrintArticles 데이터를 매핑 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/69f24d7d31c34dc6a3f98616e6b30937dae4973d) - return타입을 ResultType이 아닌 ResultMap을 사용 - 미리 정해둔 규칙에 따라 대응되서 데이터 처리가 가능하다. 다대일 구조도 가능하여 여러개를 하나로 적용할 수 도 있다. ## 게시물 목록 꾸미기 04/ 게시글 목록 페이지 디자인 개선 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/f89e45ef274acbab92e449483e626e31293c4e30) ## 게시물 목록 꾸미기 05/ 게시글 상세보기 이동시 조회수 증가 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/6f8764a85c47c948920f1b53fe446e68cee41402) # 댓글 기능 개선 ## 댓글 기능 개선 01/ 댓글 조작 영역(수정, 삭제) 수정 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/fad656e0c14678cfc24176fdd4e388af0b05e60d) ## 댓글 기능 개선 02/ 댓글목록 디자인 변경 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/65b59836c1fd98127ee69116f3d15cb1371f509a) ## 댓글 기능 개선 03/ 댓글 수정전에는 등록일, 수정후에는 수정일로 표시 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/bd8426b0a0d224d08315a1963af4987802ccda61) ## 댓글 기능 개선 04/ 게시글 목록, 댓글 목록 일부기능을 반응형으로 디자인 수정 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/c7bc0a75a5164834b312addb724beda659bb289b) - 게시글목록의 상단에 전체 게시글 갯수와 검색바가 있다. - 일정크기 이상 줄어들면 글자가 깨지지 않고, 검색바가 게시글 갯수 아래로 이동하게 변경했다. # 앵커기능 ## 댓글 기능 개선 05-앵커기능 01/ 댓글 작성 후 댓글 번호를 URI에 포함, getUri관련메서드 추가 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/d1a1c1fa5869185624c5cf2cc906f6b337c0b8ab) - 댓글컨트롤러 replaceUri에 포커스할 스크롤 위치정보를 덧붙인다. `replaceUri += "&focusReplyId=" + newReplyId;` - Util에 getUri메서드 구현 `Ut.getNewUri(replaceUri, "focusReplyId", newReplyId+"");`로 개선 ## 댓글 기능 개선 05-앵커기능 02/ 자바에서 얻은 정보를 자바스크립트 변수로 선언 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/a2d747022483de8db2aa679bf2e1221210684b36) - 자바(jsp)에서 댓글 번호를 얻을 수 있다. 이후 스크롤 이동을 위해서는 추가로 자바스크립트로의 변수선언이 필요하다. - Rq객체에서 getParamJsonStr()메서드로 댓글번호를 얻는다. 또한, head.jspf에도 적용 - 결과적으로 자바스크립트에서 쓸수있도록 JSON형태로 바꾸고, 변수에 넣는다. 자바스크립트 수준에서 param이라는 변수를 쓸 수 있게 된것이다. `const param = {"listUri":"/user/article/list?boardId=2","focusReplyId":"16","id":"3"};` 16번 댓글이 3번 게시글에 작성 ## 댓글 기능 개선 05-앵커기능 03/ 생성된 댓글로 스크롤이동과 포커스 효과를 위해 자바스크립트 구현 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/df3ce8407b506f262c424a3cc4f054c6d2d649de) - data-id 는 임의로 생성한 속성이다. 통상적으로 임의로 생성할 경우 data-??로 명명한다. - 댓글 작성후 스크롤이 이동할 위치를 댓글 번호로 설정한다. - 덧붙여서, 페이지를 구성하는 중간에 위치를 설정하게 되면 꼬일 수 있다. 그래서 setTimeout으로 잠시시간을 두고 스크롤이동 작업을 수행하게 한다. - 강조효과를 내기 위해 focus 도입 이동하는 스크립트가 수행되고, 1s후에 1초동안 색상이변하고, 돌아온다. ## 댓글 기능 개선 05-앵커기능 04/ 댓글 수정 후 수정된 댓글로 스크롤 이동, 포커스 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/6cdf3d3d0e597b7c4e0b264836ecbc95243eb6c2) ## 댓글 기능 개선 06-모달기능 01/ 게시물 상세페이지에서 바로 댓글 수정칸이 보이도록 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/833b629570da5e46ec92114f00923e5f9738b1d4) - 수정페이지 팜플렛을 가져다 옮긴다. - 페이지이동 매핑이 아니라 모달창을 노출시키려는 목적 ## 댓글 기능 개선 06-모달기능 02/ 모달 스크립트로 댓글번호와 댓글내용 데이터 가져오기 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/6ca683b19c4e8b7cb9523851d0325090434390c6) - showModal, hideModal로 모달창을 온오프한다. - 수정버튼은 수정페이지로 이동하지 않고, 부모를 타고 올라와 data-id="${ reply.id }" 까지 접근한다. 이후 ${reply.body} 데이터를 얻을 수 있다. ## 댓글 기능 개선 06-모달기능 03/ 댓글 수정을 모달창에서 수행하도록 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/0af9d55fd27ac647d9f0d1c14fb00a4c770b9793) # 댓글 좋아요, 싫어요 기능 ## 댓글 좋아요, 싫어요 기능 01 / 특정 댓글의 좋아요, 싫어요 갯수 보기, 하나의 의견만 가능하도록 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/a11d404b8bb44a54df23dcd35b8381b323e23740) ## 댓글 좋아요, 싫어요 기능 02 / 로그아웃상태에서는 좋아요, 싫어요 불가능하도록 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/e312651450f52c3b6d8cad34e9b0bf8e08885fa7) ## 댓글 좋아요, 싫어요 기능 03 / 각 댓글별 좋아요, 싫어요 수 보기 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/201e0c5a8af4f7d488e2658db6a8bcc574109b81) ## 댓글 좋아요, 싫어요 기능 04 / 댓글 좋아요, 싫어요 기능 추가 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/50ce15ae86a570b8a1a3fa7ff57b15648389d9e2) ## 댓글 좋아요, 싫어요 기능 05 / 댓글번호를 적용하여 특정 댓글에 대해 좋아요, 싫어요 가능한지 확인 - [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/8539c7495b37c4ff9059d0a6b9e2e38356214dd9) - Article Detail에서와 달리 각 댓글에 대한 리액션 여부를 판단해야 해서 곤란했었다. USerArticleController에서는 로그인 회원의 해당 댓글에 대한 반응이 좋아요 or 싫어요 인지에 대한 값을 받으면 되었다. - 이와 달리 댓글을 어트리뷰트로 받으면 jsp에서 하나의 의견으로 통일해버리는 문제가 보였다. Reactionpoint테이블로 relTypeCode를 reply로 설정하여 article과 유사하게 기능을 구현했다. 오히려 jsp에서 각 상황별로 버튼을 노출시키는 부분에서 시간이 많이 들었다. - reply의 extra속성으로 boolean extra__actorCanMakeReaction, boolean extra__actorCanCancelGOODReaction 을 두었다. 이로써 각 객체에 대한 boolean으로 버튼을 구현했다. # 메뉴바 디자인 변경 ## 메뉴바 디자인 변경 01/ 게시판 이동시 풀다운 메뉴에서 선택 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/5614f93afe4b7dee4e5f24745ebe7680743766d7) 게시판 버튼에 마우스를 올리면 '공지사항', '자유게시판'이 풀다운된다. ## 메뉴바 디자인 변경 02/ 반응형 메뉴바, 좌측 탭메뉴 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/49ba0e26f46ce8105f570b6101c042d3a29cbe9f) - 삼단 막대 아이콘에서 상단바와 동일한 선택 메뉴노출 ## 메뉴바 디자인 변경 03/ 반응형 메뉴바, 상단 메뉴바 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/3082f66b182dbcd8895a2544ddc3b326ed121d07) - 상단 메뉴바 디자인 개선 ## 메뉴바 디자인 변경 04/ 크기가 줄어들면 탭메뉴 노출 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/813ac04164d02211f0770b099212fe111fcf5bd3) - 일정 크기 이상 창이 줄어들면, 상단메뉴바는 사라지고, 좌측탭메뉴가 활성화 ## 메뉴바 디자인 변경 05/ 관리자용 페이지에도 디자인 적용 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/8242794b07f1d8ee31e946f27c422b6164cc71b4) # 게시글목록에서 작성자가 수정, 삭제가 가능하도록 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/0baecee22ddd30beddcb0d66078608d99557d6c1) - 수정, 삭제 칸을 로그인한 회원의 번호와 게시글 작성자 번호와 동일할 때 보인다. `${rq.loginMemberId == article.memberId}` # 관리자 페이지 ## 관리자 페이지 01/ 관리자 페이지 디자인 수정 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/aeb84c31e3f49dc4144c375a5be5f9f521e35ba2) - 게시글 목록 디자인 적용 ## 관리자 페이지 02/ 회원목록에서 회원등급구분 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/12120cc5eb7f36b6a62f9b496dfadd83de5dac7f) ## 관리자 페이지 03/ 인터셉트 확인, 선택삭제 버튼 이동 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/2ce3b22a0f236d0b246078ee18155d53746658ca) ## 관리자 페이지 04/ 선택한 회원의 회원번호 넘기기 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/824444413addc4ac76f2162c664a1a1b7ec7b0a2) ## 관리자 페이지 05/ 선택된 회원의 전체정보 보기 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/1bede6effd5015d00cc5ec843829627bc20a7504) ## 관리자 페이지 06/ 전체 회원정보이력 관리를 위해 관리자리포지터리 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/d1e73beffdbbf984d5e6bbcca500acf670a3d756) > 오류확인 후 디버깅 ### Rq, Member 이전상태로 복원_SAVE [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/9a00d1ac2e34a409a99df7d8c6fe7ca816093cc8) - 오류 : No Content To Map To Object Due To End Of Input [관련링크](http://www.michaelwilliams.co.za/no-content-to-map-to-object-due-to-end-of-input/#:~:text=If%20you%E2%80%99re%20using%20Jersey%20JAX-RS%20and%20get%20the,JSON%20and%20have%20it%20marshalled%20into%20an%20object.) - DB와 연결로 회원, 게시물에 대한 정보는 가져오지만 로그인 처리후 로그인회원에 대한 객체 정보를 못 받아옴 - 예) ${loginedMember.name} -> X, 로그인 회원에 대한 이름, 작성자 정보에서 에러 ## getForPrintAuthName메서드로 회원등급 표시 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/1d65db106cd01e578518d4bf3acdf34ff7e3e19d) ## 관리자 페이지 07/ 관리자 페이지에서 탈퇴회원 조회가 가능하도록 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/33b29bc752602f9e67dffe93259a360e79ed0e2d) - admMemberRepository에서 delStatus에 대한 제한없이 데이터를 가져온다. ## 관리자 페이지 08/ flex로 메뉴바 레이아웃 적용, 관리자 메뉴 풀다운 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/466779e05e0927ba6cf7ba1d3e4adb116ce1c7e5) # 관리자 게시판 기능 ## 관리자 게시판 기능 01/ 관리자 게시물컨트롤러, 서비스, 리포지터리 구현 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/752690e581477e429e281a0cc8c7facc7002242)4 ## 관리자 게시판 기능 02/ 관리자 게시물 JSP 추가, 상세페이지에서 좋아요, 싫어요 표시 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/27c9110cced5b48cfc69f1c4905e619ba395dc11) ## 관리자 게시판 기능 03/ 게시판 선택페이지에서 공지, 자유 게시판 이동 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/10cc6274d330c088ba245a5f8cb250b2f455a772) ## 관리자 게시판 기능 04/ 게시판에서 스크립트 추가하여, 선택삭제, 전체삭제 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/3d6f1ebe7b34a95df6767b2d4d4d6922917ba3a0) ## 관리자 게시판 기능 05/ 게시판 선택 페이지 삭제, 검색박스 높이 증가 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/92a3ed88693b23f79711df09c36a63a301eb4fb0) ## 관리자 게시판 기능 06/ 댓글의 좋아요, 싫어요 전체 표시, 댓글작성기능 제외 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/3526e0ce53f7ca29bd68c2517786d96b42c9686b) ## 관리자 게시판 기능 07/ 선택삭제 스크립트 가능하도록 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/cad7489e493bdcab7660fda59d5cbe7d2e7419e7) ## 관리자 게시판 기능 08/ 관리자에 의한 댓글관리, 수정, 삭제 가능하도록 [GIT](https://github.com/donhyuck/community-demo_2022_04/commit/50ef19ab7437a8e1cb741c9d384be03af619266e) - 관리자 페이지에서는 게시글 작성이나 댓글 작성기능은 구현하지 않고 수정, 삭제가 가능하도록 하였음 - 각 게시글, 각 댓글에 대한 수정, 삭제는 작성자에 관계없이 관리자로서 처리 가능 - 좋아요, 싫어요 수를 볼 수 있게 하였음 - 일괄삭제, 선택 삭제를 회원, 게시글에 대하여 가능