Angular에 Bootstrap을 설치하는 방법은 무엇입니까? 5가지 쉬운 방법

게시 됨: 2023-05-24

웹 페이지는 대화식일 때 가장 잘 작동합니다. 그러나 하룻밤 사이에 새 웹 페이지를 개발하는 것은 불가능해 보입니다.

이것은 일반적일 수 있지만 사용자 지정 코드를 통해 쉽게 수정할 수 있는 웹 페이지에 대한 액세스 권한이 필요하다고 느낄 수 있는 경우입니다. 이것은 부트스트랩이 작동하는 곳입니다.

Angular에서 반응적이고 생생한 웹 애플리케이션을 만들기 위해 Angular 에 Bootstrap을 설치하는 방법을 이해하는 것부터 시작하겠습니다 !

부트스트랩 이해: 초기 가이드
부트스트랩: 역사 살펴보기
부트스트랩을 사용해야 합니까?
- 구성 요소 측면
- 커스터마이징 측면
- 시간 절약
Angular에 부트스트랩을 설치하기 위한 전제 조건
방법 1: CDN을 통해 부트스트랩 설치
방법 2: npm 패키지 관리자를 통해 Bootstrap 설치
인기 있는 소프트웨어 엔지니어링 과정 살펴보기
방법 3: Angular CLI를 통해 부트스트랩 설치
방법 4: Bower 패키지 관리자를 통해 Bootstrap 설치
소프트웨어 개발 무료 과정 살펴보기
방법 5: 사용자 지정 빌드를 통해 부트스트랩 설치
부트스트랩을 설치할 때 따라야 할 모범 사례
결론
부트스트랩으로 어떤 다른 설치가 필요합니까?
지연된 부트스트랩이란 무엇입니까?
Bootstrap을 쉽게 다루는 방법에 대한 마지막 팁이 있습니까?

부트스트랩 이해: 초기 가이드

부트스트랩은 동적 웹 페이지를 생성하기 위해 CSS, HTML 및 JavaScript의 도구와 구성 요소의 조합을 제공하는 프런트 엔드 프레임워크입니다. Bootstrap은 오픈 소스이며 무료입니다. Angular 자체는 강력한 단일 페이지 웹 사이트를 구축하기 위한 유능한 프레임워크이지만 Bootstrap과 결합하면 반응이 빠르고 동적인 웹 페이지를 만들 수 있는 잠재력이 더욱 커집니다.

부트스트랩은 큰 인기를 얻었고, 자바스크립트 기반의 전체 웹사이트 중 약 25.8%가 부트스트랩을 사용하고 있어 시장에서 그 중요성을 더욱 시사하고 있습니다.

부트스트랩: 역사 살펴보기

인기 있는 소셜 네트워킹 웹사이트 Twitter의 내부 도구로 처음 생성된 엔지니어 Jacob Thornton과 Mark Otto는 2011년 8월 오픈 소스 저장소 GitHub에서 대중이 사용할 수 있도록 Bootstrap을 게시하기로 결정했습니다.

대중의 편리함과 인기에 따라 제작자는 부트스트랩의 최신 버전을 생성하기 위해 계속 노력하고 있으며 개선된 UI 구성 요소와 더 나은 지원을 제공합니다.

Creator Mark와 Jacob은 2023년 최신 버전의 Bootstrap- Bootstrap 5.3.0을 출시했습니다.

무료 기술 과정을확인하여경쟁에서 우위를 점하십시오.

부트스트랩을 사용해야 합니까?

이 프로젝트가 제공하는 많은 이점을 이해하면 질문에 대한 답을 얻을 수 있습니다. 우선 반응이 빠른 CSS를 제공합니다. 이를 통해 데스크톱, 탭 및 전화에 적용할 수 있습니다. 또한 대부분의 주요 브라우저에서 계산할 수 있습니다.

여기에 최소한의 설정 요구 사항이라는 이점을 추가하면 1시간 이내에 레이아웃을 디자인할 수 있습니다. 부트스트랩은 UI 기반 변경을 시작할 필요가 없는 한 사용자가 CASS 또는 HTML에 능숙할 필요가 없기 때문에 사용에 도움이 됩니다.

Angular에 포함하거나Angular Bootstrap 설치를 추가하기 위해 Bootstrap을 인기 있는 선택으로 만드는 가장 친숙한 기능은 다음과 같습니다.

구성 요소 측면

탐색 모음에서 양식에 이르기까지 Bootstrap은 Angular에서 Bootstrap을 추가하는 방법을 결정할 때 응용 프로그램에 대한 구성 요소 로그를 제공합니다 .이러한 구성 요소의 도움으로 사이트나 앱을 창의적으로 디자인하는 것이 매우 쉬워집니다. Angular에서 Bootstrap의 이 기능은 개발자들 사이에서 매우 인기가 있습니다.

upGrad의소프트웨어 개발 과정을확인하여 기술을 향상시키십시오.

커스터마이징 측면

Angular에서 부트스트랩 설치를 수행하면 열에 대한 사용자 지정 중단점을 설계하고 필요에 따라 중단점도 삽입할 수 있습니다.프레임워크의 반응형 그리드를 기반으로 사용자 정의를 더욱 단순화합니다.

시간 절약

부트스트랩의 프레임워크는 Angular에 내장되어 있을 때 타임라인 비트에서 상당한 시간을 절약할 수 있습니다. Bootstrap에 미리 만들어진 블록 덕분에Angular에 Bootstrap 5를 설치할 때 처음부터 바로 시작할 필요가 없습니다 .내장된 요소를 재정렬하고 이러한 요소를 입력과 함께 사용 가능하게 만들기만 하면 최종 제품에 고유성이 추가됩니다.

Angular에 부트스트랩을 설치하기 위한 전제 조건

다음은 Angular에 부트스트랩을 추가하기 위한 전제 조건 체크리스트입니다. Angular 애플리케이션을 생성하기 위해 동일한 도구를 설치한 후 나열된 도구를 구성해야 합니다.

Git : 리포지토리 동기화에 사용할 분산 버전 관리 단위 설정입니다.
IDE – 그래픽 인터페이스가 있는 통합 개발 환경을 사용하는 것은 Angular를 포함한 애플리케이션 개발에 필수적입니다.
Node.js 및 npm : 전자는 런타임용 JavaScript 코드 소프트웨어입니다.후자인 npm은 Node.js에 사용되는 패키지 관리자로 제공됩니다. 모든 Angular 응용 프로그램은 두 가지를 기반으로 실행되며 라이브러리 설치에도 도움이 됩니다.
Angular CLI: 이 유틸리티 도구는 Angular의 기본 구조 설정을 위한 명령줄을 기반으로 합니다.

컴퓨터 과학 석사 와 같은 upGrad의 전문 교수진이 제공하는 다양한 소프트웨어 엔지니어링 과정에서 힌트를 얻어 개발 기술을 기하급수적으로 향상시키십시오.

방법 1: CDN을 통해 부트스트랩 설치

관련 단계에 따라 CDN을 통해 Angular에 부트스트랩을 설치합니다.

'src' 폴더를 찾아 ' index.html ' Angular 프로젝트 파일을 엽니다.
' <head> ' 섹션 내에 다음 링크를 삽입하십시오 .

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>

부트스트랩용 JavaScript 및 CSS 파일은 지정된 CDN URL의 코드 행에 포함되어 있습니다.
최종 변경 사항을 ' index.html ' 파일에 저장하십시오.

Angular 프로젝트는 이러한 CDN 링크를 포함하면 CDN이 제공하는 부트스트랩 스타일 및 JavaScript 기능을 활용합니다. 이제 Angular 프로젝트 내에서 Bootstrap 구성 요소를 활용할 준비가 되었습니다!

방법 2: npm 패키지 관리자를 통해 Bootstrap 설치

npm 관리자를 사용하여 부트스트랩을 설치하는 것은 주어진 간단한 단계에 따라 수행할 수 있습니다.

명령 프롬프트 또는 터미널을 엽니다.
Angular 프로젝트의 루트 디렉터리를 탐색합니다.
' npm install bootstrap' 명령을 실행하여 Bootstrap 및 관련 종속성을 설치합니다 .관련 명령은 부트스트랩과 관련 종속성을 'node_modules'라는 레이블이 지정된 디렉토리에 다운로드합니다.
설치 후 루트 디렉터리에서 'angular.json' 파일을 열고 'styles'배열 안에 다음 항목을 추가하여 Bootstrap 스타일과 Javascript를 통합해야 합니다 .

"node_modules/bootstrap/dist/css/bootstrap.min.css"

또한 'scripts' 배열 내에 다음 명령을 추가합니다 .

"node_modules/bootstrap/dist/js/bootstrap.min.js"

' angular.json' 파일 의 모든 변경 사항을 저장합니다 .

이제 Angular 구성 요소 및 템플릿에서 Bootstrap의 JavaScript 및 CSS 클래스를 사용할 준비가 되었습니다.

LJMU 및 IIITB의 컴퓨터 과학 석사	Caltech CTME 사이버 보안 인증 프로그램
풀스택 개발 부트캠프	블록체인의 PG 프로그램
풀 스택 개발의 임원 PG 프로그램
아래에서 모든 코스 보기
소프트웨어 엔지니어링 과정

방법 3: Angular CLI를 통해 부트스트랩 설치

다음은 Angular CLI를 통해 부트스트랩을 설치하는 데 도움이 되는 따라하기 쉬운 가이드입니다.

명령 프롬프트를 엽니다.
Angular CLI를 사용하고 새 Angular 프로젝트를 생성하려면 'ng new my-app' 명령을 실행합니다 .'my-app'을 원하는 이름으로 바꿀 수 있습니다 .
프로젝트 디렉토리로 변경하십시오.

cd 내 앱

위에서 언급한 대로 npm을 사용하여 부트스트랩 설치 프로세스를 반복합니다.

이제 CLI를 사용하여 새 Angular 프로젝트를 만들었고 프로젝트에 부트스트랩을 설치했습니다!

방법 4: Bower 패키지 관리자를 통해 Bootstrap 설치

npm과 bower를 모두 전역적으로 설치해야 합니다.
명령 프롬프트에서 주어진 명령을 실행합니다 – npm install -g bower
bower가 설치되면 프로젝트 폴더로 이동하여 다음을 입력하십시오.

bower 설치 부트스트랩

정자 설치 jquery

위의 단계는 새로 생성된 'bower_components' 폴더에 관련 부트스트랩 설치 파일을 설치합니다.

마지막 단계는 프로젝트 파일에 Bootstrap 및 jquery용 파일을 포함하는 것입니다.

이것이 Angular에 Bootstrap을 설치하는 모든 단계이지만 Bower는 Bootstrap 설치에 더 이상 사용하지 않는 것이 좋습니다.

소프트웨어 개발 무료 과정 살펴보기

클라우드 컴퓨팅의 기초	처음부터 JavaScript 기본 사항	데이터 구조 및 알고리즘
블록체인 기술	초보자를 위한 반응	핵심 자바 기초
자바	초보자를 위한 Node.js	고급 자바스크립트

방법 5: 사용자 지정 빌드를 통해 부트스트랩 설치

커스텀 빌드를 통해 부트스트랩을 설치하는 간단한 단계는 다음과 같습니다.

Javascript 및 CSS 파일과 함께 공식 웹 사이트 에서 원하는 Bootstrap 버전을 다운로드하십시오 .
zip 파일을 추출하고 'bootstrap.min.css ' 를 복사합니다 .
Angular 프로젝트에서 ' src ' 디렉토리로 이동하여 ' assets' 이라는 새 디렉토리를 만듭니다 . 'css '라는 ' 자산'내에 다른 디렉토리를 생성해야 합니다 .
'css ' 디렉토리에 'bootstrap.min.css' 를 붙여넣습니다 .
다시 'assets ' 디렉토리에 ' js' 라는 새 디렉토리를 만들고 이 새 디렉토리 내에 zip 폴더에서 추출한 'bootstrap.min.js'를 붙여넣습니다.
루트 디렉터리에서 'angular.json '을 열고 Architect > build > options세그먼트를 따라 'styles'배열을 탐색합니다 .
다음 명령을 사용하여 부트스트랩 CSS 파일을 추가합니다.

"src/assets/css/bootstrap.min.css"

같은 배열에서 'scripts' 배열을 찾아 다음 명령을 붙여넣습니다.

"src/assets/js/bootstrap.min.js"

변경 사항을 ' angular.json ' 파일에 저장합니다.

부트스트랩을 설치할 때 따라야 할 모범 사례

Angular에 부트스트랩을 설치하는 방법에는 여러 가지가 있지만 모범 사례를 알면 프로세스를 더욱 단순화할 수 있습니다.

Angular 프로젝트의 올바른 파일 및 폴더 내에서 올바른 Bootstrap CSS 파일을 가져와야 합니다.
Bootstrap은 광범위한 CSS 클래스 및 구성 요소 카탈로그를 제공하지만 프로젝트와 관련된 항목만 선택하십시오.
불필요한 구성 요소를 피하여 성능을 최적화하십시오.
최신 부트스트랩 버전으로 업데이트 상태를 유지하세요.
Javascript 구성 요소를 사용할 수 있지만 드물게 사용하십시오. Angular 관련 라이브러리를 활용해 보십시오.

반면에 시간을 관리할 수 있고 더 나은 개발자가 되기를 희망한다면 IIIT-B에서 제공하는 소프트웨어 개발 - 풀 스택에서 upGrad의 경영 대학원 프로그램 보다 더 좋은 것은 없습니다 .

결론

향상된 웹 페이지 개발을 위해 Angular에 부트스트랩을 설치하는 가장 좋은 방법 목록은 다음과 같습니다. 최적화된 반응형 디자인에서 신선하고 역동적인 기능 통합에 이르기까지 올바른 부트스트랩 구성 요소를 일관된 방식으로 활용하는 방법을 알면 업계에서 우위를 점할 수 있습니다!

upGrad의 풀 스택 소프트웨어 개발 부트캠프 에 참여하는 동안 수요가 많은 기술과 전문가의 지도로 개발 경력을 향상시킬 수 있는 또 다른 방법입니다.

지금 등록하여 시야를 넓히십시오!

부트스트랩으로 어떤 다른 설치가 필요합니까?

부트스트랩으로 만들어야 하는 다른 설치는 jQuery와 popper.js입니다. 동일한 용도로 npm을 사용할 수 있습니다.

지연된 부트스트랩이란 무엇입니까?

Angular의 전신인 AngularJS는 지연된 부트스트랩이라는 아이디어를 도입했습니다. AngularJS 애플리케이션의 자동 부트스트래핑 프로세스를 연기하는 옵션을 나타냅니다. HTML 페이지가 로드될 때 AngularJS가 자동으로 애플리케이션을 부트스트랩하므로 지연된 부트스트랩을 사용하면 필요할 때 프로세스를 수동으로 연기할 수 있습니다.

Bootstrap을 쉽게 다루는 방법에 대한 마지막 팁이 있습니까?

모든 프레임워크의 일반적인 관행과 마찬가지로 잠시 동안 같은 내용을 가지고 놀면서 설명서를 읽을 때만 명확한 그림을 얻을 수 있습니다. 최상의 구현을 위해 공식 문서를 확인하십시오.