[Angular] Angular 시작하기 - (1) 시작, 상품목록 만들기

https://angular.kr/start

Angular 가이드

---

StackBliz에서 진행

(StackBlitz는 브라우저 기반의 개발 환경이기 때문에 웹 브라우저에서 바로 애플리케이션을 생성하고 저장할 수 있으며, 자유롭게 공유 가능)

 

 

사용할 컴포넌트

• <app-root> : 다른 컴포넌트를 띄울 수 있도록 제일 먼저 로딩되는 컴포넌트
• <app-top-bar> : 온라인 샵의 이름과 주문 버튼을 표시
• <app-product-list> : 상품 목록을 표시
• <app-product-alerts> : 알림을 표시

---

예제 프로젝트 생성하기

 

1. StackBlitz에 이미 만들어져 있는 프로젝트에 접속
2. StackBlitz에 로그인
3. 프로젝트를 포크
4. 주기적으로 저장

 

StackBlitz 접속 시 확인 가능한 화면

이 튜토리얼을 진행하며 작업할 파일은 src 폴더 안에 있음

---

상품 목록 생성하기

 

products.ts 안의 상품 데이터

product-list.component.ts 파일에 있는 메서드

사용 예정

 

1. product-list 폴더의 템플릿 product-list.component.html 열기

 

2. <div> 아래 *ngFor를 아래와 같이 추가

*ngFor를 사용해 개별 상품마다 <div> 엘리먼트 반복

*ngFor

collection 안의 아이템들을 각각 템플릿에 렌더링 해주는 구조 디렉티브

 

구조 디렉티브(Structual Directive)

구조 디렉티브는 엘리먼트를 추가하거나 제거하고, 변형하는 방식으로 DOM 구조를 조작

 

3. <div> 엘리먼트 안에  <h3> 엘리먼트 추가 → 엘리먼트 내용 : {{ product.name }}

{{ product.name }} 이라는 표현은 Angular가 제공하는 문자열 바인딩(interpolation) 문법

바인딩 문법 ( {{ }} )을 사용하면 프로퍼티 값을 문자열로 렌더링 할 수 있음

 

 

~여기까지 결과~

 

4. 상품의 이름을 클릭했을 때 상세보기 화면으로 전환하기 위해 {{ product.name }}을 <a> 엘리먼트로 감싸기

 

5. <a> 엘리먼트의 제목을 지정하기 위해 프로퍼티 바인딩 문법 ( [ ] )를 추가

미리보기 패널의 상품 이름에 마우스를 올리면 상품의 이름에 'details'라는 문자열이 붙어서 표시됨

프로퍼티 바인딩 문법( [ ] )을 활용하면 프로퍼티 값을 템플릿 표현식으로 활용할 수 있음

 

6. 상품 설명 추가

<p> 엘리먼트에 *ngIf 디렉티브를 추가하여 상품 설명이 존재할 때 이 상품의 설명을 DOM에 추가

맨 마지막 상품은 상품 설명이 없어 표시되지 않음(프로퍼티가 존재하지 않아 <p> 엘리먼트를 생성하지 않았음)

 

7. 상품 공유를 위한 버튼 추가

버튼의 click 이벤트를 바인딩해서 product-list.component.ts 파일에 정의된 share( ) 메서드와 연결

<button> 엘리먼트에서 발생하는 (click) 이벤트를 감지하려면 이벤트 이름을 소괄호( ( ) )로 감싸면 됨

버튼 확인 가능