앵귤러 19는 성능을 높이는 동시에 개발자 경험을 단순화하고 개선하기 위한 프로젝트를 지속하고 있다. 개발 팀이 이러한 목표에 집중하고 있다는 사실이 잘 알려지면서 프로젝트로서 앵귤러에 대한 전반적인 인식도 높아졌다. 최근 자바스크립트 현황(State of JavaScript) 설문조사에서도 앵귤러에 대한 개발자들의 긍정적인 감정이 크게 증가한 것으로 나타났다.

지금은 이 역동적인 프레임워크의 새로운 소식을 알아보기에 좋은 시점이다. 이 기사에서는 최신 릴리스의 여러 혁신적인 개념과 변경 사항에 대해 설명한다.

앵귤러의 차별점은?

앵귤러는 자바스크립트를 위한 올인원 리액티브 프레임워크다. 체계적인 시스템으로 시작돼 실제 사용 사례와 피드백에 대응해 발전해왔다. 최근의 변화는 개발자 경험과 성능에 중점을 두고 있다. 이번 릴리스에서는 앵귤러 사용자는 물론 앵귤러에 관심이 있는 사람들에게도 흥미로울 만한 진전이 이뤄졌다.

점진적 하이드레이션

점진적 하이드레이션은 앵귤러 19 개발자 프리뷰 버전에서 새로 도입된 성능 최적화 방법이다. 하이드레이션은 사용자 인터페이스의 구성요소를 인터랙티브하게 만드는 프로세스다. 이는 서버 측 렌더링(SSR)과 클라이언트 측 렌더링 간의 균형을 맞추는 것이 중요한 현대 애플리케이션 최적화의 핵심 요소다.

하이드레이션을 구현하는 방법은 여러 가지인데, 앵귤러 19의 점진적 하이드레이션은 개발자에게 통제 권한을 부여한다. 앵귤러 19를 사용하는 개발자는 페이지가 서버 측에서 렌더링된 후 클라이언트에 어떻게 로드될지를 정확히 정의할 수 있다.

앵귤러 개발자는 @defer 지시어를 사용해 브라우저에서 구성요소를 어떻게 인터랙티브하게 만들어야 하는지 엔진에 설명한다. 엔진은 이 지침을 사용해 필요한 자바스크립트를 로드한다. @defer 주석의 트리거는 이러한 동작을 세밀하게 조정하는 데 사용된다.

@defer는 새로운 요소는 아니지만 앵귤러 19 버전에서는 구성요소별로 앱 하이드레이션이 수행되는 방법을 제어할 수 있다.

이벤트 리플레이

앵귤러 19 문서에는 이벤트 리플레이에 대한 자세한 설명이 포함돼 있다. 이벤트 리플레이는 대체로 하이드레이션과 관련된 내부 메커니즘이다. 기본적으로 이벤트 리플레이는 ‘구성요소가 상호작용성 없이 브라우저에 로드된 다음 사용자와 접촉한다면 해당 구성요소가 부트스트랩된 후 엔진은 어떻게 이 이벤트를 “리플레이”하는가?’라는 질문에 답하는 기능이다.

이러한 세밀한 부분은 프레임워크 사용자 관점에서는 일반적으로 숨겨져 있지만 애플리케이션 성능에 상당한 영향을 미친다. 이벤트 리플레이는 심층적인 최적화나 디버깅 작업에서도 흥미로운 용도로 사용된다. 프로그래머가 탐색해볼 만한 재미있는 새로운 기능이다.

서버 경로에 대한 세부적인 제어

앵귤러에 추가된 ServerRoute를 사용하면 엔진의 서버 측 경로 렌더링을 세밀하게 조정할 수 있다. 개발자에게 경로 렌더링에 대한 더 많은 권한을 부여하는 여타 풀스택 프레임워크와 같은 흐름이다. 기본적으로 새로운 ServerRoute는 앱 개발자가 경로 렌더링 방식을 페이지별로 제어할 수 있게 해준다. 앵귤러 19는 다음과 같은 세 가지 옵션을 제공한다.

• 서버에서 렌더링
• 클라이언트에서 렌더링
• 서버에서 사전 렌더링

이러한 세 가지 옵션을 통해 페이지의 특성에 따라 적절한 모드를 선택할 수 있다. 기본적으로 매개변수가 있는 경로는 서버 측에서 렌더링되고 매개변수가 없는 경로는 사전 렌더링된다.

개발자는 SSR 엔진에 연결되는 이와 같은 후크를 통해 이전보다 더욱 공격적인 애플리케이션별 최적화를 모색할 수 있다. 단, 이 같은 최적화를 처음부터 도입할 필요는 없다는 점을 기억하는 것이 중요하다. 애플리케이션이 충분히 성숙해져서 실제 데이터를 확보할 때까지는 이와 같은 최적화를 어디에 적용해야 할지 명확하지 않은 경우가 있기 때문이다. 그러나 실제로 병목 지점이 발견되는 경우 UI에서 직접 살펴보고 조정할 수 있다는 점이 중요한 역할을 한다.

이와 같은 종류의 UI 최적화에는 예술과 과학, 두 가지 모두 존재한다. 또한 최종 사용자의 행동에 따라서도 달라지는 경우가 많다. 앵귤러는 이제 애플리케이션 개발자가 UI에서 복잡한 사용자 상호작용을 전보다 훨씬 더 쉽게 처리할 수 있는 툴을 제공한다.

Zone.js 솎아내기

Zone.js 솎아내기는 앵귤러의 내부 설계와 성능을 간소화하기 위한 구현상의 결정이었다. Zone.js는 서버 측 렌더링 엔진에서 페이지가 비동기 작업(데이터 스토어 및 API 요청, 탐색을 위한 리소스 로딩 등)으로 완료된 경우를 확인하는 데 사용됐는데, 이 작업은 페이지가 준비 상태로 표시되고(“stable”) 클라이언트로 전송되기 전에 끝나야 했다. Zone.js를 사용한 개발자는 대부분 디버깅이나 최적화를 목적으로 사용했다.

앵귤러 19에서는 Zone.js를 RxJS로 대체한다. 앵귤러 전반에서 이미 사용되고 있는 RxJS는 앵귤러의 종속성을 단순화하고 엔진의 이 부분을 프레임워크의 기존 패턴에 맞게 조정하며, 애플리케이션 개발자가 렌더링 엔진으로 손쉽게 디버깅을 푸시할 수 있게 해준다.

독립형 구성요소가 이제 기본 옵션

앵귤러 19에서는 독립형 구성요소(즉, 모듈 없이 정의되는 구성요소)가 기본값으로 설정되지만 개발자는 여전히 모듈을 사용할 수 있다. 비모듈 구성요소는 앵귤러 17에 처음 도입됐으며 실무에서는 이미 사실상 표준으로 사용되고 있다. 모듈을 없앤 구성요소는 놀라울 정도로 가볍게 느껴진다.

시그널 기반 입력, 출력, 뷰 쿼리

시그널(Signal)은 세분화되고 범용적인 반응성을 간단한 자바스크립트 구문으로 제공하기 위한 용도로 널리 사용된다. 앵귤러는 초기에 시그널을 도입했고, 앵귤러 19에서는 입력(child props의 앵귤러 버전), 출력(자식에서 부모로 이벤트 전달), 뷰 쿼리(리액트의 useRef와 같은 직접적인 DOM 액세스)에서 시그널 사용을 더 강화했다. 이를 통해 앵귤러의 반응형 표현이 간소화되고 통합되지만 실제로 차이는 미세한 경우가 많다. 시그널을 사용할 때 점 연산자나 괄호를 추가하는 정도다.

앵귤러 19에는 애플리케이션을 시그널로 자동 마이그레이션하는 CLI 명령이 포함된다. 또한 앵귤러 팀은 시그널 자동 마이그레이션 기능을 IDE 스키매틱에 통합했다. 마우스 오른쪽 버튼을 클릭해서 컨텍스트에 따른 시그널 변환 지원에 액세스할 수 있다. 값을 명시적으로 수정하는 코드가 있는 경우 시그널 입력은 변경할 수 없으므로 마이그레이션을 수동으로 설정해야 한다.

명령줄 환경 변수 선언

모든 CLI 툴은 명령을 위한 환경 변수를 지정할 수 있어야 한다. 앵귤러 19는 한걸음 더 나아가 build 명령에 환경 변수를 지정하는 기능을 추가했다.

ng build --define "apiKey='$API_KEY'"

기대되는 프로젝트

앵귤러의 빠른 출시 주기를 감안하면 상당히 많은 변화가 이뤄졌다. 앵귤러는 탐색해 볼 가치가 있는 흥미로운 프로젝트다. 물론 이 모든 변화는 앵귤러 사용자가 새로운 릴리스를 계속 따라잡아야 한다는 것을 의미한다. 긍정적인 부분은 새로운 버전이 나올 때마다 프레임워크가 개선되고 리액티브 프로그래밍의 최신 개념 중 상당수를 구현하고 있다는 점이다.

앵귤러가 적극적인 개선을 거치면서 모든 리액티브 프레임워크를 통틀어 가장 역동적이고 미래지향적인 프레임워크 중 하나로 평가된다는 점은 중요한 성과다. 구글의 지원을 받는 대형 프로젝트지만 개방적인 오픈소스의 분위기를 유지하고 있다.
dl-itworldkorea@foundryco.com