Github에서 소스코드 확인 가능합니다. https://github.com/Jaeya3274/japp/tree/master/jboard

1. 2018.11
댓글 게시판 프로젝트
신입 개발자 천현재
https://github.com/Jaeya3274/japp/tree/master/jboard

2. INDEX Motive
제작동기
Period
제작기간
DevEnv
개발환경
Structure
설계 구조
Process
작동과정
Explain
Back-End
Explain
Front-End
End
보완점 및 후기

3. Motive
제작동기 왜 댓글 게시판인가?
신입 개발자의 기본소양
어떠한 웹이던지 게시판은 필수요소
반복된 연습으로 빠르고 최적화된
게시판 생성을 목표로 한 프로젝트
개념으로만 배웠던 내용들 실제로
프로젝트에 적용하면서 경험을 축적
물론, 가장 큰 이유는 취업을 위한 준비과정!
취업하기 직전까지 코딩 감각과 스스로 공부
하는 습관을 잃지 않기 위한 것!

4. DevEnv
개발환경
Front-End
 Bootstrap 3
 jQuery 3
Back-End
 Spring 3.1
 JDK 1.7
 Mysql 5.7
 Mybatis 3.4
 Tomcat 7
 Maven 2.9
Front-End 개발환경, 선택의 이유는?
전문적인 웹 디자이너가 아닌 저로써는 선택이 아닌 필수적인 웹
디자인 프레임워크이기 때문에 사용하게 되었습니다.
Back-End 개발환경, 선택의 이유는?
현업에서 사용하는 버전(?)을 최대한 많이 겪어보기 위해 너무 낮지
도 않고 높지도 않은 적절한 버전을 선택했습니다.
Mybatis는 이번에 사용해본 JAVA 퍼시스턴스 프레임워크로 코딩
시 어마어마한 생산성 차이와 SQL구문과 JAVA코드의 분리로 한
층 더 유지보수 하기 쉬운 코드로 만들어 주는 것을 느꼈습니다.

5. Period
제작기간 2018/10/17 ~ 2018/11/06 ( 작업기간:15일, 주말 6일 제외 )
1주차 (10/17~10/23) – View 페이지 및 DB 모델링
- 10/17 개발환경 설정 및 프로젝트 주제 설정
- 10/18 Bootsrap3를 이용해 HTML View 페이지 설계 및 생성
- 10/19 Mysql DB Model 설계 및 생성
- 10/22 View (index, login, sign, view, writeForm, updateForm) 완성
- 10/23 View 반복코드를 줄이고, 각종 유효성 검사 javascript로 적용
2주차 (10/24 ~ 10/30), spring MVC 디자인 패턴 적용 및 게시판 기본 기능 완성
- 10/24 MVC 디자인 패턴을 고려 한 프로젝트 패키지 설계 및 view 페이지 jsp로 변환
- 10/25 회원가입 기능 구현
- 10/26 로그인 및 게시판 view 기능 및 페이징 구현
- 10/29 게시판 쓰기, 수정, 삭제 구현
- 10/30 회원가입 아이디 중복체크, 이메일 인증 구현
3주차 (10/31 ~ 11/06), 댓글, 검색, 추천, 조회수 등 세부 기능 구현 및 마무리
- 10/31 게시판 CRUD 및 페이징 기능을 재사용 하여 댓글 CRUD 구현
- 11/01 추천 및 조회수 기능 구현
- 11/02 검색 기능 구현
- 11/05 구현된 기능들 보완 및 코드 재정리
- 11/06 마무리

6. Structure
설계 구조
데이터베이스 모델링
패키지 구조
reply_info 테이블에 b_num을 외래키로 설정하
고 on delete cascade 속성을 적용하여 댓글이
달린 게시물이 삭제되면 해당 댓글들이 일괄적으
로 삭제되도록 하였습니다

7. Process
작동과정 Spring MVC 처리과정
1. 클라이언트가 서버에 어떤 요청을 하면 스프링에서 제공하는
DispatcherServlet이라는 일종의 Front-Controller가 요청을 가로챈다
(web.xml)
2. 요청을 가로챈 DispatcherServlet은 HandlerMapping에게 어떤 컨
트롤러에게 요청을 위임할지 물어본다(servlet-context.xml에서
@Controller로 등록한 것들을 스캔)
3. 요청에 Mapping된 컨트롤러가 있다면 @RequestMapping을 통하
여 요청을 처리할 Method로 전달한다
4. 컨트롤러에서는 해당 요청을 처리할 서비스를 주입 받아 비즈니스 로
직을 서비스에게 위임한다
5. 서비스는 요청에 필요한 작업을 대부분 담당하며 DB접근이 필요하면,
DAO를 주입 받아 DB처리는 DAO에게 위임한다
6. DAO는 Mybatis 설정을 이용해서 SQL쿼리를 날려 DB의 정보를 받
아 다시 서비스에게 전달한다(보통 VO(DTO)를 컨트롤러에서부터 내려
받아 쿼리의 결과를 VO에 담는다)
7. 모든 로직을 끝낸 서비스가 결과를 컨트롤러에게 넘긴다
8. 결과를 받은 컨트롤러는 Model객체에 결과물을 어떤 View(JSP)에 보
여줄 것인지를 정보를 담아 DispatcherServlet에게 보낸다
9. DispatcherServlet은 ViewResolver에게 받은 View에 대한 정보를
넘긴다
10. ViewResolver는 해당 JSP를 찾아서 DispatcherServlet에게 알려준
다
11. DispatcherServlet은 응답할 View에게 Render를 지시하고 View는
응답 로직을 처리한다
12. 결과적으로 DispatcherServlet이 클라이언트에게 렌더링된 View를
응답한다.

8. Explain
Front-End
먼저, 각 페이지들이 어떤 기능을 하고 그 기능에 대한 결과물을 화면
에 어떻게 출력할 지 구상하였습니다. 이 후, Bootstrap3를 이용하여
초기 디자인을 완성하였습니다.
view
updateForm
writeForm
index
login
signUp
search
reply

9. Explain
Front-End
프로젝트 완성 후, 최종적으로 완성된 데이터가 입력되어 있는 웹 디자
인입니다. 크게 바뀐 것은 없는 모습입니다. 검색 결과 노출을 위해
search.jsp페이지를 하나 더 만들었고, 글 쓰기 또는 수정 시에 네이버
에디터2를 이용할 수 있도록 페이지에 적용하였습니다.
naver_editor2
search

10. Explain
Back-End
Explain
프로젝트
각종 설정
Explain
회원가입
Explain
로그인
Explain
게시판
CRUD
Explain
댓글
CRUD
Explain
추천
Explain
검색
Explain
페이징
Function Index

11. Explain
Back-End
Explain
프로젝트
각종 설정
web.xml
web.xml
설정을 위한 설정파일. 이 파일은
WAS(Web Application Server)
Tomcat 이 최 초 구 동 될 때 ,
web.xml을 읽고 그에 해당하는
설정을 구성한다. 즉, 각종 설정을
위한 설정파일이라고 할 수 있다.
root-context로 모든 서블릿과 필터들이
공유 root spring container를 정의한다
DispatcherServlet은 Controller로 향하는 모든
웹 요청의 진입점이며 웹 요청을 처리하며 결과
데이터를 클라이언트에게 응답한다
Listener, 서블릿이 생성, 소멸, 수정되는 것을 알려준다
Filter, 지정해놓은 url-pattern 으로 URL 요
청이 들어오면, 요청으로 들어온 서버로 보내
기 전에 UTF-8로 인코딩한다

12. Explain
Back-End
Explain
프로젝트
각종 설정
pom.xml
pom.xml
dataSource-context.xml
Maven은
pom.xml을 통
해 각종 필요한
라이브러리를 자
동으로 다운 받
고 관리합니다
root-context.xml
root-context.xml은 JSP와 관련이 없는
객체(bean)을 설정합니다
서버 설정을 저장합니다

13. Explain
Back-End
Explain
프로젝트
각종 설정
servlet-context.xml
servlet-context.xml은 JSP와 관련이 있는
객체(bean)을 설정합니다. URI와 관련 설정을
담는 클래스가 들어와야 합니다
InterceptorLogin은 mapping path에 설정한 주소로 가는
요청을 인터셉터 하여 인터셉터 로그인 클래스로 보내줍니다.
즉, 글쓰기 수정하기 삭제하기 추천하기 등은 로그인 되어있
지 않으면 로그인 요청으로 반환합니다.

14. Explain
Back-End
Explain
회원가입
idDupCheck()
ID 중복확인
고객이 회원 가입 시 ID 중복확인을 하면 JS에서 고객이 입력한 데이터를 가지고 URL 요청을 보냅니다. URL이 일치하는 컨트
롤러에서 중복확인 서비스를 처리하게 됩니다. 서비스는 DAO에게 DB접근을 위임합니다. 다음, mapper.xml를 이용하여 SQL
구문을 DB에 질의하여 그 결과를 반환합니다. 반환된 결과를 가진 컨트롤러에서 JS로 데이터를 반환합니다. 결과 데이터를 가진
JS는 alert()으로 처리 결과를 고객 화면에 출력하게 됩니다.

15. Explain
Back-End
Explain
회원가입
activateEmail()
Email 인증
고객이 회원 가입 시 Email 인증확인을 하면 JS에서 고객이 입
력한 데이터를 가지고 URL 요청을 보냅니다. URL이 일치하는
컨트롤러에서 Email 전송을 처리하게 됩니다.
Email 전송 시, 24자리 랜덤 문자열을 생성하는 클래스에서 인증 키를 제공받아 고
객이 입력한 Email로 인증 키와 인증 링크를 보냅니다. 인증 링크를 누르게 되면 고
객 Email을 활성화 시킨 후 인증 키는 소멸하게 됩니다.
여기서 반환하는 인증 키는 회원정보에 입력되어 인증 링크의 인증 키와 비교하는 데 쓰이게 됩니다

16. Explain
Back-End
Explain
로그인
고객이 로그인 요청 시 JS에서 입력된 데이터를 컨트롤러로 보내게 됩
니다. 로그인 성공할 경우, 고객정보를 세션에 저장해서 고객이 사이트
의 모든 페이지를 이용할 수 있도록 웹 서버와 네트워크 연결을 유지하
게 합니다. Email 인증이 되지 않은 경우에는 alert()으로 알려줍니다.
고객이 로그인 하지 않고 글쓰기, 글 수정, 글 삭제, 추천하기 등의 기능
을 이용하려고 URL 요청을 보낼 때, 요청 URL을 가로채어
InterceptorLogin 클래스에 보내어 로그인 페이지로 반환해줍니다.
Login()
로그인

17. Explain
Back-End
Explain
페이징
MYSQL limit는 출력되는 레코드를 개수를 제한할 때 사용합니다. 페이징을 하기
위해서는 시작페이지, 보여줄 게시물의 개수, 전체 게시물의 수가 필요합니다.
Ex) (전체 게시물) limit 시작페이지, 보여줄 게시물의 수
(total) limit 0, 10 = 1번 게시물부터 10개의 게시물이 출력됩니다.(1~10)
(total) limit 10, 20 = 11번 게시물부터 10개의 게시물이 출력됩니다.(11~20)
…

18. Explain
Back-End
Explain
게시판
CRUD
boardWrite()
boardRead()
boardUpdate()
boardDelete()
CRUD
게시판 CRUD 기능에 네이버 에디터2를 적용하였
습니다. 네이버 에디터 적용 시 주의점은 에디터
컨텐츠 영역의 내용을 추출하여 <textarea>에 주
입하는 과정이 있는 것을 염두에 두어야 합니다.

19. Explain
Back-End
Explain
댓글
CRUD
replyWrite()
replyUpdate()
replyDelete()
CRUD
고객이 댓글 작성 시 자신이 쓴 댓글이 아니면 수정 및 삭제가 되지 않도록 설정했습니다. 댓글에도 페이징 기능을 재사용하였습
니다. 하지만 댓글 기능을 AJAX로 처리하지 않고 form-submit으로 처리하였기 때문에 페이지 이동이 일어나게 됩니다. 페이지
이동 시 원래 머물렀던 페이지를 유지하기 위해 URL 요청에 페이지 정보가 담긴 파라미터를 같이 보내줍니다.
게시판 페이징 기능을 재사용하기 위한 과정이었던 만큼, 다음 프로젝트에선 AJAX로 댓글 기능을 구현해보고 싶습니다.

20. Explain
Back-End
Explain
검색
검색 기능 구현 시 제목, 내용, 글쓴이 세가지 옵션을 사용해서 검색할 수 있게 하였습니다. 검색 기능을 구현하면서 한가지 배
웠던 것은 Mybatis로 동적 SQL을 처리하는 방법입니다. JDBC를 사용한 경험을 떠올려 보면 동적으로 SQL를 구성하는 것이
얼마나 힘든 작업인지 이해할 수 있습니다. Mybatis를 사용함으로써 좀 더 쉽고 보기 좋은 SQL를 구성할 수 있는 경험이 되
었습니다.

21. Explain
Back-End
Explain
추천
추천 기능 구현 시 추천할 수 있는 시간을 제한했습니다. 1회 추천 후, 다음 추천은 개발자가 정한 시간 후에 할 수 있도록 제어
하였습니다. 다음 추천시간을 고객 화면에 출력해 주기 위해서 세션에 저장되어 있는 고객의 추천 활성화 시간을 view.jsp에
히든 값으로 입력하였습니다. JS에서 추천할 수 없는 시간이면, 다음 추천시간을 alert()으로 출력하게 하였습니다.

22. End
보완점 및 후기
먼저, 보완점으로는 댓글과 추천 기능을 AJAX로 다시 구현 해보고 싶습니다. form-submit 으로 구현
하였기 때문에 페이지 이동으로 인한 문제들이 많았습니다. 댓글 작성, 수정, 삭제, 추천하기를 할 때마
다 페이지가 다시 로딩되는 문제, 로딩 될 때 게시물 조회수가 카운트 되는 문제 등이 있었습니다.
이번 댓글 게시판 프로젝트를 하면서 느낀 것은 Mybatis를 적용하여 프로젝트를 진행한 결과 개발속도
가 2배 이상으로 빨라졌습니다. 그리고 Mybatis로 동적 SQL을 쉽게 작성할 수 있게 되어 어렵게 생각
했던 기능들도 쉽게 구현해 볼 수 있었습니다. SQL 작성시 실수가 줄어든 것은 덤으로 따라왔습니다.
개인 프로젝트로 진행하면서 스스로 학습하는 습관과 스스로 문제를 해결하는 능력을 키웠습니다.
누가 시켜서 하는 개발자가 아닌, 능동적인 개발자가 되기 위해 노력하겠습니다. 감사합니다.
GitHub에서 프로젝트 소스코드 확인이 가능합니다
https://github.com/Jaeya3274/japp/tree/master/jboard