[211007] 템플릿엔진(thymeleaf)으로 비동기 처리 방식에 대해 고민중이다.

그동안 나는 '소박하지만 그룹입니다' 백준 그룹 멤버들의 공간을 만들기 위한 작인 개인프로젝트를 진행중이었다.

회원, 로그인, 게시글 기능까지 구현을 완료하고 이제 댓글 기능을 구현하려던 중, 문제점이 하나 발생했다.

 

바로 댓글 기능이다.

https://github.com/kth990303/BOJStudyList/issues/18

댓글 기능을 만들어주세요. · Issue #18 · kth990303/BOJStudyList

현재 작업중인 프로젝트

---

비동기가 필요하다고 느낀 이유?

우리가 흔히 생각하고 있는 댓글은, 게시글에서 스크롤을 내리면 댓글이 같이 보이는 화면이다.

그러나, 비동기 처리방식이 아닌 동기방식으로 처리하면 게시글과 댓글을 같이 볼 수 없다.

 

동기 방식으로 처리한다면,

 

1. 게시글 주소에서 "댓글로 이동하기" 버튼을 클릭하여 아예 주소를 이동해서 댓글들만 보이게 해주는 방법을 이용해야 하거나,

2. 객체지향적임을 포기하고 Post(게시글) 도메인과 Comment(댓글)을 같은 도메인에 합쳐서 컨트롤러에서 모델에 Attribute해주는 방법을 이용해야 한다.

 

위 두 가지는 내가 원하는 방법이 아니다.

정말 최후의 마지막까지 안될경우 1번을 선택할 수는 있을 듯하다.

---

Thymeleaf(이하 타임리프) 템플릿 엔진으로 비동기를 처리할 수 있는 방법은?

결국 게시글이나 회원가입 창 등등 대부분의 기능들은 동기로 처리해도 딱히 문제는 없었지만, 댓글 기능은 비동기 처리방식이 필수적이라 생각한 나는 타임리프로 비동기 처리방식을 다룰 수 있는 방법이 뭐가 있을까 구글링해보았다.

그 결과는 아래와 같다.

 

1. React, Vue와 같은 CSR 프론트엔드 프레임워크에서 다루는 axios, fetch는 타임리프에서 불가능하다.

 

사실 가장 하고 싶었던 방법이고, 가장 고민했던 방법이다. 최근 개인프로젝트들을 하면서 프론트엔드를 조금이라도 만질 줄 알아야 내가 원하는 걸 만들 수 있다고 판단해서 리액트를 공부중인데, 이를 이용해서 아예 이참에 리액트와 연동해서 rest api 통신으로 프젝을 바꿀까 고민을 많이 했다.

그러나 비교적 비용이 많이 들고, 리액트와 스프링부트를 아직 연동한 경험이 없었던 나에게 조금 걱정되는 방법이기도 했다. vscode로 작업한 리액트 코드와 intellij로 작업한 java코드를 함께 관리하는 방법, 그리고 환경세팅 시에 발생하는 cors 문제라든지 여러가지 고민이 많이 됐다. 결정적으로, 아직 리액트에 익숙하지 않은 나에게 앞으로의 작업이 원활하지 못할 가능성이 높다고 판단했다. 

 

2. React 댓글 모듈을 만들거나 가져와서 적용한다.

 

이 부분이 가장 이상적인 방법이라 생각하나, 1번에서 언급한 단점이 그대로 적용된다. 먼저, 다른 사람이 구현한 모듈을 그대로 가져오는 건 마음에 들지 않는 방법이라 고려대상에서 제외했다. 즉, 스스로 만들거나, 아니면 같이 작업하는 팀원이 만드는 리액트 모듈을 가져오는 방법만 존재한다. (이번 프로젝트는 팀원이 없으니, 이 방법을 택하면 결국 스스로 리액트를 작업해야하는 상황이나 마찬가지.) 결국은 실력부족으로 인한 단점인데, 내가 빨리 리액트를 잘하게 되든지, 아니면 협업경험을 많이 쌓아 프론트 팀원과 같이 작업하면 좋을 듯한데 이 프로젝트는 혼자 백엔드에 집중해서 성장하기 위한 것이다보니 너무 아쉽다. 

 

3. ajax 통신으로 jquery 방식을 이용해본다.

 

사실 이 방법은 쓰지 않을 것이라고 마음먹었었는데, 이번 프로젝트에선 결국은 이 방법을 사용할 듯하다. 사실 제이쿼리는 요즘 거의 쓰이지 않는 레거시 코드여서 제이쿼리를 적용하는데에 굉장히 고민을 많이 했다.

 그러나 타임리프에서 적용할 수 있는 유일한 비동기 처리 방식인 듯하기도 하고, 배우는 데에 비교적 비용이 많이 들지 않아 금방 만들 수 있을 것이라는 생각이 들었다. 또한, 제이쿼리를 한 번도 사용해본 적이 없어서 호기심이 조금 생기기도 하여 조금씩 마음이 기울다가, 결정적으로, 이번 프로젝트는 프론트엔드에 집중하는 프로젝트가 아니다보니 결국 이 방법을 택할 듯하다.

 

다만, 이번에 제이쿼리를 써서 프로젝트를 진행하므로, 이후에 반드시 리액트를 이용한 비동기 처리방식으로도 만들어볼 것이다.

---

3번 방법을 택하면서 든 생각은, 비슷한 프로젝트를 이후에 리액트 + 스프링부트로 다시 한 번 만들어보고 싶다는 생각이 절실하게 들었다.

 

정말 고민을 많이 했는데, 마음에 들지 않는 3번 방법(jquery ajax)을 택한 이유는, 이 프로젝트를 통해 성장하고 싶은 목표가 백엔드 + 여러 개의 db table 연관관계 공부이기 때문이다. 이 목표를 보다 빠르게 이루기 위해선 프론트엔드에 많이 집중하는 것보단 지금 잠깐 제이쿼리를 쓰더라도, 목표를 이루는데엔 그나마 괜찮은 방법이라 택했기 때문이다. 이후에 전반적으로 내 실력이 좋아질 경우 수정 또는 다시 새롭게 만들어보고 싶다.

 

현재 프로젝트는 타임리프로 작업하다보니 rest api 통신 방법이 아닌 방식으로 사용하고 있다. 그렇다고 이 프로젝트를 통해 얻은 것이 없는 건 절대 아니다. 물론 이 과정을 통해서 MVC 방법의 장점으로 인한 객체지향적인 장점 (유지보수와 결합성), 그리고 JPA와 db table 연관관계를 익히는 데에 많은 도움이 됐고, 개발의 즐거움을 알게 돼서 굉장히 많은 공부가 됐긴 하다.

 

다만, 최신 기술(rest api, json형태의 데이터를 주고받는 형식)이 아닌 방법으로 프로젝트를 진행하고 있다는 점이 아무리 생각해도 아쉽기 때문에, 이후에 프론트 실력이 충분하다고 판단될 때, 혹은 프론트 팀원이 잘 구해지면 spring boot (java) + react로 rest api 통신 방식으로 비슷한 프로젝트를 진행해보고 싶다.

 

 

아래는 현재 진행하고 있는 개인프로젝트 '소박하지만 그룹입니다' 프로젝트이다.

https://github.com/kth990303/BOJStudyList

GitHub - kth990303/BOJStudyList: BOJ 그룹스터디 회원들의 공간을 만들자~