Angular 애플리케이션을 빌드하는 방법은 무엇인가요?
Angular는 동적이고 반응이 빠른 복잡한 웹 애플리케이션을 구축하는 데 널리 사용되는 오픈 소스 프레임워크입니다. Angular는 2010년에 Google에서 “AngularJS”라는 이름으로 처음 개발했습니다.
Angular를 사용하면 깔끔하고 체계적인 코드 구조로 동적인 단일 페이지 애플리케이션을 만들 수 있습니다.
Angular는 타입 검사, 인터페이스 및 클래스와 같은 기능을 언어에 추가하는 JavaScript의 상위 집합인 TypeScript를 사용합니다. 따라서 Angular 코드는 유지 관리가 더 쉽고 오류가 덜 발생합니다.
Angular로 웹 개발을 간소화하려면 Back4app과 같은 서비스형 백엔드(BaaS) 솔루션을 사용하는 것이 도움이 됩니다.
Back4app은 인증, 데이터 저장, 서버 측 로직 등의 기능을 갖춘 사전 구축된 백엔드 인프라를 제공합니다.
따라서 백엔드 개발의 복잡성에 대한 걱정 없이 애플리케이션의 프런트엔드 구축에만 집중할 수 있습니다.
이 문서에서는 Angular를 살펴보고 Angular와 Back4app을 사용하여 기본적인 블로그 애플리케이션을 구축합니다.
Contents
앵귤러의 장점
Angular는 많은 장점으로 인해 개발자들 사이에서 인기를 얻고 있습니다. 다음은 Angular의 주요 장점 중 일부입니다:
양방향 데이터 바인딩
양방향 데이터 바인딩은 시간을 절약하고 생산성을 높여주는 기능으로, Angular 애플리케이션의 품질을 향상시킵니다. 양방향 데이터 바인딩을 사용하면 모델(데이터)에 대한 변경 사항이 뷰(UI)에 자동으로 반영됩니다.
모델에 대한 모든 변경 사항은 뷰에 즉시 반영됩니다. 따라서 모델과 뷰를 동기화하기 위해 상용구 코드를 작성할 필요가 없으므로 복잡하고 동적인 애플리케이션을 더 쉽고 빠르게 개발할 수 있습니다.
종속성 주입
종속성 주입은 구성 요소와 서비스 간의 종속성을 보다 쉽게 관리할 수 있도록 해주는 Angular의 중요한 기능입니다. 종속성 주입은 Angular 애플리케이션의 안정성, 유지보수성 및 테스트 가능성을 향상시키는 강력한 기능입니다.
Angular의 종속성 주입을 사용하면 컴포넌트와 서비스가 다른 컴포넌트와 서비스에 대한 종속성을 선언할 수 있습니다. 그러면 종속성 주입 시스템이 이러한 종속성을 자동으로 생성하고 제공하는 작업을 대신합니다. 따라서 종속성을 수동으로 생성하고 관리할 필요가 없으므로 오류의 위험이 줄어듭니다.
Angular의 종속성 주입 시스템을 사용하면 종속성을 쉽게 관리하고 작성해야 하는 코드의 양을 줄일 수 있습니다.
컴포넌트 기반 아키텍처
Angular의 컴포넌트 기반 아키텍처를 사용하면 복잡한 사용자 인터페이스를 재사용 가능한 작은 컴포넌트로 분해하여 쉽게 구축할 수 있습니다.
구성 요소를 다른 애플리케이션 부품에 쉽게 재사용할 수 있습니다. 구성 요소를 독립적으로 개발할 수 있으므로 움직이는 부분이 많은 복잡한 애플리케이션을 더 쉽게 관리할 수 있습니다. 또한 이 아키텍처는 구성 요소를 분리하여 개별적으로 테스트할 수 있으므로 코드 테스트 및 디버깅이 더 쉬워집니다.
타입스크립트
타입스크립트는 정적 타입 검사, 인터페이스, 클래스 및 기타 기능을 추가한 자바스크립트의 상위 집합입니다. Microsoft에서 관리하는 오픈 소스 언어이며 대규모 웹 애플리케이션을 개발하는 데 널리 사용됩니다.
Angular는 TypeScript로 작성되었습니다. 따라서 더 나은 툴링과 더 강력한 개발 환경을 제공합니다. TypeScript의 정적 타이핑을 통해 개발자는 런타임이 아닌 컴파일 타임에 오류를 포착할 수 있으므로 코드를 유지 관리하고 리팩터링하기가 더 쉬워집니다.
대규모 커뮤니티
Angular에는 크고 활발한 개발자 커뮤니티가 있으며, 이는 여러 가지 이유로 매우 유용할 수 있습니다.
대규모 커뮤니티에서는 튜토리얼, 문서, 포럼 등 다양한 리소스를 제공합니다. 이러한 리소스는 Angular를 처음 사용하거나 특정 문제에 대한 해결책을 찾고 있는 개발자에게 매우 유용할 수 있습니다.
커뮤니티가 크다는 것은 많은 개발자가 Angular용 타사 플러그인 및 확장 프로그램을 만들고 공유하여 프레임워크를 개선하기 위해 적극적으로 노력하고 있다는 의미입니다. 이렇게 하면 기존 코드를 활용하여 프로젝트에 새로운 기능을 추가할 수 있으므로 시간과 노력을 절약할 수 있습니다.
앵귤러의 한계
Angular는 웹 애플리케이션을 구축하기 위한 강력하고 인기 있는 프레임워크이지만, 몇 가지 제한 사항을 알고 있어야 합니다. Angular의 몇 가지 제한 사항은 다음과 같습니다:
가파른 학습 곡선
Angular는 웹 개발에 많은 새로운 개념과 접근 방식을 도입하기 때문에 일부 개발자에게는 배우기가 어려울 수 있습니다. 모듈, 컴포넌트, 서비스, 의존성 주입 및 반응형 프로그래밍에 대해 배우는 데 상당한 시간을 할애해야 할 수도 있습니다.
대형 사이즈
Angular는 다른 프런트엔드 프레임워크에 비해 비교적 큰 프레임워크입니다. Angular의 크기가 큰 이유는 주로 양식 처리, 라우팅 및 데이터 관리와 같은 많은 기본 제공 기능을 포함하는 광범위한 기능 세트 때문입니다.
Angular의 크기가 크면 웹 애플리케이션의 로드 시간이 느려져 사용자 경험에 부정적인 영향을 미칠 수 있습니다. 특히 인터넷 연결 속도가 느린 사용자에게는 더욱 그렇습니다.
Angular의 규모가 크면 복잡한 프로젝트를 개발하고 유지 관리하기가 더 어려워질 수 있습니다.
제한된 SEO
Angular의 SEO 기능이 제한적인 이유는 주로 단일 페이지 애플리케이션(SPA) 프레임워크이기 때문입니다. SPA는 전적으로 브라우저에서 실행되도록 설계되었기 때문에 HTML 코드가 JavaScript를 사용하여 동적으로 생성됩니다. 따라서 검색 엔진 크롤러가 Angular 기반 웹사이트의 콘텐츠를 정확하게 색인화하기 어렵습니다.
블로그 애플리케이션 구축
Angular 애플리케이션을 만들고 이름을 “blog-application”으로 지정합니다. Angular 애플리케이션을 만들려면 터미널의 프로젝트 디렉터리에서 다음 명령을 실행합니다:
ng new blog-application
Angular 애플리케이션을 만든 후에는 두 개의 컴포넌트를 생성합니다. 두 컴포넌트는 홈과 포스트 컴포넌트입니다. 컴포넌트를 생성한 후에는 컴포넌트를 라우팅합니다.
컴포넌트를 생성하려면 다음 명령을 실행합니다:
cd blog-application
ng generate component home-component
ng generate component post-component
컴포넌트를 생성한 후에는 app-routing.module.ts 파일에서 라우팅을 구성합니다.
이렇게요:
//app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponentComponent } from './home-component/home-component.component';
import { PostComponentComponent } from './post-component/post-component.component';
const routes: Routes = [
{path: '', component: HomeComponentComponent},
{path: 'post', component: PostComponentComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
위의 코드 블록은 경로 배열에 두 개의 경로를 정의합니다. 홈 컴포넌트 컴포넌트에 대한 경로에는 빈 경로가 있습니다. 빈 경로는 애플리케이션을 렌더링하는 즉시 홈 컴포넌트 컴포넌트가 표시됨을 의미합니다.
PostComponentComponent 경로는 ‘post’라는 경로로 정의되며, 이 경로로 이동하면 PostComponentComponent가 렌더링되어 뷰에 표시됩니다.
지정된 경로로 이동하려면 애플리케이션에 헤더를 추가합니다. 앱 컴포넌트.html 파일에 헤더를 생성합니다. 헤더에는 여러 경로로 이동하는 요소가 포함됩니다.
예를 들어
<!--app.component.html-->
<div>
<div class="header">
<a routerLink=""><h2>Blog</h2></a>
<a routerLink="post"><button>write</button></a>
</div>
<router-outlet></router-outlet>
</div>
헤더 div에는 두 개의 자식 앵커 요소가 포함되어 있습니다. 앵커 요소는 h2 요소와 버튼 요소를 감싸고 있습니다. h2를 클릭하면 기본 경로로 이동하고 버튼 요소를 클릭하면 게시물 경로로 이동합니다. 라우터 아웃렛은 헤더 div 아래에 라우팅된 구성 요소를 표시합니다.
헤더를 생성한 후 앱 컴포넌트.scss 파일에서 헤더의 스타일을 지정합니다:
/* app.component.scss*/
.header{
display: flex;
justify-content: space-between;
padding: 1rem 0;
}
Back4App 통합
Back4app으로 애플리케이션 구축을 시작하려면 먼저 계정이 있는지 확인하세요. Back4app 계정이 없는 경우 제공된 지침을 따르세요:
- Back4app 웹사이트로 이동합니다.
- 홈페이지 오른쪽 상단에서 가입 버튼을 찾아 클릭합니다.
- 등록 양식을 작성하여 제출하세요.
등록이 완료되면 백4앱 계정에 로그인하여 다음과 같이 진행하세요:
- 오른쪽 상단에서 새 앱 버튼을 찾아 클릭합니다.
- 원하는 앱 이름을 입력할 수 있는 양식으로 이동합니다.
- 앱 이름을 입력하고 만들기 버튼을 선택하여 앱 생성 프로세스를 시작합니다.
‘만들기’ 버튼을 클릭하면 애플리케이션이 생성되고 애플리케이션 대시보드로 이동합니다.
애플리케이션을 Back4app에 연결하기
Angular 애플리케이션을 생성한 Back4app 애플리케이션에 연결하려면 Parse JavaScript SDK를 설치해야 합니다.
패키지 관리자에 따라 아래 명령어 중 하나를 실행하여 SDK를 설치합니다:
#using npm
npm install parse
or
#using yarn
yarn add parse
자바스크립트 구문 분석 SDK를 설치한 후 애플리케이션 ID와 자바스크립트 키를 받아야 합니다. Angular 애플리케이션을 Back4app 앱에 연결하려면 이 두 가지가 필요합니다.
Back4app에서 애플리케이션 ID 및 JavaScript 키를 검색하려면 대시보드에서 앱 설정을 선택하여 보안 및 키 섹션으로 이동합니다. 여기에서 Angular 애플리케이션을 Back4app에 연결하는 데 필요한 필수 키에 쉽게 액세스할 수 있습니다.
애플리케이션 ID와 자바스크립트 키를 검색한 후 애플리케이션에 안전하게 저장하세요.
app.component.ts 파일에서 Parse의 축소된 버전을 Parse에서 가져옵니다. 그런 다음 Parse에서 초기화 메서드를 호출합니다. 초기화 메서드는 애플리케이션 ID와 자바스크립트 키를 인수로 받습니다. 마지막으로 Parse의 serverURL을‘https://parseapi.back4app.com/’로 설정합니다.
이 작업이 완료되면 app.component.ts 파일은 다음과 같이 보일 것입니다:
//app.component.ts
import { Component } from '@angular/core';
import * as Parse from 'parse';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
}
Parse.initialize(PARSE_APPLICATION_ID, PARSE_JAVASCRIPT_KEY);
(Parse as any).serverURL = "<https://parseapi.back4app.com/>";
Back4app 애플리케이션에 데이터 추가
Back4App 애플리케이션에 데이터를 추가하려면 사용자로부터 데이터를 수신하는 양식을 작성합니다. 양식을 제출할 때 핸들서브밋 함수를 실행합니다. handleSubmit 함수에는 블로그 애플리케이션의 새 게시물을 백4앱 앱에 추가하는 로직이 포함됩니다.
이렇게요:
// post-component.component.ts
import { Component } from '@angular/core';
import * as Parse from 'parse';
@Component({
selector: 'app-post-component',
templateUrl: './post-component.component.html',
styleUrls: ['./post-component.component.scss']
})
export class PostComponentComponent {
data: postData = {
title: '',
body: '',
}
handleSubmit(){
try {
const Post = new Parse.Object("Post");
Post.set("title", this.data.title);
Post.set("body", this.data.body);
Post.save().then(() => {
console.log("New Post added successfully");
});
} catch (error) {
console.log(error);
}
}
}
interface postData {
title: string,
body: string
}
위의 코드 블록은 post-component.component.ts 파일**.** 핸들 서브밋 함수는 새 Parse Post 객체를 생성하고 제목 속성을 data.title 속성 값으로, 본문 속성을 data.body 속성 값으로 설정합니다. 마지막으로 Post.save()를 사용하여 Post 객체의 프로퍼티를 Parse 서버에 저장합니다.
데이터 속성은 양식을 통해 사용자로부터 값을 가져옵니다. 이를 위해 post-component.component.html 파일에 양식을 생성합니다.
이렇게요:
<!-- post-component.component.html -->
<form class="post" (ngSubmit)="handleSubmit()">
<input type="text" placeholder="Title..." name="title" [(ngModel)]="data.title" >
<textarea name="body" placeholder="Body..." cols="30" rows="10" [(ngModel)]="data.body"></textarea>
<button type="submit">Post</button>
</form>
ngModel은 제목 및 본문 입력 필드의 값을 데이터 속성에 바인딩합니다. ngSubmit은 post-component.ts 파일에 선언된 handleSubmit 함수를 호출하여 양식 제출을 처리합니다.
다음으로 컴포넌트의 스타일을 지정합니다. 포스트 컴포넌트의 SCSS 파일에 다음 코드를 입력합니다:
/* post-component.component.scss */
.post{
margin-block-start: 4rem;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
input{
border: none;
inline-size: 100%;
padding: 1rem;
border-radius: 7px;
&::placeholder{
color: #e2e2e2;
}
textarea{
border: none;
inline-size: 100%;
padding: 1rem;
&::placeholder{
color: #e2e2e2;
}
}
}
Back4app에서 데이터 가져오기
Back4app 애플리케이션에서 데이터를 가져오려면 데이터를 가져오려는 클래스에 대한 Parse 쿼리를 만듭니다. 쿼리는 ngOnInit 라이프사이클 후크에서 실행됩니다.
예를 들어
// home-component.component.ts
import { Component } from '@angular/core';
import * as Parse from 'parse';
@Component({
selector: 'app-home-component',
templateUrl: './home-component.component.html',
styleUrls: ['./home-component.component.scss']
})
export class HomeComponentComponent {
data: postData[] = [];
async ngOnInit() {
try {
const query = new Parse.Query("Post");
const post = await query.find();
this.data = post;
} catch (error) {
console.log(error);
}
}
}
interface postData {
id: string,
get: any,
}
위의 코드 블록은 Parse.Query() 메서드를 사용하여 Back4app 앱의 데이터베이스에서 “Post” 객체를 검색합니다. 그런 다음 Parse.Query() 호출 결과에 대해 Parse SDK의 find 메서드를 호출하여 쿼리 결과가 포함된 배열을 반환합니다. 마지막으로 반환된 배열을 데이터 변수에 할당합니다.
데이터 배열을 사용하여 HTML 템플릿을 렌더링합니다:
<!-- home-component.component.html -->
<div class="home">
<div class="post" *ngFor="let post of data">
<h3>{{ post.get('title') }}</h3>
<p>{{ post.get('body') }}</p>
<button>Delete</button>
</div>
</div>
ngFor 지시문은 배열을 반복하여 div로 감싸진 HTML 요소를 생성합니다. post.get() 메서드는 Back4App 데이터베이스에서 속성의 제목 및 본문 속성 값을 검색합니다.
이제 컴포넌트의 SCSS 파일에 다음 코드를 추가하여 컴포넌트의 스타일을 지정할 수 있습니다:
/* home-component.component.scss */
.home{
display: flex;
flex-direction: column;
gap: 2rem;
margin-block-start: 4rem;
.post{
border-radius: 12px;
padding: 1rem;
&:hover{
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
background-color: #e2e2e2;
}
h3{
text-transform: uppercase;
margin-block-end: 0.4rem;
}
button{
margin-block-start: 1rem;
}
}
}
Back4app 애플리케이션에서 데이터 삭제하기
Back4App 애플리케이션에서 데이터를 삭제하려면 파괴 메서드를 사용하여 데이터베이스에서 해당 레코드를 제거합니다. 홈-컴포넌트.component.ts 파일에 deletePost 함수를 생성합니다. deletePost 함수에는 주어진 ID를 기준으로 백4앱 앱의 데이터베이스에서 게시물을 삭제하는 로직이 포함됩니다.
이렇게요:
// home-component.component.ts
async deletePost(id: string) {
try {
const Post = Parse.Object.extend("Post");
const todo = new Post();
todo.id = id;
await todo.destroy();
const newData = this.data.filter( (item: postData) => item.id !== id )
this.data = newData;
} catch (error) {
console.log(error);
}
}
위의 코드 블록은 Parse.Object.extend 메서드를 사용하여 새 Post 객체를 만듭니다. 그런 다음 Post 객체의 id 속성을 함수에 전달된 id 매개 변수로 설정합니다.
그런 다음 Post 객체의 destroy 메서드를 호출하여 지정된 ID를 가진 게시물을 Back4app 데이터베이스에서 삭제합니다. 그런 다음 데이터 배열을 필터링하여 삭제된 게시물을 제외한 모든 게시물이 포함된 새 배열 newData를 반환합니다. 그런 다음 newData 배열이 데이터 변수에 할당됩니다.
home-component.component.ts 파일에서 deletePost 함수를 정의한 후에는 클릭 이벤트를 사용하여 컴포넌트의 HTML 파일에 있는 삭제 버튼에 함수를 바인딩합니다.
홈-컴포넌트.component.html 파일은 다음과 같은 모양이어야 합니다:
<!-- home-component.component.html -->
<div class="home">
<div class="post" *ngFor="let post of data">
<h3>{{ post.get('title') }}</h3>
<p>{{ post.get('body') }}</p>
<button (click)="deletePost(post.id)">Delete</button>
</div>
</div>
마지막으로, 아래 코드 블록을 styles.scss 파일에 추가하여 애플리케이션에 전역 스타일을 추가합니다:
/* styles.scss */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
inline-size: 50%;
margin: 0 auto;
background-color: #f2f2f2;
}
a{
text-decoration: none;
color: inherit;
}
button{
border: 1px #333333 solid;
padding: 0.3rem 0.5rem;
border-radius: 0.4rem;
background-color: inherit;
inline-size: min-content;
&:hover{
background-color: #333333;
color: #FFFFFF;
}
}
애플리케이션 테스트
애플리케이션을 테스트하려면 프로젝트의 터미널을 열고 아래 명령을 실행하세요:
ng serve
위의 명령은 애플리케이션을 컴파일하고 기본적으로 로컬 서버( http://localhost:4200 )에서 호스팅합니다.
애플리케이션이 실행되면 아래 이미지와 같은 UI가 표시됩니다:
쓰기 버튼을 클릭하면 포스트 컴포넌트로 이동합니다. 포스트 컴포넌트에는 입력 필드와 버튼이 있는 양식이 포함되어 있습니다.
포스트 컴포넌트는 다음과 같이 보일 것입니다:
입력 필드를 채운 후 게시 버튼을 클릭하면 입력값이 Back4app 데이터베이스에 추가됩니다. 이를 확인하려면 Back4app 애플리케이션 대시보드를 확인하거나 애플리케이션의 홈페이지로 다시 리디렉션하면 됩니다.
삭제 버튼을 클릭하면 게시글이 삭제됩니다. 예를 들어 ‘사자란 무엇인가요?’ 게시글은 삭제 버튼을 클릭하여 삭제합니다:
결론
Angular는 확장 가능하고 강력한 웹 애플리케이션을 구축하기 위한 강력한 프레임워크입니다. 모듈식 아키텍처, 강력한 데이터 바인딩, 광범위한 사전 빌드된 구성 요소가 특징입니다. 개발자 생산성 향상, 간소화된 개발 프로세스, 동적이고 반응성이 뛰어나며 성능이 우수한 사용자 인터페이스를 만들 수 있는 기능 등의 이점이 있습니다.
Back4app을 서비스형 백엔드 솔루션으로 사용하여 Angular 앱을 구축하면 개발을 크게 간소화하고 가속화할 수 있습니다. Back4app의 사전 구축된 인프라를 사용하면 인증 및 데이터 저장과 같은 백엔드 개발의 복잡성에 대한 걱정 없이 애플리케이션의 프론트엔드 제작에만 집중할 수 있습니다.
