[번역] 자바스크립트 프레임워크 전쟁은 끝났다.

제목부터 흥미롭지 않은가? '자바스크립트 프레임워크의 전쟁이 끝났다.' 심지어 부제는 '승자는 단 하나이다.'

궁금하지 않을 수 없지~ 안그래도 변화가 빠른 프론트엔드의 세계에서 어깨춤을 추고 있는데 뭔가 제목부터가 너무 자신만만한 것으로 보아 왠지 시험이 끝난 것만 같은 속이 후련해지는 듯한 착각이 느껴지는 듯 했다. ㅎㅎ 그래서 오늘의 article로 선정했다.

참고로 이 article에서는 라이브러리와 프레임워크의 경계를 나누지 않은 듯한 느낌이 든다. (개인적으로 굳이 나눠서 생각할 필요가 없다고도 생각한다) 그러므로 이에 대한 혼란이 없길 바란다.

이것도 누군가 한사람의 의견일테니 너무 심각하지 않게 가볍게 읽으시길 바라며 이제 시작~!!

 

** 번역에 의역과 오역이 충분히 있을 수 있으므로, 가능하신 분들은 그냥 아래의 링크로 가셔서 원문을 읽어보시길 추천한다.

 

[원문]

https://medium.com/codex/the-javascript-framework-war-is-over-bd110ddab732

The JavaScript framework war is over

 

 

---

 

 

The Javascript framework war is over

And there is only one winner.

 

 

 

경쟁

프레임워크 간의 경쟁은 자바스크립트 커뮤니티에서 핫한 토픽이며, 업계에서의 많은 사용자 즉 전문가들 사이에서의 뜨거운 감자 중 하나이다. 시작부터 제이쿼리와 앵귤러JS가 모던 프레임워크로 이어짐과 동시에 이 전쟁은 더 치열해졌다.

 

이 과정에서 백본(Backbone) 또는 센차(Sencha)와 같은 프레임워크 또는 라이브러리들이 도태되었고 많은 레거시 코드를 남겼다. 제이쿼리는 여전히 방대한 커뮤니티를 유지하고 있으며 많은 이들이 여전히 사용하고 있다. 그외에는, (예를 들어 앵귤러) 예상하거나 기대됐던 대로 진행되지 않았다.

 

 

JQuery

현재까지도 사용되고 있는 가장 오래된 프레임워크라고 할 수 있다. 과거에는 브라우저 간 상호운용성이 좋아 인기가 많았지만 애플리케이션 확장이 어려웠다. 현재, Jquery가 주류라고 보기 어려우며, 프로젝트 개발시 최상의 선택이라고 할 수 없다.

$(document).ready(()=> {
  $("#app").html("Hello World!");
});

 

 

AngularJS

AngularJS는 이미 LTS(Long Term Support)를 제공하고 있으며, 더이상의 지원은 2022년 1월부로 중지되었다. AngularJS가 프레임워크 생태계의 큰 도약이었다는 것에 대해 의심의 여지가 없으며 여전히 AngularJS를 그리워하는 이들도 있다.

하지만, 지원이 공식적으로 종료되었으므로 AngularJS는 경쟁에서 제외되었다.

angular
  .module("app", [])
  .controller("HelloWorldCtrl", ($scope) => {
    $scope.message = "Hello World!";
  });

 

 

Angular

Angular는 React에 대항하기 위해 시작되었다고 한다. 시간이 지남에 따라 AngularJS의 성능, 견고성에 문제가 하나둘씩 발생하기 시작하며 많은 개발자들은 React로 눈을 돌렸다. Angular는 AngularJS기반으로 ECMA6 활용이 가능하도록 하여 React와 경쟁할 수 있도록 하였다.

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'World'; }

Angular의 가장 큰 단점은 학습곡선(Learing Curve)인데, 많은 개념이 선숙지되어야 하고, 모든 것이 복잡하며, 제기된 문제의 결과가 막다른 골목인 경우가 많다. Angular를 배우는 것은 쉽지 않다. 이는 AngularJS의 단점을 그대로 가져왔으며 또한 RxJS같은 새로운 문제점 또는 계층적 종속성 주입(필요한 기능에 대한 DI-Dependency Injection)과 같은 어려움이 있다.(이 부분은 봐도봐도 사실 잘 이해가 안가서.. 그냥 직역을 해버림 🤪 )

Ben Nadel(https://www.bennadel.com/)의 원본 그림

또 우려되는 점으로는 약속된(기대된) 많은 것들이 이해되지 않았다는 점이다. 예를 들어 사람들은 버전2에서부터 서버사이드 렌더링 페이지를 생성할 수 있는 간단한 방법을 생성되기를 기다렸다. 하지만 현재까지도(2022년 2월 24일 기준) Angular.io 웹사이트는 자바스크립트 없이는 작동할 수가 없다.

 

그러나 가장 큰 문제점은 단편화(여러 조각으로 나뉘는 현상)와 어려운 버전 업그레이드이다. 버전을 업그레이드 하기 굉장히 어렵다. 너무 어려워 사용자들이 업그레이드 하는 위험을 감수하려고 하지 않는다. 이로 인해 단편화 현상이 발생했다고 본다. 이것은 npm 웹사이트를 보면 알 수 있다.

업그레이드 하지않고 사용하는 개발자들이 많이 있다.

 

 

VueJS

VueJS는 AngularJS보다 성능이 좋은 프레임워크를 기다리는 개발자들에게 답이 되었다.  또한 Angular보다 안정적이고 사용법이 간편했다. VueJS의 자체 템플릿은 오리지널 Angular와 비슷했으며, AngularJS의 단순함을 지키면서 React의 장점을 가지고 있었다.

<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return { msg: "Hello World!" };
  }
}
</script>

하지만 VueJs는 버전 1과 2에서 심각한 문제점을 가지고 있었다. array를 다루는 것에 대한 문제점인데 VueJs의 창시자는 이에 대해 JavaScript의 잘못된 업데이트 알고리즘 때문이라고 했다.

만약 Vuex나 Redux 같은 라이브러리를 쓰지 않는다면 프로젝트 진행 중 심각한 문제에 봉착하게 될 것이다. AngularJS에서는 되지만 VueJS에서는 되지 않는 것을 아래의 앱에서 확인할 수 있다.

Vue docs - 자바스크립트의 변경 감지 알고리즘을 탓하는 글을 발췌했다.

이 문제점은 버전3에서 해결되었다. 하지만 자신의 문제점에 대해 JavaScript를 비난한 것에 대해서 커뮤니티에서는 찬반여론이 끊이지 않았다.

 

 

SvelteJS

SvelteJS는 현재 무섭게 성장하고 있는 프레임워크로 충분한 가능성을 가지고 있다. 주요 강점으로 컴포넌트 요소를 필수 언어로만 작성하는 것인데(다시 말하면 코드가 간결하다고도 볼 수 있다) 그들말에 따르면 리액트의 방식보다 더 낫다고 한다.

<script>
  let world = "World";
</script>

<div>
  Hello {world}!
</div>

물론 더 사용하기 쉽다는 데에는 의심에 여지가 없다. 하지만 필수 언어로만 작성된 코드에 대한 결과는 보여지는 것처럼 예측하기 쉽지 않다. SvelteJS는 어떤 케이스에서 수정(변화)이 제대로 감지되지 않는다. 이런 상황이 생기면 State가 손상되며 뷰 화면이 제대로 업데이트 되지 않는다. 이러한 이슈는 SvelteJS 사용에 대한 불안이 조성되었으며, 이전 VueJs의 사태(array 관련 문제점을 JavaScript를 비난함)와 같이 합리화하기 쉽지 않아보인다.

https://twitter.com/drpicox/status/1496461071334490112

 

 

StencilJS

엄밀히 따지면 StencilJS는 프레임워크이면서 프레임워크가 아니다. StencilJS는 컴포넌트 사용을 허용하며 다른 프레임워크로 변환이 가능하다. 현재, Angular, React, VueJS 그리고 WebComponents의 구성요소로 변환이 가능하다.

import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'app'
})
export class MyComponent {
  @Prop() world: string;
  
  render() {
    return (
      <p>
        Hello {this.world}
      </p>
    );
  }
}

그런데 위의 코드를 보면 클래스에 조금 이상한 점이 있습니다. 다른 프레임워크들과 좀 비슷하죠?

 

 

Mitosis

아마도 이 글을 읽고있는 대부분의 사람들은 Mitosis를 들어본 적이 없을 것이다. 그러나 이것이 내가 이 글을 쓰게된 이유이다. Mitosis는 Angular의 창시자인 Misko Hevery가 만든 최신 프레임워크이다. Misko가 Angular 이후 만들어낸 또다른 프레임워크인 것이다.

import { useState } from "@builder.io/mitosis";

export default function MyComponent(props) {
  const state = useState({
    world: "World",
  });
  
  return <div>Hello {state.world}!</div>;
}

Mitosis는 StencilJS와 같이 컴포넌트를 다른 많은 프레임워크로 변환할 수 있다. 그건 그렇고, 위의 코드가 다른 프레임워크와 비슷하지 않나요?

 

 

React

React는 npm 저장소에서 10년 이상 된 가장 오래된 모던 프레임워크 중 하나이다. 많은 변화를 거쳐왔지만 여전히 이전 버전과의 호환이 가능하다. 이러한 변화를 통해 React는 끊임없이 발전해왔다. 어떤 이들은 React의 hooks이 React를 더 좋은 프레임워크로 만들었다고 말한다.

import { useState } from "react";

export default function HelloWorld() {
  const [world] = useState("World");
  
  return <div>Hello {world}!</div>;
}

 하지만 React의 최고의 장점은 훅도 아니고 어떠한 보여지는 기능도 아니고 그 반대라고 생각한다. React는 최신 표준 자바스크립트의 사용을 가능하게 했으며, JSX 또한 이에 포함된다. React는 더이상 프레임워크가 아니고,(아마도 그랬던 적이 없으며) 라이브러리이다. 표준자바스크립트의 사용을 가능하게 하면서, 결국 사용자 코드에서 제거되는 지경에 이르렀습니다.(아마도.. 표준코드의 적용이 가능하다는 내용이거나 다른 프레임워크로 변환이 가능하다는 말?? 이거나 자체의 규칙을 따르지 않는다는 말?? 같다는... ㅜㅜ 잘 모르겠다 이것도 직역을 해버림 🤪 )

 

승자는...

JSX. React, 하지만 React 자체가 아니라 그 뒤에 숨겨진 철학이다. React는 그 자체로는 라이브러리지만 Preact 또는 React Native와 같은 다른 많은 라이브러리로 대체될 수 있다. 주의깊게 살펴보면 StencilJS 또는 Mitosis는 React와 매유 유사하며 이것은 우연이 아니다. 그 이유는 다음과 같다.

 

" 최고의 프레임워크는 사용자 코드에서 스스로를 제거하는 프레임워크이다."

 

React는 최신 표준 자바스크립트 및 JSX를 활용하며 사용자 코드는 React에 대해 불가지론적(몇몇 명제의 진위 여부를 알수 없다고 보는 철학적 관점, 또는 사물의 본질은 인간에게 있어서 인식 불가능 하다는 철학적 관점)이어서 몇가지 조정만 하면 정확히 동일한 코드가 다른 프레임워크에서 작동할 수 있다.

 

그러므로 의심의 여지없이 React가 이 프레임워크 전쟁의 승자이다. 그 이유는 사용자 코드 내부의 프레임 워크가 아니기 때문이다. 

 

 

 

---

 

 

 

이 글을 읽으면서 아무리 변화가 빠른 프론트엔드업계이지만 그렇다고 너무 트렌드만 쫒으면 안되겠다는 생각을 다시 한번 했다. 사실 새로운 트렌드에 관한 글을 읽게 될때마다 조급한 마음이 드는건 사실이다. 그 글을 읽고 있는 그 순간마저도 다른 이들에게 뒤쳐지고 있다는 생각이 들기도 한다. 하지만 급하게 갈 필요없다고 생각한다. 나는 언제나 나만의 속도로 나에게 맞춰서 갈 뿐이다. 하루하루 한걸음 한걸음이 분명 언젠가는 내가 굳건해질 수 있는 양분이 될 것이라고 믿으면서..

 

아직도 부족한 점이 많다보니 번역이 아닌 직역을 해야 하는 부분이 군데 군데 있었다. 최대한 검색을 통해 이 글을 이해하고자 노력했고, 역시나 한계를 느꼈다. 하지만 언제가 된다 하더라도 그 부분에 대한 보완을 진행할 것을 스스로에게 약속한다.

누군가 이 글을 보았고 내가 부딪힌 나의 한계에 대해 할 말이 있다면 비판도 반갑게 받을 의향이 있다. (욕이나 비하발언만 아니라면...)