본문 바로가기

책/Vue.js 퀵스타트

서버 사이드 렌더링 프로젝트 생성과 초기화 mkdir nuxttest cd nuxttest yarn init 또는 mpn init yarn add nuxt@1.4.1 또는 npm install --save nuxt@1.4.1 package.json scripts 추가 nuxt : 개발 버젼으로 실행 nuxt build : Webpack을 이용해 애플리케이션을 빌드. 코드 난독화, 압축을 수행하므로 배포버전으로 적합 nuxt start : 운영버젼으로 서버를 시작 nuxt generate : 애플리케이션을 빌드 후 모든 경로 화면을 정적 html 로 생성 { "name": "nuxttest", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": .. 더보기
단위 테스트 Mocha 플러그인을 활용한 단위 테스트 프로젝트 생성 시 수동 설정을 하면 단위 테스트를 사용할 수 있음 C:\JetBrains\vscode_workspace>vue create test1 Vue CLI v4.5.9 ? Please pick a preset: (Use arrow keys) Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) > Manually select features Vue CLI v4.5.9 ? Please pick a preset: Manually select features ? Check the features needed for your project: (*) Choose Vue ver.. 더보기
트랜지션 효과 CSS 트랜지션 기초 트랜지션 컴포넌트 기초 보여주기 토글 트랜지션 CSS 클래스 트랜지션 CSS 클래스 설명 v-enter 요소가 나타나기 시작할 때 적용할 클래스 v-enter-active 요소가 나타나는 트랜지션이 진행되는 동안 적용할 클래스 v-enter-to 요소가 나타나는 트랜지션이 완료될 때 적용할 클래스 v-leave 요소가 사라지기 시작할 때 적용할 클래스 v-leave-active 요소가 사라지는 트랜지션이 진행되는 동안 적용할 클래스 v-leave-to 요소가 사라지는 트랜지션이 완료될 때 적용할 클래스 CSS 애니메이션 처리 보여주기 토글 트랜지션 이벤트 훅 보여주기 토글 Velocity.js 사용 yarn add velocity-animate@1.5.1 또는 npm install .. 더보기
vue-router를 이용한 라우팅 vue-router란? SPA(Single Page Application)은 기본적으로 페이지가 하나이기 때문에 URI별로 다른 화면이 나타나도록 구현하기 힘듦 사용자가 요청한 URI 경로에 따라 각각 다른 화면이 랜더링이 필요 제공하는 기능 중첩된 경로, 뷰 매핑 가능 컴포넌트 기반 라우팅 구현 Vue.js 의 전환효과(transition) 적용 히스토리모드, 해시모드 사용가능 쿼리스트링, 파라미터, 와일드카드 사용가능 vue-router의 기초 routertest 프로젝트 생성 vue create routertest cd routertest yarn add vue-router bootstrap@3.3.x 또는 npm install --save vue-router bootstrap@3.3.x src/c.. 더보기
Vuex를 이용한 상태관리 왜 Vuex를 사용하는가? MVVM패턴에서는 데이터가 핵심. 데이터가 변경되면 View Model을 통해서 View가 즉시 변경됨 모든 화면은 데이터에의해 결정되는 구조이기 때문에 애플리케이션의 데이터를 체계적으로 구조화 하는 것이 중요. eventBus의 문제점 자식 컴포넌트들의 계층구조가 복잡해지면 일일히 부모 컴포넌트에 저장된 정보를 계층 구조를 따라 속성으로 전달해야 함 특히 유지 보수 중에 새로운 상태 정보가 추가되면(data 옵션 객체에 정보가 추가되면) 최종 자식 컴포넌트까지 전달되는 경로에 모든 컴포넌트들의 속성(props) 옵션이 모두 변경되어야 함. 전역객체의 문제점 상태가 어느 컴포넌트, 어떤 메서드에 의해서 언데, 어떻게 변경하는지 추적하기 힘듦.(데이터를 변경하는 것은 모든 컴포넌.. 더보기
axios를 이용한 서버통신 서비스 API 소개 https://github.com/stepanowon/contactsvc stepanowon/contactsvc node.js + express + sqlite 기반의 간단한 RESTful Service 예제 - stepanowon/contactsvc github.com npm install, npm run start 를 통해서 실행 localhost:3000 으로 확인 연락처 서비스 목록 GET /contacts 연락처 목록을 조회하며 특정 페이지 데이터를 조회 GET /contacts/no 특정 일련번호 한 건의 연락처 정보를 조회 GET /contacts/search/:name 이름의 일부를 이용해 연락처를 검색. 2글자 이상가능 POST /contacts 새로운 연락처 추가 P.. 더보기
컴포넌트 심화 단일 파일 컴포넌트 전역 수준 컴포넌트의 문제점 빌드 단계가 없으므로 ECMAScript2015, TypeScript와 같은 최신 자바스크립트 문법을 사용할수 없음. 따라서 HTML 내부에 직접 ECMAScript2015 이전 버전의 자바스크립트 코드를 작성해야 함 CSS를 지원하지 않음. 컴포넌트들은 고유한 스타일 정보를 포함하는 경우가 많은데, 전역컴포넌트에서는 CSS스타일을 빌드하고 모듈화 할 수 있는 기능을 제공하지 않음 컴포넌트의 템플릿이 작성될 때 HTML 파일안에 여러 개의 태그가 작성되어 식별하기 어려움. 또한 템플릿마다 고유한 id를 부여하고 컴포넌트들도 고유한 이름을 지정해야 함 vue cli를 이용하여 프로젝트 생성 vue-loader : , src/components/List.vue.. 더보기
Vue-CLI 도구 Vue CLI 구성요소와 설치 CLI: @vue/cli 새로운 Vue 애플리케이션 프로젝트를 생성할 수 있음 vue 단일 파일 컴포넌트를 설정없이 실행하여 테스트 할 수 있음 GUI 환경으로 프로젝트를 생성하거나 관리할 수 있음 CLI 서비스: @vue/cli-service CLI 서비스는 프로젝트가 생성될 때 개발 의존성으로 설치되는 구성요소임. 내부는 웹팩과 웹팩 개발 서버 기반으로 작성됨 프로젝트를 웹팩 개발 서버 기반으로 구동할 수 있음 프로젝트 소스코드와 리소스를 빌드하고 번들링할 수 있음 프로젝트 코드를 테스트할 수 있음 CLI 플러그인 Vue CLI로 생성된 프로젝트 추가적인 기능을 제공하는 npm 패키지 router : 애플리케이션에 라우팅 기능을 제공하는 vue-router 패키지와 예제.. 더보기

티스토리툴바