(번역) 자바스크립트 프레임워크 - 2025년을 향해

sehyun hwang·2025년 2월 2일
17

FE 번역글

목록 보기
37/38
post-thumbnail

원문 : https://dev.to/this-is-learning/javascript-frameworks-heading-into-2025-hkb

저는 올해 제가 이 글을 쓰게 될 줄 몰랐습니다. 새로운 기술의 잠재력에 관하여 사람들이 흥미로워할 만한 글을 쓰는 건 쉽습니다. 하지만 2024년은 현실을 받아들이는 한 해였습니다.

지난 몇 년간은 미지의 영역을 탐구하는 시간이었습니다. 설레는 마음으로 올해를 맞이했습니다. 이제 비로소 이러한 발전을 정교하게 다듬는 시간이었으며, 실제로 그러했습니다. 하지만 한 가지 사실 또한 분명했습니다.

단순함에 대한 탐구는 실제로 웹 개발을 단순하게 만들지 못했습니다.

물론 몇몇 부분은 확실히 개선되었지만, 전체적인 그림은 단순해지지 않았습니다. 우린 이미 이 사실을 알고 있습니다. 하지만 2024년에는 세계 경제의 예산 긴축과 보수적인 해결책을 유지하려는 압박에 의해 변화가 생겼습니다. 이에 따라 사람들은 완벽한 해결책이 없다는 사실을 마침내 받아들인 것 같습니다. 어려운 문제는 당연히 해결하기도 어렵습니다.

도구가 복잡할 뿐만 아니라 문제들도 복잡합니다. 근본적인 문제로 돌아가기 위해 이미 구현되어 있는 기능을 재발명하고 이런저런 장애물에 부딪히는 일을 반복했습니다.

냉정한 생각이지만 2025년에는 시간을 갖고 재평가할 수 있다는 희망이 있습니다. 이는 2024년을 성찰하는 것으로 시작됩니다.


서버의 장래성

서버의 장래성

지난 5년간 프런트엔드에서는 "서버 우선" 접근 방식이 화두였습니다. 웹이 서버에서 탄생했기 때문에 새로운 개념은 아니었지만, 클라이언트 중심의 단일 페이지 앱(SPA)이 10년간 사용되면서 균형이 틀어진 것은 분명했습니다. 특히 페이지 로드 속도가 중요한 웹사이트에서는 높은 상호작용성의 혜택을 크게 누리지 못했습니다.

팬데믹 동안 온라인 쇼핑이 증가하고, 저금리로 인한 자본이 유입되면서 서버 우선 방식을 추구하는 현상이 더욱 증폭되었습니다. 결과적으로 SvelteKit, Astro, Remix, SolidStart, Qwik, Fresh, 그리고 Analog와 같은 서버 우선의 메타 프레임워크가 등장하였고, Next와 Nuxt와 같은 기존의 프레임워크들도 대폭 업데이트되었습니다.

지난 몇 년 동안 모두를 위한 보편적인 해결책을 찾기 위해 SPA의 영향을 받은 동형(동일한 코드가 클라이언트/서버에서 다르게 실행되는) 접근 방식과 MPA의 영향을 받은 분할 실행(아일랜드/서버 컴포넌트) 접근 방식이 대립해 왔습니다. 이는 두 극단의 접근 방식이 절충안을 찾기 위한 노력의 일환이었습니다. 이는 Next App Router와 View Transitions 라우팅뿐만 아니라 Out-of-Order Streaming, Server Functions, Optimistic Updates, Server Islands, 그리고 Single-Flight Mutation과 같은 기술에 큰 발전을 가져왔습니다. 하지만 그럼에도 상상할 수 없을 만큼 여전히 격차가 컸습니다.

이러한 기능을 모두 조합한다면 더 이상 간단하지 않습니다. 그리고 우리가 의도했던 문제를 해결하고 있는지도 논란의 여지가 있습니다.

Ryan Carniato - 프런트엔드의 실존적 위기에 직면, 리액트 서밋 2024 (유튜브 영상)

성공을 측정하기란 매우 어렵습니다. 성능 측정에 실패하는 경우도 있습니다.

벤치마크가 실패한 경우에 대한 포스트

근본적인 원인이 다른 곳에 있을 때 새로운 기술로 인해 성능이 저하되는 경우도 보았습니다.

새로운 기술로 인해 성능이 저하되는 경우에 대한 포스트

이러한 혼란을 겪고 싶지 않은 사람들은 다시 전통적인 서버 접근 방식으로 대화를 이어나갔습니다. "SSR" 외부에 존재하면서, 서버에서 자바스크립트 프레임워크를 실행하지 않는 그러한 방식으로요. 이 방식은 적합한 프로젝트에선 매번 아주 좋은 선택이었습니다. 하지만 그다지 흥미롭지는 않습니다.

이전의 것을 개선할 필요가 없었다면 우리는 지금 이 자리까지 올 수 없었을 것입니다. 개선은 많은 시행착오를 필요로 합니다. 가장 간단한 도구가 올바른 해결책이겠지만, 문제가 더 이상 단순하지 않을 땐 이를 확장할 옵션이 필요할 수 있습니다.

2021/22년이 서버에 대한 초심으로 돌아가서 더 단순한 기반을 정립하는 시기였다면, 2024년은 단순한 것이 항상 정답은 아니라는 것을 일깨워주는 시기였습니다.

구조에 나서는 컴파일

compilation to the rescue

컴파일은 자바스크립트 개발에 항상 존재합니다. 브라우저 기능 지원, 복잡한 문법, 또는 언어의 한계를 극복해야 할 때마다 이를 해결하기 위해 컴파일러를 만들어왔습니다.

현재 표준 위원회에서는 새로운 기능을 도입하기 위해 컴파일러를 사용하는 방향으로 나아가는 것을 고려하고 있을 정도로 보편화되어 있습니다. 컴파일과 확장 번들링을 이용하는 방식은 최신 자바스크립트 애플리케이션을 만드는 방법의 핵심입니다. 또한 대부분의 자바스크립트 도구에서 가장 복잡한 부분이기도 합니다.

타입부터 린트, 트리 셰이킹, 코드 분할, 코드 경량화, 동형 사상(Isomorphism), 매크로, DSL, 모놀리식 저작/분산 배포 등 혜택은 엄청납니다. 지난 15년간 이 분야에서의 모든 발전은 컴파일러 기반 위에서 이루어졌습니다. 비교해 봤을 때 그나마 적절하다고 여겨지는 대안도 없습니다. 안타까울 수 있습니다. 자바스크립트 언어의 한계일 수 있고, 불가피한 복잡성일 수도 있습니다. 그러나 이를 부정하는 것은 무의미합니다.

복잡성을 이해하기 위해서 최소한 근본을 아는 것이 중요합니다. 2024년 개발 분야에서 가장 흥미로웠던 점은 리액트 컴파일러와 Svelte 5 Runes의 출시로 인해 상황이 얼마나 복잡해졌나 하는 것입니다.

한쪽에는 리액트 컴파일러가 있습니다. 이 자동 최적화 컴파일러는 수동으로 조작할 필요 없이 불필요한 재실행을 줄이는 방향으로 코드를 변환합니다. 이는 2019년에 출시된 Svelte 3 컴파일러와 원칙적으로 매우 유사합니다. 다른 한편에는 2018년에 출시된 SolidJS와 유사한 파인 그레인드(fine-grained) Signal 렌더러에 문법적 설탕을 제공하는 Svelt 5 Runes가 있습니다.

이들은 두 프로젝트의 본질에 의문을 제기할 정도로 서로 다릅니다. 리액트는 리렌더링이 최적화할 만큼 충분히 중요하다는 것을 인정합니다. Svelte는 향상된 기능과 성능에 대한 더 나은 근본적인 기반 마련과 함께 더 표현적인 언어를 위해 간단히 작성할 수 있는 구문을 버렸습니다. 역설적이게도 이러한 입장은 초기의 셀링 포인트와는 정반대입니다.

Svelte 4와 Svelte 5 구문의 차이를 보여주는 포스트

그리고 흥미롭게도 두 선택 모두 기존 방식에 비해 복잡성이 증가한다는 단점이 있습니다.

이러한 변화들이 궁극적으로 각 프로젝트에 도움이 될지는 아직 판단하기 어렵습니다. 이들의 공통점은 개발을 더 쉽게 할 수 있는 해결책을 만들수록 점점 더 복잡해진다는 것입니다.

AI와 개발 도구

컴파일과 번들링이 기본적인 요소라면, 이들은 추후 AI가 매우 다양한 해결책을 개발하는 데 필요한 도구를 제공하기 위한 기반이 되는 요소임이 자명합니다.

이 도구들이 우리의 로컬 개발 경험 향상에 미치는 영향은 갈수록 커지는 반면에, AI가 자바스크립트 프레임워크에 미치는 영향은 아직 미미합니다.

올해 초, Devin이 간단한 앱을 만들어 화제가 되었습니다. 이는 우리가 이 기술에게 기대하는 것이 무엇인지 의문을 제기했습니다. 기능을 갖춘 앱을 만드는 것으로 충분할까요 아니면 품질도 좋아야 할까요?

Devin AI가 만든 Todo 앱에 대한 포스트

이러한 맥락에서 Vercel의 v0과 같은 기술은 프로토타입을 만드는데 큰 성공을 거두었습니다. 아마 현재로선 가장 큰 이점일지도 모릅니다.

애플리케이션의 성능 이슈를 검사하는 React Scan으로 MillionJS의 개발자인 Aiden Bai에게 다시 한번 이목이 집중되었습니다.

React Scan 데모 포스트

누군가는 리렌더링이 반드시 문제의 징조가 아니거나 리액트에서 리렌더링을 찾는 것은 식은 죽 먹기라고 주장하겠지만, 한 가지 분명한 것은 곧 다가올 개발 도구의 잠재력에 대해 눈을 뜨게 되었다는 사실입니다.

작업이 복잡하고 핵심 도구가 더 복잡해지면 이를 충족하기 위해 지원 도구가 발전하는 것은 당연합니다. 이는 개발에서 shift left하는 것 그 이상의 의미를 가집니다. 이러한 요구는 전체 스펙트럼에 거쳐 완전히 통합되어 있습니다. Biome(그리고 이전에는 Rome)가 이러한 목표를 세운 반면, (Vue/Vite의 Evan You의) VoidZero와 같은 신생 회사는 이러한 기반이 다음 단계로 나아가는 데 필수적이라는 것을 보여줍니다.


앞으로의 전망

서버 차선(Server-second)

우리는 이미 2024년 중반에 SvelteKit, SolidStart 그리고 Remix의 SPA 모드를 통해 변화가 시작되는 것을 보았습니다. Remix는 React Router에 서버 기능이 아닌 기능을 다시 되돌렸습니다. Server Function과 Single Flight Mutations에 대한 SolidStart의 부가적인 접근 방식은 동일한 원칙에 기반한 리액트 프레임워크인 Tanstack Start의 궁극적인 기반을 다졌습니다.

Tanstack Start에 관한 포스트

또한 로컬 우선의 싱크 엔진 기술도 발전하고 있습니다. 어떤 식으로 모습을 드러낼지는 지켜봐야 하겠지만, 2025년에도 계속 트렌드로 이어지길 기대하고 있습니다.

느리지만 꾸준한 것이 경주에서 승리합니다

javascript framework trends over the years

올해의 자바스크립트 설문 결과에서 한 가지 제 눈길을 끌었던 점은, 도구에 대한 불만이 커지는 가운데 일부 도구가 다른 도구보다 더 긍정성(positivity) 치수에서 성장을 보였다는 것입니다. 이는 현재 사용자와 소규모 집단에 초점을 맞추는 리텐션(만족도) 치수와는 약간 다른 의미입니다(SolidJs와 Svelte는 몇 년간 이 목록의 최상위권에 자리 잡고 있습니다).

제가 자주 언급하지는 않지만, 이 도구들은 경제가 어렵고 유지 보수하는 것이 걱정거리가 될 때 빛을 발하는 경향이 있습니다. 특히 Vue와 Angular는 모두 내년에 주목할 만한 가치가 있는 프레임워크입니다. 깜짝 놀랄만한 혁신적인 기능을 기대해서라기보다는, 이러한 도구들이 개발자의 만족도를 높이기 위해 노력하고 있기 때문입니다. 때때로 최고의 도구는 "최상위권"의 도구가 아닐 수 있습니다.

Signal의 성장통

gartner hype cycle

현재 리액트를 제외한 거의 모든 프레임워크가 Signal을 사용하고 있다고 해도 과언이 아닙니다. 하지만 시간이 지나면서 개발자들은 현재 존재하는 트레이드오프의 깊이를 이해하기 시작했습니다. 저의 편향된 의견으로는 이러한 것들이 사소한 문제라고 생각하지만, 이를 통해 사람들이 새삼 리액트에게 감사하기를 기대하고 있습니다. 이는 사람들이 항상 갖고 있어야 할 감사함이며, 그렇다고 이를 통해 리액트의 결함이 변명되는 것은 아닙니다. 하지만 모든 것은 트레이드오프의 연속이며, 양 측면을 모두 이해해야만 비로소 자신이 선택한 것의 가치를 이해할 수 있습니다.

Signal은 여전히 발전하고 있습니다. 지난 몇 년간 이 분야의 집단적 경험이 엄청나게 성장했습니다. 앞으로 몇 년간 이뤄지는 작은 혁신들이 모여서 지금까지 경험하지 못한 방식으로 Signal의 차별적인 가치를 보여줄 것이라고 기대합니다.

웹 컴포넌트

...농담입니다


결론

지난 몇 년과는 다르게 저는 앞으로의 12개월 동안 큰 기술의 도약이 있을 거라고 예상하지 않습니다. 커뮤니티 전체적으로 이를 받아들일지는 모르겠습니다. 저는 사람들의 대화가 재개 가능성(Resumability)과 부분 하이드레이션을 비교하는 것에서 어느 것이 가장 좋은 템플릿 구문인지 우위를 논하는 방향으로 흐려지는 것을 보았습니다. 이는 곧 다가올 성찰과 혁신을 위해 따라오는 과정의 일부입니다. 지금 당장 변화가 이뤄지는 것은 아니지만, 그래도 괜찮습니다.

우리가 파악해야 할 복잡성이 많습니다. 어떤 기술에 투자하고 노력할 가치가 있는지를 판단하기 위해 많은 어려운 결정을 내려야 합니다. 차세대 해결책을 위한 대략적인 기능은 존재하지만, 소비할 수 있는 형태의 적절한 조합을 찾지는 못한 것 같습니다. 하지만 적어도 단순함을 추구하는 과정에서 새로운 방식으로 복잡성을 다시 늘리는 행동을 우리 스스로 자초했다는 사실을 인정하기 시작했습니다.

단일 해결책은 아직 등장하지 않았습니다. HTMX가 세상을 정복하지 않겠지만, 좋은 선택지가 될 수 있습니다. 리액트는 다른 해결책보다 반드시 더 복잡하지는 않습니다. 확장 기능의 비동기 및 클라이언트/서버 상호작용은 복잡한 문제입니다. 컴파일러가 모든 문제를 해결할 수는 없지만, 많은 것을 해결할 수 있습니다.

React 컴파일러의 효율성에 대한 포스트

우리는 복잡함이 가득한 세상 속에 살고 있으며, 이는 가까운 시일 내에 바뀔 것처럼 보이지 않습니다. 따라서 2025년은 집중하여 일을 완수하기에 좋은 시기라고 생각합니다.

이다음 등장할 멋진 기술을 찾고 계신 분이 있다면 주위를 둘러보세요. 해결해야 할 흥미로는 문제들이 아주 많습니다. 저와 여러분 사이, 이것이 제가 발전할 수 있는 환경입니다.

1개의 댓글

comment-user-thumbnail
2025년 2월 12일

확실히 몇몇 부분은 개선되었지만, 전반적인 상황은 여전히 복잡합니다. 2024년에는 세계 경제의 예산 긴축과 보수적인 해결책을 유지하려는 압박으로 인해 변화가 있었습니다. 사람들은 이제 완벽한 해결책이 없다는 사실을 My ATT Results 받아들이는 듯합니다. 도구와 문제 모두 복잡한 상황에서 기존 기능을 재발명하며 여러 장애물을 마주했습니다.

답글 달기

관련 채용 정보