Engineering_S/W & H/W

  1. 수동으로 Component 생성 사진1) manul 폴더및 파일생성 // src/app/manual/manual.component.ts import { Component } from '@angular/core' ; @ Component ({ selector : 'app-manual' , // component명칭을 작성한다. templateUrl : './manual.component.html' , // 해당 component가 사용할 html 템플릿 주소를 입력한다. }) export class ManualComponent {} 코드1) ts파일 작성 <!-- src/app/manual/manual.component.html --> <h1> This component was build by manual! </h1> 코드2) html파일 작성 // src/app/app.module.ts import { NgModule } from '@angular/core' ; import { BrowserModule } from '@angular/platform-browser' ; import { AppComponent } from './app.component' ; import { ManualComponent } from './manual/manual.component' ; @ NgModule ({ declarations : [ AppComponent , ManualComponent ], // declarations에 components class를 추가한다. imports : [ BrowserModule ], providers : [], bootstrap : [ AppComponent ], }) export class AppModule {} 코드3) 앱 모...

기존의 React를 이용하여 props를 전달할때 시작지점에서 끝나는 지점까지 전달을 해야하는 문제가 있었습니다. 전달해야 할 단계가 적으면 상관없지만 단계가 많으면 코드가 그만큼 복잡해 집니다.  그림1) React만 사용할시 Redux를 사용하지 않을시 각 단계별로 Props을 전달해야 합니다. 그림2) Redux 사용시 하지만 Redux을 사용하면 Stor을 통해서 State의 접근(파란 화살표)이 가능하다.   그림3) Redux 개념  React를 사용하다 보면 data를 전달히가 위해서 여러 단계를 거쳐야 하는것을 알수 있습니다. 문제는 그 단계가 지나치게 많거나 복잡해 졌을때 코드를 유지 관리하기 어려운 점이 있습니다. 이를 해결하기 위해 Reducx가 탄생했고 그림3와 같은 단계로 Redux가 동작이 됩니다. 코드를 작성시 글이 길어지므로 다음 작성때 그림3과 코드를 비교하도록 하겠습니다. Redux : "Redux is a predictable state container for JavaScript apps" 다음글 : Redux - 개념정리(비유 및 코드)