TIL | Vue.js 구조 파악 하기

Vue CLI 를 이용하여 복잡합 웹팩을 이용하지 않고 기본 세팅이 완료되어 있는 상태로 개발을 시작 할 수 있다.

공부할 때 사용했던 파일이라 기본적인 세팅이 정확이 이렇다긴 어렵지만 기본적으로 App.Vue를 거쳐 Index.html를 통해 내용이 화면에 랜더된다.

화면엔 안보이지만 라우팅 기능을 담당하는 router폴더에 index.js 파일도 있다.

기본적으로 .Vue 확장자파일을 만들어 기본적인 틀을 구성 하자면

<template>
HTML 코드가 작성한다.
</template>

<script>
javascript 코드를 작성한다.
</script>

<style>
css 코드를 입력한다.
</style>

template 태그에는 화면에 보여줄 html 태그를 작성한다.
기본적인 html 문법을 따르며, react때와 마찬가지로

template 태그안의 내용들은 최상단 태그 하나로 묶여있어야 한다.

style 태그안의 내용은 왜 색깔이 안바뀌는지는 알수없지만.

style 태그의 lang 은 우리가 사용할 언어, 즉 scss를 사용할 것이며, scoped는 이 파일에서 작성한 style속성을 이 파일 내에서만 사용하겠다는 의미다,

script 태그 안의 내용은 아직 어떻게 작성하고 무슨 로직으로 돌아가는지 잘 모르기때문에 더 공부하고 정리해야겠다.