vue7 [Vue.js] 05. Single File Components (SFC) vue.js의 vue파일 구조에 대해서 알아보겠습니다. 이전에 vue-router에서도 HelloWorld.vue에 대해서 간단히 살펴보았지만, 렌더링 되는 vue페이지는 한개의 파일에서 모든것을 처리하는 구조로 구현이 가능합니다. 이 말은... 한개의 파일로 한개의 화면을 위한 application제작이 가능하다는 말 입니다. 이것이 SFC(Single File Components)의 간단한 설명이라고 볼 수 있습니다. 그렇다면, 이해는 뒤로하고 실질적으로 한개의 추가 페이지를 제작해서 눈으로 확인해 보겠습니다. SFC의 구조는 크게 3가지로 구분이 됩니다. template - 직접적으로 화면에 표시할 내용의 코드가 들어가는 부분입니다. 흔히 알고 있는 HTML Tag가 들어가며, vue의 데이터 바인.. 2021. 2. 5. [Vue.js] 04. vue-router 오늘은 SPA(Single Page Application)의 시작이 되는 vue-router에 대해서 간단하게 알아보겠습니다. SPA라 함은 싱글 페이지 어플리케이션을 이르는 말로, 전체 vue.js로 개발된 화면들이 하나의 페이지로 동작을 하게됩니다. 따라서 화면의 이동을 위해서는 전체 URL을 사용해서 진행하는 것이 아닌... router를 통해서 해당 화면으로 이동하는 방식을 사용하게 됩니다. 이런 router 기능을 제공하는 것이 vue에서는 vue-router 플러그인 입니다. 그럼 vue-cli를 통해서 자동으로 생성한 프로젝트를 뜯어보면서 vue-router 동작 구조를 살펴보겠습니다. 왜냐하면, 자동으로 기본구성이 되어있기 때문입니다. 1. 라우터 객체생성 우선 최초로 시작되는 vue in.. 2021. 2. 4. [Vue.js] 03. 프로젝트 구조 vue.js의 프로젝트를 생성했으니... 이제 그 구조를 살펴보겠습니다. 실로 많은 파일들로 구성이 되어있습니다. 그냥 vue init으로 생성한 프로젝트의 용량이 195MB가 되는 것만 봐도... 참으로 엄청난 아이들이 있겠구나... 할 수 있죠. 하지만 node_modules이라는 곳에 많은 관련 라이브러리가 있기 때문에 더 그렇게 느껴질 수 있습니다. 그렇다면, 그 첫 발자국으로 해당 프로젝트의 구조에 대해서 간단하게 알아보고 가는 시간을 가져보고자 합니다. [build] 해당 폴더 안에는 webpack 빌드 관련 설정들이 들어있는 장소입니다. webpack이라고 하면, 기본적으로 모듈 번들러로서, html / CSS / img / wav 등 다양한 항목들에 대한 변환을 수행하는 아이입니다. 보통은.. 2021. 2. 4. 이전 1 2 다음
