앵귤러의 특징

앵귤러 기초 내용

컴포넌트

서비스

기타

ANG-TODO 코드 잼!

앵귤러를 처음 접해보고 진행한 프로젝트이다 보니 부족한 점이 있을 수 있으며 앵귤러의 철학과는 거리가 있을 수 있습니다.그렇지만 언제나 훈수는 환영입니다!

앵귤러 프로젝트 생성

npm install -g @angular/cli

ng new my-first-project

ng serve

서비스

데이터 모델

ng g i models/todo

export enum TodoState {
  DELETED = 'Deleted',
  DONE = 'Done',
  NORMAL = 'Normal',
}

export interface TodoType {
  id: number;
  todo: string;
  state: string;
}

내/외부 서비스 인터페이스

// src/app/db-saver/db-saver.interface.ts
import { TodoState, TodoType } from '../models/todos';

export interface iTodoDataSaver {
  add(data: string): void;
  allTodos: TodoType[];
  updateTodoState(id: number, toState: TodoState): void;
  delete(id: number): void;
}

추상 클래스

// src/app/db-saver/data-saver.ts
import { TodoState, TodoType } from '../models/todos';
import { iTodoDataSaver } from './data-saver.interface';

export abstract class TodoDBSaver implements iTodoDataSaver {
  todoObjBuilder(todo: string) {
    return {
      todo: todo,
      state: TodoState.NORMAL,
      id: Date.now(),
    };
  }

  abstract add(data: string): void;
  abstract allTodos: TodoType[];
  abstract updateTodoState(id: number, toState: TodoState): void;
  abstract delete(id: number): void;
}

외부 서비스 구현

// src/app/db-saver/db-saver.localdb.ts
export class LocalDBSaver implements TodoDBSaver {}

localDBSaver(todosObjData: TodoType[]) {
  try {
    localStorage.setItem(this.localDBKey, JSON.stringify(todosObjData));
  } catch (e) {
    console.log('LocalDBSaver save 에러');
  }
}

• 참고로 localStorage 에는 String 형태의 타입만 저장할 수 있습니다.

add 구현

add(todo: string) {
  const todoObj = this.todoObjBuilder(todo);
  const prevTodos = this.allTodos || [];
  let todoObjData;
  if (prevTodos.length === 0) {
    todoObjData = new Array(todoObj);
  } else {
    todoObjData = prevTodos.concat(todoObj);
  }
  this.localDBSaver(todoObjData);
}

getter allTodos 구현

get allTodos() {
  const localData = JSON.parse(
    localStorage.getItem(this.localDBKey) || '[]'
  ) as TodoType[];
  return localData;
}

updateTodoState 구현

updateTodoState(id: number, toState: TodoState) {
  const allTodos = this.allTodos;
  const todoIdx = allTodos.findIndex((todo) => todo.id === id);
  allTodos[todoIdx].state = toState;
  this.localDBSaver(allTodos);
}

delete 구현

delete(id: number) {
  const allTodos = this.allTodos;
  const filteredTodos = allTodos.filter((todo) => todo.id !== id);
  this.localDBSaver(filteredTodos);
}

내부 서비스 구현

import { Injectable } from '@angular/core';
import { DBSaver } from '../data-saver/data-saver';
import { TodoState } from '../models/todos';

@Injectable({
  providedIn: 'root',
})
export class TodosService {
  constructor(private dataSaver: DBSaver) {}

  get allTodos() {
    return this.dataSaver.allTodos;
  }

  add(todo: string) {
    this.dataSaver.add(todo);
  }

  delete(id: number) {
    this.dataSaver.delete(id);
  }
  updateState(id: number, state: TodoState) {
    this.dataSaver.updateTodoState(id, state);
  }
}

@Injectable 및 모듈

providers: [{
  // 의존성 인스턴스의 타입(토큰, Token)
  provide: GreetingService,
  // 의존성 인스턴스를 생성할 클래스
  useClass: GreetingService
}]

@Component({
  ...
  providers: [GreetingService] /* @Component 프로바이더 */
})

느슨한 결합

컴포넌트 구현

@NgModule({
  declarations: [AppComponent, HeaderComponent, TodoListComponent],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    RouterModule.forRoot([{ path: '', component: TodoListComponent }]),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

• 컴포넌트와 관련한 부분은 없는 것이 맞습니다!

AppComponent

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ang-todo';
}

<app-header></app-header><div class="container"><router-outlet></router-outlet></div>

app-header

ng g c app-header

todo-list

// todo-list.component.ts
@Component(~~)
export class TodoListComponent {
  db = new TodosService(new LocalDBSaver());
  newTodo = new FormControl('');

  addTodo(e: any) {
    e.preventDefault();
    if (!this.newTodo.value) return;
    this.db.add(this.newTodo.value);
    this.newTodo.setValue('');
  }

  delTodo(id: number) {
    this.db.delete(id);
  }

  updateState(id: number, nowState: string) {
    if (nowState === TodoState.NORMAL) this.db.updateState(id, TodoState.DONE);
    else this.db.updateState(id, TodoState.NORMAL);
  }
}

<li *ngFor="let item of db.allTodos">
  <></>
</li>

<ng-template ngFor let-item [ngForOf]="db.allTodos"><element>...</element></ng-template><ng-template ngFor let-item [ngForOf]="db.allTodos" let-i="index" let-odd="odd" [ngForTrackBy]="trackById"><element>...</element></ng-template>

<div *ngIf="item.state === 'Done'; then done; else none"></div><ng-template #done>~</ng-template><ng-template #none>~</ng-template>

<input
	type="text"name="newTodo"required="true"[formControl]="newTodo"/>

<input type="text" [value]="name" (input)="name=$event.target.value">

완성

타 프레임워크와의 차이 및 DX

VS 리액트

OOP 그리고 구조

Form과 관련된 개발 경험 + 디렉티브

앵귤러의 개발 경험

너무 좋다! 근데 왜 앵귤러는 묻혀버린걸까