본문 바로가기

Tech

(37)
[Angular] 클릭 이벤트 핸들러, ngIf Reference : https://angular.io/tutorial/toh-pt2 Angular angular.io 일단 이전에 만든 페이지의 UI를 살짝 수정하고 계속 진행하겠습니다. 이는 페이지를 다음과 같이 구성하기 위함입니다 : employees.component.css 파일 내용을 다음과 같이 수정합니다. /* employees.component.css */ div.left { width: 50%; float: left; box-sizing: border-box; padding: 5px 5px 5px 5px; } div.right { width: 50%; float: right; box-sizing: border-box; padding: 5px 5px 5px 5px; } 다음으로 employ..
[Angular] 부트스트랩 적용하기 (ng-bootstrap 사용) 지난 글에서 생성한 employee list는 정말 못생겼습니다. 여기에 Bootstrap.css를 적용해 보겠습니다. Reference : https://ng-bootstrap.github.io/#/getting-started Angular powered Bootstrap Bootstrap widgets for Angular: autocomplete, accordion, alert, carousel, dropdown, pagination, popover, progressbar, rating, tabset, timepicker, tooltip, typeahead ng-bootstrap.github.io 일단 npm을 사용하여 bootstrap을 다운로드 해 줍니다. 터미널에 다음과 같이 입력해줍니다. n..
[Angular] 리스트 생성, ngFor 지난번 글에서 생성한 employee 클래스를 통하여 리스트를 만들고 이를 뷰 상에 전시해 보겠습니다. Reference : https://angular.io/tutorial/toh-pt1 Angular angular.io /src/app/employees 경로에 employeeList.ts 파일을 만들고 다음과 같이 작성해줍니다. //employeeList.ts import { Employee } from './employee'; export const EMPLOYEES: Employee[] = [ { id: 11, name: 'Sean'}, { id: 12, name: 'Andy'}, { id: 13, name: 'Cindy'}, { id: 14, name: 'Anne'}, { id: 15, name..
[Angular] 컴포넌트 생성 및 클래스 정의하기 지난 글에서 Angular 개발환경을 맥 상에 구축했습니다. 이번 글에서는 컴포넌트를 생성하고 클래스를 정의해 준 다음 이를 뷰에 띄워보겠습니다. Reference : https://angular.io/tutorial/toh-pt1 Angular angular.io 터미널 상에서 다음 명령어를 입력합니다. ng generate component employees 그리고 Employee 컴포넌트에서 보여주게 될 클래스를 src/app/employees 경로 상에 작성해줍니다. // employee.ts export class Employee { id: number; name: string; } 작성한 클래스를 employees.component.ts 내에서 import한 후, employee 하나를 임의로..
[Angular] Mac OS에서 Angular 설치 및 개발환경 구축 졸업학기 프로젝트를 하면서 이리저리 꼬아둔 맥을 연말을 맞이하여 3년만에 싹- 갈아엎었습니다. 깨끗해진 맥에다가 웹개발 공부를 위해 Angular를 다시 설치하는 방법을 정리해 보았습니다. [시스템 사양] MacOS version : MacOS Catalina 10.15.2 Homebrew version : 2.2.2 MacOS에서 Angular을 설치하여 프로젝트를 만들기 위해서는 우선 npm이 필요한데, brew를 통해 node를 먼저 설치합니다. Homebrew 설치 : https://brew.sh Homebrew The Missing Package Manager for macOS (or Linux). brew.sh 터미널에서 brew를 설치하고 node를 설치해 줍니다. brew install n..