● v-cloak

v-cloak 디렉티브는 뷰 애플리케이션의 렌더링 과정에서 데이터 바인딩이 완료되기 전에 데이터가 화면에 노출되는 것을 막기 위해 사용합니다.

TIP - bind의 뜻인 ‘묶다, 결속시키다’처럼 데이터 바인딩(data binding)은 웹 브라우저 화면에 표시하려는 데이터와 실제 데이터를 연결하는 과정을 의미합니다. 데이터를 바인딩할 때는 콧수염 문법이나 v.bind 디렉티브를 사용합니다.

NPM 방식으로 뷰 애플리케이션을 개발할 때는 잘 느끼지 못하지만, CDN 방식으로 뷰 애플리케이션을 개발하면 초기에 뷰 패키지를 로딩하고 적용하는 데 시간이 걸립니다. 이 찰나의 시간에 콧수염 문법으로 작성한 부분은 데이터가 바인딩되지 않은 상태로 잠시 보였다가 사라지는 현상이 발생할 수 있습니다. 이럴 때 v-cloak 디렉티브를 사용합니다.

다음 코드는 CDN 방식으로 작성했으며, 뷰 적용을 인위적으로 늦추기 위해 setTimeout() 메서드로 2초 딜레이를 지정했습니다.