μ‹±κΈ€ 파일 μ»΄ν¬λ„ŒνŠΈ

μ‹±κΈ€ 파일 μ»΄ν¬λ„ŒνŠΈλŠ” ν™”λ©΄μ˜ νŠΉμ • μ˜μ—­μ— λŒ€ν•œ HTML, CSS, JS μ½”λ“œλ₯Ό ν•œ νŒŒμΌμ—μ„œ κ΄€λ¦¬ν•˜λŠ” λ°©λ²•μž…λ‹ˆλ‹€. λ·° CLI둜 ν”„λ‘œμ νŠΈλ₯Ό μƒμ„±ν•˜κ³  λ‚˜λ©΄ App.vueλΌλŠ” νŒŒμΌμ„ 확인할 수 μžˆμŠ΅λ‹ˆλ‹€. 이처럼 vue ν™•μž₯자λ₯Ό 가진 νŒŒμΌμ„ λͺ¨λ‘ μ‹±κΈ€ 파일 μ»΄ν¬λ„ŒνŠΈλΌκ³  ν•©λ‹ˆλ‹€.

μ½”λ“œλ₯Ό μ‚΄νŽ΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

<!-- .vue 파일 ꡬ쑰 -->
<template>
  <!-- html (λ·° μ»΄ν¬λ„ŒνŠΈμ˜ ν‘œν˜„λ‹¨, ν…œν”Œλ¦Ώ 문법) -->
</template>

<script>
  // μžλ°”μŠ€ν¬λ¦½νŠΈ (λ·° μ»΄ν¬λ„ŒνŠΈ λ‚΄μš©)
</script>

<style>
  /* CSS (λ·° ν…œν”Œλ¦Ώμ˜ μŠ€νƒ€μΌλ§) */
</style>

μ‹±κΈ€ 파일 μ»΄ν¬λ„ŒνŠΈμ˜ λ™μž‘ 원리

μ‹±κΈ€ 파일 μ»΄ν¬λ„ŒνŠΈλŠ” λ·° λ‘œλ”μ— μ˜ν•΄ HTML, CSS, JS와 같은 μ›Ή μžμ›μœΌλ‘œ λΆ„λ¦¬λ˜μ–΄ μ‹€ν–‰λ©λ‹ˆλ‹€. λ·° λ‘œλ”λŠ” μ›ΉνŒ©μ˜ λ‘œλ” μ’…λ₯˜ 쀑 ν•˜λ‚˜μ΄κ³  λ·° CLI둜 ν”„λ‘œμ νŠΈλ₯Ό μƒμ„±ν•˜λ©΄ 기본적으둜 섀정이 λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.