코린이[코딩 어린이]

설치 플러그인

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons

npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

// Vue2 ( Vue2로 이용할 때 )
npm i --save @fortawesome/vue-fontawesome

// Vue3 ( Vue3로 이용할 때 )
npm i --save @fortawesome/vue-fontawesome@prerelease

main.js

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(fab, far, fas)

const app = createApp(App)

// fa = 변경가능
app.component("fa", FontAwesomeIcon)
app.use(store).use(router).mount('#app')

App.vue ( 사용할 페이지 )

<fa :icon="['fab', 'html5']" />

fontawesome에서 아이콘을 찾아서 넣기만 하면 완료된다.

위 이미지는 인스턴스 라이프사이클에 대한 다이어그램입니다. 

:: 외울필요는 없지만 한번 봐두면 좋은 내용입니다.

출처 : VueJS 공식문서

:: setup()을 이용한 라이프사이클은 제외하고 정리해둔 내용입니다.

1. beforeCreate :

beforeCreate는 인스턴트가 생성되고 나서 가장 처음 실행되는 라이프 사이클 단계입니다.

컴포넌트를 생성하기 전에 호출이 되기 때문에 DOM이 세팅되지 않는 시점입니다.

즉, DOM에 접근하려는 시도를 이 시점에 하면 에러가 팡팡 터져 나오게 됩니다.

:: DOM => Document Object Model(문서 객체 모델)은 HTML이나 XML에 접근하기 위한 일종의 인터페이스

2. created :

created는 컴포넌트에 data속성과 methods속성이 정의된 상태입니다. 두 속성값에 접근하는 로직은 구현되어도 문제없이 작동되는 상태입니다.

하지만 화면 요소에 인스턴스가 세팅되지 않는 상태이기 때문에 template속성에 정의된 DOM요소에 접근하면 에러가 발생합니다.

3. beforeMount :

beforeMount는 템플릿과 렌더 함수들이 컴파일된 이후 첫 render()함수가 일어나기 직전 시점입니다.

created이후 속성에 지정한 마크업 속성을 render()함수로 변환 후 el속성에 지정한 화면 요소에 인스턴스를 세팅하기 직전에 호출되기 때문에, 화면이 나오기 이전에 호출해야 할 코드를 구현합니다.

4. mounted :

mounted는 화면 요소에 인스턴트 세팅이 된 후 호출됩니다.

template속성에 정의한 화면 요소에 접근이 가능하므로 화면 요소를 제어하는 코드를 구현합니다.

조심해야 할 점은, 컴포넌트에서 본인이 생각한 순서대로 mounted가 진행되지 않을수가 있습니다. 부모의 mounted가 자식의 mounted보다 먼저 실행되지 않습니다.

5. beforeUpdate :

beforeUpdate는 컴포넌트의 데이터가 변하여 업데이트 사이클이 시작될 때 호출됩니다.

이렇게 데이터가 변경되면 가상 DOM을 활용해서 화면에 새로 보여지게 됩니다. 이 때, 보여지기 직전에 호출되는 것이 beforeUpdate입니다.

즉, 변경 예정인 데이터의 값을 이용해서 구현해야 할 때 이 단계에서 진행합니다.

또한 그 데이터 값을 변경하는 로직을 구현해도 다시 화면에 보여지지 않습니다.

6. updated :

updated는 beforeUpdate가 끝나고 화면이 나타나면 호출됩니다.

데이터가 변경되고 화면 요소들을 제어하고 싶을때 이 단계에서 구현하면 됩니다.

조심해야 할 점은, beforeUpdate => updated => beforeUpdate => updated => ... 이런식으로 무한루프에 빠지게 될 수 있습니다.

그렇기에 데이터값을 변경하는 로직은 위 beforeUpdate에서 처리를 해주어야 합니다.

7. beforeDestroy :

beforeDestroy는 뷰 인스턴스가 해체되기 직전에 호출됩니다.

이 단계에서는 아직 인스턴스가 없어지지 않은 상태이기 때문에 접근이 가능하며 이벤트, 뷰 인스턴스 데이터 등을 삭제하거나 하는 용도로 사용하면 됩니다.

8. destroyed :

destroyed는 뷰 인스턴스가 해제되고 난 후에 호출됩니다.

뷰 인스턴스에 정의한 속성들이 제거되고 하위에 선언했던 인스턴스들 역시 모두 해체됩니다.