RSS Angular 블로그 - Medium - TheNote.app

RSS Angular 블로그 - Medium
팔로우

이 웹사이트는 웹 애플리케이션 프레임워크인 Angular의 공식 블로그로 보입니다. 홈페이지에는 'The Angular Project의 10주년'과 같은 제목의 최근 블로그 기사 목록이 표시됩니다. 일반적인 주제로는 기술, 개발 및 Angular 자체가 포함됩니다. 검색 바와 함께 카테고리, 태그 및 'About' 페이지가 있습니다. Angular 프레임워크와 관련된 리소스, 업데이트 및 자습서를 제공합니다.

Angular Blog - Medium blog.angular.dev

RSS blog.angular.dev

RSS Hunter • 2024년 8월 23일

노트 스레드

커뮤니티 엔지니어링, 에이전트 코딩, 실제 사용자 컴포넌트 테스팅 ️

지난 한 주간 개발 생태계에 상당한 발전이 있었습니다. 주요 초점 영역에는 커뮤니티 우선 엔지니어링 접근 방식 육성과 코딩 관행에 대한 AI의 영향 탐구가 포함되었습니다. 또한, 리소스들은 혁신적인 브라우저 테스트 기법들을 강조했습니다. Dev Life Podcast에서는 Angular의 커뮤니티 매니저와 함께 커뮤니티 주도 엔지니어링 전략에 대한 논의가 있었습니다. 블로그 게시물은 Agentic Coding에 대해 자세히 다루며 AI 에이전트가 Angular의 아키텍처 지원을 어떻게 강화하는지 설명했습니다. 튜토리얼은 실제 사용자 상호 작용을 모방하는 Vitest의 Full Browser Mode를 사용하여 Angular 컴포넌트를 효과적으로 테스트하는 방법을 시연했습니다. 영어 자막과 함께 제공되는 두 개의 비디오는 Signal Forms와 Angular Compiler의 Extended Diagnostics를 사용하여 버그를 탐지하는 방법을 다루었습니다. 코드 샘플은 보안 작업을 위해 Server Prompt Templates를 사용하여 Firebase 및 Angular로 AI 이미지 생성을 보여주었습니다. 프랑스어 튜토리얼은 Angular v21에서 Signal Forms의 CSS 클래스를 복원하는 방법을 설명했습니다. 전반적인 주제는 프레임워크를 구축하고 발전시키는 데 있어 커뮤니티 기여의 중요성을 강조했습니다.

Community Engineering, Agentic Coding, and Real-User Component Testing ️ blog.angular.dev

RSS Hunter • 7월 7일

A2UI의 비밀을 풀다: 앱에서 AI 에이전트가 UI를 “말하게” 하는 방법

저자는 에이전트 기반 인터페이스를 구축하기 위한 신흥 프로토콜인 A2UI를 살펴보며, 개발자들을 위해 그 구현 방식을 설명하고자 한다. A2UI를 통해 AI 에이전트는 임의의 코드 실행 없이도 웹, 모바일, 데스크톱 전반에 걸쳐 대화형 사용자 인터페이스를 동적으로 생성할 수 있어, 원활하고 이식성 높은 사용자 경험을 제공한다. 프레임워크와 달리, A2UI는 대규모 언어 모델(LLM) 에이전트와 클라이언트 애플리케이션 간의 통신을 정의하는 프로토콜로, 개발자가 선호하는 프론트엔드 기술을 사용하여 UI를 렌더링할 수 있게 해줍니다. 핵심 아키텍처는 서버 측 에이전트가 공유 스키마를 기반으로 UI 레이아웃 메시지를 생성하고, 클라이언트 측 애플리케이션이 해당 메시지를 해석하여 렌더링하는 방식으로 구성됩니다.서버(에이전트) 측에서 개발자는 몇 가지 핵심 입력 사항을 제공해야 합니다. 여기에는 사용 가능한 UI 구성 요소 카탈로그(기본 요소부터 JSON 스키마로 정의된 사용자 정의 컴포넌트에 이르기까지), 에이전트가 특정 UI를 언제 어떻게 사용해야 하는지 안내하는 자연어 UI 설명, 그리고 원하는 JSON 메시지 구조를 보여주는 소수의 예시가 포함됩니다. 또한 개발자는 “에이전트 스킬”을 통해 UI 설명을 보강하여 특정 사용자 기능과 사용 사례를 정의할 수 있으며, “액션 매핑”을 통해 이벤트를 에이전트를 위한 새로운 자연어 쿼리로 변환함으로써 사용자 상호작용을 처리할 수 있습니다. 에이전트 도구는 일반적인 에이전트 개념이긴 하지만, 데이터 가져오기나 API와의 상호작용과 같은 작업을 수행하는 데에도 필수적입니다.클라이언트 측, 특히 Angular 애플리케이션의 경우, 기본 템플릿 외에 필요한 주요 요구 사항은 서버 측 카탈로그에 정의된 컴포넌트를 렌더링하도록 애플리케이션을 구성하는 것입니다. 표준 요소만 사용되는 경우 기본 카탈로그로 충분합니다. 그러나 에이전트가 사용자 정의 컴포넌트를 생성하는 경우, 클라이언트 측에서는 해당 Angular 구현체와 이러한 컴포넌트를 등록하기 위해 기본 카탈로그를 확장한 사용자 정의 카탈로그가 필요합니다. 중요한 규칙은 클라이언트의 컴포넌트 정의가 에이전트에 제공된 카탈로그 스키마 및 예제와 완벽하게 일치해야 하며, 이를 통해 동적으로 생성된 UI가 정확하게 렌더링되도록 보장해야 한다는 점입니다.

Demystifying A2UI: How to Make AI Agents “Speak UI” in Your App blog.angular.dev

RSS Hunter • 6월 26일

커뮤니티 컴백, Angular 21.1 기능, 그리고 더 스마트해진 Signal Forms ️⚡

이번 주 Angular 커뮤니티 소식은 생태계 내 개인적인 이야기와 기술적인 발전을 조명합니다. Dev Life 팟캐스트에서는 Angular 20 엔지니어링 결정과 기술 해고를 헤쳐나가는 방법에 대한 조언을 다룹니다. Alain Chautard는 Angular 21.1의 새로운 기능과 수정 사항에 대한 간결한 요약을 제공합니다. Fanis Prodromou는 Signal Forms에서 비동기 유효성 검사 및 디바운싱을 사용하여 폼 처리를 최적화하는 방법에 대한 튜토리얼을 제공합니다. Modeste Assiongbon은 Signal Forms에서 동적 필드 목록에 대한 프랑스어 가이드를 제시합니다. 그는 또한 Angular 코어 팀 합류 여정에 대한 Matthieu Riegler와의 인터뷰를 공유합니다. Martine Dowden은 Angular의 최신 제어 흐름 구문으로 업그레이드하는 방법을 설명합니다. 커뮤니티는 #AngularSparkles를 사용하여 자신의 성과를 공유하도록 권장됩니다. 이러한 자료는 경력 개발과 기술 구현을 다룹니다. 커뮤니티 성장과 공유 학습에 중점을 둡니다.

Community Comebacks, Angular 21.1 Features, and Smarter Signal Forms ️⚡ blog.angular.dev

RSS Hunter • 6월 19일

2026년의 Angular: 연중 중간 점검, 시그널, 그리고 AI 코드 품질!

2026년의 절반이 지나면서 올해의 프레임워크 예측에 대한 검토가 이루어지고 있습니다. 전문가들은 실현된 예측을 확인하기 위해 2026년 Angular 전망을 재평가하고 있습니다. AI 지원 도구는 Model Context Protocol을 통해 Angular 개발을 변화시키고 있습니다. 이러한 발전은 도구가 기본 스캐폴딩을 넘어 워크스페이스를 이해할 수 있도록 합니다. Angular v21에 대한 빠른 요약과 AI가 오래된 Angular 코드를 작성하는 경향을 다루는 비디오를 확인할 수 있습니다. 최신 Angular 기능 및 모범 사례에 대한 무료 종합 과정이 출시되었습니다. 개발자는 이제 자신의 Angular 앱이 zoneless 아키텍처를 준비할 수 있는지 확인할 수 있습니다. zoneless로의 전환은 고성능 Angular 애플리케이션을 위한 중요한 단계입니다. Signals의 도입은 Angular 개발에서 주요 아키텍처 변경으로 강조됩니다. 팟캐스트 에피소드에서는 반응형 프로그래밍을 위해 Signals를 효과적으로 채택하는 방법에 대해 논의합니다.

Angular in 2026: Mid-Year Reality Check, Signals, and AI Code Quality! blog.angular.dev

RSS Hunter • 6월 5일

Angular v22 발표

Angular가 안정성과 개발자 경험에 중점을 둔 버전 22를 출시했습니다. 이번 업데이트는 Signal Forms, Angular Aria, Asynchronous Reactivity APIs의 세 가지 주요 기능을 프로덕션 준비 상태로 제공합니다. Signal Forms은 완전한 문서와 커뮤니티 피드백을 반영하여, 폼 구축을 위한 조합 가능하고 반응적인 솔루션을 제공합니다. Angular Aria는 안정화된 API와 테스트 하네스를 통해 포용적인 웹 애플리케이션 구축을 위한 접근 가능한 기본 요소를 제공합니다. 새로운 resource와 httpResource를 포함하는 Asynchronous Reactivity APIs는 개발자가 향상된 데이터 페칭을 위해 시그널 내에서 비동기 프로그래밍을 활용할 수 있도록 합니다.이번 릴리스는 또한 코드 작성 및 AI 개발 플랫폼을 위한 에이전트 도구를 도입하여 AI 개발에서 Angular의 역할을 강조합니다. 여기에는 개발 서버와의 더 나은 에이전트 상호 작용을 위한 업데이트된 Model Context Protocol (MCP) 도구와 최신 Angular 개발에 대한 컨텍스트를 AI 에이전트에게 제공하는 Angular Agent Skills가 포함됩니다. 브라우저 내에서 에이전트 상호 작용을 위한 구조화된 도구 노출을 허용하는 WebMCP에 대한 실험적인 지원도 포함됩니다. 또한 Angular는 Google AI Studio 및 Gemini Canvas와 같은 AI 개발 플랫폼을 강화하여 빌더에게 프레임워크의 강점을 부여합니다. 개발자는 브라우저에서 직접 프로토타이핑하고 Angular 앱 생성을 위한 단순화된 프롬프팅을 사용할 수 있습니다. 이러한 발전은 Angular를 차세대 웹 애플리케이션 구축을 위한 강력한 기반으로 만드는 것을 목표로 합니다.

Announcing Angular v22 blog.angular.dev

RSS Hunter • 6월 3일

동적 컴포넌트, HTTP 리소스 및 AI 글쓰기 도우미 마스터하기 ️

이 텍스트는 실질적인 학습 경험을 제공하는 여러 Angular 리포지토리를 강조합니다. Antonio Cardenas는 ViewContainerRef를 사용하여 고급 동적 컴포넌트 생성을 선보이며, 코드 리포지토리와 StackBlitz 데모를 제공합니다. 또한 빠른 CRUD 프로젝트 시작을 위한 "Vibe Coding" 템플릿도 제공합니다. Deborah Kurata는 "Pirates" 예제를 사용하여 Signal 기반 httpResource를 소개합니다. Ankit Sharma는 실시간 문법 수정을 위해 Google Gemini를 통합한 Angular 앱을 시연합니다. 이러한 예제는 최신 Angular 패턴을 학습하고 AI 지원을 통합하는 데 완벽합니다. 리포지토리는 동적 컴포넌트, CRUD, 반응형 기본 요소를 사용한 데이터 가져오기와 같은 주제를 다룹니다. 이러한 리소스는 초보자와 숙련된 Angular 개발자 모두를 위해 설계되었습니다. 이 텍스트는 Angular 커뮤니티가 자체 프로젝트를 공유하도록 장려합니다. 개발자들은 관련 해시태그를 사용하여 리포지토리와 StackBlitz 데모를 공유하도록 유도됩니다. 협업과 공유는 커뮤니티 성장을 촉진하기 위해 강조됩니다. 이 텍스트는 코드 탐색과 실질적인 프로젝트를 통한 실습 학습을 장려합니다.

Mastering Dynamic Components, HTTP Resources, and AI Writing Assistants ️ blog.angular.dev

RSS Hunter • 5월 22일

육아 휴직 복귀: 에이전트, 빌딩 블록, 그리고 AI 엔지니어링의 미래

저자는 개발자로서 육아휴직에서 복귀했을 때, 특히 에이전트 스킬 분야에서 빠르게 변화하는 AI 환경을 마주했습니다. AI 에이전트의 지침 모음인 에이전트 스킬은 이전에 진행했던 Angular AI 튜터 프로젝트에 대한 재고를 촉발했습니다. 이 튜터는 Angular를 대화형으로 가르치며, 처음에는 간단한 규칙 파일과 Gemini로 구축되었습니다. 그러나 프로젝트는 대화형 제품으로 발전하면서 수업의 연속성과 구문 최신성 유지에 어려움을 겪었습니다. 튜터의 로직은 긴밀하게 결합되어 재사용성을 저해하고 업데이트를 어렵게 만들었습니다. 제안된 해결책인 라우터 + 빌딩 블록 아키텍처는 튜터의 모듈화되고 재사용 가능한 구성 요소를 만드는 것을 목표로 했습니다. 저자는 이제 에이전트 스킬을 컨텍스트 파이프라인 엔지니어링이라는 비전을 위한 잠재적인 수단으로 보고 있습니다. 저자는 이러한 시스템의 확장성, 신뢰성, 토큰 최적화 및 안정성에 대해 의문을 제기합니다. 궁극적으로 저자는 AI 엔지니어링에 대한 더 깊고 구조적인 질문을 고려합니다. 저자는 이 분야를 컨텍스트 파이프라인 엔지니어링이라고 명명하고 다른 사람들에게 탐험에 동참할 것을 초대합니다. 이 글은 저자가 업무에 복귀하여 새로운 것을 만들 것에 대한 흥분으로 마무리됩니다.

Back from Baby Bonding: Agents, Building Blocks, and the Future of AI Engineering blog.angular.dev

RSS Hunter • 4월 28일

AI 학습, 로컬 Gemini, 그리고 스타일링 신호 양식

"Angular 커뮤니티는 AI와 접근성을 통해 혁신을 이루고 있습니다. 개발자들은 더 스마트하고 아름다운 애플리케이션을 구축하는 방법을 모색하고 있습니다. Fanis Prodromou는 Angular Signal Forms와 사용자 정의 CSS를 사용하여 폼 상태를 자동 스타일링하는 것을 시연했습니다. Daniel Herrera Sanchez는 Angular와 Gemini 3.0으로 구축된 "Mind Palace AI"라는 인지 훈련 앱을 선보였습니다. Mariano Alvarez는 Angular 프로젝트에서 Gemini CLI를 사용할 때 AI 환각을 줄이는 방법에 대한 지침을 제공했습니다. 그는 또한 Chrome의 AI 기능을 사용하여 Angular 애플리케이션 내에서 Gemini를 로컬에서 무료로 실행하는 방법을 설명했습니다. Connie Leung은 Google Nano Banana와 Firebase AI를 활용한 사진 편집 앱 코드 샘플을 공유했습니다. 그녀는 또한 접근성을 위해 Gemini 2.5 Flash TTS를 사용하는 AI 대체 텍스트 및 텍스트 음성 변환 생성기를 발표했습니다. 이러한 예는 이미지 처리 및 텍스트 음성 변환 기능의 발전을 강조합니다. 개발자들은 #AngularSparkles 및 #AngularAI를 사용하여 AI 및 접근성 프로젝트를 공유하도록 권장됩니다."

AI Training, Local Gemini, and Styling Signal Forms blog.angular.dev

RSS Hunter • 4월 20일

동적 컴포넌트, HTTP 리소스 및 AI 글쓰기 도우미 마스터하기 ️

이번 주에는 코드 예제를 통해 실용적인 Angular 학습에 집중합니다. 여러 저장소에서 최신 Angular 패턴과 Google Gemini 통합을 보여줍니다. 한 저장소에서는 확장성을 위해 ViewContainerRef를 사용한 고급 동적 컴포넌트 생성을 보여줍니다. 다른 저장소에서는 프로젝트 개발을 가속화하기 위한 즉시 사용 가능한 CRUD 템플릿을 제공합니다. Signals 기반 httpResource는 데이터 관리를 위한 "Pirates" 예제를 통해 선보입니다. AI 기반 문법 도우미 앱은 Google Gemini를 통합하여 실시간 교정을 제공합니다. 이러한 실습 예제는 Angular 애플리케이션에 AI를 통합하기 위한 청사진을 제공합니다. 개발자들은 자신의 Gemini 및 httpResource 프로젝트를 공유하도록 권장됩니다. 저자는 개인 프로젝트를 선보이기 위해 지정된 해시태그를 사용하도록 권장합니다. 이러한 협력적인 접근 방식은 Angular 커뮤니티의 학습을 향상시킵니다. 이러한 예제는 학습 및 구축에 완벽합니다. 제공된 GitHub 링크를 통해 코드 구현을 직접 탐색할 수 있습니다.

Mastering Dynamic Components, HTTP Resources, and AI Writing Assistants ️ blog.angular.dev

RSS Hunter • 4월 13일

로컬 AI, 반응형 라우팅, 그리고 Vitest 마이그레이션! ⚡

Angular 커뮤니티는 일반적인 브라우저 환경을 넘어선 발전을 적극적으로 탐구하고 있습니다. Sonu Kapoor는 ONNX를 활용하여 개인 정보 보호를 강화하고 지연 시간을 줄이면서, 프론트엔드에서 AI 모델을 로컬로 실행하는 것을 강조합니다. 이 접근 방식은 클라이언트 측 처리를 향한 중요한 아키텍처 변화를 시사합니다. Kapoor는 또한 반응형 입력을 생성하고 복잡한 라우팅을 관리하기 위해 Angular Signals를 사용하는 가이드를 제공합니다. Fanis Prodromou는 Signals에 대한 회고를 제공하며, Signals의 발전과 Angular 개발에 미치는 영향을 살펴봅니다. Kevin Davila의 시리즈는 Signal Forms API를 사용하여 사용자 정의 폼 컨트롤을 구축하는 데 초점을 맞춥니다. Johannes Hoppe는 Angular 테스트 스위트를 Vitest로 마이그레이션하는 방법에 대한 포괄적인 가이드를 제공합니다. Vitest로의 이 마이그레이션은 성능상의 이점을 위해 권장됩니다. 제공된 자료는 독일어 및 영어 사용자를 위한 지침을 제공합니다. 커뮤니티는 경험과 통찰력을 공유하도록 권장됩니다. 협업을 촉진하기 위해 #AngularSparkles 및 #Vitest 사용이 권장됩니다.

Local AI, Reactive Routing, and the Vitest Migration! ⚡ blog.angular.dev

RSS Hunter • 3월 27일

워크플로우 현대화: AI 도구, 지연 가능한 뷰, 그리고 폼의 시대! ️

새로운 도구와 기술과 함께 Angular 개발이 빠르게 발전하고 있습니다. 전문가들은 개발자들이 이러한 변화에 발맞춰 나갈 수 있도록 돕기 위해 자료를 공유하고 있습니다. Daniel Herrera Sanchez는 Cursor 및 Claude와 같은 AI 도구를 Model Context Protocol (MCP)과 함께 사용하여 코드를 자동화하는 방법을 탐구합니다. 그는 또한 앱 성능을 최적화하기 위해 @defer 구문을 사용하는 튜토리얼을 제공합니다. Alisa Duncan은 안정적인 옵션과 실험적인 옵션을 포함하여 Angular 21을 위한 MCP 툴킷 내 필수 도구들을 자세히 설명합니다. Damian Sire는 복잡한 패턴을 생성하기 위해 AI를 활용하는 "Vibe Coding"을 사용하여 Angular의 MCP 서버를 실험합니다. Modeste ASSIONGBON은 코드 가독성을 향상시키기 위해 일반 객체 검증자로의 전환을 보여주면서 폼 로직의 개선 사항을 강조합니다. 그는 또한 Angular에서 현대적인 폼 상태 관리를 위한 반응형 접근 방식인 Signal Forms에 대한 가이드를 제공합니다. 이러한 자료들은 다양한 최신 Angular 주제를 다룹니다. 커뮤니티는 Angular에서 AI 및 MCP에 대한 경험을 공유하여 더 많은 혁신을 이루도록 권장됩니다. 이러한 발전은 Angular 개발 워크플로우의 지속적인 현대화를 나타냅니다.

Modernize Your Workflow: AI Tooling, Deferrable Views, and the Era of Forms! ️ blog.angular.dev

RSS Hunter • 3월 13일

보안 권고: Angular의 최근 취약점 해결

Angular에서 서버 측 렌더링(SSR) 취약점 두 가지를 해결하기 위한 보안 업데이트가 릴리스되었습니다. 이 취약점에는 서버 측 요청 위조(SSRF) 및 헤더 주입과 함께 오픈 리디렉션 결함이 포함됩니다. SSRF 취약점을 통해 공격자는 HTTP 헤더를 조작하여 권한이 없는 도메인에 접근할 수 있었습니다. 헤더 주입 취약점은 Angular가 URL 재구성을 위해 사용자가 제어하는 헤더를 신뢰하는 데서 비롯되었습니다. 오픈 리디렉션 취약점은 Angular가 X-Forwarded-Prefix 헤더를 처리하는 방식에서 발견되었습니다. X-Forwarded-Prefix 헤더가 제대로 검증되지 않으면 악성 웹사이트로 리디렉션될 수 있습니다. 개발자는 이러한 위험을 완화하기 위해 SSR 애플리케이션을 가능한 한 빨리 최신 패치 버전으로 업데이트할 것을 권장합니다. SSR을 사용하지 않는 경우 업데이트는 덜 시급하지만 여전히 권장됩니다. 해결 방법으로는 절대 URL 사용 및 서버 구성에서 엄격한 헤더 검증 구현이 있습니다. X-Forwarded-Prefix 헤더를 검증하는 것은 오픈 리디렉션 문제에 대한 추가적인 해결 방법입니다. 이 보고서는 책임 있는 공개를 권장하며 Google의 VRP 프로그램을 강조합니다. 보안 패치 배포를 위해서는 인프라를 최신 상태로 유지하는 것이 중요합니다.

Security Advisory: Addressing Recent Vulnerabilities in Angular blog.angular.dev

RSS Hunter • 2월 27일

Angular 21: 내부 작동 원리, ARIA, 그리고 AI 기반 코딩!

Angular 21 출시와 함께 Angular의 모멘텀이 계속 이어지면서 커뮤니티 내에서 흥미를 불러일으키고 있습니다. 전문가들은 개발자들이 새로운 기능을 이해하고 활용할 수 있도록 돕는 자료들을 공유하고 있습니다. Alejandro Cuba Ruiz와 Jorge Cano는 Gemini CLI와 Angular의 Model Context Protocol (MCP)을 사용하여 페이지를 빠르게 구축하는 방법을 시연합니다. Ferdinand Malcher, Johannes Hoppe, 그리고 Danny Koppenhagen은 Angular Signals의 내부 작동 방식에 대한 심층적인 탐구를 제공합니다. Deborah Kurata는 영어와 독일어로 Angular 21에 대한 포괄적인 개요를 제공합니다. Carlos Caballero는 접근성을 위한 Angular ARIA에 대한 전문 시리즈와 Signals에 대한 완벽한 강좌를 스페인어로 제공합니다. Arcadio Quintero는 개발자들이 MCP와 AI 도구를 사용하여 Angular 워크플로우를 현대화하는 방법을 안내합니다. 커뮤니티는 #AngularSparkles 해시태그를 사용하여 진행 상황과 구현 사례를 공유하도록 권장됩니다. 이러한 자료들은 개발자들이 더욱 접근성이 좋고 현대적인 애플리케이션을 구축하는 데 도움을 주기 위해 마련되었습니다. 이 정보는 Angular 개발자들이 최신 기술을 따라갈 수 있도록 장려하기 위한 것입니다.

Angular 21: Internal Mechanics, ARIA, and AI-Powered Coding! blog.angular.dev

RSS Hunter • 2월 17일

글로벌 전문성: AI 청사진, 리소스 API 수정, Angular v20

이번 주 Angular 소식 모음은 전 세계 커뮤니티의 발전을 조명합니다. AI 통합과 Angular v20의 새로운 기능에 대한 심층 분석을 다룹니다. Damian Sire는 Angular, Node.js, Google Gemini API를 사용하는 GenAI 스캐폴드(청사진)를 소개합니다. Wayne Gakuo는 Angular, Genkit, Firebase를 사용하여 AI 기반 영화 추천 엔진을 시연합니다. Alejandro Cuba Ruiz는 Mark Techson과 Angular와 AI에 대한 인터뷰를 스페인어로 진행합니다. Johannes Hoppe는 Angular의 Resource API를 분석하고 개선 사항을 제안합니다. Fannis Prodromou는 Angular Signal Forms에 대한 초보자 가이드를 제공합니다. Modeste Assiongbon은 Angular v20 업데이트에 대한 3부작 프랑스어 시리즈를 제공합니다. 이 시리즈는 비동기 리다이렉트, Resource API 변경 사항, 새로운 스타일 가이드와 같은 주제를 다룹니다. 커뮤니티는 #AngularSparkles를 사용하여 자신의 작업을 공유하도록 권장됩니다. 이러한 자료들은 전 세계 개발자들이 기술을 향상시키는 데 도움이 되도록 설계되었습니다.

Global Expertise: AI Blueprints, Resource API Fixes, and Angular v20 blog.angular.dev

RSS Hunter • 2월 9일

커뮤니티 이야기, 코드 샘플, 그리고 신호 양식!

이번 주 하이라이트는 지식 공유와 실용적인 코딩 예시에 대한 Angular 커뮤니티의 헌신을 보여줍니다. Sonu Kapoor는 ASP.NET에서 Angular MVP가 되기까지의 감동적인 이야기를 공유하며, 경력 전환을 고려하는 분들에게 귀중한 통찰력을 제공합니다. Ferdinand Malcher와 Danny Koppenhagen은 Angular의 새로운 Signal Forms API를 마스터하기 위한 3부작 시리즈를 종합적으로 소개합니다. Babatunde Lamidi는 Angular와 Gemini API를 사용하여 AI 기반 콘텐츠 생성기를 구축하는 방법을 보여주는 완전한 코드 샘플을 제공합니다. Antonio Cardenas는 새로운 Control Flow 구문을 활용하여 Angular 애플리케이션을 현대화하는 데 필요한 실제 가이드와 코드 예시를 제공합니다. 이러한 자료들은 개인적인 여정에서부터 실습 코딩에 이르기까지 광범위한 주제를 다룹니다. 소개된 콘텐츠는 실용적인 적용을 강조하며, 개발자들이 바로 사용할 수 있는 코드 샘플을 제공합니다. 블로그는 Signal Forms 및 Control Flow에 대한 경험을 질문하며 커뮤니티 참여를 장려합니다. 또한 #AngularSparkles 해시태그를 사용하여 좋아하는 Angular 자료를 공유하도록 요청합니다. 커뮤니티는 Angular 개발 환경을 성장시키고 향상시키기 위해 함께 노력하고 있습니다.

Community Stories, Code Samples, and Signal Forms! blog.angular.dev

RSS Hunter • 1월 23일

Google AI Studio에서 앱을 생성하기 위한 Angular 지원이 이제 가능합니다.

"Google AI Studio가 이제 Angular 애플리케이션 생성을 지원합니다. 이번 협업은 Gemini의 AI 역량을 Angular 개발자 커뮤니티에 제공하는 것을 목표로 합니다. 개발자는 AI Studio의 "빌드" 탭을 통해 이 기능을 무료로 이용할 수 있습니다. Angular 코드를 생성하려면 먼저 고급 설정에서 "Angular (TypeScript)" 프레임워크 템플릿을 선택해야 합니다. 템플릿을 선택한 후 원하는 애플리케이션에 대한 프롬프트를 입력할 수 있습니다. 그러면 Gemini가 제공된 프롬프트를 기반으로 Angular 애플리케이션을 생성합니다. 이 통합은 애플리케이션 프로토타이핑 및 개발을 크게 가속화하여 초기 개발 기간을 몇 주에서 며칠로 단축합니다. 코드 생성 외에도 AI Studio를 통해 Gemini API를 활용하여 AI 기반 앱을 구축할 수 있습니다. 생성된 애플리케이션은 서버리스 환경을 위해 Cloud Run에 쉽게 배포할 수 있습니다. 또한 버전 관리 및 협업을 위해 GitHub으로 코드를 내보낼 수도 있습니다. 피드백 및 개념 증명을 위해 생성된 애플리케이션을 공유하는 것도 간소화됩니다. 개발자들은 goo.gle/angular-ai-studio에서 이 새로운 기능을 사용해보고 #AngularInAIStudio를 사용하여 만든 결과물을 공유하도록 권장됩니다."

Angular support for generating apps in Google AI Studio is now available blog.angular.dev

RSS Hunter • 2025년 10월 2일

지평선 너머: Angular가 차세대 앱을 위해 AI를 어떻게 수용하고 있는가

Angular 팀은 AI 기반 웹 코드 생성을 향상시키기 위해 Web Codegen Scorer 도구를 도입했습니다. 이 도구는 Angular의 현재 프레임워크 상태에 맞게 LLM을 최적화하고 진화하는 애플리케이션 기능 통합을 지원합니다. 또한 일반적인 LLM 오류 분석 및 디버깅을 도와 개선 작업을 더 빠르게 반복할 수 있도록 합니다. Web Codegen Scorer는 AI, 보안 및 접근성 전문가와의 협력을 통해 개발되어 강력한 평가를 제공합니다. Angular는 SolidJS 팀과도 협력하여 다른 프레임워크의 코드 생성 개선 가능성을 보여주었습니다. 이 도구는 커뮤니티 기여와 더 넓은 프레임워크 채택을 장려하기 위해 오픈 소스로 공개되었습니다. Angular v20.2에는 개발 세션을 위한 코딩 에이전트에게 내장 도구를 제공하는 Angular MCP 서버가 포함되어 있습니다. 향후 MCP 서버 기능에는 구문 마이그레이션을 위한 현대화 도구와 최신 AI 정보를 위한 로컬 RAG 엔진이 포함될 예정입니다. Angular 지원은 Google의 AI 제품인 Gemini Canvas 및 Google AI Studio에 통합되었습니다. 팀은 또한 대규모 코드베이스를 위한 에이전트 기능에 중점을 두고 일반적인 LLM 문제를 최소화하는 AI 우선 프레임워크를 탐색하고 있습니다. 저작 형식 및 애플리케이션 구조를 실험하고 있으며, 향후 Angular 개발에 대한 투명성을 약속합니다. Angular 팀은 확장 가능하고 AI 기반 애플리케이션 구축을 지원하는 개발자들을 지원하기 위해 최선을 다하고 있습니다.

Beyond the Horizon: How Angular is Embracing AI for Next-Gen Apps blog.angular.dev

RSS Hunter • 2025년 9월 16일

2025 앵귤러 여름 업데이트

Angular는 개발자 생산성과 AI 기능 향상에 초점을 맞춘 마이너 업데이트 v20.1 및 v20.2를 출시했습니다. 주요 특징은 zoneless Angular의 프로덕션 준비 상태로, 더 작은 번들 크기와 개선된 디버깅과 같은 이점을 제공합니다. 새로운 애니메이션 기본 요소인 animate.enter와 animate.leave는 네이티브 CSS 애니메이션과의 쉬운 통합을 가능하게 하며, 기존 @angular/animations 패키지를 폐기합니다. 팀은 AI 기반 앱 구축 가이드와 AI 지원 코딩 도구 개선으로 AI 제공 범위를 확장하고 있습니다.또한 문서 검색 및 LLM에 대한 모범 사례와 같은 AI 요구 사항을 지원하기 위해 실험적인 MCP 서버를 개발 중입니다. Angular DevTools는 이제 더 나은 디버깅을 위해 라우트 시각화 및 신호 그래프를 포함합니다. 컴포넌트 테스트는 TestBed.createComponent에 바인딩 객체를 전달하는 지원으로 단순화되었습니다.Mat Menu 컴포넌트는 이제 컨텍스트 메뉴로 작동할 수 있으며, NgComponentOutlet은 동적 컴포넌트용 사용자 정의 EnvironmentInjector를 지원합니다. 추가 개선 사항으로는 개편된 라우팅 가이드, 새로운 currentNavigation 신호, DestroyRef의 destroyed 속성, 템플릿 연산자 및 ARIA 속성에 대한 더 나은 지원이 있습니다. Angular는 이제 TypeScript 5.9를 지원하며 httpResource 및 httpClient을 개선했습니다. 커뮤니티는 새로운 Angular 마스코트에 대한 상당한 피드백을 제공했으며, 최종 디자인은 올해 말에 공개될 예정입니다.

Angular Summer Update 2025 blog.angular.dev

RSS Hunter • 2025년 8월 29일

Angular 사용자 지정 프로파일링 트랙이 이제 사용 가능합니다.

Angular 팀과 Chrome 팀이 협력하여 Angular 특정 데이터 및 통찰력을 Chrome DevTools 성능 패널에 직접 가져옴으로써 개발자에게 통일된 프로파일링 경험을 제공합니다. 이 통합은 두 도구의 이점을 결합하여 애플리케이션의 성능에 대한 더 동기화되고 포괄적인 뷰를 제공합니다. Chrome DevTools의 새로운 Angular 사용자 지정 트랙은 애플리케이션 부트스트랩, 컴포넌트, UI 동기화, 라이프사이클 후크 등의 Angular 개념을 사용하여 성능 데이터를 제공합니다. 사용자 지정 트랙의 플레임 차트는 해당 컴포넌트 및 기타 Angular 개념 하에 함수 호출을 그룹화하여 개발자가 개별 함수에 대한 더 세밀한 뷰를 드릴 다운할 수 있습니다. 플레임 차트 항목은 색상 코드화되어 개발자가 애플리케이션에서 무슨 일이 일어나는지 빠르게 확인할 수 있도록 도와줍니다. 색상은 애플리케이션의 다양한 측면을 나타내는 데 사용되며, 예를 들어 의존성 주입 서비스, Angular에 의해 컴파일된 템플릿, 엔트리 포인트 등이 있습니다. 사용자 지정 트랙은 상호작용적이므로 개발자가 플레임 차트 항목을 클릭하여 특정 항목에 대한 더 자세한 정보를 확인할 수 있습니다. 시작하려면 개발자는 최신 버전의 Angular 및 업데이트된 Chrome 버전을 사용해야 하며, 개발자 모드에서 Angular 애플리케이션을 실행하고 콘솔에 ng.enableProfiling()을 입력하여 사용자 지정 트랙을 활성화해야 합니다. 이 통합은 Angular 생태계 내에서 개발자 경험을 개선하는 지속적인 약속을 보여주는 예입니다. 이를 통해 개발자는 더 빠르고 효율적인 애플리케이션을 구축할 수 있습니다.

The Angular Custom Profiling Track is now available blog.angular.dev

RSS Hunter • 2025년 7월 2일

Angular v20 발표

지난 몇 년 동안 Angular는 Signals를 이용한 반응형 프로그래밍, Zoneless 애플리케이션 등 상당한 발전을 이루었습니다. 최신 릴리스인 Angular v20은 개발자 경험 향상을 위해 진행 중인 기능들을 다듬는 데 중점을 둡니다. 이 릴리스는 effect, linkedSignal, toSignal과 같은 API를 안정화하고, Zoneless를 개발자 프리뷰로 승격시켰습니다. 또한, Angular DevTools를 통한 디버깅을 개선하고 Chrome과 협력하여 Chrome DevTools 내에서 Angular 관련 사용자 지정 보고서를 직접 제공합니다. 스타일 가이드 업데이트, 타입 검사, 언어 서비스 지원을 통해 개발자 경험을 향상시켰습니다. 더불어, GenAI 개발을 발전시키고 Angular의 공식 마스코트를 위한 의견 요청을 시작합니다. 이 릴리스는 signal, computed, input, view queries API를 포함한 반응형 기능을 안정적으로 승격시킵니다. 또한, Angular를 사용하여 비동기 상태를 관리하기 위한 resource API 및 httpResource를 포함한 실험적 API를 도입합니다. 또한 Zoneless를 개발자 프리뷰로 승격시키고, 점진적 하이드레이션 및 라우트 레벨 렌더 모드 구성을 통해 서버 측 Angular를 강화합니다. 마지막으로, Chrome DevTools에서 성능 통찰력을 제공하고 프레임워크 추가 및 개선 사항을 통해 개발자 경험을 향상시켰습니다.

Announcing Angular v20 blog.angular.dev

RSS Hunter • 2025년 5월 28일

Genkit과 Angular로 AI 기반 앱을 구축하세요

AI 애플리케이션 구축을 위한 프레임워크인 Genkit 1.0이 Node.js 및 Go에서 사용 가능해져, 즉시 프로덕션 환경에 적용 가능한 AI 통합이 가능해졌습니다. 서버 측 사용을 위해 설계되었으며, 오픈 소스 라이브러리와 개발자 도구를 제공합니다. Angular 개발자는 Node.js 백엔드를 통해 Genkit을 활용하여 Genkit의 API를 서버 측 코드에 통합할 수 있습니다. 간단한 예시를 통해 Gemini 2.0 Flash와 같은 모델에 연결하고 텍스트를 생성하는 방법을 보여줍니다. 향상된 사용자 경험을 위해 Genkit의 streamFlow API는 스트리밍 응답을 가능하게 하여 "AI 타이핑" 효과를 만듭니다. 서버 측 플로우는 Genkit의 defineFlow API를 사용하여 정의되며, 구조화된 응답은 Zod 스키마로 정의됩니다. Genkit CLI 및 개발자 UI는 AI 상호 작용을 테스트, 디버깅 및 관찰할 수 있는 도구를 제공합니다. Genkit은 다중 턴 대화, 도구 사용, 휴먼-인-더-루프 워크플로우와 같은 다양한 기능을 지원합니다. AI 통합을 간소화함으로써 Genkit은 개발자가 Angular 및 Firebase를 사용하여 혁신적인 AI 기반 웹 애플리케이션을 구축할 수 있도록 지원합니다. 자세한 정보 및 업데이트는 angular.dev 및 firebase.google.com/docs/genkit에서 확인할 수 있습니다.

Build AI-Powered Apps With Genkit and Angular blog.angular.dev

RSS Hunter • 2025년 3월 18일

HTTP 리소스를 사용한 무결점 데이터 가져오기

Angular는 새로운 API를 도입하고 있습니다. 예를 들어 실험적인 resource() API를 통해 개발자는 비동기 작업의 결과를 신호로 노출할 수 있습니다. httpResource API는 resource 원시값 위에 구축되어 있으며 HttpClient를 로더로 사용하여 HTTP 요청을 용이하게 합니다. httpResource는 @angular/common/http의 프론트엔드 역할을 하며 Angular HTTP 스택, 인터셉터를 통해 HTTP 요청을 수행합니다. 기본적으로 httpResource는 GET 요청을 수행하고 알 수 없는 형식의 JSON 응답을 반환합니다. HttpClient와 다르게 요청 계산의 소스 신호가 변경되면 새로운 HTTP 요청이 수행됩니다. httpResource는 HttpClient의 요청과 유사한 요청 개체를 정의하여 고급 요청을 허용합니다. 이 API에는 텍스트, 블롭, 배열 버퍼 등의 다른 응답 형식에 대한 전용 메서드가 있습니다. httpResource는 값, 상태, 에러, 로딩 중, 헤더, 상태 코드, 진행률 등의 여러 신호를 노출합니다. httpResource는 Zod 또는 Valibot와 같은 스키마 유효성 라이브러리를 통해 직접적인 통합을 제공하여 형식 안전성을 제공합니다. httpResource는 Angular v19.2에서 실험적인 API로 제공되며 아직 프로덕션에는 준비되지 않았지만 개발자는 이를 시도해보고 피드백을 제공할 것을 권장합니다.

Seamless data fetching with httpResource blog.angular.dev

RSS Hunter • 2025년 3월 7일

Angular 19.2가 출시되었습니다

Angular는 버전 19.2를 출시했으며, 개발 경험을 향상시키는 새로운 API 및 실험 기능을 포함합니다. 이 릴리스는 신호를 사용하여 비동기 반응성을 구현하는 새로운 httpResource 및 resource 스트리밍을 통해 반응성을 동기화된 작업 너머로 확장합니다. resource API는 개발자가 신호의 이점을 활용하면서 비동기 데이터 소스와 상호작용할 수 있도록 허용합니다. httpResource API는 HTTP를 통해 데이터를 가져올 때 저항이 없는 반응 방식을 제공하여 Angular의 반응 시스템에 참여합니다. rxResource API는 이제 다중 응답 스트리밍을 지원하여 여러 값이 엔드포인트에서 반환되는 시나리오에 유용합니다. Angular 템플릿도 문자열 연결 및 이스케이프를 쉽게 하기 위해 언태그된 템플릿 리터럴 표현식을 지원하는 등 개선되었습니다. 다른 업데이트에는 자체 닫히는 태그로의 마이그레이션 및 형식에서 Set 유형 지원이 포함됩니다. Angular 팀은 리소스 API에 대한 피드백을 요청하여 댓글을 요청하고 있습니다. Angular v19.2는 이제 개발자가 업데이트하고 멋진 앱을 구축할 수 있습니다. 새로운 개발자는 angular.dev/tutorials에서 Angular로 구축을 시작할 수 있습니다.

Angular 19.2 Is Now Available blog.angular.dev

RSS Hunter • 2025년 3월 5일

Angular 및 Native Federation을 사용한 마이크로 프론트엔드

엔터프라이즈급 소프트웨어 시스템은 여러 교차 기능 팀에 의해 구현되는 경우가 많으며, 이러한 팀이 새로운 기능을 효율적으로 제공할 수 있도록 하려면 팀 간의 조정 필요성을 최소화하는 것이 바람직합니다. 이를 위해서는 개별 팀이 처리할 수 있는 저결합 영역으로 시스템을 수직화하는 모듈화가 필요합니다. Micro Frontends는 높은 수준의 팀 자율성과 같은 여러 이점을 약속하는 아키텍처 스타일이지만 수많은 도전 과제도 있습니다. Micro Frontends는 별도의 빌드 프로세스를 생성하며, 이를 증분 빌드와 결합하여 빌드 시간을 개선할 수 있습니다. 이 기능은 팀을 개별 응용 프로그램 또는 별도의 배포에 맞추는 것과 같은 다른 측면을 적용하지 않고도 사용할 수 있습니다. 그러나 개별적으로 개발된 마이크로 프론트엔드는 UI/UX에서 분기되어 일관되지 않은 모양으로 이어질 수 있으며, 여러 애플리케이션을 로드하면 다운로드해야 하는 번들 수가 증가하여 로딩 시간에 부정적인 영향을 미치고 메모리 압력이 증가합니다.응용 프로그램을 저결합 부분으로 분할하는 것이 일반적으로 가장 좋은 방법일 수 있지만, 개별 응용 프로그램으로 구현할 수 있을 만큼 수직 간의 경계를 명확하게 정의하기 어려운 경우가 많습니다. 이를 중요한 솔루션에 통합하면 복잡성이 추가되고 컴파일 시간 통합에서 런타임 통합으로 전환하면 심각한 결과가 발생합니다.Angular 팀은 Monorepos에서 개별 수직을 구현하는 것과 같은 대안이 적합한지 확인할 것을 권장합니다. 그러나 일관된 UI/UX를 지원하는 디자인 시스템을 구축하거나 개별 시스템 파트를 지연 로드하는 것과 같이 Micro Frontends의 단점을 보완하는 방법도 있습니다.Native Federation은 Angular CLI와 긴밀하게 통합되고 Angular로 Micro Frontends를 구현할 수 있는 커뮤니티 프로젝트입니다. 이를 통해 애플리케이션은 별도로 구축 및 배포된 다른 애플리케이션의 일부를 느리게 로드할 수 있으며 호스트와 원격 간에 Angular 또는 RxJS와 같은 종속성을 공유할 수 있습니다.네이티브 페더레이션을 설정하기 위해 ApplicationBuilder에 대한 네이티브 페더레이션 빌더 위임을 구성하고 구성 파일 federation.config.js 생성하는 회로도가 제공됩니다. 구성은 원격 또는 호스트에 고유한 이름을 할당하고 공유할 종속성을 정의합니다. 또한 원격은 셸에 로드할 수 있는 노출된 EcmaScript 모듈을 정의합니다.회로도는 또한 Native Federation을 main.ts에 초기화하는 코드를 추가하고, 기존의 원격 지연 로딩에 의해 노출되는 구성 요소 또는 라우팅 구성을 로드하기 위해 Native Federation의 loadRemoteModule 함수와 결합됩니다.

Micro Frontends with Angular and Native Federation blog.angular.dev

RSS Hunter • 2025년 2월 10일

Angular 2025 전략

Angular 팀은 지난 2년 반 동안 개발자 경험과 성능을 개선하는 데 주력해 왔습니다. 기술 산업이 빠르게 발전함에 따라 팀은 장기 비전을 정의하고 연간, 분기별 및 릴리스 기준으로 작업을 계획하여 변화하는 요구 사항에 적응할 수 있는 유연성을 유지합니다. 이 팀은 매년 개발자 설문조사를 통해 개발자의 요구 사항에 대한 가정을 검증하며, 2024년에 10,000개 이상의 응답이 접수되었습니다. 설문 조사 결과에 따르면 개발자의 79%가 최신 두 가지 주요 버전의 Angular를 사용하고 있으며 90%는 독립 실행형 구성 요소, 지시문 및 파이프를 사용하고 있습니다. 그 결과 전반적인 개발자 만족도가 향상되어 개발자의 약 90%가 프레임워크에 만족한다고 보고했습니다. 팀은 독립 실행형 구성 요소, 기본 제공 제어 흐름 및 지연 가능한 보기와 같은 개선 사항이 만족도 증가에 기여하는 것으로 식별했습니다. 그러나 구성 요소 작성 형식 및 테스트는 여전히 개선이 필요한 핵심 영역입니다. 2025년에 팀은 개발자 경험 향상, 최신 개선 사항 채택 지원, 성능 최적화를 포함하여 Angular 개발자의 성공을 돕기 위한 핵심 영역에 투자하는 데 중점을 둘 것입니다. 2025년에 주목할 만한 프로젝트로는 무구역을 개발자 프리뷰로 승격하고, 신호 기반 양식을 도입하고, Karma를 새로운 기본 테스트 러너로 교체하는 것이 있습니다. 팀은 또한 최신 모범 사례를 반영하고 웹 개발자가 목표를 달성하는 데 도움이 되는 기능의 가시성을 높이기 위해 Angular의 설명서를 발전시킬 것입니다.

Angular 2025 Strategy blog.angular.dev

RSS Hunter • 2025년 1월 14일

새로운 신호 입력 마이그레이션을 시도해 보세요

앵귤러 팀은 개발자가 데코레이터 기반 입력을 새로운 신호 API로 업데이트하는 것을 도와주는 새로운 마이그레이션을 도입했습니다. 신호 입력은 입력 기능을 업데이트하는 동시에 데코레이터 기반 입력과 기능을 유지합니다. 업데이트하는 주요 이유 중 하나는 타입 안전성입니다. 이는 개발자가 취약한 코드 패턴을 제거할 수 있도록 해줍니다. 신호 입력은 또한 입력 모니터링을 더 간단하게 만듭니다. 새로운 API는 ngOnChanges 라이프 사이클 훅을 사용하여 입력의 업데이트를 추적하는 코드를 리팩토링하는 데 사용할 수 있습니다. 마이그레이션은 Angular CLI를 통해 실행하거나 VSCode의 코드 리팩토링 작업으로 실행할 수 있습니다. 툴링은 @Input 선언을 업데이트하고 입력에 대한 참조를 조정하며 필요한 경우 변수를 도입합니다. 마이그레이션은 코드를 마이그레이션하는 데 도움이 되는 옵션을 제공하는 구성 가능한 기능을 제공합니다. 앵귤러 팀은 새로운 반응성 모델에 대한 비전을 실현하고 나아가기 위해 열의를 가지고 있습니다. 새로운 신호 API는 앵귤러 개발자의 정신 모델을 단순화하고 상태 동기화 및 흐름에 대해 더 쉽게 이해할 수 있도록 할 것으로 예상됩니다.

Try Out the New Signal Input Migrations blog.angular.dev

RSS Hunter • 2025년 1월 10일

Angular v19를 만나보세요

지난 2년 동안 Angular 팀은 모든 릴리즈에서 개발자 경험과 성능을 개선하는 데 초점을 맞추었습니다. 최신 버전인 v19에서는 새로운 기능과 개선 사항이 여러 가지 추가되었습니다. 이를테면 점진적 수분, 경로 수준의 랜더 모드, 개발자 경험 향상 등이 있습니다. 점진적 수분은 개발자가 특정 트리거에 따라 템플릿의 어느 부분이 로드되고 수분되어야 하는지 지정할 수 있도록 성능을 개선합니다. 경로 수준의 랜더 모드는 개별 경로를 서버 측에서 랜더링, 프리렌더링 또는 클라이언트 측에서 랜더링할 수 있도록 구성할 수 있습니다. 개발자 경험 향상에는 스타일의 핫 모듈 교체, 템플릿 HMR의 실험적 지원, 독립 실행 기본값이 true로 설정, 엄격한 독립 실행 적용, 새로운 테스트 도구 설정 등이 포함됩니다.

Meet Angular v19 blog.angular.dev

RSS Hunter • 2024년 11월 19일

Angular v19 출시: 워치 파티에 참여하세요!

Angular v19 출시가 다가오고 개발자들은 이를 축하할 준비를 하고 있습니다. Angular v19 개발자 이벤트는 11월 19일에 태평양 표준시 오전 9시에 열립니다. 이 기념으로 세계 각지에서 워치 파티 이벤트들이 조직되고 있습니다. 부에노스 아이레스에서는 11월 19일에 YouTube에서 라이브 스트리밍으로 워치 파티를 개최할 예정입니다. 프랑스에서는 11월 19일에 낭트, 투르, 파리에서 인사 워치 파티들이 열릴 예정이고, Eventbrite에서 등록이 가능합니다. Angular Athens는 11월 19일에 Discord에서 가상 워치 파티를 개최할 예정입니다. Angular Singapore Meetup은 11월 19일에 인사 미팅을 개최할 예정이고, LinkedIn에서 등록이 가능합니다. 이러한 워치 파티들은 최신 Angular 기능에 대해 배우고 다른 개발자들과 네트워크를 구축하며 주요 출시에 대한 흥분을 공유할 수 있는 좋은 기회를 제공합니다. Angular 커뮤니티와 함께 새로운 출시를 축하할 수 있는 기회를 놓치지 마세요. 11월 19일에 예정된 이 이벤트들을 놓치지 마세요.

Angular v19 Release: Join the Watch Parties! blog.angular.dev

RSS Hunter • 2024년 11월 14일

Angular의 effect()에 대한 최신 업데이트

Angular 개발자 프리뷰 프로세스를 통해 개발자는 API와 기능이 운영으로 승격되기 전에 시험해 볼 수 있으며, Angular 팀은 실제 사용과 피드백에 따라 이러한 API를 조정할 수 있습니다. effect() API에 대한 피드백을 통해 팀은 기능과 개발자 경험의 실질적인 문제를 해결하는 설계에 여러 가지 개선 사항을 파악했습니다. 변경 사항 중 하나는 allowSignalWrites 플래그를 제거하는 것이며, 이는 좋은 패턴을 권장하기 위한 것이지만 결국에는 신호를 업데이트하는 것이 합리적인 경우 effect() 사용을 권장하지 못했습니다. 대신 팀은 필요한 경우 새로운 리액티비티 헬퍼를 추가하는 등의 다른 방법으로 좋은 패턴을 권장하는 데 집중할 것입니다. 이펙트가 실행되는 시기도 변경되고 있으며, 이펙트는 이제 변경 감지 중에 컴포넌트 계층의 일부로 실행됩니다. 이러한 변경 사항은 이펙트 타이밍을 더 예측 가능하고 유용하게 만들고 이펙트가 너무 일찍 또는 너무 늦게 실행되는 버그를 해결하는 것을 목표로 합니다. effect API의 대부분의 용도는 예상대로 계속 작동하지만 뷰 쿼리 결과에 대한 이펙트와 입력 신호의 toObservable() 등 일부 사용 사례에는 영향을 받을 수 있습니다. Angular 팀은 Google에서 테스트 중에 타이밍 변경이 코드에 의미 있게 영향을 준 약 100개의 사례를 수정했습니다. 이러한 변경 사항의 결과로 effect() API는 적어도 v19.0까지 개발자 프리뷰로 유지되며 향후 마이너 릴리스에서 API를 안정화할 계획입니다. Angular 팀은 Angular 개발에 중요한 역할을 한 커뮤니티의 피드백과 지원에 감사드립니다.

Latest updates to effect() in Angular blog.angular.dev

RSS Hunter • 2024년 10월 7일

미래는 독립형이다!

Angular v19에서 컴포넌트, 디렉티브 및 파이프의 기본값은 standalone: true로 설정되어 Angular 코드를 작성하기가 더 쉬워집니다. 이 변경은 v14에서 도입된 standalone 기능의 성공을 따라하며, Angular 생태계 전반에 걸쳐 널리 채택되었습니다. standalone 기능은 라우트 수준의 지연 로딩을 단순화하고, 컴포넌트 동작에 대한 더 나은 구성 모델을 활성화하며, 템플릿 수준에서 컴포넌트 및 디렉티브의 지연 로딩을 허용합니다. 기존의 standalone 컴포넌트는 v19의 ng update를 통해 standalone: true를 제거할 것이며, 기존의 NgModule 컴포넌트는 계속 작동할 수 있도록 standalone: false를 추가할 것입니다. strictStandalone 컴파일러 옵션을 설정하여 애플리케이션에서 작성된 컴포넌트가 standalone 컴포넌트만 사용하도록 강제할 수 있습니다. FormsModule 및 기타 npm 라이브러리와 같은 NgModule은 변경되지 않으며, standalone 컴포넌트는 필요한 경우 NgModule 종속성을 계속 가져올 수 있습니다. 라이브러리 작성자는 변경할 필요가 없으며, 컴포넌트가 사용자에 의해 가져올 때 버전에 관계없이 올바르게 작동할 것입니다.

The future is standalone! blog.angular.dev

RSS Hunter • 2024년 9월 3일

Angular 18.2에서 isolatedModules 사용

Angular 18.2는 TypeScript의 분리 모듈(isolatedModules) 지원을 도입하여 상당한 성능 향상을 제공합니다. 이 옵션을 활성화하면 TypeScript 코드가 번들러를 통해 변환되어 생산성 빌드 시간이 최대 10%까지 단축됩니다. 번들러인 esbuild는 열거형을 인라인하는 것을 포함한 출력 코드를 최적화하고, TypeScript 코드에 대한 Babel 최적화 패스를 제거합니다. 이 기능을 활성화하려면 tsconfig.json 파일의 "compilerOptions" 섹션에 "isolatedModules": true를 추가합니다. 최적의 출력 크기를 위해 "useDefineForClassFields" 옵션이 제거되거나 true로 설정되었는지 확인합니다. 자세한 내용은 분리 모듈에 대한 TypeScript 문서를 참조하십시오. 이러한 변경 사항을 구현하면 개발자는 이 기능을 사용하여 빌드 성능을 개선하고 효율적인 Angular 애플리케이션을 만들 수 있습니다.

Using isolatedModules in Angular 18.2 blog.angular.dev

RSS Hunter • 2024년 8월 19일

Angular에서 물질 지원의 미래

구글의 Material Web Components(MWC) 변경 사항은 Angular Material에 영향을 미치지 않습니다. 왜냐하면 Angular Material은 MWC를 사용하거나 의존하지 않기 때문입니다. Angular Material은 MDC Web을 내부적으로 사용하고 있으며, Angular Material 내부에서 MDC Web의 코드를 포크하고 반복하여 개발할 계획입니다. 이렇게 하면 컴포넌트 API 또는 출력에 영향을 미치지 않습니다. Angular Material의 최신 버전에는 Material 3 스타일, CSS 변수 지원, 테마 스키마틱스 등이 포함되어 있습니다. 팀은 앱 개발을 개선하는 Angular CDK 기능과 문서를 확장할 계획입니다. Angular Material은 여전히 적극적으로 지원되고 개발 중인 상태로, 개발자들이 고품질 UI를 구축하는 데 필요한 강력한 도구를 제공합니다.

The Future of Material Support in Angular blog.angular.dev

RSS Hunter • 2024년 7월 19일

생성 예술에 몰입하세요: Angular WebXR 모험

Google I/O Angular 세션에서 제너레이티브 아트 갤러리 데모가 AI, Angular 및 WebXR 기술을 결합하여 선보였다. 데모는 Vertex AI의 Imagen API를 통해 작품 생성, Gemini API를 통해 통찰 있는 설명을 제공하고, 3D 갤러리에서 작품을 표시한다. 브라우저, AR 또는 VR에서 접근할 수 있는 갤러리는 몰입감 있는 경험을 제공한다.Angular의 지연 가능 뷰는 3D 모델을 배경에서 로딩하면서 플레이스홀더 뷰를 유지하여 사용자 경험을 원활하게 한다. 신호는 데이터 흐름을 단순화하고 보일러플레이트 코드를 줄인다. WebXR 컴포넌트는 씬 생성을 추상화하고 보일러플레이트를 줄인다.서버 사이드 렌더링 및 하이드레이션은 성능을 크게 개선시키며, 첫 번째 및 가장 콘텐츠가 풍부한 페인트 시간에 특히 개선이 두드러진다. Angular의 발전은 개발자 경험을 개선시키고 새로운 API를 제공한다. 데모 코드는 GitHub에서 제공되어 개발자들이 자체 Angular, WebXR 및 AI 프로젝트를 만들 수 있도록 영감을 준다.

Immerse Yourself in Generative Art: An Angular WebXR Adventure blog.angular.dev

RSS Hunter • 2024년 7월 16일

Angular에서 @let 소개

앵귤러는 새로운 @let 구문을 도입하여 개발자가 템플릿 내에서 변수를 정의하고 재사용할 수 있도록 합니다. 이 구문은 앵귤러의 템플릿 구문에서 오랫동안 존재했던 문제를 해결합니다.@let 선언을 사용하면 앵귤러 표현식에서 파생된 값으로 변수를 정의할 수 있습니다. 이러한 변수는 템플릿 전체에서 재사용할 수 있으며, 코드의 가독성과 유지보수를 개선합니다.이전의 해결책과는 달리, @let 변수는 현재 뷰와 그 하위 뷰에 범위가 지정되어 코드의 조직을 개선하고 의도하지 않은 변수 충돌을 방지합니다.@let 선언은 읽기 전용이며, 값은 변경 감지 동안 다시 계산되어 데이터의 정확성을 보장합니다.@let의 공식 구문은 키워드, 변수 이름, 할당 연산자, 앵귤러 표현식 및 세미콜론 종결자로 구성됩니다.예제는 템플릿에 표시할 변수를 정의하는 데 @let을 사용하는 방법을 보여주며, 비동기 파이프를 사용하는 복잡한 표현식도 포함됩니다.앵귤러 팀은 개발자 경험을 계속 개선하기 위해 새로운 @let 구문에 대한 피드백을 환영합니다.

Introducing @let in Angular blog.angular.dev

RSS Hunter • 2024년 7월 10일

Angular 18 버전이 출시되었습니다!

Angular 18은 실험적인 영역 없는 변경 감지를 도입하여 성능, 구성 가능성 및 디버깅을 개선합니다. Angular.dev는 공식 문서 웹사이트가되어 사용자 경험을 향상시킵니다. Material 3 컴포넌트, 지연 가능한 뷰 및 내장 제어 흐름은 이제 안정적이며, 서버 측 렌더링 수분 공급에 대한 i18n 지원과 함께 제공됩니다. 네이티브 async/await는 영역 없는 앱에서 사용할 수 있으며 번들 크기를 줄이고 디버깅을 개선합니다. Google.com의 이벤트 디스패치 라이브러리는 Angular의 이벤트 재생을 구동하며 페이지 로딩 중 사용자 이벤트를 보존합니다. Angular DevTools는 수분 공급 프로세스에 대한 디버깅을 개선합니다. 모든 Angular Material 및 CDK 컴포넌트는 이제 완전히 수분 공급 호환입니다. 부분 수분 공급은 개발 중이며 서버 측 렌더링 후 증분 수분 공급을 활성화합니다. 영역 없는 변경 감지는 마이크로 프론트엔드 및 다른 프레임워크와의 상호 운용성을 위한 구성 가능성을 향상시킵니다. 지연 가능한 뷰는 Core Web Vitals을 개선하고 내장 제어 흐름은 성능과 에르고노믹스를 개선합니다.

Angular v18 is now available! blog.angular.dev

RSS Hunter • 2024년 5월 22일

Angular의 이벤트 디스패치

Angular의 새로운 이벤트 위임 시스템은 Angular와 Wiz에서 영감을 얻어 이벤트 디스패치를 활성화하여 수분 공급 이전에 이벤트를 캡처할 수 있습니다. 이것은 반응 없는 UI 요소를 방지하고 사용자 경험을 개선합니다. 이벤트 디스패치는 Google 애플리케이션에서 사용되는 검증된 라이브러리인 JSAction을 사용합니다. 이벤트 디스패치를 활성화하면 Angular 애플리케이션은 수분 공급 이전에 이벤트를 중단하고 페이지 로드 시 사용자 상호 작용을 허용할 수 있습니다. 이것은 더 세부적인 수분 공급을 향한 중요한 단계이며 수분 공급에 중요한 경로에서 JavaScript의 양을 줄입니다. 지연 가능한 뷰는 이벤트 응답을 위한 대기 시간을 최소화하기 위해 서버에서 게으르게 수분 공급됩니다. 향후 블로그 게시물에서는 공용 API를 통해 이 기능을 활성화하는 방법에 대한 세부 정보를 제공할 것입니다. 이 이니셔티브는 Wiz에서 제공하는 것과 같은 Angular의 재개 가능성을 위한 기반을 마련합니다.

Event Dispatch in Angular blog.angular.dev

RSS Hunter • 2024년 4월 22일

Angular와 Wiz는 함께 더 나아갑니다

Angular와 Wiz, 두 Google 웹 프레임워크는 서로 다른 초점을 가지고 있습니다. Angular는 개발자 경험을 우선시하고, Wiz는 성능을 강조합니다. 그러나 고성능 앱과 좋은 개발자 경험의 요구가 증가하면서 두 프레임워크의 사용 사례가 합쳐지고 있습니다.이러한 요구에 대응하여 Angular와 Wiz는 양 세계의 최선을 결합하여 제공하는 협력을 시작했습니다. Angular는 Wiz에서 코드 로딩과 이벤트 위임 같은 기능을 채택하여 성능을 개선했습니다.반면 Wiz는 Angular의 Signals 라이브러리를 채택하여 코드 메모이제이션의 수동적인 필요성을 제거하고 성능을 크게 개선했습니다.장기적인 목표는 Angular와 Wiz를 점차적으로 합치고, Angular를 통해 Wiz 기능을 오픈 소스로 제공하면서 RFC 프로세스를 통해 커뮤니티의 입력을 장려하는 것입니다.이 파트너쉽은 Angular 프레임워크를 개선하고 서버 측 랜더링을 통해 최종 사용자 경험을 향상시키는 것을 목표로 합니다.두 프레임워크의 강점을 결합하여 웹 성능을 혁신하고, 개발자와 최종 사용자 모두에게 혜택을 제공하는 것을 목표로 합니다.

Angular and Wiz Are Better Together blog.angular.dev

RSS Hunter • 2024년 3월 29일

Angular의 새로운 output() API를 만나보세요

Angular v17.3는 개발자 미리 보기로 제공되는 출력을 선언하기 위한 개선된 API를 도입했습니다. 새로운 API는 지시자에서 출력을 선언하는 과정을 단순화하고, 시그널 입력과 같은 다른 함수 기반 API와 일관성을 제공합니다. 또한, 값 출력에 대한 더 정확한 유형을 제공하여 유형 안전성을 개선하고, 미묘한 런타임 오류의 위험을 줄입니다.개발자는 output() 함수를 사용하여 출력을 선언할 수 있습니다. 이 함수는 클래스 필드를 초기화하고 .emit 함수를 호출하여 값을 출력할 수 있습니다. 관찰 가능한 스트림 기반 출력의 경우 outputFromObservable() 함수를 사용할 수 있습니다.새로운 API는 시그널이 아닌 보일러플레이트 코드를 줄이는 편리한 개선입니다. 지시자가 파괴될 때 자동으로 출력을 정리하고, 출력된 값에 대한 유형 안전성을 개선하는 기능을 제공합니다.모든 출력은 OutputRef 인터페이스를 구현하여 개발자가 출력을 프로그래밍 방식으로 듣는 일관된 방법을 제공합니다. RxJS 인터옵 패키지에는 출력을 RxJS 방식으로 듣는 outputToObservable 함수가 포함되어 있습니다.새로운 출력 API는 개발자 미리 보기로 제공되며, Angular는 커뮤니티의 피드백을 환영합니다. 개발자는 ng update를 사용하여 최신 버전의 Angular를 설치하여 새로운 API를 시도할 수 있습니다.Angular v17.3의 개선된 출력 API는 다음과 같은 여러 가지 이점을 제공합니다.- 다른 함수 기반 API와의 개념적 일관성 - 단순화된 구문 - 자동 정리 - 개선된 유형 안전성 - 일관된 프로그래밍 방식 듣기개발자는 새로운 출력 API에 대한 피드백을 댓글, GitHub 토론 또는 기타 채널을 통해 제공할 수 있습니다. 피드백은 API를 더욱 정제하고 안정화하는 데 사용될 것입니다.

Meet Angular’s new output() API blog.angular.dev

RSS Hunter • 2024년 3월 27일

NativeScript와 함께하는 Angular: 블랙아웃 라이트닝 콘솔 생성

조명 콘솔은 연극 조명 디자인에서 무대 조명을 제어하는 전자 기기입니다. Nstudio 팀은 Blackout을 개발했는데, 이는 독립형 콘솔과 동일한 기능을 제공하는 iPad 앱입니다. 이 앱은 DMX 제어 프로토콜 및 LumenRadio TimoTwo 칩을 통해 블루투스 제어를 지원합니다.Blackout은 연결된 조명에 대한 일정한 데이터 전송 속도를 유지하면서 실시간 데이터 지표 및 자세한 조명 제어를 제공하는 부드러운 UI를 제공합니다. 이 앱은 Angular 17+ 및 NativeScript 8+를 사용하여 개발되었습니다. Angular의 DI, 템플릿팅 및 상태 관리와 NativeScript의 플랫폼 최적화된 뷰 및 iOS CoreMIDI 통합을 결합합니다.Angular의 선언적 컴포넌트 아키텍처, 지시문 및 NgRx를 통한 상태 관리는 MIDI Learn Mode 및 nsIf 지시문과 같은 복잡한 UI 기능을 생성하는 데 도움이 되었습니다. nsIf 지시문은 변경 감지에서 뷰를 분리하여 필요한 경우에만 다시 연결하여 성능을 개선했습니다.Angular을 NativeScript와 함께 사용하면 Tailwind CSS로 UIKit 뷰를 스타일링하고 플랫폼 특정 API 및 기술을 사용할 수 있습니다. NgRx는 데이터 흐름을 관리하고 불필요한 계산을 최소화하는 데 있어 핵심적인 역할을 했고, NativeScript은 최적의 성능 및 자연스러운 디바이스 동작을 위해 플랫폼 최적화된 렌더링 엔진을 사용할 수 있었습니다.

Angular with NativeScript: Creating the Blackout Lighting Console blog.angular.dev

RSS Hunter • 2024년 3월 18일

개발자 프리뷰에서 사용할 수 있는 신호 입력

Angular 17.1은 데코레이터 기반의 @Input() 입력 대신 반응형 대안인 신호 입력을 도입합니다. 신호 입력은 코드 품질과 생산성을 향상시키는 더 나은 형식 안전성을 제공하여 Angular 신호와의 통합을 용이하게 합니다.신호 입력은 개발자가 신호를 사용하여 입력 변경에 효과적으로 대응할 수 있도록 지원하며, 선택적 및 필수 입력을 지원합니다.@Input()과 비교하여 신호 입력은 OnPush 구성 요소를 자동으로 더티로 표시하여 DX를 개선하고 Zoneless 방향으로 나아갑니다.신호 입력은 신호의 힘을 활용하여 변경 모니터링 및 값 파생을 효율적으로 처리하고 Angular에 필요한 다시 그리는 작업을 알립니다.가능한 사용 사례로는 선언 및 렌더링, 변경 모니터링, 값 파생 및 값 변환 등이 있습니다.신호 입력은 원시 값 처리 및 특정 요구 사항 충족을 위해 변환 및 별칭을 지원하여 유연성을 제공합니다.Angular 팀은 향후 버전에서 생산 상태로 승격되면 신호 입력을 사용할 것을 권장합니다.개발자는 개발자 미리보기에서 신호 입력에 대한 피드백을 제공할 것을 권장합니다.input()의 약식 표기는 초기 값으로 undefined를 암묵적으로 사용하는 데 혼란을 초래할 수 있습니다.입력은 이제 읽기 전용으로, 구성 요소 내부에서 입력을 업데이트하는 애플리케이션에 영향을 줄 수 있습니다.

Signal inputs available in developer preview blog.angular.dev

RSS Hunter • 2024년 2월 22일

Angular v17.2가 이제 사용 가능합니다

Angular v17.2는 최신 Material Design for the Web 사양을 기반으로 한 새로워진 디자인 시스템인 Material 3에 대한 실험적 지원을 도입합니다. 이 릴리즈에는 반응성 향상 및 뷰 쿼리에 대한 타입 안전성을 제공하는 신호 쿼리 및 모델 입력을 위한 개발자 미리 보기 API도 포함되어 있습니다. 성능 개선을 위해 Angular DevTools는 현재 수분 공급 디버깅을 지원하며, NgOptimizedImage 지시자는 자동 플레이스홀더 및 Netlify 이미지 로더 통합을 제공합니다. Angular CLI는 Bun 패키지 관리자 지원, Vite 프리번들링 제어 및 사용자 정의 PostCSS 구성 기능을 얻습니다. 또한 Angular 팀은 이러한 현대적인 API를 형성하는 데 있어 커뮤니티 피드백에 감사를 표합니다. 다음 주요 릴리즈인 Angular v18은 5월에 예정되어 있습니다.

Angular v17.2 is now available blog.angular.dev

RSS Hunter • 2024년 2월 15일