Angular 6에서 bootstrap 4 설치하기
이 글은 약간의 사설과 bootstrap의 장/단점, Angular 버전 6에서 bootstrap v4를 설치하는 방법을 다룹니다.
최근 TypeScript를 거쳐 angular 프로젝트를 시작하기 위해 조금씩 공부를 하고 있습니다. 처음 제품의 angular 코드를 봤을 때, bootstrap을 사용하는 코드들(col-md , col-xs 등등..) 을 보고 멘붕이 왔습니다. 이게 대체 뭐지???
bootstrap은 뭐고.. 장/단점은?
bootstrap은 twitter의 일부 개발자들에 의해 만들어진 프레임 워크입니다. twitter의 UI 개발자들이, 각자 작업한 css를 합치는 과정에서 스트레스를 받는일이 빈번하였고, 소수의 개발자들이 이를 해결하기 위해 시작되어 현재는 전 세계적으로 쓰이고 있습니다. bootstrap을 한 문장으로 표현하자면 자주 사용하는 css나 자바스크립트 코드를 묶어 사용하기 편하게 제공하는 프레임워크입니다.
장점으로는 css를 잘 모르는 사람들도 손 쉽게 깔끔한 UI를 표현할 수 있습니다. 단점으로는 홈페이지의 개성이 사라지게 되었고, bootstrap의 일부 기능을 사용하는 것에 대비해 무거운 프레임워크를 짊어지게 되었습니다.
Angular 6에서 bootstrap 설치
방법은 총 4가지가 있습니다. 우선 npm으로 설치하지 않는 방법으로는 CDN을 사용하는 방법입니다. Angular Cli로 ng new [프로젝트명] 을 이용해 설치했다면 index.html을 열어줍니다. <head> </head> 사이에 css 파일 link를 추가하고 <body> </body> 사이에 아래와 같이 필요한 js 파일의 link를 걸어줍니다.
다음 3가지 방법은 npm으로 설치하는 방법입니다. 아래와 같이 npm으로 설치합니다.
npm install bootstrap설치하게 되면 node_modules/bootstrap/dist/css 경로에 bootstrap.css와 bootstrap.min.css 파일이 생성됩니다. bootstrap.min.css는 축소화 된 파일로 bootstrap.css 파일에서 공백이나 불 필요한 문자들을 제거하여 파일의 크기를 줄입니다. 따라서 제품에 내보낼 때는 용량을 줄이고 속도를 빠르게 하기 위해 min.css 파일을 사용하고, 개발과정에서 css 소스를 봐야 할 필요가 있을 때는 bootstrap.css 파일을 사용합니다.
npm install bootstrap 명령으로 bootstrap을 사용하는 방법에는 두 가지가 있습니다. 첫 번째는 src/ 폴더 하위의 style.css에 다음과 같이 추가합니다.
@import “~bootstrap/dist/css/bootstrap.css”;두 번째는 angular.json 파일을 열고 styles를 찾아 다음과 같이 변경합니다.
“styles”: [
“src/styles.css”,
“node_modules/bootstrap/dist/css/bootstrap.min.css”
],네 번째 방법으로는 angular의 directive의 집합인 ng-bootstrap을 사용합니다. 다만 이 방법은 제가 써보진 않아서 설치 명령만 적겠습니다.
npm install --save @ng-bootstrap/ng-bootstrap
마지막의 ng-bootstrap을 제외하고 첫번째와 세번쨰 방법들은 모두 제가 정상동작을 확인했습니다. index.html의 <body> </body> 안에 아래 코드를 추가합니다.
<button class=”btn btn-success” type=”submit”>Add</button>ng serve 명령으로 앵귤러를 동작시키고 접속해보면 아래와 같이 bootstrap이 적용된 화면을 볼 수 있습니다.
bootstrap과 친해지기
저도 앞으로 계속 친해져야 합니다. 다른 블로그들도 좋지만 공식 사이트에서 보는게 제일 좋은 것 같아 링크를 남기니다.
