[vue 3] 13.app의 config 객체

이번 포스트에서는 주로 Vue application의 전역 설정과 관련된 config 객체에 대해서 살펴보자.

 

 

app.config

Vue의 createApp() 함수의 결과물인 app은 여러가지 속성들이 있는데 그 중 config 라는 속성에 대해 살펴보자.

const app = createApp(. . .);

console.log(app.config);

이 객체는 당연히 Vue application의 속성들을 관리하는 객체인데 속성의 이름만 봐도 유용할 것 같은 녀석이 몇 가지 존재한다.

여기서는 globalProperties와 errorHandler, warnHandler에 대해서 살펴보자. 현재는 비어있는 객체이거나 undefined 상태이다. 참고로 이 값들을 설정할 때에는 반드시 mount()를 호출하기 전이어야 한다.!

 

app.config.globalProperties

globalProperties는 객체 타입으로 전역의 properties를 선언할 수 있는 설정이다. 여기에 설정된 값들은 나중에 template어디서든지 사용할 수 있게 된다.

<script>
  const { createApp } = Vue;
  const app = createApp();

  // mount 하기 전에 config 설정 필요
  app.config.globalProperties.appName = "HelloVue3.0";

  app.mount("#app");
</script>


<div id="app">
  <div>app name: {{appName}}</div>
</div>

 

app.config.errorHandler, app.config.warnHandler

이 두 가지 속성은 각각 vue application 동작 시 발생하는 error와 warn에 대한 global handler를 함수 형태로 등록한다.

<div id="app">
  <div>msg: {{msg}}</div> <!--반환되지 않은 msg 사용: warn 상황-->
</div>

<script>
const { createApp, ref } = Vue;
const app = createApp({
  setup() {
    console.log(some); // 존재하지 않는 변수 some 사용: error 상황
    return {};
  },
});

// mount 하기 전에 config 설정 필요
app.config.errorHandler = (err) => {  console.log("error 발생", err); };
app.config.warnHandler = (warn) => {  console.log("warn 발생", warn); };

app.mount("#app");
</script>

먼저 template 영역에서는 msg를 사용하고 있다. 하지만 app에서는 msg를 expose 하고 있지 않기 때문에 warn이 발생한다. 또한 script 영역에서는 console에 some을 출력하는데 변수를 선언한 적이 없기 때문에 이 코드는 error를 발생시킨다. 

이런 일련의 warn, error 상황에 대해서 매번 handler를 작성하기는 매우 힘든 일이다. 이때 errorHandler, warnHandler를 한번만 작성해 두면 더 이상 신경쓸 일이 없다.

 

지금까지 작성했던 예제들은 html 하나로 구성된 작은 예제들이었지만 뒤에 여러 개의 컴포넌트로 구성된 애플리케이션을 만들다 보면 그 편의성이 더 크게 느껴질 것이다. ㅎ