[Angular-10]외부 프론트 라이브러리 적용하기

JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.

기초지식은 다른 강의를 참조하도록 하라.

또한 Angular에서는 JavaScript로 번역되는 TypeScirpt라는 새로운 언어를 사용한다.

이 언어는 JavaScript에 Type을 추가한 언어로 좀더 객체지향적인 설계가 가능한 언어이다.

이 언어에 대해서 조금씩의 설명은 있겠지만 자세한 설명은 다루지 않을 계획이다.

필자는 아직 이 TypeScript를 강의로 제공할 생각이 없으므로 자세히 알고싶다면

https://www.typescriptlang.org/

를 참조하라.

만약 부트스트랩이나 jquery같은 외부 js나 css같은 프론트 라이브러리를 써야한다면 어떻게 하여야 할까?

angular에서 어떻게 사용하는지에 대해서 한번 확인해 보도록 하자.

먼저 프로젝트를 만들도록 해보자.

ng n <앱 이름>

프로젝트를 만들고 나서는 필요한 프론트 라이브러리를 인스톨하자.

보통의 경우는 npm매니저를 쓴다.

npm install

이제 테스트할 프론트엔드 라이브러리를 설치하자.

필자의 경우 jquery와 bootstrap을 설치하겠다.

jquery는 bootstrap을 쓰는 용도로만 사용하는것이다.

npm install jquery -save

npm install bootstrap -save

그럼 이제 사용할 예시 코드를 보자.

<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>

위 코드는 bootstrap과 jquery를 import해줘야만 사용할 수 있는 코드이다.

그럼 어떻게 추가할까? 과거의 방식대로 추가할 수 없으므로 새로운 방식으로 추가해줘야한다.

이 때 알아둬야할 폴더는 .angular-cli.json

이 폴더에는 내가 특정 프로젝트를 쓸때 기본으로 사용할 css와 js파일을 추가할 수 있다.

아래 부분을 보자.

여기서 중요한건 styles와 scripts이다.

각각 css와 js를 넣어주면된다.

그럼 bootstrap과 jquery를 각각 넣어보자.

위와 같이 넣어주면 이제 모든 준비가 끝난다.

여기서 기본 디렉터리는 src를 기준으로 한다.

실행하여보자.

제대로 작동하는걸 확인할 수 있다.