필자는 벡엔드 개발자임. 간단한 벡오피스나, 사이드 프로젝트 만들 때는 프론트엔드는 React를 사용함.

React의 생태계는 진짜 프론트엔드 중 끝판왕이라고 할 수 있음.  진짜 왠만한 거는 다 갖다 쓸 수 있다고 볼 수 있음.

단지 그 점 때문에, 지금까지 리액트를 쓰는 중임. 

하지만 시간이 지나면 지날수록 점점 더 내가 이걸 왜 쓰는 건지 하는 회의감이 많이 듬.


일단 필자는 뭐가 거창한 웹을 바라지 않음. 내가 바라는 건 그냥 데이터 뿌려주고, 정렬해주고, 간단한 효과와 이벤트 . 

보기 그럴듯한 디자인이 다임. 사실 현존하는 대부분의 웹사이트가 그 정도 수준임.


그런데 리액트와 같은 JS기반, SPA 프레임워크를 쓰면,  그 간단한 거를 하기 위해서 세팅해주는 것도 진짜 너무 피곤함.

일단 webpack이니 vite니 하는 번들러부터, babel 과 같은 트랜스파일러, nodejs 깔아야하고.. 거기서 디펜더시 버전 맞춰줘야 되고, 

환경설정은 env 파일로 관리하고,  CORS 설정도 신경써줘야 되며, type 안전성을 가져오기 위해서 ts 쓸라치면 tsconfig도 작성해줘야 하고,

eslint부터, prettier는 또 뭐고,  SEO 신경써주기 위해서 SSR 같은 거 설정하려면, 또 next.js이니 뭐니 해서 프레임워크 튀어나오고,

리액트 자체도 너무 러닝커브가 높음. 리액트 자체에서만 의미있는 각종 기본 hooks들도 외워야 되는 스트레스에,  코드 스플리팅이니 뭐니, 상태관리는 또 어떻게 해야 하나. 누군 redux. mobx, recoil , 서버 상태는 react-query, swr 를 써야 된다. 뭐다 말들이 많음. 


혼자 개발할 때 프론트, 벡엔드 나누어져 있다는 거 자체가 개빡침.
가장 빡치는 게 내가 JSON으로 던져줄 DTO를 직접 만들고, 또 그걸 그대로 fetch해오는 ajax 함수를 고대로 만들어야 되는 거. 스스로 고생해서 일을 따블로 만드는 짓거리를 하고있슴.
또 이렇게 둘로 나눠져 있으면 빌드도 각각 따로 해야 되는데 이게 또 그렇게 빡침. 
이전에 thymeleaf + jquery로 뚝딱 만들어서 한방에 JAR로 배포하면, 끝인 걸 세팅을 세세하게 들어가야 됨.
코드베이스도 다른 걸 왔다리갔다리 보면서 고치는 것도 개피곤함.
두 개 나눠져 있으면 인증 처리하는 것도, 개빡세짐.

그러다 우연히 이 영상을 보게됨.


Rapid server side full stack web development with ViewComponents and htmx by Thomas SchuehlySpring I/O 2023 - Barcelona, 18-19 MaySlides: https://raw.githubusercontent.com/tschuehly/rapid-fullstack-demo/master/spring-io-rapid-server-side-fullstack.p...www.youtube.com




영상 보고 바로 삘 받아서 간단히 Todo App 만들어봄. (밑의 링크)


https://github.com/stella6767/simple-todo

GitHub - stella6767/simple-todo: daisyUI HTMX SpringBoot JTE Todo AppdaisyUI + HTMX + SpringBoot + JTE Todo App. Contribute to stella6767/simple-todo development by creating an account on GitHub.github.com





개발경험이 진짜 상당히 좋음. 


일단 내가 쓴 건 JTE라는 템플릿 엔진인데, 간단히 말해 JSP version 2라고 생각하면 됨. 자바코드와 1대1 호응되며 자바코드로 번역이 되기 때문에 문법이 자바랑 거의 똑같음. 당연히 컴파일 타임에 랜더링을 해놓으니, 속도도 타임리프보다 월등하고, 컴파일 타임에 적용되기 때문에 타입체크 문법에러도 사전에 확인할 수 있음. 타임리프처럼 문법이 틀려서 런타임에 에러터져서 확인할 일이 없슴. gradle 플러그인도 지원해서 바이트코드 복붙해서 JAR로 패키징해주는 유틸리티도 지원함. 핫 리로드 당연지원



HTMX는 진짜 혁명임. 


서버사이드 랜더링의 가장 큰 단점이, 서버에서 미리 다 랜더링해서 브라우저에 던져주기 때문에, 특정 돔만 타겟해서 조작하기가 힘들다는 것인데, HTMX를 쓰면, JS 1도 없이 DOM 조작해서, 페이지 리로드 하지 않고, 화면조각 갈아끼울 수 있음. 러닝커브 3시간 예상해봄.

당근 서버에서 혼자 알아서 다 하니 CORS니 뭐니 하는 보안정책 신경 쓸 필요도 없고. 배포도 아주 쉬움. 그냥 통째로 JAR 말아서 서버로 띄우면 됨.


Spring-View-Component도 아주 만족. 루비온레일즈의 ViewComponent에서 영감을 받았다는데, 루비는 모르겠지만, 재사용 가능한 컴포넌트 기반의 UI 구성하는데 굉장히 도움이 많이 되는 듯.


여튼, 생각있으면 함 해봐라, 속도도 빠르고, 엄청 개발자경험이 좋다. 앞으로 혼자 사이드하는데 있어서 리액트 쓸 일은 절대 없을듯.