Frontend8 [Angular] 07. Custom events with outputs Angular 공식 문서를 실습하고 정리하는 글입니다. Output자식 컴포넌트가 부모 컴포넌트로 데이터나 이벤트를 전달하는 방법자식 컴포넌트에서 동작이 발생했을 때(버튼 클릭, 폼 제출 등), 그 사실을 부모 컴포넌트에 알려야 할 때 사용한다. 출력 사용 예제자식 컴포넌트에서 출력 정의import { Component, output } from '@angular/core';@Component({ selector: 'app-expandable-panel', template: `Close Panel`})export class ExpandablePanel { // 출력 정의: panelClosed라는 이벤트를 생성 panelClosed = output(); closePanel() { // 이벤.. 2025. 2. 1. [Angular] 06. Components: Input Properties Angular 공식 문서를 실습하고 정리하는 글입니다. 입력 속성부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용된다.input 함수를 사용하여 컴포넌트가 받을 데이터를 선언한다.import { Component, input } from '@angular/core';@Component({ selector: 'custom-slider', template: `{{ value() }}`,})export class CustomSlider { // 입력 속성 value 선언, 기본값을 0으로 설정 value = input(0);} 입력 속성의 사용// CustomSlider 컴포넌트의 value 속성에 50 전달 입력 속성의 타입 지정입력 속성의 기본값을 설정하면 TypeScript가 자동으로 .. 2025. 1. 31. [Angular] 05. Components: Selectors Angular 공식 문서를 실습하고 정리하는 글입니다. 컴포넌트의 CSS 선택자모든 Angular 선택자는 CSS 선택자를 정의하며, 이 선택자는 컴포넌트가 어떻게 사용될 지 결정한다.@Component({ selector: 'profile-photo', ...})export class ProfilePhoto { }컴포넌트의 선택자는 해당 컴포넌트를 HTML에서 어떻게 사용할 지 정의한다.다른 컴포넌트의 템플릿에서 선택자와 일치하는 HTML요소를 생성하여 컴포넌트를 사용한다. @Component({ template: ` Upload a new profile photo`, ...,})export class UserProfile { }Angular는 선택자를 컴파일 타임에 정적으로 매칭한.. 2025. 1. 31. [Angular] 04. Dependency Injection Angular 공식 문서를 실습하고 정리하는 글입니다. Services재사용 가능한 코드 조각으로, 앵귤러 애플리케이션의 여러 부분에 주입될 수 있다.서비스는 컴포넌트와 달리 템플릿이나 뷰를 가지지 않으며, 순수 TypeScript 클래스로 구성된다. 서비스의 목적로직 공유: 여러 컴포넌트에서 공통으로 사용되는 로직을 서비스로 분리데이터 관리: 애플리케이션 전반에서 사용되는 데이터를 서비스에서 관리외부 통신: HTTP요청이나 다른 외부 API와의 통신을 서비스에서 처리 서비스의 구성 요소@Injectable 데코레이터서비스 클래스를 앵귤러 서비스로 선언한다.providedIn 속성을 통해 서비스가 애플리케이션 어느 부분에서 사용 가능한지 정의한다.TypeScript 클래스서비스의 로직 정의메서드나 속성을.. 2025. 1. 31. [Angular] 03. Dynamic interface with templates Angular 공식 문서를 실습하고 정리하는 글입니다. 동적 텍스트 표시Binding은 컴포넌트와 템플릿과 데이터 간의 동적 연결을 생성한다.이 연결은 컴포넌트 데이터가 변경되면 자동으로 렌더링된 템플릿을 업데이트한다. 이중 중괄호 {{ }} 를 사용하여 바인딩을 생성할 수 있다.@Component({ selector: 'user-profile', template: `Profile for {{userName()}}`,})export class TodoListItem { userName = signal('pro_programmer_123');}출력: Profile for pro_programmer_123{{ userName() }} 은 userName 시그널의 값 ‘pro_programmer_123’.. 2025. 1. 31. [Angular] 02. Signal Angular 공식 문서를 실습하고 정리하는 글입니다. SignalAngular에서는 시그널을 이용해 state를 생성하고 관리한다.로컬 상태를 유지하는 함수를 생성하기 위해 시그널 함수를 사용한다.특징반응성: 시그널 값이 변경되면 이를 참조하는 부분이 자동으로 업데이트된다.set과 update 메서드를 통해 상태를 쉽게 관리할 수 있다.update메서드는 콜백 함수를 인자로 받는다. 콜백함수는 이전 값을 받아 새로운 값으로 반환한다.시그널은 변경 사항을 효율적으로 추적하고, 불필요한 렌더링을 방지한다.import {signal} from '@angular/core';// 시그널 생성, 초기값을 인자로 전달const firstName = signal('Morgan');// 함수처럼 호출하여 현재 값을 읽.. 2025. 1. 31. [Angular] 01. Component Angular 공식 문서를 실습하고 정리하는 글입니다. Component (컴포넌트)컴포넌트는 Angular 앱의 주요 구성 요소이다.각 컴포넌트는 더 큰 범위의 웹페이지의 일부를 나타낸다.애플리케이션을 컴포넌트 단위로 분리하면 유지보수가 용이해진다. 컴포넌트 구성 요소// user-profile.ts@Component({ selector: 'user-profile', template: ` User profile This is the user profile page `, styles: `h1 { font-size: 3em; } `,})export class UserProfile { username: string = 'John'; email: string = 'john.doe@exam.. 2025. 1. 31. [Angular] 00. 사전 준비, Angular 설치 Angular 공식 문서를 실습하고 정리하는 글입니다. 사전 준비 사항Node.js 18.19.1 이후 버전VS Code 등의 에디터CLI 커맨드 입력을 위한 터미널 Angular CLI 설치VS Code 터미널에서 npm을 통해 Angular CLI를 설치한다.npm install -g @angular/cli 프로젝트 생성ng new 명령어를 통해 프로젝트를 생성한다.e.g. my-first-angular-appng new 실행프로젝트가 설치된 폴더로 이동모든 종속성은 이 시점에 설치되어야 한다. (프로젝트 내 node_modules 폴더 유무로 확인)cd my-first-angular-app 아래 명령어로 실행한다.npm start 2025. 1. 28. 이전 1 다음
