#1 Vue 프로젝트의 파일 구조
프로젝트를 생성하였다면 위와 같이 기본적인 세팅이 되어있습니다.
• node_modules : npm을오 설치한 패키지 파일들이 모두 이곳에 모여 있습니다.
• public : 정적 리소스들이 모여있는 디렉토리. index.html이 이곳에 있습니다.
• src : 실제 작업은 이곳에서 이루어 집니다.
• src/assets : 이미지나 CSS 등 자료들이 모여있는 디렉토리
• src/components : Vue 컴포넌트 파일들이 모여있는 디렉토리
• App.vue : 루트가 되는 컴포넌트 (최상위 컴포넌트)
• main.js : 가장 먼저 실행되는 JavaScript 파일. Vue의 인스턴스를 생성하는 역할
• .gitignore : 깃에 업로드 할 때 제외할 파일들을 설정하는 파일
• bable.config.js : 바벨 설정파일
• jsconfig.json : 여러가지 컴파일 옵션(문법 버전, 베이스 URL 등)을 설정하는 파일. import 경로를 상대 경로가 아닌 절대경로로 설정하는 것도 이곳에서 설정
• package-lock.json : 프로젝트가 최초로 생성될 때 설치가 된 버전에 대한 기록. (추후에 명령이나 기능이 바뀐 새로운 다른 버전을 받게 되지 않도록 지원해주는 역할)
• package.json : 해당 프로젝트가 의존하고 있는 모든 package의 이름과 버전이 기록.
"name" = 프로젝트 이름
" version" = 해당 프로젝트의 버전 정보
"private" = true로 설정되어 있으면 해당 프로젝트가 npm에 올라가고 배포되는것을 막을 수 있음.
"scripts" = 프로젝트 실행과 관련된 명령어 등록.
"dependencies" = 사용중인 패키지 정보.
"devDependencies" = 개발 단계에서만 필요한 패키지들.
"eslintConfig" = 일괄성 있게 포드를 작성하기 위한 ESLint 관련 플러그인들에 대한 정보.
"browserlist" = 기본적으로 적용되어있는 구문은, 전 세계 사용자 통계의 상위 1%이상 사용된 각 브라우저의 최신 버전 2개에 대해서 지원한다는 의미.
#2 Vue 파일의 형식
Vue 파일은 크게 3개의 항목으로 나누어져 있습니다.
그냥 파일 하나에 HTML, JavaSciprt, CSS가 모두 있다고 생각하면 되는데,
HTML은 <template> ... </template> 내부에 작성하고, CSS는 <style> ... </style> 내부에 작성하고,
JavaScript는 <script> ... </script> 내부에 작성하면 됩니다.
스니펫이 설치되어있다면 새로운 vue 문서를 생성한 후 '< 엔터' 만 입력해도 자동으로 아래와 같은 템플릿이 완성됩니다.
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>template과 style 내부에는 일반 웹 만들듯이 HTML과 CSS 방식 그대로 작성하면 되며, 데이터 바인딩(데이터 가져와서 넣어주는것)이 필요한 부분만 vue 문법을 추가로 사용해주면 됩니다. (ejs나 php 사용해보셨다면 그것을 떠올리시면 됩니다)
script부분은 조금 형식이 정해져있는데 대충 아래와 같은 형식입니다.
<script>
import 작명 from '파일 위치'
export default {
name: '컴포넌트 이름',
componenets: {
HelloWorld,
},
data() {
return {
...
};
},
created() { ... },
mounted() { ... },
unmounted() { ... },
methods: {
...
}
</script>이제막 시작 단계라면 이건 하면서 하나씩 늘어나는 항목이다보니 다 다 알고 넘어갈 필요는 없고, 이것저것 다 넣다보면 내부에 이러이러한 것들이 이렇게 들어간다 정도로만 생각하고 넘어가면 될거 같습니다.
그나마 중요한거 몇가지를 뽑아보자면
(1) 각 컴포넌트는 이름(name)을 지정해 줘야 하는데, 이름은 2단어 이상(HelloWorld 등)으로 적어줘야 한다는것.
2단어 이상 이름을 짓는게 힘들다면 package.json 파일 내부에 있는 "rules" 항목에 다음 내용을 추가해주면 2단어 이상을 사용하지 않아도 됩니다.
"rules": {
"vue/multi-word-component-names": "off"
}(2) 컴포넌트같은것을 다른 문서를 이곳에 가져와 넣고자 한다면 상단에 import를 적어주고, components라는 항목에 해당 import 이름을적어줘야 한다는것.
(3) data() 는 데이터가 저장되는 장소. return { } 내부에 코드를 작성하며 이곳에서 데이터와 변수 등을 선언하고 html 영역에서 데이터 바인딩을 하여 화면에 출력을 하는 형식.
(4) 우리가 흔히 사용하는 JavaScript의 함수는 methods 내부에 작성.
function 생략한 함수명을 바로 작성한 후 실행할 코드를 내부에 작성해주면 된다.
data에서 선언한 값들에 대해 접근을 할 때는 this.를 붙여야 한다.
※ setInterval 등의 함수를 사용할때 화살표 함수를 사용하지 않을 경우, 위치가 맞지 않아 오류가 없어도 실행이 안되는 경우도 있으니 주의.
methods : {
increase(num){
this.counter[num]++;
},
}
created(), mounted() unmounted()는 생명주기 관련된거니 지금은 신경쓰지 않아도 됩니다.