[Angular] 0. Angular 개요

qwe8851·2022년 11월 22일

🅰️ Angular

목록 보기

4/9

🤔 Angular란?

앵귤러란 한마디로 "HTML과 TypeScript로 SPA 개발 시 사용되는 플랫폼이자 프레임워크"이다.

Angular 애플리케이션 아키텍처는 다음 기본원칙을 기반으로 한다.

기본 구성요소인 NgModules는 Component들의 묶음임
NgModules는 프로젝트 내의 연관된 코드들을 기능적인 집합들로 합침
따라서 앵귤러는 NgModules로 대표되는 하나의 집합으로 정의 됨
Angular는 최소 한 개의 root module을 가지는데, 이 root module은 bootstraping을 실현하며 대게 다수의 feature modules를 가짐

잠깐!
부트스트랩??? 루트모듈???
이렇게 보면 이해가 하나도 안간다...

앵귤러 프로젝트를 생성하면 자동으로 생성되는 파일 중 app.modules.ts파일이 있다.
@NgModule({
  declarations: [
    AppComponent
	// 다른 컴포넌트들~
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
요기에는 @ngModule이 들어가있고 declarations가 어쩌구저쩌구~ imports가 어쩌구~

쨋든!
마지막에서 3번째 줄을 보면 bootstrap이 있다.
bootstrap 안의 컴포넌트를 최상위 컴포넌트로 로드해야 한다는 것을 나타낸다.
(즉, 최상위 컴포넌트 = AppComponent)

컴포넌트는 "뷰"를 정의하고 "서비스"를 사용하는데,

"뷰"는 elements의 집합으로 앵귤러는 이를 프로그램 로직과 데이터에 따라 수정할 수 있음.
"서비스"는 뷰와 직접적으로 관련이 적은 특정한 기능을 제공함.
"서비스 프로바이더"는 컴포넌트에 의존성으로 주입될 수 있는데, 이는 코드를 모듈화하고, 재사용가능하며, 효율적으로 만들어준다.

컴포넌트와 서비스는 class이며,
데코레이터(@)가 클래스타입과 메타데이터(데이터를 설명하는 데이터)를 제공하며,
앵귤러가 이 클래를 어떻게 사용하는지 알려줌.

컴포넌트 class
메타데이터를 사용하면 뷰를 정의하는 템플릿컴포넌트에 연결해서 사용가능함.
템플릿은 일반 html에 앵귤러가 제공하는 directives와 binding markup을 더한 것으로, 이 둘을 활용해 html이 화면에 렌더링 되기 전에 수정 작업 진행이 가능함.

서비스 class
메타데이터를 사용하면 앵귤러 컴포넌트가 필요한 정보를 di(의존성 주입)을 통해 제공함

✨ 모듈

모든 Angular 앱은 보통 AppModule로 불리는 root module을 가지며, 이 root module은 앱을 실행시키는 bootstrap 방식을 제공한다.

NgModule은 다른 NgModules로부터 기능을 참조할 수 있고, 내 기능을 다른 NgModules가 사용하는것도 가능하다.
(ex. 라우터를 이용하기 위해 Router NgModules를 참조)

코드는 기능적으로 분리된 모듈로 작성하는 것은 애플리케이션을 관리하고 재사용성을 높일 수 있음.

추가적으로 이러한 방식은 필요한 코드만 로딩함으로써 초기 실행 단계에서 로딩되는 코드의 양을 중이는 지연로딩(아래에서 설명)을 가능하게 함.

✨ 컴포넌트

앵귤러앱은 적어도 하나 이상의 컴포넌트를 가짐
바로 컴포넌트 계층과 Dom을 연결하는 root component.

각각의 컴포넌트는 앱데이터와 로직을 가지는 클래스로 정의되고, 타겟 실행 환경에서 표시되는 템플릿과 연결되어 있음.

@Component()데코레이터는 바로 밑에 위치하는 클래스가 컴포넌트임을 알리고,
템플릿과 컴포넌트와 연관있는 메타데이터를 제공함.

데코레이터는 js클래스를 수정하는 함수라고 보면됨.
앵귤러는 특정한 메타데이터를 클래스에 부착시키는 다양한 데코레이터를 정의함으로써
시스템에 클래스의 의미와 작동 방식을 알려줌

✨ 템플릿과 디렉티브&데이터바인딩

템플릿

렌더링 되기 전 html을 수정하는 앵귤러 markup과 html을 조합해 구성

디렉티브

앱 데이터를 dom에 연결시키는 프로그램 로직과 바인딩 마크업을 제공
바인딩 마크업에는 2가지 종류가 잇담

Event Binding
유저가 타켓 환경에 제공한 인풋(키업, 마우스 등등)에 앱데이터를 업데이트시킴으로서 반응형 앱을 만듦
Property Binding
앱에서 처리된 데이터를 html에 표시

앵귤러는 two-way data binding을 제공한다.
이는 사용자의 행동으로 dom을 변화시켰을 때, 이러한 변화가 앵귤러의 프로그램 데이터에도 변화를 줄 수 있음을 의미한다. (그래서 리엑트나 뷰는 단방향 바인딩을 채택하고 있고, 앵귤러도 단방향바인딩을 사용하는게 좋다는 글을 어디선가 본 듯 한데... 더 찾아봐야 겠다.)

템플릿은 prips를 사용해 표시되는 데이터를 사전에 가공할 수 있다.
파이프에 대해 더 자세히 알아보고 싶다면 요기&요오기

✨ 서비스와 의존성 주입

뷰와 직접적인 연관은 없지만
여러 컴포넌트에 영향을 주는 데이터나 로직을 서비스클래스로 표현할 수 있다!

서비스 클래스는 클래스 앞에 @Ingjectable데코레이터를 삽입해서 정의한다.
이 데코레이터는 클래스가 다른 프로바이더가 의존성으로서 주입될 수 있게 하는 메타데이터를 제공한다.

DI는 컴포넌트 클래스를 유연하고 효율적으로 유지하게 해준다.
데이터를 서버로부터 받아오거나, 유저 인풋을 검증하거나, 콘솔에 로그를 찍는 작업을 직접저긴 연관이 적은 컴포넌트가 아닌 담당 서비스가 처리할 수 있당

✨ 라우팅

앱 화면 계층 사이를 이동할 수 있도록 경로를 지정해주는것
이는 다음과 같은 통용되는 브라우저 페이지 전환 방식을 기반으로 구현되었당

주소표시줄의 url클릭 시 해당 페이지로 이동
페이지나 브라우저 링크를 클릭 시 해당페이지 새창을 띄워 보여줌
브라우저간 이전/다음 버튼 클릭 시
사용자의 브라우저 히스토리 상 이전, 다음 페이지로 이동

라우터는 url을 닮은 경로를 페이지가 아닌 뷰에 맵핑시킴.

링크를 클릭하거나, 브라우저의 새 창을 로드하는 등의 사용자 동작이 일어나면 라우터는 브라우저 동작을 중단하고 뷰를 보여줌고 숨김으로써 페이지 전환을 시킴

라우터가 이동하려는 앱의 상태나 페이지가 특정 기능을 필요로 하고,
이를 위한 모듈이 아직 로딩되지 않았다면 "지연로딩(아래서 설명)을 활용해 모듈을 로딩한 뒤 뷰를 전환함.

라우터는 페이지 전환 방식과 데이터 상태에 따라 링크 Url을 해석하여 뷰를 보여줌
사용자가 버튼을 클릭하거나, 드롭박스 선택, 다른 로직이 발생시킨 동작에 의한 반응 등으로 새창을 띄워줄 수 있음.
이때 라우터는 브라우저 히스토리에 활동을 기록하며 이전/다음 동작을 가능케 한다:) 히힛

Navigation rules를 정의하기 위해서는 네비게이션 paths를 컴포넌트와 연결해야 한다.
path는 url처럼 생긴 문법을 사용하여 프로그램의 데이터를 포함시킬 수 있다.
이는 템플릿 문법이 뷰와 프로그램 데이터를 결합시키는 것과 비슷한 원리닷..

이후에 사용자의 인풋과 앱의 접근 규칙에 따라 어떤 뷰를 보여줄 지 정한는 프로그램 로직을 구현할 수 있다~!