COM-DEV 기술설명서
✔️ 개요
💬 개발자들의 코드 공유, 질문 등을 위한 커뮤니티 사이트 구현
✔️ Github 리포지터리
✔️ 사용된기술
⚓️ 버전관리
- Git , Github
⚓️ 배포
- 👾 Github
- ☕️ Tomcat
- 🐳 Docker
♻️ 개발환경
- SpringBoot
- Sqlyog
- Chrome
- Firefox
- Windows 11
- Tomcat
- JSP
🔥 서비스환경
- Nginx
- Mariadb
- Docker
🔱 기술 스택
- Java
- Spring Boot
- MariaDB
- HTML, CSS, JS
- JQuery
- Ajax
- Tailwindcss
- daisy ui
✔️ 개발 현황
RQ-ID |
화면명 |
개발명 |
개발 내용 |
날짜 |
작성자 |
진행상항 |
RQ-0001 |
메인 |
상단 메뉴 구성 |
왼쪽상단 메인로고 클릭시 메인페이지로 이동 |
02.22 |
김채민 |
반영 |
RQ-0002 |
메인 |
상단 메뉴 구성 |
왼쪽상단 해/달 아이콘 클릭 시 라이트/다크모드 전환 |
04.01 |
김채민 |
반영 |
RQ-0003 |
공지사항 |
게시판 선택 메뉴 |
사용자를 대상으로 공지사항을 전달하는 게시판 |
02.24 |
김채민 |
반영 |
RQ-0004 |
자유게시판 |
게시판 선택 메뉴 |
자유로운 글을 게시하는 게시판 |
02.26 |
김채민 |
반영 |
RQ-0005 |
코드 질문 |
게시판 선택 메뉴 |
코드에 관한 질문 등을 게시하는 게시판 |
04.11 |
김채민 |
반영 |
RQ-0006 |
QnA |
게시판 선택 메뉴 |
사용자와 운영진과의 소통을 위한 게시판 |
04.11 |
김채민 |
반영 |
RQ-0007 |
회원가입 |
상단 메뉴 영역 |
원할한 서비스 이용을 위한 회원가입 |
02.28 |
김채민 |
반영 |
RQ-0008 |
로그인 |
상단 메뉴 영역 |
원할한 서비스 이용을 위한 로그인 |
02.29 |
김채민 |
반영 |
RQ-0009 |
검색 |
중간 영역 |
필요한 게시글을 찾기 위한 검색 기능 |
02.30 |
김채민 |
반영 |
RQ-0010 |
게시물 개수 |
상단 영역 |
현재 선택된 게시물 개수 시각화 |
03.02 |
김채민 |
반영 |
RQ-0011 |
댓글 |
하단 영역 |
각각 게시글의 대한 댓글 출력/입력 |
03.05 |
김채민 |
반영 |
RQ-0012 |
좋아요, 싫어요 |
중간 영역 |
글에 대한 사용자 선호여부 |
03.05 |
김채민 |
반영 |
RQ-0013 |
조회수 |
중간 영역 |
게시글 조회수 시각화 |
03.05 |
김채민 |
반영 |
📋️기능현황 표
구분 |
기능 |
구현 |
테스트 |
배포 |
사용자 |
회원가입 |
✔️ |
✔️ |
✔️ |
사용자 |
로그인 |
✔️ |
✔️ |
✔️ |
사용자 |
로그아웃 |
✔️ |
✔️ |
✔️ |
자유게시판 |
리스트 |
✔️ |
✔️ |
✔️ |
공지사항 |
리스트 |
✔️ |
✔️ |
✔️ |
QnA |
리스트 |
✔️ |
✔️ |
✔️ |
코드질문 |
리스트 |
✔️ |
✔️ |
✔️ |
전체메뉴 |
댓글 |
✔️ |
✔️ |
✔️ |
전체메뉴 |
수정 |
✔️ |
✔️ |
✔️ |
전체메뉴 |
삭제 |
✔️ |
✔️ |
✔️ |
전체검색 |
검색 |
✔️ |
✔️ |
✔️ |
기능 |
좋아요 |
✔️ |
✔️ |
✔️ |
기능 |
조회수 |
✔️ |
✔️ |
✔️ |
내 정보 |
마이페이지 |
✔️ |
✔️ |
✔️ |
내 정보 |
수정 |
✔️ |
✔️ |
✔️ |
✔️ ERD
![](http://www.plantuml.com/plantuml/svg/pLHTQzim57tthz1ZKfAoiOV18D1zC3RQRg5ZpyEDHMEgsC5LDi9Q2C65G3t8YClIrXdEIzUMZBbPw3pe_f0b_uV9iXKxoJhsLFPawznxZ-uzHzBA3fODtAWX2MfOnKsm3ckRq03l9G2Mba1uRD6JBWZtBJgO4Dzc60iKYyKe35G5a74dxFi5K5xbY06tdiWO0jAx9CC1QRlqYyC3ZRh2S1uBl4jwu4vZWao1w1MMSMC7qFPNwZhqquXSjN9tIkIR7oE5kwNu9oyAE5-CBV0XVKlLdhCEXqxmmwS3dnwQqH2sdORBxz8m-MaIhnNFmpCqkSR8MSMf6Q_LoZR7o7UJNEnph08HgbTr3RxGGUXCYDMYhXaUsHaQM9DLn7dERJgupdGeDt1r3Rw520HNLdZe4BT3ncUvx08y0FTAh8fu_SBzKZ1faTCH_TpDItkICEoXWTKAWf5XaMF1sA873XbTpvkMRFi7ssxsxQ_6fOGrVcQOrl5n4UHF4_9DNJOK5erR2wsvX2aD6mSnnPcN5-UYKca2qfxGumIeglYntj0me4ClsgpJpoYn0UkeANGWLY_mM_yWmYq88CSMJILWZTqWGNRWTB17aO2p1ZCLRz7WYgumOtxPfEVaNg_cOp1pFpYOzhkcRiEohZARfcvuVJhuIDqkS-p_yCI0AFA3tIZtZ7pmM4EXwOcazPSRvMTlvhn1R2en27-ReeabVkZ0dhwylBihxgAKV0KSlwcpgGcMIZMBpp7m4x2Op1aNOT762jIKw6d_3G00)
✔️ 주요 폴더 및 파일
- UsrArticleController : 메뉴 리스트
- UsrHomeController : 실행
- UsrMemberController : 회원
- UsrReactionPointController : 조회수
- UsrReplyController : 댓글
- favicon.ico : 파비콘
- application.yml : 설정
- head.jsp : 모든 의존성 적용
- Ut.java : 메세지
- Vo.java : 객체 모델링
- ResultData.java : 데이터 메세지
- Rq.java : HttpServletRequest, HttpServletResponse, Ajax
- NeedLoginInterceptor.java : 로그인 체크
- NeedLogoutInterceptor.java : 로그아웃 체크
- BeforeActionInterceptor.java : 핸들러
🐳 배포 구조
톰캣 구조도
![](http://www.plantuml.com/plantuml/svg/SoWkIImgAKygvj9IUDksuSsknLnQMWglTcnulNd7snaxtdGjUTkr0oYafV1w-PBNtHrl5ZIycReHB02Nnf1vlNW5K1Z6IybFBeQnKoiISmjoKg5yXUJyt9JKChtiv8nSlUmY1G8M8enrICrB0RaP0000)
톰캣 구성요소 개요
- 설명에 앞서
- 기본호스트를 tomcat.kchm.kr 으로 가정한다.
- 톰캣에 현재 호스트가 추가된 상황이라고 가정한다.
- comdev.kchm.kr
- 톰캣 : 스프링부트앱을 탑재할 수 있는 컨테이너, 여러개의 호스트를 추가할 수 있고, 설치직후에는 기본호스트만 존재한다.
- 기본호스트 : 설치직후에는 기본적으로 5개의 앱을 가지고 있다.
- 매니저앱 : 각 호스트마다 하나씩 존재, 자신이 속한 호스트에서 소속된 다른 앱들을 관리하는데 사용된다. 원격배포시에 사용된다.
- 호스트매니저앱 : 톰캣당 1개씩 존재, 호스트룰 추가, 삭제할 수 있다.
- docs앱 : 톰캣공식문서가 담겨있는 앱
- examples앱 : 톰캣예제소스코드가 담겨있는 앱
- 앱의 URL 구성 : 호스트/앱이름, 예를들어 기본호스트의 docs앱의 URL은 : https://tomcat.kchm.kr/docs 이다.
- 루트앱 : 호스트명만으로 구성된 URL로 접속했을 때 나오는 앱, 예를들어 comdev.kchm.kr 호스트의 루트앱 주소는 https://comdev.kchm.kr 이다.
- 보통 톰캣에 새로운 사이트를 추가할 때, 호스트매니저로 호스트를 추가한 후, 해당 호스트안에 루트앱만 추가한다.
- 호스트내에 이름이 같은 앱은 존재할 수 없다.
- 다만 병렬배포라고 해서, 버전을 달리하면 똑같은 앱이 하나의 호스트내에 여러개 존재할 수 있다.
- 이 상황에서는 사용자가 접근했을 때 톰캣이 버전이 높은 앱을 노출시킨다.
배포 중단배포 순서도
![](http://www.plantuml.com/plantuml/svg/fL5DJy904BtlhrZXeWTDE9bmyE8Fm1ZlX8yccWWOKb1kH0f1MYD4rvQa9H2QuA67LecfXb_4plu7fu4YZO87RpipxxsPztP7FfSA4fLBDPAfoALYfP2LoeHaIpSq1eCUwCsJunZ9vEHIcSvTaxic3Bf4AieNSes60App52aXJp7vgn8BKQBbmkTuLHa-T6pHyS4oqdnYSxKDmpemxtV0-2LuCI-ThYQ-rwmkeVj7goje4cqKSXdvC5cMyjBL9NfQpQAuqrJgB1vF75ndoaBJm9fHQ5YWUBkuYLOJUn7UudvahQ7r9X-P_D4aos40ssGioXmgN7N8Pl0FfVK4K8gxhdXmC5zK0cjAvxuBe-dy3QMj6NmOWXdOefnftF51xou1WJJOFPZKoHRvFsmi1A2lyB7s3mlGQ0U9q30Ink2T2JQ5eOdNW-vGhjgWcZZnGBN5yrtqmxUBtpeO2xOmwXwqxfUAC332wBhOQFFE4rgXei_0yiaN)
배포 무중단배포 순서도(톰캣의 병렬배포기능을 이용한)
![](http://www.plantuml.com/plantuml/svg/dLB1Qjj04BtlLqoSImofgNq9vD1BFo2bz1WmJY988BQBKTpcvhQoCRP25M95Cf5S9HQu1HtaHAMY-8iqet_eB8uLcpO9zABTdNblvhqPhQc7IbK1jNugAYTglNPItLCQGkpLFqAEHkTajT-ypedAlbflG18w63eqCeHIKu_KKrW0-7q0J5dmD0TljTm2bNP2-ZtENdPCFJ_jnUJQPPpusE-Iro9p-c_0-BkycTDokLby5b5w499fXHUlCfsmpKQh-nLrQxkX72ZlZzbrbbl5lTtPURU-NYfyg3HINITt1lJ59MswmPsWMSglyEOEcRM4jjfuxU258-wJ4lQOzLMcfs4_48-3_wgqF04kbSGXNKUS0Oxn8hZWHhEOnxi8-pxR-4IEjWYNykH6kpMyyEaoek60kO2cZa5Cbi7OhgmXOVVs_rDMaMNXsG2u6VS7wXZOjm73Avgq02T6SkTjxjP8Ywbjy-QeozyMl6Gue67ZZuXbw6Hg_6S1tRHnhATcXEwiiBhd9yT2dmEkno6Uy3brpbBJ9YlWdKiXOVeru4vaTR4taABIeKbkB9vmzApVO8QUJoDP4URMv4wMxF5LdlE-rFl9i-GD5NWGNakIabynVfl9eU54ptpRoQtt01P_0000)
서버 구조
![](http://www.plantuml.com/plantuml/svg/VP9HIy9G5CVVzobEzbAXrwsPYf0FsNj1Zn4ovrBHJPahZ10qB8A8z44qCL68wC6720cXeE_IwwxVeTrjwXrkmhOxpZdtzx_dV-w6bfLa2MH1BJFdgc3yua4BTsxne7cSW6i6m8xsx_Md1kvzS9mPdSTdzR4-6jiX07EfCkIjCdDWRuAxTTpewvyD_NsA7uOKDo4fsj59PAjqaIhaH9GNipBAg_ua5zb5N0InYDksuUP7pAbYGO9bzg_MDfueoqRNvKCXVbsQvzamGpL5Elr-NJHb1PLCJgbOzTmYjK3IMQUcvSUIOrYT4z8fJv8pJntG3QOLPL7GxDeLb2CxTohAEaYBOTcJ30JYu7FnpnVZ46GrhLIE1ODYKKvBb_DfWJxg0nwsyDqZuxhLWhfQv8COx2B0prFzgmP60FRZbfd990VwpSGECrxRNSzBxWCXyyXYGKajLguCQnKX8wc0Eqt0BzrPUqBKR6tJ6G-IAUBX9j49eIM5ZHAeLKprOE4z6O7JpOmgISfPO6Ur7J9-8hE7uF00yE-F_ZRsqs2g3VEgU10S8bxtZ0Y54OqZTBkQQiWK-WS0)
🎨기능별 UI/UX
메인화면
![](https://cdn.discordapp.com/attachments/958884937048653907/962885514472591390/unknown.png)
로그인 (Dark mode)
![](https://cdn.discordapp.com/attachments/958884937048653907/962885564888133683/unknown.png)
로그인 (Light mode)
![](https://cdn.discordapp.com/attachments/958884937048653907/962885581371768912/unknown.png)
회원가입 (Dark mode)
![](https://cdn.discordapp.com/attachments/958884937048653907/962886360304332860/unknown.png)
회원가입 (Light mode)
![](https://cdn.discordapp.com/attachments/958884937048653907/962886376867631134/unknown.png)
게시물 작성 (Dark mode)
![](https://cdn.discordapp.com/attachments/958884937048653907/962886465128382494/unknown.png)
게시물 작성 (Light mode)
![](https://cdn.discordapp.com/attachments/958884937048653907/962886665758724137/unknown.png)
게시물 목록 (Dark mode)
![](https://cdn.discordapp.com/attachments/958884937048653907/962886666715033640/unknown.png)
게시물 목록 (Light mode)
![](https://cdn.discordapp.com/attachments/958884937048653907/962886667075735612/unknown.png)
게시물 페이지 (Dark mode)
![](https://cdn.discordapp.com/attachments/958884937048653907/962886665993609226/unknown.png)
게시물 페이지 (Light mode)
![](https://cdn.discordapp.com/attachments/958884937048653907/962886666215895040/unknown.png)
마이페이지 (Dark mode)
![](https://cdn.discordapp.com/attachments/958884937048653907/962886916901077072/unknown.png)
마이페이지 (Light mode)
![](https://cdn.discordapp.com/attachments/958884937048653907/962886917144326274/unknown.png)
회원정보 수정 (Dark mode)
![](https://cdn.discordapp.com/attachments/958884937048653907/962886917945446460/unknown.png)
회원정보 수정 (Light mode)
![](https://cdn.discordapp.com/attachments/958884937048653907/962886918176141322/unknown.png)
회원정보 수정(수정하기 버튼 클릭 시, Dark mode)
![](https://cdn.discordapp.com/attachments/958884937048653907/962886918385840128/unknown.png)
회원정보 수정(수정하기 버튼 클릭 시, Light mode)
![](https://cdn.discordapp.com/attachments/958884937048653907/962886918549430282/unknown.png)