앵귤러 - 스타일 라이브러리(부트스트랩, 제이쿼리, 폰트어썸)

라이브러리는 간단한 설정만으로 작성된 코드를 사용할 수 있게 해 주기 때문에 작업속도를 배가시켜 줍니다. 앵귤러도 다양한 라이브러리와 연동이 가능한데 오늘은 앵귤러 애플리케이션과 다양한 라이브러리를 연결하는 방법을 살펴보겠습니다

목차

• 설치방법
• 라이브러리 사용하기
  • 부트스트랩
  • 부트스트랩 ngx
  • 폰트어썸
    • ▶ CDN 사용하기
  • 앵귤러 폰트어썸

설치방법

대부분 라이브러리 (특히 스타일의 경우) 자체적으로 가지는 설정파일에 대한 접근이 필요합니다. 이는 해당 파일을 다운로드하여서 프로젝트에 추가하거나 제공되는 CDN이 있다면 그 경로를 통해 요청하는 방식으로 가능합니다.
 
따라서, 일반적으로 라이브러리 설치는 프로젝트에 해당 패키지를 설치하고 필요한 파일을 사용하기 위한 경로를 설정해 주어야 합니다.

---

※ 설치된 패키지는 package.json에서 아래와 같이 확인가능. 버전 앞에 ' ^ ' 표시는 자동업데이트를 의미하므로 자동으로 업데이트되는 걸 원치 않으면 삭제.

---

라이브러리 사용하기

부트스트랩

앵귤러 프로젝트를 열고 터미널에서 아래와 같이 명령어 입력

 npm i bootstrap jquery popper.js

추가로 설치된 스타일을 사용하기 위해서는 angular.json 파일의 style에 등록을 해야 합니다.

"styles": [    
  "node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.js",
  "node_modules/popper.js/dist/umd/popper.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"
]

부트스트랩 ngx

앵귤러 프로젝트를 열고 터미널에서 아래와 같이 명령어 입력 (프로젝트가 가동 중이라면 정지 후 설치)

ng add ngx-bootstrap

설치가 완료되면 원하는 컴포넌트를 클래스 지정을 통해 사용합니다 (컴포넌트 리스트는 아래 참조).
컴포넌트 리스트

Angular Bootstrap

폰트어썸

▶ CDN 사용하기

폰트어썸 계정 로그인 후 계정메뉴에서 키트관리 선택

키트박스 선택 (생성된 키트가 없다면 생성합니다)

CDN복사

앵귤러 프로젝트 index.html파일을 열고 헤드에 CDN설치로 완료

앵귤러 폰트어썸

앵귤러 폰트어썸은 폰트어썸과 동일한 아이콘을 제공하지만 사용방법에 차이가 있습니다.
 
앵귤러 프로젝트를 열고 터미널에서 아래와 같이 명령어 입력 (프로젝트가 가동 중이라면 정지 후 설치)

ng add @fortawesome/angular-fontawesome

폰트어썸 버전 선택

사용할 아이콘 선택 (스페이스로 선택하고 엔터로 확인)

컴포넌트 클래스파일에 사용하고자 하는 아이콘을 가져오고 변수로 지정한 뒤 템플릿 파일에서 fa-icon 태그를 사용하여 속성 바인딩을 통해 사용

---

※ 아이콘 이름형식은 카멜케이스로 fa뒤에 붙는 아이콘이름의 첫 자를 대문자로 하고 중간에 대시는 생략합니다.

※ 스타일 추가(변경하기) - 사이즈, 애니메이션 등 스타일을 속성을 통해 변경가능

GitHub - FortAwesome/angular-fontawesome: Official Angular component for Font Awesome 5+

---

이상으로 앵귤러에 스타일 라이브러리를 추가하는 방법을 살펴보았습니다.

---

참고

Angular Bootstrap (valor-software.com)

Angular Bootstrap

https://fontawesome.com/

Font Awesome

Bootstrap · The most popular HTML, CSS, and JS library in the world. (getbootstrap.com)

Bootstrap

@fortawesome/angular-fontawesome - npm (npmjs.com)

@fortawesome/angular-fontawesome

GitHub - FortAwesome/angular-fontawesome: Official Angular component for Font Awesome 5+

GitHub - FortAwesome/angular-fontawesome: Official Angular component for Font Awesome 5+