컴포넌트 (4) 썸네일형 리스트형 공용 컴포넌트 - 리액티브 폼 인풋 컴포넌트의 재 상용성은 앵귤러나 리액트 등 프레임워크가 제공하는 장점 중 하나로 같은 코드를 중복작성할 필요성을 줄여줍니다. 오늘은 앵귤러에서 공용 인풋 컴포넌트를 만들어 보겠습니다. 구현하기 모듈추가 리액티브 폼즈 모듈을 모듈클래스에 추가합니다 컴포넌트 생성 공용으로 상용할 컴포넌트를 생성합니다 ng g c components/shared/input 생성한 컴포넌트 클래스 파일에 폼 컨트롤과 돔요소를 연결하는 인터페이스를 구현합니다 import { ControlValueAccessor } from '@angular/forms'; 구현된 메서드는 사용하지 않음으로 아래와 같이 정리 후 필요한 코드를 추가합니다. 인풋의 타입과 레이블은 인풋마다 다르므로 @Input을 통해 필드로 설정하여 변경 가능하도록 .. 앵귤러 매터리얼 앵귤러에서 제공하는 UI 컴포넌트인 앵귤러 매터리얼을 추가해 보겠습니다.라이브러리 설치프로젝트를 열고 아래 명령어를 실행합니다. npm으로도 설치 가능하지만 ng add를 통해서 설치하게 되면 모듈에 등록하는 것 빼고 컴포넌트 사용을 위한 모든 구성이 완료되므로 편리합니다.ng add @angular/material실행을 하면 실행 여부를 다시 묻는 데 'yes'를 선택하고 테마선택, 글로벌 폰트 스타일, 애니메이션 등의 사용여부를 결정합니다.모듈에 추가추가된 라이브러리는 모듈에 추가해야 사용이 가능합니다. 정리를 위해 'app.module.ts' 파일에 바로 추가하지 않고 따로 모듈을 생성하여 추가하겠습니다. 아래 커맨드를 실행하여 모듈을 만듭니다.ng g m modules/angular-materia.. 자바스크립트 컴포넌트 - 확장 검색 창 구현 먼저 HTML에 검색창과 버튼을 생성합니다. CSS를 활용하여 기본 스타일을 적용합니다. /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; align-items: center; justify-content: center; background-color: lightcoral; } .input-box { position: relative; } input { height: 50px; width: 50px; border-radius: 15px; transition: 0.4s ease; font-size: 1.7rem; border: none; } input:focus {.. 앵귤러 콤포넌트 앵귤러 애플리케이션은 컴포넌트라는 조각으로 만들어집니다. 컴포넌트는 기본적으로 HTML 템플릿, CSS, TypeScript class 파일로 구성되는데요. TypeScript는 JavaScript의 진화된 버전으로 애플리케이션의 기능 (행동)을 담당합니다. 사용방법 컴포넌트는 수동으로 만들거나 앵귤러 CLI를 사용해서 만들 수 있는데요. 수동으로 만드는 경우 파일생성부터 각 파일 구성 및 모듈에 등록하는 작업을 수동으로 해 주어야 하기 때문에 앵귤러 CLI 사용을 권장합니다. 그럼, 앵귤러 CLI를 사용하여 컴포넌트를 생성하는 방법을 보겠습니다. 앵귤러 프로젝트 생성 후 커멘드 라인에서 아래 커멘드를 입력합니다. ng generate component ng g c // 단축키 위와 같이 컴포넌트 생성시.. 이전 1 다음
