Node js에서 ejs, pug, handlebar

Question

그냥 개인적인 호기심이 있어 질문드립니다!

최근 nodejs 강의를 듣고 있는데 ejs,pug, hanblebar처럼 동적으로 페이지를 만들 수 있도록 템플릿 엔진들을 다뤄봤었습니다. 이걸 하면서 느낀게 조건부렌더링이나 루프로 htmlelement 생성하는게 리액트에서는 이게 되게 쉬운데 여기서는 나름대로 태그 붙이고 일일이 하나하나 따로따로 쳐줘야되고 이런 것들이 좀 불편하다고 느껴졌습니다. 레이아웃 만들어주는 부분도 차이를 느꼈었습니다.

근데 툴 배포 연도를 보니깐 다 리액트 전에 등장했던 도구들이더라고요. 동적 컨텐츠를 위한 사이트를 만들기 위해서 이전에 사용됐던 도구들(pug, handlebar, ejs)을 더 개발자 경험을 개선한 거를 현대의 spa 프레임워크나 라이브러리들(react, vue, angular)이라고 이해할 수 있을까요?

손정현 · Answer

안녕하세요!

말씀하신 개발자 경험을 개선한 것도 맞지만 SPA가 뜬 주된 이유는 앱들이 기능이 복잡해지고 커지면서 서버에 부담이 많이 되기 시작해서인걸로 알고 있습니다.

공부하신대로 기존에는 서버에서 템플릿 엔진을 포함한 각각의 방식으로 데이터와 뷰를 연산한 페이지를 내려주는 형태가 일반적이었다고 합니다. 기술이 발전하면서 웹사이트에 여러가지 기능들을 더하기 시작하자 이는 서버에 불필요한 부담을 주었고, 서버에서 할 필요없는 연산은 클라이언트 컴퓨팅 파워로 처리하자가 SPA의 기조였어요. 리액트는 이 SPA를 좀 더 효율적으로 해내고자 VDOM이라는 개념을 탑재해서 나온 라이브러리였구요.

실제로 SPA와 CSR로 위의 문제를 많이 해결했고 서버는 필요한 연산만해서 데이터를 잘 내려주는 본연의 작업만 잘 처리할 수 있게되었죠. 개발자 경험 관점에서 보자면 SPA 프레임워크들이 여럿 나오면서 뷰를 작성하는 코드 방식을 기존 템플릿 엔진과는 다른 각자만의 방식을 채택했어요. 리액트에서 사용하는 JSX도 그중 하나라고 보시면 됩니다.

다만, SPA도 만능은 아니라서 모두가 SPA를 고집하지는 않습니다. 심지어 요즘은 리액트도 서버 쪽에서 미리 리액트 트리 노드를 연산하는 기능을 지원하기 시작해서 개인적으로 약간 과도기지 않나 싶어요. 어느정도 시간이 지나면 어떻게 사용하면 좋을지 감이 잡힐 것 같습니다.

비슷한 글들이 커리어리 내에도 올라왔었던것 같아서 해당 링크랑 그냥 읽어보면 좋을법한 링크 남겨드릴게요!
- https://deno.com/blog/the-future-and-past-is-server-side-rendering
- https://careerly.co.kr/qnas/2625
- https://www.startupcode.kr/company/blog/archives/11