앵귤러(Angular)/앵귤러(Angular) 시작하기
-
웹 앱 프레임워크 앵귤러(Angular) 서비스와 의존성 주입앵귤러(Angular)/앵귤러(Angular) 시작하기 2022. 4. 12. 16:56
서비스 서비스는 앱에서 공통으로 사용하는 상수나 함수, 기능을 모아놓은 단위이다. 앵귤러(Angular)는 컴포넌트와 서비스를 확실하게 구분해서 모듈화와 재사용 효율성을 높이는 것을 권장한다. 컴포넌트에서 뷰와 관련된 로직을 다른 로직과 분리하면 컴포넌트 클래스를 간결하게 구설할 수 있다.결과적으로 컴포넌트 클래스를 유연하고 효율적으로 유지할 수 있다. 이상적인 컴포넌트에는 해당 뷰에서 일어나는 사용자의 행동에 관련된 로직만 두는 것이 좋다. 컴포넌트에는 화면에 사용되는 프로퍼티나 데이터 바인딩에 사용하는 메소드만 정의하는 것이 좋다. 컴포넌트는 템플릿이 렌더링된 뷰와 모델을 정의하는 애플리게이션 로직을 중개하는 역할만 하는 것이 좋다. 의존성으로 주입 서버에나 데이터를 가져오는 로직이나 사용자의 입력을..
-
웹 앱 프레임워크 앵귤러(Angular) 애플리케이션 구조와 디렉토리 구조앵귤러(Angular)/앵귤러(Angular) 시작하기 2022. 4. 9. 17:48
애플리케이션 구조 앵귤러(Angular) 애플리케이션은 컴포넌트(Component) 단위로 구성한다. 컴포넌트는 특정 영역을 담당하며 동작을 처리하는 단위이다. 앵귤러(Angular)에서 애플리케이션 구성과 디렉토리를 연결해 보고 디렉토리에는 어떤 파일이 있는지 살펴 보자. 컴포넌트 구성 3가지 1. 컴포넌트 클래스는 데이터를 관리하고 동작을 처리한다. 2. HTML 템플릿은 화면을 구성한다. 3. 컴포넌트용 스타일은 화면이 어떤 모습으로 표시될지 지정한다. 애플리케이션 구성 1. 다른 컴포넌트를 띄울 수 일도록 제일 먼저 로딩되는 컴포넌트 2. 온라인 샵의 이름과 주문 버튼을 표시하는 컴포넌트 3. 상품 목록을 표시하는 컴포넌트 디렉토리 구조 1. app 디렉토리 최상위 모듈(NgModule) 과 컴포..
-
웹 앱 프레임워크 앵귤러(Angular) 컴포넌트 메타데이터앵귤러(Angular)/앵귤러(Angular) 시작하기 2022. 4. 8. 15:36
앵귤러(Angular) 컴포넌트는 컴포넌트 클래스에 @Component 데코레이터를 붙여 정의한다. 이때 데코레이터 함수에 컴포넌트의 특성을 정의하는 메타데이터를 함께 전달한다. 아래 코드를 보면, HeroListComponenet는 단순한 클래스이다. 앵귤러(Angular)에만 사용하는 문법은 없는 것을 확인할 수 있다. @Component 데코레이터를 붙이기 전까지 이 클래스는 컴포넌트로 등록되지 않는다. 컴포넌트 메타데이터는 이 컴포넌트가 앵귤러(Angular)의 구성요소로써 어떻게 생성되고 어떤 뷰를 정의하고 동작할지 정의한다. 좀 더 자세하게 이야기하면, 뷰는 컴포넌트 메타데이터에서 지정하는 외부 템플릿 파일이나 인라인 템플릿이 컴포넌트 코드와 연결되면서 정의된다. 템플릿을 외부 파일에서 컴포넌..
-
웹 앱 프레임워크 앵귤러(Angular) 모듈 소개앵귤러(Angular)/앵귤러(Angular) 시작하기 2022. 4. 6. 09:18
모듈 소개 앵귤러(Angular) 애플리케이션은 앵귤러(Angular)에서 제공하는 NgModule 라는 모듈 체계로 구성한다. NgModule 은 애플리케이션 도메인이나 작업 흐름, 기능이 연관된 앵귤러(Angular) 구성 요소들을 묶어놓은 단위이다. NgModule 에는 컴포넌트나 서비스 프로바이더 등이 포함될 수 있으며, NgModule의 일부를 외부로 공개할 수도 있고, 다른 NgModule 에서 이 부분을 가져와서 사용할 수도 있다. 모든 앵귤러(Angular) 애플리케이션에 최상위 모듈이 반드시 존재하며, 이 모듈은 보통 app.module.ts 파일에 AppModule 라고 정의한다. 애플리케이션은 이 NgModule 을 부트스트랩하면서 시작된다. 애플리케이션의 규모가 작다면 NgModul..
-
웹 앱 프레임워크 앵귤러(Angular) 최상위 모듈 메터데이터 프로퍼티앵귤러(Angular)/앵귤러(Angular) 시작하기 2022. 4. 5. 15:02
앵귤러(Angular) 최상위 NgModule NgModule은 클래스에 @NgModule() 데코레이터를 붙여서 정의한다. 모듈을 정의하는 메타데이터 객체를 전달하면서 실행한다. 메타데이터 프로퍼티 declarations 해당 NgModule에 포함될 컴포넌트나 디렉티브, 파이프를 선언한다. exports 모듈의 구성 요소를 다른 NgModule이나 컴포넌트 템플릿으로 재사용할 수 있도록 외부로 공개한다. imports 다른 모듈에서 공개한 클래스를 지금 정의하는 NgModule에 가져올 때 사용한다. providers NgModule 컨텍스트 안에서 사용하는 서비스 프로바이더를 지정한다. NgModule 안에서 사용하는 서비스는 이렇게 지정된 서비스 프로바이더를 사용해서 생성된다. 필요한 경우에는 하..
-
웹 앱 프레임워크 앵귤러(Angular) 기본 개념앵귤러(Angular)/앵귤러(Angular) 시작하기 2022. 3. 31. 14:12
앵귤러(Angular) 아키텍처 구현 앵귤러(Angular)는 HTML과 TypeScript로 클라이언트 애플리케이션을 개발할 때 사용하는 플랫폼이자 프레임워크이다. 앵귤러(Angular)는 TypeScript로 개발되었고 기본 제공되는 프레임워크의 기능은 라이브러리를 참조해 애플리케이션에 활용할 수 있다. 앵귤러(Angular) 애플리케이션을 설계하고 구축하는 데 사용하는 패턴과 기술 즉 아키텍처도 이 환경을 기반으로 구현한다. 최상위 모듈 AppModule 앵귤러(Angular) 애플리케이션은 NgModule를 초기화하고 실행하는 즉 부트스트랩하면서 시작된다. 모든 앵귤러(Angular) 애플리케이션에는 부트스트랩을 하기 위해 최상위 모듈을 꼭 갖는다. 이 모듈은 app.module.ts파일에 App..
-
웹 앱 프레임워크 앵귤러(Angular)란?앵귤러(Angular)/앵귤러(Angular) 시작하기 2022. 3. 25. 14:34
앵귤러(Angular)란? Angular는 TypeScript를 기반으로 개발된 개발 플랫폼이다. 동시에 확장가능한 컴포너트 구조로 웹 애플리케이션을 만드는 프레임워크이다. 또한 라우팅, 폼 관리, 클라이언트 서버 통신 등 웹 개발에 필요한 모든 라이브러리를 조화롭게 통합한 모임집이며 애플리케이션 코드를 개발, 빌드, 테스트, 수정, 업데이트에 필요한 개발자 도구를 제공한다. Angular는 개발자, 라이브러리 개발자, 컨텐츠 작성자가 총 170만명 이상에 달하며, 혼자하는 프로젝트는 물론이고 기업 애플리케이션에도 활용할 수 있으며, 최신 기술을 쉽게 도입할 수 있도록 설계되어 적은 노력으로 큰 생산성 향상을 낼 수도 있다.