[Spring] 댓글 처리 Front-End - 세팅편 -

[Spring] 댓글 처리 Front-End - 세팅편 -

 

이전 글

2021.08.03 - [Spring] - [Spring] 댓글 처리, 서비스 영역과 Controller 처리 (feat. @RestController)

2021.08.01 - [Spring] - [Spring] 댓글 처리를 위한 영속 속성

 

JSP 에서 댓글에 대한 처리는 하나의 페이지 내에서 모든 작업이 이루어지기 때문에 조금 복잡합니다. 또한 기존과 달리 js로 동적인 HTML을 처리하기 때문에 주의해서 작업해야 합니다.

 

JavaScript의 모듈화

동적인 HTML을 처리하기 위해 Ajax를 이용하는데, jQuery의 함수를 이용해서 쉽게 처리할 수 있습니다. 화면 내 JS 처리를 하다 보면 이벤트 처리와 DOM 처리, Ajax 처리 등이 마구 섞여 유지보수 하기 힘든 코드가 될 수 있습니다. 이런 경우를 대비해 JS를 하나의 모듈처럼 구성하는 방식을 이용합니다.

 

JS에서 가장 많이 사용하는 패턴 중 하나는 모듈 패턴입니다. 쉽게 말해 관련 있는 함수들을 하나의 모듈처럼 묶음으로 구성하는 것을 의미합니다. JS의 클로저를 이용하는 가장 대표적인 방법입니다.

 

reply.js 파일 생성

webapp > resources > js > reply.js 파일 생성

작성하는 reply.js는 기능 없이 간단히 동작하는 코드를 넣어 확인하는 용도로 사용합니다.

reply.js 파일은 게시물의 조회 페이지에서 사용하기 위해 작성된 것이므로, views/board/get.jsp 파일에 추가합니다.

 

reply.js 파일은 이전에 만든 이벤트 처리 바로 위쪽으로 추가합니다.

get.jsp 일부

get.jsp를 불러오는 페이지를 열고, 개발자 도구에서 reply.js 코드가 실행되었는지 확인합니다.

모듈 구성하기

모듈 패턴은 쉽게 말해서 Java의 클래스처럼 JavaScript를 이용해서 메서드를 갖는 객체를 구성합니다. 모듈 패턴은 JavaScript의 즉시 실행함수와 '{ }'를 이용해서 객체를 구성합니다. reply.js를 아래와 같이 수정합니다.

 

reply.js

JS의 즉시 실행함수는 ( ) 안에 함수를 선언하고 바깥쪽에서 실행해 버립니다. 즉시 실행함수는 함수의 실행 결과가 바깥쪽에 선언된 변수에 할당됩니다. 위 코드에는 replyService라는 변수에 name이라는 속성에 'AAAA'라는 속성값을 가진 객체가 할당됩니다.

 

replyService의 확인은 get.jsp를 이용해서 확인합니다.

 

get.jsp

jQuery의 $(document).ready( .. )는 한 페이지에 여러 번 나와도 상관없기 때문에 기존의 JavaScript 코드를 수정하지 않으려면 위와 같이 별도의 <script> 태그로 분리해도 무방합니다. 개발자 도구에선 replyService 객체가 정상적으로 표시되어야 합니다.

---

기본적인 세팅을 마치고 이후 댓글에 대한 화면 처리를 구성해보겠습니다.

요즘 일이 바빠지고 몸 컨디션 조절을 위해 분량을 줄이고 나누어 작성하려고 합니다.

 

도움이 될 수 있도록 파트별로 잘 나누어 올리겠습니다.

 

감사합니다.