반응형 vue.js22 Vue-CLI 시작하기(프로젝트 생성 및 디렉토리 구조) Vue-CLI(Command Line Interface) vue 개발환경을 설정해는 명령어 실행 도구 기본적인 프로젝트 구조 세팅으로 디렉토리 구조 및 webpack 등 설정 Vue-CLI 설치 - 기본적으로 nodejs 및 npm 설치가 되어있어야 함 # Global 설치 npm install -g @vue/cli # 확인 vue --version - 5.0.3버전이 설치 되었음 Vue-CLI 프로젝트 생성 - vue create '프로젝트명'으로 실행 vue create hello-world - vue3가 디폴트로 선택되어 나오는데 일단 vue2를 공부 중임으로 Vue2선택하고 엔터 - 생성이 완료되면 아래와 같이 실행 명령이 나옴 - 명령어 실행 $ cd hello-world $ npm run se.. 2022. 3. 21. VSCode Parsing error: No Babel config file detected for .vue, .js 파일 VSCode로 vue 프로젝트를 생성하고 .vue, .js 파일들을 클릭해서 보니 아래와 같은 빨간색 밑줄과 함께 Parsing에러가 떴다. 실행에는 문제가 없어보이지만 신경이 계속쓰여 조치 내용을 알아봤다. VSCode에서 프로젝트의 ESLint 설정 파일 관련 에러라고 하는데 VSCode settings.json에서 아래 내용 추가하면 없어진다. 1. VSCode 단축키 ⌘,(=Code > Preference > Settings) 실행하고, 우측 상단에 아래 아이콘을 클릭한다. 2. 아래 eslint 관련 설정을 추가하는 내용 작성 후 저장한다. "eslint.workingDirectories": [ { "mode": "auto" } ] 3. 다시 화면을 가보면 에러가 사라진 것을 볼 수 있다. 2022. 3. 20. Vue.js Router 개념 및 구성 Vue Router Vue에서 SPA(Single Page Application) 웹 페이지 변경/전환을 지원하는 라이브러리 페이지 변경을 위해서 DOM을 새로 갱신하는 것이 아닌 변경된 요소영역(컴포넌트)만 갱신 Vue Router 태그 - 페이지 이동 태그, HTML 태그로 표시되어 클릭 시 URL 값으로 이동 Login - 변경되는 URL에 따라 해당 컴포넌트를 표시해주는 영역 Vue Router 인스턴스 - Vue Router 기능은 Router인스턴스를 통해서 사용 가능 // Router 인스턴스 생성 var router = new VueRouter({ mode: "history", // 기본 값은 Hash모드(history 모드를 사용하면 브라우저 히스토리 스택에 기록) routes: [ //.. 2022. 3. 19. Vue.js 컴포넌트와 컴포넌트 통신 Vue 컴포넌트 화면을 조합해서 구성할 수 있게 블럭형태로 분할 된 화면영역(Component)을 의미 컴포넌트 간의 관계는 일반적으로 Tree 구조 화면 구성요소의 재활용 각 컴포넌트는 각각의 고유한 유효범위를 가짐 전역(Global) 컴포넌트 Vue 변수를 사용해서 등록하는 컴포넌트 모든 인스턴스에서 접근 가능 일반적으로 전역 컴포넌트를 선언해서 사용하는 경우는 거의 없음, 대부분 플러그인, 3thParty 라이브러리 사용 시 활용 됨 Vue.component("global-component", { template: "Content", }); 지역(Local) 컴폰너트 Vue 인스턴스에서 'components' 속성을 사용해서 정의 해당 인스턴스의 유효범위 내에서만 사용 가능 new Vue({ el:.. 2022. 3. 19. Vue.js 인스턴스 - 옵션(속성) 및 라이프사이클 Vue 인스턴스 Vue를 사용하기 위해 필수적으로 생성해야 하는 기본 단위(new Vue();) Vue인스턴스는 Vue를 통해 생성하는 하나의 오브젝트 인스턴스를 사용함으로써 Vue에서 미리 선언되어 있는 속성,API를 재사용 및 활용 할 수 있음 Vue 인스턴스 옵션(속성) el: Vue가 실행되는 html DOM요소를 지정, CSS선택자를 사용(ex. id: #, class: . 접두어 사용) data: Vue인스턴스가 관리하는 데이터, Reactivity 반영(data 변경 시 화면 자동 반영) template: 화면에 표시할 요소(html, css 등) props: 부모컴포넌트의 데이터를 받을 수 있는 속성의 리스트([]) methods: 화면의 동작 및 이벤트 로직을 제어하는 메소드 선언 com.. 2022. 3. 16. Vue.js란 무엇인가? - Hello World Vue.js 프론트엔드 개발을 쉽게하기 위한 react와 함께 대중적인 오픈소스 javascript 프레임워크 MVVM패턴의 ViewModel에 해당하여, UI코드와 데이터제어 제어 로직을 분리 SPA(Single Page Application)를 구축하는데 이용 가능 View(html DOM): 사용자에게 보이는 화면. Model(JS): 데이터를 담는 용기, 보통 서버에서 가져온 데이터를 javascript 객체로 저장 ViewModel: View와 Model의 중간 영역으로 DomListener와 DataBinding을 제공하는 영역 DOM: HTML 문서에 들어가는 요소(tag, class, attribute 등)의 정보를 담고 있는 데이터 트리 DOM Listener: DOM의 변경에 대한 즉각.. 2022. 3. 16. 이전 1 2 3 다음 반응형
