Angular에 부트스트랩을 추가하는 방법 [Step-by-Step]

by

프런트엔드 개발의 핵심 요소 중 하나는 HTML, JavaScript, 그리고 CSS입니다. 그중에서도 Angular는 클라이언트 측 어플리케이션 개발에 가장 널리 사용되는 JavaScript 프레임워크로 손꼽히며, Bootstrap은 사용자 인터페이스(UI) 프레임워크 분야에서 높은 인기를 누리고 있습니다.

프레임워크는 미리 구축된 코드, 도구, 라이브러리들의 모음으로, 어플리케이션 개발 방식을 미리 정의하여 제공합니다. Bootstrap과 Angular 모두 이러한 프레임워크에 속합니다.

본 문서에서는 각 프레임워크의 특징을 살펴보고, 이 두 기술을 결합했을 때 얻을 수 있는 장점, 그리고 시각적으로 매력적이며 강력한 앱을 만들기 위해 어떻게 활용할 수 있는지 알아보겠습니다.

부트스트랩이란 무엇인가?

Bootstrap은 모바일 우선 어플리케이션 제작을 위한 무료 프런트엔드 툴킷입니다. HTML, CSS, JavaScript로 구성된 이 프레임워크는 개발자가 프로젝트의 다양한 부분에서 재사용할 수 있는 코드 조각들을 풍부하게 제공합니다.

이 프레임워크는 버튼, 모달 창, 이미지 슬라이더, 테이블, 내비게이션 메뉴 등 다양한 기능을 위한 디자인 템플릿을 포함하고 있으며, 사용자들이 쉽게 활용할 수 있도록 상세한 설명서도 제공합니다.

AngularJS란?

AngularJS는 HTML의 기능을 확장하여 단순한 마크업 언어 이상의 역할을 할 수 있도록 하는 JavaScript 프레임워크입니다. 데이터 바인딩과 같은 기능을 도입하여 개발자들이 HTML을 사용할 때 복잡한 과정을 거치지 않고도 반응형 웹 페이지를 구축할 수 있게 합니다.

AngularJS는 모델-뷰-컨트롤러(MVC) 프레임워크를 채택하여 어플리케이션의 로직과 사용자 인터페이스를 명확하게 분리합니다. 이를 통해 개발자들은 단일 페이지 웹 어플리케이션, 소셜 네트워킹 어플리케이션, 전자상거래 플랫폼, 콘텐츠 관리 시스템 등 다양한 유형의 어플리케이션을 만들 수 있습니다.

Angular에서 부트스트랩을 사용하는 이점

  • 미리 구축된 UI 구성 요소: 부트스트랩은 즉시 사용 가능한 코드 조각들을 제공하므로, 탐색 모음, 버튼, 캐러셀, 카드 등의 요소들을 처음부터 개발할 필요가 없습니다. 개발자들은 부트스트랩이 기본적인 구조와 스타일을 담당하는 동안 어플리케이션의 기능에 더욱 집중할 수 있습니다.
  • 높은 사용자 정의성: 미리 만들어진 컴포넌트는 일반적인 코드를 제공하지만, 필요에 따라 코드를 사용자 정의할 수 있습니다. 예를 들어, 부트스트랩에서 카드를 가져온 후 이미지나 텍스트와 같은 다양한 요소를 원하는 대로 수정할 수 있습니다.
  • 반응형 디자인: 오늘날의 웹 사용자는 스마트폰, 태블릿, 컴퓨터 등 다양한 기기를 사용합니다. 부트스트랩은 반응형 웹 어플리케이션을 제공하여, 화면 크기에 따라 어플리케이션을 따로 제작할 필요가 없도록 합니다.
  • 일관된 스타일 제공: 좋은 웹 어플리케이션은 여러 페이지에서 일관된 디자인을 유지해야 합니다. 부트스트랩 요소와 컴포넌트들을 사용하면 이러한 목표를 쉽게 달성할 수 있습니다.
  • 활발한 커뮤니티: 이 프레임워크는 풍부한 자료와 강력한 문서를 제공하며, 많은 개발자들의 지원을 받고 있습니다.

사전 준비 사항

#1. Node.js

이는 브라우저 외부에서 JavaScript 코드를 실행하는 데 사용되는 JavaScript 런타임 환경입니다. 다음 명령어를 실행하여 Node.js의 현재 버전을 확인할 수 있습니다.

node -v

만약 설치되어 있지 않다면, 공식 웹사이트에서 다운로드하여 설치할 수 있습니다.

#2. 노드 패키지 매니저(NPM)

NPM은 Angular 앱에 필요한 모든 관련 패키지를 관리합니다. Node.js를 설치할 때 기본적으로 함께 설치됩니다. 다음 명령어를 사용하여 현재 버전을 확인할 수 있습니다.

npm -v

#3. Angular CLI

Angular 앱의 기본 구조를 만드는 데 사용되는 명령줄 도구입니다. 다음 명령어를 사용하여 Angular CLI를 설치할 수 있습니다.

npm install -g @angular/cli

#4. 통합 개발 환경(IDE)

코드를 작성할 환경으로, Visual Studio Code나 Webstorm과 같이 JavaScript를 지원하는 모든 IDE를 사용할 수 있습니다.

Angular에 Bootstrap을 추가하는 방법

이제 Angular 앱을 만들기 위한 모든 도구가 준비되었습니다. Bootstrap을 Angular에 추가하는 주요 방법은 두 가지입니다. 첫째, NPM을 사용하여 Bootstrap을 설치하는 방법, 둘째, CDN 링크를 이용하는 방법입니다.

접근법 1: NPM 사용

NPM을 사용하여 전체 Bootstrap 라이브러리를 프로젝트에 설치할 수 있습니다. 다음 단계를 따르십시오.

1단계: Angular CLI를 사용하여 기본 앱 구조 설정

일반적인 Angular 앱에는 다양한 파일들이 포함됩니다. 이 앱의 이름을 angular-bootstrap-mockup으로 지정합니다(앱 이름은 원하는 대로 설정할 수 있습니다). 다음 명령어를 사용하여 앱을 설정하십시오.

ng new angular-bootstrap-mockup

다음과 같은 질문에 답해야 합니다.

  • Angular 라우팅을 추가하시겠습니까? (y/N) y 입력
  • 어떤 스타일 시트 형식을 사용하시겠습니까? CSS 선택

설정이 완료되면 터미널에 다음과 유사한 메시지가 표시됩니다.

생성된 프로젝트 폴더로 이동한 후 2단계로 진행합니다. 다음 명령어를 사용할 수 있습니다.

cd angular-bootstrap-mockup

코드 편집기에서 프로젝트를 엽니다. 프로젝트 구조는 다음과 같습니다.

2단계: Bootstrap 및 Bootstrap 아이콘 설치

다음 명령어를 실행하여 두 가지 모두를 설치합니다.

npm install bootstrap bootstrap-icons

3단계: angular.json 파일에 Bootstrap 포함

앱의 루트 폴더에 있는 angular.json 파일을 찾아 다음 줄을 변경합니다.

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "node_modules/bootstrap-icons/font/bootstrap-icons.css",
  "src/styles.scss"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

4단계: ng-bootstrap 설치

ng-bootstrap은 Bootstrap 프레임워크를 기반으로 구축된 Angular UI 컴포넌트 모음입니다. 이 라이브러리의 다양한 컴포넌트는 AngularJS와 함께 작동하도록 설계되었습니다.

다음 명령어를 사용하여 설치합니다.

npm install @ng-bootstrap/ng-bootstrap

5단계: NgbModule을 포함하도록 app.module.ts 수정

app.module.ts 파일의 내용을 다음과 같이 변경합니다.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    NgbModule,
    AppRoutingModule,
  ],
  providers: [
  ],
  bootstrap: [
    AppComponent,
  ],
})
export class AppModule {
}

5단계: app.component.ts 수정

import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  constructor(private modalService: NgbModal) {
  }
  public open(modal: any): void {
    this.modalService.open(modal);
  }
}

6단계: app.component.html 파일에 Bootstrap 요소 추가

Bootstrap 웹사이트에서 다양한 컴포넌트들을 선택할 수 있습니다. 간단한 navbar를 만들고 두 개의 버튼을 추가해보겠습니다.

app.component.html의 내용을 다음과 같이 변경합니다.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Services</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">About</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Blog</a>
  </li>
</ul>
<button type="button" class="btn btn-primary btn-lg">Angular</button>
<button type="button" class="btn btn-secondary btn-lg">Bootstrap</button>

7단계: 앱 실행

다음 명령어를 사용하십시오.

ng serve

Angular 개발 서버가 실행되면 브라우저에서 http://localhost:4200/을 열 수 있습니다.

접근법 2: CDN 링크를 사용하여 Angular에 Bootstrap 추가

이 접근법에서는 Bootstrap 파일이 저장된 CDN(콘텐츠 전송 네트워크)에 직접 연결하게 됩니다.

새 프로젝트에서 이 접근법을 사용하여 몇 가지 버튼을 만들어 보겠습니다. 다음 단계를 따르십시오.

1단계: 새 Angular 프로젝트 생성

앱 이름을 angular-bootstrap-cdn으로 지정합니다(원하는 이름으로 설정 가능).

다음 명령어를 실행하십시오.

ng new angular-bootstrap-cdn

설치가 완료되면 디렉토리를 변경하고 코드 편집기에서 프로젝트를 엽니다. 다음 명령어를 사용하여 프로젝트 디렉토리로 이동할 수 있습니다.

cd angular-bootstrap-cdn

2단계: index.html 파일에 CDN 링크 포함

src/index.html 파일의 <head> 섹션에서 CDN 링크를 찾아서 추가합니다.

<head>
  ...
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  ...
</head>

3단계: app.component.html 파일에 Bootstrap 코드 추가

src/app/app.component.html 파일을 찾습니다.

다음 코드를 파일에 추가합니다.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

4단계: 앱 실행

ng serve

자주 묻는 질문

동일한 프로젝트에서 Bootstrap과 Angular Material을 함께 사용할 수 있습니까?

네, 가능합니다. Bootstrap과 Angular Material 모두 UI 라이브러리지만, 동일한 컴포넌트를 다룰 때 두 라이브러리가 충돌할 수 있습니다. 따라서 두 라이브러리를 동시에 사용하는 것은 피해야 합니다. 예를 들어, 로그인 페이지를 만들 때는 사용 가능한 컴포넌트를 기반으로 하나를 선택하는 것이 좋습니다.

Angular와 호환되는 Bootstrap 버전은 무엇입니까?

이 문서를 작성하는 현재, Bootstrap의 최신 버전은 v5.3.0-alpha2이며, Angular의 최신 버전은 Angular 15입니다. Bootstrap 4의 모든 기능은 다양한 Angular 버전과 호환됩니다. 하지만 두 기술을 결합할 때는 항상 Bootstrap과 Angular 공식 웹사이트의 문서를 확인해야 합니다.

Bootstrap 및 Angular를 사용하여 어떤 프로젝트를 만들 수 있습니까?

Bootstrap과 Angular를 사용하여 만들 수 있는 어플리케이션 유형에는 제한이 없습니다. 두 기술을 결합하여 단일 페이지 어플리케이션, 전자상거래 웹사이트, 소셜 플랫폼, 대시보드, 관리자 패널 등을 구축할 수 있습니다. 또한 Ionic 프레임워크와 함께 Angular를 사용하여 모바일 어플리케이션도 만들 수 있습니다.

Angular는 JavaScript 또는 TypeScript 프레임워크입니까?

Angular는 JavaScript 프레임워크이지만, JavaScript의 상위 집합인 TypeScript로 작성되었습니다. TypeScript는 JavaScript에서는 사용할 수 없는 새로운 기능을 제공합니다. 따라서 TypeScript와 Angular 앱 모두에서 Angular를 사용할 수 있습니다.

결론

이제 가장 널리 사용되는 두 가지 프런트엔드 프레임워크인 Angular와 Bootstrap을 사용하여 다양한 어플리케이션을 개발할 수 있게 되었습니다.

어떤 접근법을 선택할지는 만들고자 하는 앱의 사용 사례와 유형에 따라 달라집니다.

CDN 접근법이 편리해 보일 수 있지만, 몇 가지 단점도 있습니다. 가장 큰 문제는 해커가 CDN을 사용하여 웹사이트에 악성 스크립트를 푸시할 수 있다는 보안 문제입니다.

NPM을 사용하여 Bootstrap을 설치하면 어플리케이션에 포함되는 코드를 완전히 제어할 수 있습니다. 하지만 이 방법은 모든 의존성을 다운로드해야 하므로 시간이 더 오래 걸릴 수 있습니다.

React 앱에 Bootstrap을 추가하는 방법도 확인해 보세요.