프론트엔드/앵귤러 (41) 썸네일형 리스트형 앵귤러 directives - ngFor 템플릿의 구조를 변경하는 Structural directive의 하나로 한 요소에 하나의 다른 구조 디렉티브와 사용이 불가능합니다. 사용예시 1. 일반 for 문 ID: {{i}} First Name: {{ u.firstName }} Last Name: {{ u.lastName }} Age: {{ u.age }} // ngfor1.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-ngfor1', templateUrl: './ngfor1.component.html', styleUrls: ['./ngfor1.component.css'], }) export class Ngfor1Component .. 앵귤러 (Front) - 배포하기 (Vercel) 서버를 사용하지 않은 앵귤러 프로젝트 (Static)는 간단하게 배포가 가능한데요 다양한 플랫폼 중 오늘은 Vercel를 통해 배포해 보겠습니다. https://vercel.com/ Vercel: Develop. Preview. Ship. For the best frontend teams Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. vercel.com Vercel 메인에서 우측에 'Add New' -> 'Project'를 선택 연결을 원하는 플랫폼을 선택합니다 (저는 깃을 선택했습니다). 원하는 레포를.. 앵귤러 (Front) - 배포하기 (Netlify) 서버를 사용하지 않은 앵귤러 프로젝트 (Static)는 간단하게 배포가 가능한데요 다양한 플랫폼 중 오늘은 Netlify를 통해 배포해 보겠습니다. Develop and deploy websites and apps in record time | Netlify Develop and deploy websites and apps in record time | Netlify Accelerate the time to deploy your websites and apps. Bring your integrations and APIs together on one powerful serverless platform. Get started for free! www.netlify.com Netlify로 이동하여 'Add n.. 앵귤러 - Observable 하나의 웹사이트는 여러 개의 페이지로 구성되죠, 발달된 웹사이트 개발기술로 웹사이트에서 각각의 페이지로 이동할 때 너무 자연스러워 별개의 페이지라 상상하기 힘들지만 실제로는 각 페이지는 독립된 파일로 서로 간에 상태를 공유하거나 정보를 주고받는 것도 상상 이상으로 복잡한 경우가 많습니다. 전통적인 애플리케이션에서 이러한 정보의 공유는 해당 페이지를 따로 만들거나 서버에 공통으로 사용할 수 있는 데이터를 구축하고 이를 요청하고 갱신하는 형태로 이루어졌는데요. 앵귤러는 Single-Page Application으로 화면 내에 특정 컴포넌트만 교체하는 형식으로 구현되기 때문에 이러한 전통적인 방식은 효율성을 떨어뜨릴 수 있는데요. Observable은 이러한 문제를 해결하고 각 컴포넌트 간에 데이터공유와 상태.. 앵귤러 폼 - 템플릿 드리븐 폼 앵귤러 template-driven form을 설정하는 방법을 보겠습니다. 먼저, 폼을 사용하기 위해서는 앵귤러 폼 라이브러리에서 forms 모듈을 가져와야 합니다. //scr/app/app.module.ts import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ A.. 앵귤러 - 스타일 라이브러리(부트스트랩, 제이쿼리, 폰트어썸) 라이브러리는 간단한 설정만으로 작성된 코드를 사용할 수 있게 해 주기 때문에 작업속도를 배가시켜 줍니다. 앵귤러도 다양한 라이브러리와 연동이 가능한데 오늘은 앵귤러 애플리케이션과 다양한 라이브러리를 연결하는 방법을 살펴보겠습니다 HTML 삽입 미리보기할 수 없는 소스 앵귤러 템플릿 - Pipes 파이프는 템플릿에서 사용가능한 function들을 말합니다. 사용방법 사용은 아래와 같이 변화를 주고자 하는 값의 우측에 ' | ' 기호를 두고 사용하고자 하는 파이프를 호출하여 사용합니다. {{ value | pipeName }} 앵귤러 자체 파이프들 1. date Date 파이프를 원시타입 변수의 값이 바뀌거나 참조된 객체가 바뀔 때마다 작동합니다. {{ value | date : format : timezone : locale }} {{ value | date : 'short' }} {{ value | date : 'medium' }} {{ value | date : 'long' }} {{ value | date : 'full' }} {{ value | date : 'MM-dd-yyyy' }} {{.. 앵귤러 템플릿 - Template Reference Variable 템플릿 참조 변수는 템플릿에 한 요소가 다른 요소를 참조할 수 있게 해 줍니다. 변수 생성은 요소에 #과 함께 이름을 지정합니다. 이후 다른 요소에서 해당 요소를 참조하여 값 등을 사용하는 것이 가능합니다. Send 참조 Angular angular.io 이전 1 2 3 4 5 6 다음
