프로그래밍 공부하는 K-POSTING 프로그래밍 공부하는 K-POSTING

서비스 서비스는 앱에서 공통으로 사용하는 상수나 함수, 기능을 모아놓은 단위이다. 앵귤러(Angular)는 컴포넌트와 서비스를 확실하게 구분해서 모듈화와 재사용 효율성을 높이는 것을 권장한다. 컴포넌트에서 뷰와 관련된 로직을 다른 로직과 분리하면 컴포넌트 클래스를 간결하게 구설할 수 있다.결과적으로 컴포넌트 클래스를 유연하고 효율적으로 유지할 수 있다. 이상적인 컴포넌트에는 해당 뷰에서 일어나는 사용자의 행동에 관련된 로직만 두는 것이 좋다. 컴포넌트에는 화면에 사용되는 프로퍼티나 데이터 바인딩에 사용하는 메소드만 정의하는 것이 좋다. 컴포넌트는 템플릿이 렌더링된 뷰와 모델을 정의하는 애플리게이션 로직을 중개하는 역할만 하는 것이 좋다. 의존성으로 주입 서버에나 데이터를 가져오는 로직이나 사용자의 입력을..

애플리케이션 구조 앵귤러(Angular) 애플리케이션은 컴포넌트(Component) 단위로 구성한다. 컴포넌트는 특정 영역을 담당하며 동작을 처리하는 단위이다. 앵귤러(Angular)에서 애플리케이션 구성과 디렉토리를 연결해 보고 디렉토리에는 어떤 파일이 있는지 살펴 보자. 컴포넌트 구성 3가지 1. 컴포넌트 클래스는 데이터를 관리하고 동작을 처리한다. 2. HTML 템플릿은 화면을 구성한다. 3. 컴포넌트용 스타일은 화면이 어떤 모습으로 표시될지 지정한다. 애플리케이션 구성 1. 다른 컴포넌트를 띄울 수 일도록 제일 먼저 로딩되는 컴포넌트 2. 온라인 샵의 이름과 주문 버튼을 표시하는 컴포넌트 3. 상품 목록을 표시하는 컴포넌트 디렉토리 구조 1. app 디렉토리 최상위 모듈(NgModule) 과 컴포..

앵귤러(Angular) 컴포넌트는 컴포넌트 클래스에 @Component 데코레이터를 붙여 정의한다. 이때 데코레이터 함수에 컴포넌트의 특성을 정의하는 메타데이터를 함께 전달한다. 아래 코드를 보면, HeroListComponenet는 단순한 클래스이다. 앵귤러(Angular)에만 사용하는 문법은 없는 것을 확인할 수 있다. @Component 데코레이터를 붙이기 전까지 이 클래스는 컴포넌트로 등록되지 않는다. 컴포넌트 메타데이터는 이 컴포넌트가 앵귤러(Angular)의 구성요소로써 어떻게 생성되고 어떤 뷰를 정의하고 동작할지 정의한다. 좀 더 자세하게 이야기하면, 뷰는 컴포넌트 메타데이터에서 지정하는 외부 템플릿 파일이나 인라인 템플릿이 컴포넌트 코드와 연결되면서 정의된다. 템플릿을 외부 파일에서 컴포넌..

모듈 소개 앵귤러(Angular) 애플리케이션은 앵귤러(Angular)에서 제공하는 NgModule 라는 모듈 체계로 구성한다. NgModule 은 애플리케이션 도메인이나 작업 흐름, 기능이 연관된 앵귤러(Angular) 구성 요소들을 묶어놓은 단위이다. NgModule 에는 컴포넌트나 서비스 프로바이더 등이 포함될 수 있으며, NgModule의 일부를 외부로 공개할 수도 있고, 다른 NgModule 에서 이 부분을 가져와서 사용할 수도 있다. 모든 앵귤러(Angular) 애플리케이션에 최상위 모듈이 반드시 존재하며, 이 모듈은 보통 app.module.ts 파일에 AppModule 라고 정의한다. 애플리케이션은 이 NgModule 을 부트스트랩하면서 시작된다. 애플리케이션의 규모가 작다면 NgModul..