[팀프로젝트] Springboot 사용하면서 UI 화면은 어떻게 처리하면 좋을까?

현재까지 배운 것들로는 springboot 안의 템플릿엔진인 thymeleaf 나 mustache 를 사용하고 Controller 에서 view 를 return 해주는 방식으로 진행하고 있었습니다. 보여지는 화면은 정적인 내용들이여서 실시간 알림, CRUD 가 발생하면 최신화 등 동적인 화면페이지를 만드는데에 한계를 느꼈습니다. 원하는 것은 이리저리 화면이 동적으로 움직이며 생동감 있는 프로그램을 만들어보고 싶었고 어떻게 하면 처리할 수 있을까란 고민에, 프론트엔드에 관련해서 찾아보게 되었습니다. 확실히 프론트엔드를 이해하면서 REST API 의 필요성과 프론트와 백엔드 차이점을 이해했습니다. 기초적인 지식일지 모르겠지만 우물안 개구리가 밖에 나와서 처음 마주한 강아지를 본 느낌을 받았고, 조금 더 열심히 분석 해보기로 생각했습니다.

웹 어플리케이션 개발에 있어 크게 2가지 렌더링 방식이 있다고 하며, 아래와 같은 정보를 확인했습니다.

---

 

1. 서버 사이드 렌더링

설명: 서버에서 완전한 HTML을 만들어서 내려줍니다. 대표적으로 jsp, thymeleaf, velocity, freemarker가 있습니다.

장점: 단순하고, 학습 곡선이 낮습니다. 백엔드 개발자도 쉽게 개발할 수 있습니다.

단점: 동적이면서 복잡한 화면을 만들기 어렵습니다.

 

2. 클라이언트 사이드 렌더링

설명: 서버는 API만 제공하고, 자바스크립트 프레임워크가 템플릿과 서버 API 응답 결과를 조합해서 HTML 화면을 동적으로 만듭니다. 대표적으로 react, vue.js, angularJS 등이 있습니다.

장점: 동적이고, 복잡한 화면을 만들기 좋습니다.

단점: 공부할 분량이 매우 많습니다. 자바스크립트에 능숙해야 합니다. 웹 프론트엔드 개발자라는 전문 분야가 있습니다.

 

그래서 선택지를 드리자면^^

1. 자바스크립트에 자신있고, 완전 풀스택으로 갈것이다. = react + typescript

2. 백엔드 개발이 좋고, 스프링이 좋은데, 어쩔 수 없을 때 화면을 찍겠다. = thymeleaf

3. 레거시 하는 회사에 입사해야 한다. = jsp (ㅠㅠ)

4. velocity는 그냥 그걸 사용하는 회사에 입사하고 고민해도 됩니다. ㅎㅎ (쉬워서요 ㅎㅎ)

 

정말 재밌는 답변이였고 앞으로의 개발방향에 대해서 매우 유익했습니다.

 

기존 개인 프로젝트 간 템플릿 엔진으로 구현한 게시판이 있는데 이를 어찌 프론트엔드로 바꾼단 말인가..?! 에 대한 고민이 아직 있으나 팀프로젝트 진행 간 해소될 것으로 예상됩니다 ^^..

 

문제는 어디서 부터 시작인가?

 

출처 : https://www.inflearn.com/questions/72824/%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94-%EA%B0%95%EC%82%AC%EB%8B%98%EC%9D%B4-%ED%85%9C%ED%94%8C%EB%A6%BF-%EC%97%94%EC%A7%84%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C-%EC%A7%88%EB%AC%B8%EC%9D%B4-%EC%9E%88%EC%8A%B5%EB%8B%88%EB%8B%A4