전체 글

TypeScript와 Angular Part 1. 의존성 주입, 제어의 역전과 상태 관리Angular를 이해하기 위해서는 먼저 의존성 주입(Dependency Injection)과 제어의 역전(Inversion of Control) 개념을 알아야 한다. Angular는 컴포넌트, 서비스, 라우터, HTTP 통신 기능을 서로 연결할 때 의존성 주입을 적극적으로 사용한다.의존성 주입은 클래스 내부에서 필요한 객체를 직접 생성하지 않고, 외부에서 생성된 객체를 전달받아 사용하는 방식이다. 이를 통해 컴포넌트와 비즈니스 로직을 분리하고, 객체 사이의 결합도를 낮출 수 있다.의존성이란 무엇인가?한 클래스가 다른 클래스의 기능을 사용한다면 두 클래스 사이에는 의존 관계가 존재한다.예를 들어 사용자 정보를 가져오는 ..

TypeScript Part 3. Angular CLI와 TypeScript 데코레이터Angular는 웹 애플리케이션의 기능뿐 아니라 프로젝트를 생성하고 관리하는 개발 도구까지 제공한다. 그 중심에 있는 도구가 Angular CLI(Command Line Interface)이다.Angular CLI를 사용하면 프로젝트 생성, 컴포넌트 추가, 개발 서버 실행, 테스트, 빌드와 같은 작업을 명령어로 처리할 수 있다. 개발자가 필요한 파일과 기본 코드를 직접 작성하지 않아도 일정한 구조에 맞춰 자동으로 생성되기 때문에 생산성과 코드 일관성을 높일 수 있다.또한 Angular는 컴포넌트, 서비스, 입출력 프로퍼티 등을 선언할 때 TypeScript의 데코레이터(Decorator)를 적극적으로 사용한다. 데코레이..

TypeScript Part 2. Angular의 모듈 분할, 폼 처리와 RxJSAngular는 단순히 화면을 구성하는 기능만 제공하는 프레임워크가 아니다. 애플리케이션의 규모가 커졌을 때 발생하는 성능 문제, 데이터 처리 문제, 입력값 검증 문제까지 체계적으로 해결할 수 있도록 다양한 기능을 제공한다.특히 Angular의 모듈 분할, 지연 로딩, 폼 지원, RxJS 기반 데이터 스트림 처리는 대규모 웹 애플리케이션을 개발할 때 중요한 역할을 한다.모듈 분할이 필요한 이유웹 애플리케이션의 기능이 많아질수록 JavaScript 파일의 크기도 증가한다. 모든 기능을 하나의 파일에 포함하면 사용자가 처음 웹사이트에 접속할 때 필요하지 않은 코드까지 모두 내려받아야 한다.예를 들어 쇼핑몰 애플리케이션에는 다음과..

TypeScript Part 1. Angular 프레임워크와 TypeScript현대 웹 애플리케이션은 단순히 HTML과 JavaScript만으로 구현하기에는 규모가 매우 커졌다. 로그인, 회원 관리, 서버 통신, 화면 전환, 데이터 관리, 사용자 인터페이스(UI) 등 다양한 기능을 하나의 프로젝트에서 효율적으로 관리해야 하기 때문에 체계적인 개발 환경이 필요하다. 이러한 요구사항을 해결하기 위해 등장한 것이 Angular(앵귤러)이다.Angular는 Google이 개발하고 유지보수하는 오픈소스 프레임워크로, 대규모 웹 애플리케이션 개발에 필요한 기능들을 기본적으로 제공한다. 특히 Angular는 TypeScript를 공식 언어로 채택하고 있어 정적 타입 검사와 객체지향 프로그래밍의 장점을 적극적으로 활용..