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

백견불여일타 Vue.js 입문 예제와 실습문제에 집중한 프론트엔드 입문서

Yoshinao Mori 지음 | 신대호 옮김 | 로드북 | 2020년 05월 18일 출간
  • 정가 : 22,000원
    판매가 : 19,800 [10%↓ 2,200원 할인]
  • 통합포인트 :
    [기본적립] 1,100원 적립 [5% 적립] [추가적립] 5만원 이상 구매 시 2천원 추가적립 안내 [회원혜택] 실버등급 이상, 3만원 이상 구매 시 2~4% 추가적립 안내
  • 추가혜택 : 포인트 안내 도서소득공제 안내 추가혜택 더보기
  • 배송비 : 무료 배송비 안내
  • 배송일정 : 서울특별시 종로구 세종대로 기준 지역변경
    지금 주문하면 내일(30일,토) 도착 예정 배송일정 안내
  • 바로드림 : 인터넷으로 주문하고 매장에서 직접 수령 안내 바로드림 혜택
    휴일에는 바로드림 픽업으로 더 빨리 받아 보세요. 바로드림 혜택받고 이용하기

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

  • MANNING, O'REILLY, PACKT, WILE..
    2016.03.07 ~ 2020.12.31
상품상세정보
ISBN 9788997924578(8997924575)
쪽수 324쪽
크기 189 * 258 * 15 mm /661g 판형알림

책소개

이 책이 속한 분야

이 책은 프론트엔드 자바스크립트 프레임워크 Vue.js를 빠르게 배우고 현업에 적용하고자 하는 개발자 혹은 프론트엔드 입문자를 위한 책이다. 80여 개의 예제와 각 장마다 실습문제를 제공하고 있으며 마지막 장에는 Json 기반 게시판 프로젝트를 진행해봄으로써 Vue.js로 웬만한 프론트엔드 프로그램을 디자인할 수 있는 역량을 가질 수 있을 것이다.

[샘플원고] www.roadbook.co.kr/231

대상 독자
자바스크립트 프레임워크 Vue를 빠르게 배우고 실무에 적용하고자 하는 개발자
프론트엔드 자바스크립트 프레임워크를 배우고자 하는 프론트엔드 입문자

상세이미지

백견불여일타 Vue.js 입문 도서 상세이미지

저자소개

저자 : Yoshinao Mori

컴퓨터가 이 세상에 등장한 시대부터 미니게임을 만들어 오길 30년. 현재는 IOS 어플리케이션과 웹 컨텐츠 제작, 집필 활동, 관서학원대학과 성안조형대학 비상근 강사, 프로그래밍 스쿨 코프리의 강사 등 프로그래밍에 관한 폭넓은 활동을 하고 있다. 〈〈Python 1년생〉〉, 〈〈Java 1년생〉〉(성안당 번역), 〈〈Xcode로 시작하는 아이폰 프로그래밍〉〉(로드북 번역), 〈〈인공지능 앱을 만들어 보자!〉〉 〈〈재미있게 배우는 알고리즘과 프로그래밍 도감'(마이 나비 출판), 〈〈과연! 프로그래밍〉〉(SB크리에이티브) 등을 집필하였다.

역자 : 신대호

웹 개발자이다. 일본에서 웹 솔루션 관련 SI 업무를 다수 진행하였고 웹 스크립트 언어를 중점적으로 다루고 있다. 현재는 게임회사에 근무 중이며 게임 서비스에 필요한 웹 개발을 진행하고 있다. 웹 개발 영역에서 프론트 프레임워크의 중요성이 커져 React, Vue 등의 서비스 도입을 진행하였다.

목차

지은이의 글
편집자이자 베타테스터의 글
일러두기

1장 Vue.js란?
01 Vue.js란?
02 Vue.js는 “데이터와 뷰를 연결해 주는 역할”
03 설치해 봅시다
04 한번 실행해 봅시다
05 정리
정리해봅시다
실습해봅시다
컬럼_다른 작성법
컬럼_CSS 예제

[함께 해봐요] 클릭한 횟수를 표시하는 버튼 : countup.html

2장 데이터 표시
01 Vue 인스턴스 만들기 : new Vue
02 데이터를 그대로 표시 : {{데이터}}
03 사용할 수 있는 데이터의 종류
04 정리

정리해봅시다
실습해봅시다

컬럼_싱글 쿼테이션과 더블 쿼테이션

[함께 해봐요] 데이터를 있는 그대로 표시하는 예제 : hello1.html
[함께 해봐요] 데이터를 v-text로 표시하는 예제 : hello2.html
[함께 해봐요] 데이터로 HTML을 표시하는 예제 : hello3.html
[함께 해봐요] 여러 가지 데이터 형을 표시하는 예제 : datatext1.html
[함께 해봐요] JavasScript를 이용하여 표시하는 예제 : datatest2.html
[함께 해봐요] 배열값을 표시하는 예제 : datatest3.html
[함께 해봐요] 오프젝트 데이터를 표시하는 예제 : datatest4.html
[함께 해봐요] JavaScript로 만든 데이터를 표시하는 예제 : datatest5.html
[함께 해봐요] 오브젝트의 내용을 확인하는 예제 : datatest6.html

3장 속성을 지정할 때
01 요소의 속성을 데이터로 지정하는 : v-bind
02 정리

정리해봅시다
실습해봅시다

컬럼_v-bind의 생략
컬럼_케밥 표기법, 카멜 표기법, 파스칼 표기법

[함께 해봐요] 이미지를 지정하는 예제 : bindtext1.html
[함께 해봐요] 링크를 지정하는 예제 : bindtest2.html
[함께 해봐요] align 지정 : bindtest3.html
[함께 해봐요] 인라인 스타일 지정 : bindtest4.html
[함께 해봐요] 클래스 지정 : bindtest5.html

4장 유저 입력을 연결할 때
01 입력 폼을 데이터와 연결하기 : v-model
02 정리

정리해봅시다
실습해봅시다

[함께 해봐요] 입력한 문자열을 표시하는 예제 : modeltest1.html
[함께 해봐요] 입력한 문장과 문자수를 표시하는 예제 : modeltest2.html
[함께 해봐요] 체크박스의 ON/OFF를 확인하는 예제 : modeltest3.html
[함께 해봐요] 복수의 체크박스의 ON을 배열로 만드는 예제 : modeltest4.html
[함께 해봐요] 동의에 체크하면 송신 버튼이 활성화되는 예제 : modeltest5.html
[함께 해봐요] 선택한 라디오 버튼을 표시하는 예제 : modeltest6.html
[함께 해봐요] 이미지 출력을 라디오 버튼으로 변경하는 예제 : modeltest7.html
[함께 해봐요] 문자열이 선택한 색으로 변하는 예제 : modeltest8.html
[함께 해봐요] 복수의 선택을 배열로 처리 : modeltest9.html
[함께 해봐요] 다 쓰고 나서 입력하는 예제 : modeltest10.html
[함께 해봐요] 입력 후 자동으로 수식으로 변경되는 예제 : modeltest11.html
[함께 해봐요] 입력을 자동으로 수식으로 변경하지 않는 예제 : modeltest11b.html
[함께 해봐요] 앞뒤의 공백을 자동으로 제거하는 (트림) 예제 : modeltest12.html
[함께 해봐요] 앞뒤의 공백을 자동으로 제거(트림) 하지 않는 예제 : modeltest12b.html

5장 유저 조작과 연동
01 이벤트와 연결하기 : v-on
02 정리

정리해봅시다
실습해봅시다

[함께 해봐요] 클릭하면 1이 증가하는 예제 : ontest1.html
[함께 해봐요] 클릭하면 두번째는 누를 수 없게 되는 “좋아~” 버튼 예제 : ontest2.html
[함께 해봐요] 클릭하면 지정된 값만큼 증가시키는 예제 : ontest3.html
[함께 해봐요] [Enter] 키를 누르면 얼럿을 표시하는 예제 : ontest4.html
[함께 해봐요] [Shift] + [Enter] 키를 누르면 얼럿을 표시하는 예제 : ontest5.html

6장 조건과 반복의 사용
01 조건에 따른 표시 : v-if
02 반복 표시 : v-for
03 정리

정리해봅시다
실습해봅시다

컬럼_v-show

[함께 해봐요] true일 때만 표시하는 예제 : iftest1.html
[함께 해봐요] true와 false를 ON/OFF로 표시하는 예제 : iftest2.html
[함께 해봐요] 클릭하면 “좋아~” 버튼을 삭제하는 예제 : iftest3.html
[함께 해봐요] 배열 데이터를 리스트로 표시하는 예제 : foretest1.html
[함께 해봐요] 오브젝트 배열 데이터를 리스트로 표시하는 예제 : fortest2.html
[함께 해봐요] 1×5 ~ 10×5를 반복 표시하는 예제 : fortest3.html
[함께 해봐요] 배열 데이터를 번호가 붙어 있는 리스트로 표시하는 예제 : fortest4.html
[함께 해봐요] 배열 데이터를 테이블로 표시하는 예제 : tabletest0.html
[함께 해봐요] 배열 데이터를 테이블로 표시하는 예제 2 : tabletest.html
[함께 해봐요] 버튼으로 리스트에 추가/삭제 예제 : fortest5.html
[함께 해봐요] 버튼을 클릭하면 소트하는 예제 : fortest6.html
[함께 해봐요] 짝수만 표시하는 예제 : fortest7.html
[함께 해봐요] 버튼을 클릭하면 짝수만 표시하는 예제 : fortest8.html

7장 Google Charts와 연동 - 자바스크립트 라이브러리와 연동하는 방법
01 구글 차트란?
02 Google Charts와 연동하기
03 정리

정리해봅시다
실습해봅시다

[함께 해봐요] Google Charts에서 원 그래프를 표시하는 예제 : GoogleCharts.html
[함께 해봐요] Google Charts의 원 그래프에 버튼으로 투표할 수 있는 예제 : GoogleChartsVue.html

8장 데이터의 변화 감지
01 데이터를 사용한 별도 계산 : 산출 프로퍼티
02 데이터의 변화를 감지 : 감지 프로퍼티
03 정리

정리해봅시다
실습해봅시다

[함께 해봐요] 금액을 입력하면 소비세가 포함된 금액을 계산하는 예제 : computedtest1.html
[함께 해봐요] 단가와 개수를 입력하면 세금포함 금액을 계산하는 예제 : computedtest2.html
[함께 해봐요] 문장을 입력하면 남은 글자수를 표시하는 예제 : computedtest3.html
[함께 해봐요] 문자를 입력하면 그 문자를 표함한 항목만 표시하는 예제 : computedtest4.html
[함께 해봐요] 적색, 녹색, 청색의 슬라이더를 움직이면 완성된 색을 표시하는 예제 : computedtest5.html
[함께 해봐요] 입력문자를 감지하여 금지문자가 입력되면 얼럿을 띄우는 예제 : watchtest1.html
[함께 해봐요] 남은 시간이 0초가 되면 얼럿을 띄우는 예제 : timerTest.html
[함께 해봐요] 남은 시간(초)을 감시하여 표시하고 0초가 되면 얼럿을 띄우는 예제 : watchTest2.html
[함께 해봐요] TweenMax 테스트 : tweenMaxTest.html
[함께 해봐요] 숫자가 빠르게 올라가는 애니메이션을 보여주며 값이 증가하는 input 태그 예제 : watchtest3.html

9장 Markdown 에디터 만들기
01 Markdown 에디터란?
02 Markdown 에디터 작성
03 정리

[함께 해봐요] Markdown 에디터 예제 : markdown.html

10장 애니메이션
01 표시/비표시 때의 애니메이션 효과 : transition
02 리스트의 트랜지션 : transition-group
03 리스트가 정렬되며 이동하는 트랜지션
04 정리

정리해봅시다
실습해봅시다
[함께 해봐요] 체크박스로 표시/비표시에 애니메이션 효과를 주는 예제 : transtest1.html
[함께 해봐요] 버튼을 누르면 리스트가 증감할 때 애니메이션 효과를 주는 예제 : transtest2.html
[함께 해봐요] 클릭하면 셔플하는 예제 : shuffleTest.html
[함께 해봐요] 리스트의 순서가 이동하면서 변하는 애니메이션 예제 : transtest3.html

11장 ToDo 리스트 만들기
01 ToDo 리스트란?
02 임시 데이터로 ToDo 리스트 표시하기
03 개선 : 추가 & 삭제 기능
04 정리

실습해봅시다

[함께 해봐요] 임시 데이터로 표시하는 ToDo 리스트 : todolist1.html
[함께 해봐요] ToDo 항목의 추가&삭제 기능을 추가한 ToDo 리스트 : todolist2.html

12장 컴포넌트로 정리하기
01 부품으로 정리한다 : 컴포넌트
02 컴포넌트의 data를 function으로 만들기
03 값 전달 : props
04 정리

정리해봅시다
실습해봅시다

컬럼_Vue.js의 라이프 사이클

[함께 해봐요] 컴포넌트를 만들어 표시하는 예제 : comptest1.html
[함께 해봐요] 각각 다른 카운팅을 하는 컴포넌트 예제 : comptest2.html
[함께 해봐요] 컴포넌트에 값을 전달하는 예제 : comptest3.html
[함께 해봐요] 배열에서 컴포넌트를 만들어 표시하는 예제 : comptest4.html

13장 json 데이터 다루기
01 JSON 파일을 읽어들이는 방법
02 JSON 데이터를 읽어들여 컴포넌트로 나열
03 개선 : 트랜지션 붙이기
04 정리

정리해봅시다
실습해봅시다

[함께 해봐요] JSON을 읽어 들이는 예제(JavaScript) : jsonLoad.html
[함께 해봐요] JSON을 읽어들이는 예제(Vue.js) : jsonLoadVue.html
[함께 해봐요] 배열 데이터를 컴포넌트로 나열하는 예제 : jsontest1.html
[함께 해봐요] JSON 데이터를 읽어들여 트랜지션 효과를 주는 예제 : jsontest2.html

14장 간단한 게시판 만들어보기
01 게시판 만들기
02 정리

[함께 해봐요] MyBoardList 컴포넌트 작성
[함께 해봐요] MyBoardRead와 MyBoardWrite 컴포넌트 작성
[함께 해봐요] 컴포넌트 관련 HTML 태그 작성
[함께 해봐요] Vue 인스턴스 작성: data 속성 선언과 컴포넌트 메소드 정의
[함께 해봐요] loadData 메소드 작성
[함께 해봐요] Json 파일 만들기
[함께 해봐요] lodaData 이벤트가 일어나면 호출되도록 HTML 태그 작성하기
[함께 해봐요] boardList와 boardWrite 메소드 작성
[함께 해봐요] boardRead 메소드 작성
[함께 해봐요] boardSave 메소드 작성
[함께 해봐요] boardDelete 메소드 작성
[함께 해봐요] saveBoardList 메소드 작성
[함께 해봐요] 전체 소스 practice.html

찾아보기

출판사 서평

[핵심 컨셉]
1. 한 땀 한 땀 작성한 예제와 연습문제
2. 누구나 따라 하며 배울 수 있는 완벽한 실습

[주요 특징]
[함께 해봐요] 예제 80개 수록
힌트와 미션이 주어지는 파트별 실습문제 12개 수록
Json 기반 게시판 프로젝트 제공
연습문제와 강의자료 제공.

“이 책은 HTML과 CSS를 어느 정도 알고 있으며
자바스크립트는 초보 단계인 독자를 위한 책입니다.”

자바스크립트로 안 되는 것은 거의 없습니다. 다만, 개발자마다 코딩 스타일도 다르고 같은 역할을 하더라도 프로그램 구조도 달라, 개... 더보기

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

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

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

Klover 평점/리뷰 (0)

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

교환/반품/품절안내

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

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

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

이 분야의 베스트

  • 한국데이터진흥원
    16,200원
  • 길벗알앤디
    27,900원
  • 길벗R&D
    17,100원
  • 이남호
    23,310원
  • 윤인성
    16,200원
더보기+

이 분야의 신간

더보기+

바로가기

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

최근 본 상품