프로그래밍 공부/Vue.js \ React 3

3. Vue.js 작동 순서

Vue.js 작동 순서 1. package.json 설정들이 들어가져있다. vue의 버전 같은데 전부 기입되어져있다. eslintConfig 등도 포함되어져있다. Spring 의 pom.xml 같은 역할을 한다고 보면 될거같다. 2. index.html 기본적인 html 파일이다. App.vue가 들어갈 장소를 명시해놓는 뼈대 역할을 한다. 왠만해서는 이 파일을 수정하지 않는다. 바로 이 부분이 App.vue 가 들어갈 장소이다. 3. main.js 전역으로 파일을 연결시키려면 main에서 처리하면 된다. 이 파일에서 import한 파일들은 나머지 뷰에서 잘 동작한다. main.js 부터 작동되므로 가장 먼저 마운트 되는 뷰는 new Vue({ router, store, render: (h) => h(A..

2. Vue.js 기본 앱 분석 - 1

Vue는 총 3가지로 나뉘어진다. - template 이랑 동일하다. 다른 점은 v-text 같은 {{ }} 같은 데이터 바인딩이 들어간다. 에 아이디 값을 넣어넣고 데이터가 들어갈 장소를 지정해준다. 아니면 불러온 파일에 어떤데이터가 들어갈 것인지 지정해준다. v-on , v-bind 등이 여기에서 기입된다. - script import 로 파일 주소를 불러와서 해당 변수명으로 링크를 걸어주어야한다. 이때 이름은 해당 파일의 이름과 달라도 괜찮다. 같아야하는건 해당 파일 내에 있는 export 데이터 내의 name 요소 이다. 스크립트에서 어떤 데이터가 어떤 요소에 들어갈 건지 결정한다. - style Css 요소들이 각 Vue파일내에 있는 tag들에게만 적용되는게 아니다. 전체적으로 전부 다 들어간다..

Vue.js 시작하기

Vue.js 시작하기 1. Vue.js 설치하기 Vue.js 공식 사이트가서 가이드를 그대로 하면 된다. - node.js 설치 node, npm 버전 확인하기 node.js가 잘 설치되었는지 확인해 본다. - VScode 설치 VSCode 터미널 들어가서 $ npm install vue 로 Vue.js 최신 버전을 설치 [Error 메세지] 이 시스템에서 스크립트를 실행할 수 없으므로 파일을 로드할 수 없습니다. 자세한 내용은about_Execution_Policies를 참조 window 파워쉘 가서 Get-ExecutionPolicy 확인 Restrict 이면 Set-ExecutionPolicy / RemoteSigned 으로 설정을 바꾸어준다. 그 다음부터 다시 차근차근 진행하면서 설치하며 된다. ..