Web/Angular

개요Angular에서 뷰에 데이터를 표시하는 데이터 바인딩에 이은 이번에는 데코레이터를 활용한 부모-자식 컴포넌트 간에 통신하는 방법에 대해 정리하려고 한다. 1. @Input()@Input() 데코레이터는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용한다.= 부모 -> 자식// child.component.tsimport { Component, Input } from '@angular/core';@Component({ selector: 'app-child', template: `안녕하세요, {{ name }}님!`})export class ChildComponent { @Input() name!: string;} -> @Input()은 name이라는 속성에 데코레이터를 붙여서, 외부에..

개요Angular에서는 데이터 바인딩을 통해 데이터를 실시간으로 화면에 반영하는데, 이것에 대해 정리해보겠다. 1. 데이터 바인딩(Data Binding)컴포넌트 클래스의 데이터와 HTML 템플릿의 DOM 요소를 연결하는 기술이다.즉, 화면에 표시되는 내용을 코드에서 제어할 수 있고, 사용자의 입력 또한 코드에 반영될 수 있다. Angular는 단방향 바인딩과 양방향 바인딩을 적용할 수 있다. 1-1. Interpolation Binding(삽입식)템플렛에서 {{ data }} 형식으로 사용하며, 문자열을 포함해 표현식을 넣을 수 있다. Hello, {{ userName }} export class AppComponent { userName = 'HO';} -> AppComponent 클래스에서 쓰..

개요처음 프로젝트를 생성했는데, 어떤 방식으로 실행되는지 아는 것은 너무 중요한 것 같다! 그래서 이번에 angular가 어떻게 시작되는지에 대한 내용을 정리해보려고 한다. 1. Angular에서 브라우저와 서버의 역할일단 이것부터 정리하는게 내가 이해하기 편할 것 같다!SPA(Single Page Application)Angular의 특징 중에 하나가 SPA이기 때문에 이것에 대해 다시 정리해보자면,SPA는 하나의 HTML 페이지에서 시작해서 필요한 부분만 동적으로 바꿔가며 동작하는 웹 애플리케이션 구조이다. -> 전체 페이지를 새로고침하지 않는다.-> 라우팅도 클라이언트(JavaScript)에서 처리한다.-> 데이터는 API 요청을 통해 동적으로 가져온다. 1-1. 브라우저와 서버브라우저(클라이언트)..

개요Angular CLI를 통해 Angular 프로젝트를 만드는 방법에 대해서는 정리가 끝났으니까, 이제 Angular를 활용해 나만의 프로젝트를 만들 수 있는 이론적인 지식들을 쌓아나아가야겠지? 그 첫 번째가 바로 Component에 대한 내용이다.1. Angular Component란?컴포넌트는 Angular의 기본적인 UI 단위로, HTML 템플릿과 TypeScript 로직을 결합해 독립적인 UI 요소를 만들 수 있도록 설계된 구조이다. Angular 애플리케이션은 여러 개의 컴포넌트로 이루어지고, 컴포넌트는 계층적으로 구성될 수 있다. 1-1. Component 구조Angular의 컴포넌트는 크게 3가지에 주요 요소로 구성된다. 1) Template-> HTML을 기반으로 컴포넌트의 UI를 정의하..