본문내용 바로가기
MD의선택 무료배송 이벤트 사은품 소득공제

예제로 배우는 Vue.js Vue.js 기초부터 MEVN(MongoDB, Express, Vue.js, Node.js)까지

원철연 지음 | 에이콘출판 | 2019년 10월 25일 출간
클로버 리뷰쓰기
  • 정가 : 30,000원
    판매가 : 27,000 [10%↓ 3,000원 할인]
  • 통합포인트 :
    [기본적립] 1,500원 적립 [5% 적립] [추가적립] 5만원 이상 구매 시 2천원 추가적립 안내 [회원혜택] 실버등급 이상, 3만원 이상 구매 시 2~4% 추가적립 안내
  • 추가혜택 : 포인트 안내 도서소득공제 안내 추가혜택 더보기
  • 배송비 : 무료 배송비 안내
  • 배송일정 : 서울특별시 종로구 세종대로 기준 지역변경
    11월 30일 출고 예정 배송일정 안내
  • 바로드림 : 인터넷으로 주문하고 매장에서 직접 수령 안내 바로드림 혜택
    휴일에는 바로드림 픽업으로 더 빨리 받아 보세요. 바로드림 혜택받고 이용하기

이 책의 이벤트 해외주문/바로드림/제휴사주문/업체배송건의 경우 1+1 증정상품이 발송되지 않습니다.

  • 행사도서 포함 3만원 이상 구매 시 2021 캘린더 노트 선택가..
    2020.11.09 ~ 2020.12.09
  • 취업/수험서, 컴퓨터/IT 분야 도서 3만원 이상 구매 시 샤코..
    2020.10.14 ~ 2020.11.30
  • 개발자로 입문하기: 일단 이것부터 읽어보자!
    2019.05.31 ~ 2020.12.31
  • 에이콘의 도서를 한 눈에 살펴보세요
    2017.11.23 ~ 2020.12.31
  • 책을 통해 성장해나가는 개발자를 응원합니다.
    2017.06.22 ~ 2025.07.31
상품상세정보
ISBN 9791161753546(1161753540)
쪽수 444쪽
크기 188 * 235 * 33 mm /1030g 판형알림

책소개

이 책이 속한 분야

자바스크립트 프레임워크인 React, Angular, Vue 중 Vue.js는 가장 인기 있는 프론트엔드 Github 프로젝트가 됐다. 이 책에서는 Vue.js 학습에 필요한 기본적인 환경 설정부터 뷰 인스턴스, 컴포넌트, Vue-router를 이용한 라우팅, vuex를 활용한 효과적인 데이터 관리를 자세한 설명과 예제로 쉽게 이해할 수 있게 구성했다. 또한 마지막 장에서 각광받는 풀스택 중 하나인 MEVN(MongoDB, Express, Vue, Node)의 이론 설명과 함께 예제를 따라 하면서 클라이언트(Vue) - 서버단(Node, Express, MongoDB)이 어떻게 동작하는지 전체적으로 이해할 수 있게 구성했다.

작가의 말

강의를 할 때마다 학습자들에게 종종 “나는 단지 여러분보다 조금 먼저 알게 된 것을 전달하는 사람이며, 이 강의가 자신이 나아갈 방향을 정하는 데 조금이라도 도움이 되기를 바란다”라고 말하곤 한다. 요즘과 같이 새로운 기술이 자주 등장하고 인터페이스가 변하는 상황에서 이를 이해하고 강의를 하거나 책을 쓰는 일은 쉬운 일이 아닌 것 같다. 대표적인 예로 인공지능, 클라우드를 들 수 있으며 자바스크립트 관련된 분야도 그렇다다. 모두 소위 말하는 인적, 물적 자원이 집중되는 분야다.
자바스크립트 분야를 예로 들면 한동안 아마존에서 자바스크립트와 관련된 여러 책을 주문해 보곤 했지만 요즘은 더 이상 아마존에서 책을 구매하지 않는다. 왜냐하면 대부분의 책들이 저자의 정성이 가득 담긴, 심혈을 기울인 내용이었지만, 중요한 것은 책을 구매해서 읽는 시점에 수록된 예제가 동작하지 않거나 그 사이 변경된 API를 따로 학습해서 이해해야 하는 추가적인 노력이 필요했기 때문이다.
이 책은 2016년 대학교를 떠나 우즈베키스탄에서 KOICA 봉사단원으로 학생들에게 프로그래밍을 가르치던 2017년부터 조금씩 준비해서 나온 결과물이다. 이미 여러 권의 IT 책을 썼지만 매번 책을 쓰는 동안 수백 번 이상 자신과의 싸움을 해야 했고 쓰는 동안 버전이 변경돼 다시 수정하는 작업을 반복했다. 이 책도 모든 예제가 동작하도록 마무리하는 시점에서 다시 테스트를 했다. 개인적으로 모든 독자를 만족시킬 수 있는 책은 이 세상에 없다는 것이 불변의 진리라고 생각한다.
다만 이 책을 통해 Vue.js를 학습하는 독자에게 “책에 투자한 금액과 시간들이 조금은 의미가 있었다” 정도의 얘기를 들을 수 있었으면 좋겠다.
이 책을 학습할 때 HTML, CSS, 자바스크립트에 대한 기본적인 이해가 필요하다면 내 블로그에서 2013년 8월에 공개한 HTML, CSS, 자바스크립트 관련 책 한 권 분량의 자료(https://fromyou.tistory.com/581)를 참고하길 바란다.

목차

1장. Vue.js 소개

______양방향 데이터 바인딩
______가상 돔
______Vue.js의 장점
______Vue.js 현재와 향후 전망
__1.1 Vue.js 시작하기
____1.1.1 Node.js 설치 및 NPM 명령어 이해
________package.json을 만들기 위한 npm init
________패키지 설치를 위한 npm install, 삭제를 위한 npm uninstall
________npm start 명령을 이용한 실행
__1.1.2 VUE/CLI
__1.1.3 Visual Studio Code
________새로운 폴더 생성과 doc + tab 키를 이용한 index.html 기본 구조 만들기
________프로젝트를 실행하거나 패키지를 설치하는 방법
________scaffolding 기능
________Emmet 기능
________Lorem 문자열 입력하기
__1.1.4 Live Server
__1.1.5 Vue.js devtools 설치하기
__1.1.6 화살표 함수

2장. Vue.js 애플리케이션의 시작 - 뷰 인스턴스

__2.1 template 프로퍼티
__2.2 methods 프로퍼티
__2.3 computed 프로퍼티
____2.3.1 computed 프로퍼티를 이용한 필터링
__2.4 props 프로퍼티
__2.5 watch 프로퍼티
__2.6 한 페이지 내에서 다수의 뷰 인스턴스
__2.7 뷰 인스턴스 생존 주기

3장. 엘리먼트에 기능을 덧붙이는 디렉티브

__3.1 v-if, v-for를 이용한 흐름제어
____3.1.1 v-if, v-if … v-else, v-if … v-else-if … v-else 구문
____3.1.2 v-if와 v-show의 비교
____3.1.3 v-for를 이용한 반복 처리
__3.2 v-bind를 이용한 데이터 바인딩
____3.2.1 스타일을 적용하기 위한 v-bind:class, v-bind:style
____3.2.3 이미지 연결을 위한 v-bind:src와 링크 연결을 위한 v:bind:href
__3.3 v-model을 이용한 양방향 데이터 바인딩
__3.4 v-on을 이용한 이벤트 처리
____3.4.1 v-for를 이용해 컬렉션 이벤트 처리하기
____3.4.2 하나의 HTML 엘리먼트에 여러 개의 이벤트 적용하기
____3.4.3 이벤트 수식어

4장. 재사용이 가능한 레고(Lego)와 같은 컴포넌트

__4.1 컴포넌트의 정의 및 등록
____4.1.1 CDN을 이용한 방법
____4.1.2 VUE/CLI를 이용한 방법
__4.2 컴포넌트 적용 범위 이해하기
____4.2.1 CDN을 이용한 전역(global), 지역(local) 적용 이해하기
____4.2.2 VUE/CLI를 이용한 전역(global), 지역(local) 적용 이해하기
__4.3 컴포넌트 간 데이터 전달하기
____4.3.1 props 프로퍼티를 이용해 부모 컴포넌트에서 자녀 컴포넌트로 데이터 전달
____4.3.2 $emit( ) 메서드로 자녀 컴포넌트에서 부모 컴포넌트로 데이터 전달
________CDN을 이용한 방법
________Vue CLI를 이용한 방법
____4.3.3 이벤트 버스를 이용한 데이터 전달
________이벤트 버스의 초기화
________이벤트 버스의 사용
________CDN을 이용한 방법
________Vue CLI를 이용한 방법
__4.4 슬롯 사용하기
____4.4.1 Unnamed slot
____4.4.2 Named slot
____4.4.3 Scoped slot
____4.4.4 v-slot

5장 다양한 장치 디자인에 적합한 Materialize, Vuetify

__5.1 Materialize를 이용한 스타일링
________Materialize 다운로드 및 설치
____5.1.1 색, 정렬
____5.1.2 Image, Icon, Video
____5.1.3 장치의 화면 크기에 따른 Hide/Show Content 기능
____5.1.4 Grid
________반응형 레이아웃
________offset
________컬럼의 순서 바꾸기 push, pull
____5.1.5 Button
____5.1.6 Table
____5.1.7 Card
____5.1.8 Navbar
____5.1.9 Slider
____5.1.10 Autocomplete
____5.1.11 Scrollspy
__5.2 Vuetify를 이용한 스타일링
____5.2.1 Color, Text
____5.2.2 v-btn, v-icon
________v-btn
________v-icon
____5.2.3 Breakpoints, Visibility
____5.2.4 그리드 시스템
________v-container
________v-layout
________v-flex
____5.2.5 v-dialog
________Modal 형태의 대화상자
________Form 형태의 대화상자
____5.2.6 v-toolbar, v-navigation-drawer
__5.3 Vue.js + Cloud Firestore를 이용한 실시간 채팅 프로그램 만들기
________채팅 프로그램 구조
____5.3.1 Firebase 설정하기
____5.3.2 Vue 프로젝트 생성
________Firebase 연결을 위한 파일 추가
________디자인을 위한 css, icon 추가
________라우팅 기능을 위한 router.js 설정하기

6장. 사용자로부터 데이터 입력 및 서버로 데이터 전달을 위한 Forms

__6.1 Form 관련 엘리먼트에 대한 이해
____6.1.1 한 행(row) 텍스트 입력을 위한 input 엘리먼트와 v-model
____6.1.2 멀티 행 텍스트 입력을 위한 textarea 엘리먼트와 v-model
____6.1.3 옵션 선택 가능한 checkbox와 v-model
____6.1.4 선택 가능한 다수의 아이템을 바인딩하는 select
____6.1.5 v-model 수식어을 이용한 공백 제거, data 프로퍼티 지연 업데이트
__6.2 유효성 검사
____6.2.1 vue.js에서의 기본적인 유효성 검사
____6.2.2 Vuetify를 이용한 form 유효성 검사

7장. 웹사이트 탐색을 위한 라우팅

__7.1 vue-router로 라우팅 프로젝트 생성하기
__7.2 라우터 뷰, 라우터 링크, 리다이렉트
__7.3 중첩된 라우트
__7.4 Named Routes와 Named Views
________Named Route
________Named View
__7.5 네비게이션 가드
____7.5.1 컴포넌트 수준의 Guard 메서드
________beforeRouteEnter( ) 메서드
________beforeRouteLeave( ) 메서드
________beforeRouteUpdate() 메서드
____7.5.2 Per-Route Guard
____7.5.3 전역 Navigation Guard

8장. 효율적인 데이터 관리를 위한 Vuex

__8.1 Vuex 패키지 설치하기
__8.2 Getters
__8.3 Mutations
__8.4 Actions
__8.5 mapState, mapGetters, mapMutations, mapActions
__8.6 Mutations와 Actions의 차이점

9장. MEVN(MongoDB, Express, Vue, Node.js) 기반 RESTful 서비스

__9.1 REST 정의 및 개념 이해하기
________REST의 정의
________REST의 제약 조건
________RESTful 웹서비스
__9.2 콜백, promise 이해하기
____9.2.1 동기와 비동기
____9.2.2 콜백함수, callback Hell
____9.2.3 Promise
________promise 생성하기
________promise.then() 메서드
________promise.catch() 메서드
____9.2.4 Promise Chaining
____9.2.5 async/await를 이용한 비동기 처리
__9.3 Axios
____9.3.1 GET 요청
________응답 객체
________에러 객체
____9.3.2 POST request
____9.3.3 PUT request
____9.3.4 DELETE request
__9.4 MongoDB
________다운로드 및 설치
____9.4.1 데이터 추가(CREATE)
____9.4.2 데이터 검색(READ)
____9.4.3 데이터 수정(UPDATE)
____9.4.4 데이터 삭제(DELETE)
____9.4.5 save( ) 메서드로 데이터 추가, 수정
__9.5 Node.js + MongoDB를 이용한 RESTful 서비스 만들기
____9.5.1 Express.js
____9.5.2 RESTful 서비스 서버 + MongoDB
____9.5.3 Postman을 이용한 REST 서비스 테스팅
________데이터 추가(POST)
________데이터 검색(GET)
________데이터 업데이트(PUT)
________데이터 삭제(DELETE)
__9.6 Vue.js + RESTful 서비스 + MongoDB
________데이터 추가하기
________데이터 수정하기
________데이터 삭제하기

추천사

강창훈(마이크로소프트 AI MVP)

올해 프론트엔드에서 백엔드까지 여성 개발자를 양성하는 강의를 진행하면서 수업에서 활용하기 위한 Vue.js 참고도서에 대한 목마름을 느끼던 차에 지인을 통해 이 책을 접하게 됐다. 이 책은 Vue.js 주요 디렉티브 문법부터... 더보기

김도균(Microsoft MVP, MCT)

마이크로소프트 MVP가 되면서 친분을 맺은 원철연 님은 오랫동안 성공회대학교에서 C#부터 웹 프로그래밍, 데이터베이스까지 프로그래밍 전반의 탄탄한 기본기를 학생들에게 잘 가르치기로 소문난 선생님이었다. 이미 몇 권의 프로그래... 더보기

장형욱(LINE, DevOps 개발자)

Vue.js에 관심이 있는 입문자가 Vue.js에 쉽고 편하게 접근할 수 있도록 풀어낸 책이다. 그리고 Vue.js뿐 아니라 여러 환경의 개발 방법이나 브라우저로 디버깅을 하는 방법까지 수록돼 있어 놓칠 수도 있는 기초를 튼... 더보기

한상훈(넥슨코리아)

이미 웹 프로그래머로 활동하고 있는 이들에게도, 또 준비를 하고 있는 이들에게도 Vue.js는 더 이상 낯선 이름이 아니다. 그래서 대부분이 배워보고 싶다는 생각을 하고 있지만 막상 시작하려고 하면 어디서부터 어떻게 시작해야... 더보기

출판사 서평

★ 이 책에서 다루는 내용 ★

■ MEVN(MongoDB, Express, Vue, Node) 스택 구현
■ 환경 설정부터 시작해 상세한 설명과 예제로 초보자도 쉽게 이해할 수 있는 설명
■ CDN과 Vue/CLI를 이용한 프로젝트 생성과 개발
■ Materialize, Vuetify를 이용한 반응형 앱 디자인
■ Vue-router를 이용한 웹사이트 탐색 방법과 접근 제어
■ Vuex를 이용한 효율적인 데이터 관리
■ REST, RESTful 개념과 실제 구현
■ Mongoose를 이용한 RESTful 서버와 M... 더보기

Klover 리뷰 (0)

북로그 리뷰 (0) 쓰러가기

도서 구매 후 리뷰를 작성하시면
결제 90일 이내 300원, 발송 후 5일 이내 400원, 이 상품의 첫 리뷰 500원의 포인트를 드립니다.

포인트는 작성 후 다음 날 적립되며, 도서 발송 전 작성 시에는 발송 후 익일에 적립됩니다.
북로그 리뷰는 본인인증을 거친 회원만 작성 가능합니다.
(※ 외서/eBook/음반/DVD/GIFT 및 잡지 상품 제외) 안내
  • 해당도서의 리뷰가 없습니다.

문장수집 (0) 문장수집 쓰기 나의 독서기록 보기
※구매도서의 문장수집을 기록하면 통합포인트 적립 안내

교환/반품/품절안내

※ 상품 설명에 반품/교환 관련한 안내가 있는 경우 그 내용을 우선으로 합니다. (업체 사정에 따라 달라질 수 있습니다.)

교환/반품/품절안내
반품/교환방법 마이룸 > 주문관리 > 주문/배송내역 > 주문조회 > 반품/교환신청 ,
[1:1상담>반품/교환/환불] 또는 고객센터 (1544-1900)

※ 오픈마켓, 해외배송주문, 기프트 주문시 [1:1상담>반품/교환/환불]
    또는 고객센터 (1544-1900)
반품/교환가능 기간 변심반품의 경우 수령 후 7일 이내,
상품의 결함 및 계약내용과 다를 경우 문제점 발견 후 30일 이내
반품/교환비용 변심 혹은 구매착오로 인한 반품/교환은 반송료 고객 부담
반품/교환 불가 사유
  • 소비자의 책임 있는 사유로 상품 등이 손실 또는 훼손된 경우
    (단지 확인을 위한 포장 훼손은 제외)
  • 소비자의 사용, 포장 개봉에 의해 상품 등의 가치가 현저히 감소한 경우
    예) 화장품, 식품, 가전제품(악세서리 포함) 등
  • 복제가 가능한 상품 등의 포장을 훼손한 경우
    예) 음반/DVD/비디오, 소프트웨어, 만화책, 잡지, 영상 화보집
  • 소비자의 요청에 따라 개별적으로 주문 제작되는 상품의 경우 ((1)해외주문도서)
  • 디지털 컨텐츠인 eBook, 오디오북 등을 1회 이상 다운로드를 받았을 경우
  • 시간의 경과에 의해 재판매가 곤란한 정도로 가치가 현저히 감소한 경우
  • 전자상거래 등에서의 소비자보호에 관한 법률이 정하는 소비자 청약철회 제한 내용에
    해당되는 경우
(1) 해외주문도서 : 이용자의 요청에 의한 개인주문상품으로 단순변심 및 착오로 인한 취소/교환/반품 시 ‘해외주문 반품/취소 수수료’ 고객 부담 (해외주문 반품/취소 수수료 : ①서양도서-판매정가의 12%, ②일본도서-판매정가의 7%를 적용)
상품 품절 공급사(출판사) 재고 사정에 의해 품절/지연될 수 있으며, 품절 시 관련 사항에 대해서는
이메일과 문자로 안내드리겠습니다.
소비자 피해보상
환불지연에 따른 배상
  • 상품의 불량에 의한 교환, A/S, 환불, 품질보증 및 피해보상 등에 관한 사항은
    소비자분쟁해결 기준 (공정거래위원회 고시)에 준하여 처리됨
  • 대금 환불 및 환불지연에 따른 배상금 지급 조건, 절차 등은 전자상거래 등에서의
    소비자 보호에 관한 법률에 따라 처리함

바로가기

  • 우측 확장형 배너 2
  • 우측 확장형 배너 2

최근 본 상품