[핵심 컨셉] 1. 한 땀 한 땀 작성한 예제와 연습문제 2. 누구나 따라 하며 배울 수 있는 완벽한 실습 [주요 특징] [함께 해봐요] 예제 80개 수록 힌트와 미션이 주어지는 파트별 실습문제 12개 수록 Json 기반 게시판 프로젝트 제공 연습문제와 강의자료 제공. “이 책은 HTML과 CSS를 어느 정도 알고 있으며 자바스크립트는 초보 단계인 독자를 위한 책입니다.” 자바스크립트로 안 되는 것은 거의 없습니다. 다만, 개발자마다 코딩 스타일도 다르고 같은 역할을 하더라도 프로그램 구조도 달라, 개발 효율성이 많이 떨어지게 되죠. 그래서 프레임워크가 등장한 겁니다. React, Angular, Vue가 대표적입니다. 이 책에서 다루는 Vue는 좀더 가벼운 웹 페이지를 만드는 데 사용됩니다. 배우기도 쉽고 구조도 엄청 간단합니다. 프레임워크란 개발자들이 아키텍처와 같은 고민을 덜어준다거나 공통적으로 자주 사용하는 기능을 포함하여 개발을 쉽게 도와주는 도구입니다. 그래서 어느 정도는 프레임워크 사용법을 배워야 하는 것이죠. 프레임워크도 프로그래밍 언어 못지 않게 상당히 익숙해져야 하는 학습 비용이 존재하기 때문에 다양한 프레임워크 속에서 옥석을 가려 내게 필요한 것을 선택하고 빠르게 습득하는 능력을 키우는 것도 중요합니다. “이제는 새로운 언어보다는 프레임워크의 시대입니다.” 프레임워크 하면 어려워할 독자들을 위해 이 책은 Vue라는 대표적인 자바스크립트 프레임워크를 쉽고 빠르게 배울 수 있도록 구성했습니다. 그리고 번역서에는 원서에는 없는 [실습해봅시다]를 넣어 독자가 응용 능력을 키울 수 있게 만들었고 마지막 챕터에 게시판 프로젝트를 추가하여 Vue의 개발 과정을 체험해볼 수 있게 구성하였습니다. [이 책의 학습 방법] 개념은 스윽 한번 훑고 지나간다고 해도 [함께 해봐요] 예제는 책을 보고 한번, 그리고 책을 안보고 한번, 이렇게 두번은 반복해서 봐야 합니다. 그리고 각 장의 마지막에 제공되는 [실습해봅시다]는 가능하면 본문을 보지 않고 구현해보도록 하고 안 되면 인터넷 검색 등을 통해 다양한 방법을 찾아보고 직접 구현할 수 있을 때까지 시간을 투자해보기 바랍니다. _편집자 코멘트 처음 학습할 때는 무척 혼란스러울 것입니다. new라는 키워드를 이용해 Vue 인스턴스를 만들어내 고 그 안에 el:이나 methods: 등의 여러 옵션을 거쳐 하나의 프로그램이 완성되는데, 이해가 안 되더라도 예제가 나올 때마다 따라 하다 보면, “아~ 얘네들이 Vue의 뼈대가 되며, 규칙이구나.”라는것을 금방 깨닫게 될 것입니다. 굳이 MVVM 모델을 구현한 게 Vue라는 것을 설명하지 않더라도말입니다. Vue는 리액트나 다른 프레임워크에 비하면 그 구조가 간단하다는 것도 프론트엔드 입문자가 배우기에 적합하다는 의미이기도 합니다. Vue를 시작으로 좀더 복잡한 React와 같은 다른 프레임워크에 도전해볼 것을 추천합니다.

지은이의 글 편집자이자 베타테스터의 글 일러두기 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 찾아보기