커피 한 잔 마시며 끝내는 Vue.JS

커피 한 잔 마시며 끝내는 Vue.JS  

 

부제 Vue.JS를 통해 실전 애플리케이션 구축하기

저자 김영훈, 문동욱

 

출간/배본가능일 2019년 7월 31일 

정가 30,000원 

페이지 480

판형 크라운판 (173 * 230)

 

ISBN 979-11-90014-39-7 (93000)

 

 

책 소개 

 

Vue.JS를 통해 실전 애플리케이션 구축하기   

 

이 책에서는 Vue.JS에 대한 API뿐만 아니라 어떻게 활용하면 되는지에 대해 효과적으로 설명한다. 이러한 활용 예제는 실전 애플리케이션을 구축해나가는 과정을 통해 쉽고 효과적으로 학습한다. 그뿐만 아니라 실전 애플리케이션을 구축해나가는 과정에서 겪을 수 있는 트러블슈팅과 저자들의 실무 경험을 바탕으로 하는 조언도 함께 학습한다.  

 

이 책의 특징 

- 상세한 이미지와 예제를 통해 Vue.JS에 대해 쉽게 설명한다. 

- 실전 애플리케이션을 구축하는 과정에서 효과적으로 Vue.JS에 대해 설명한다. 

- NodeJS서버의 API를 이용하여 비동기 통신 처리에 대해 설명한다. 

 

 

이 책이 필요한 독자 

- Vue.JS를 통해 프론트 개발을 시작하고자 하는 독자 

- Vue.JS에 대한 이론적이 이해뿐만 아니라 실전 애플리케이션을 구축하고자 하는 독자 

- Vue.JS에 대한 이해도를 한층 더 높이고 싶은 독자 

 

독자대상 

초중급 

 

소스코드 다운로드 

https://github.com/bjpublic/VueJS-coffee

 

저자 소개 

김영훈

대학생 때 시각 디자인을 전공하였으나, 이후 개발에 흥미를 느껴 마크업 개발자로 전향하였다. 이후 에이전시에서 금융권, 기업 등의 다수 웹 애플리케이션의 UI 개발을 개발하다 자사 서비스 개발을 하고자 위드이노베이션으로 이직하여 Vue와 Typescript를 이용한 프론트 개발을 시작하였다. 이후 이커머스에 관심을 가지고 티몬으로 이직하여 ReactJS와 Typescript, Jest를 이용하여 개발하고 있다. 공부하며 하루하루 성장하는 것을 인생의 낙으로 생각하며 지금도 계속해서 좋은 개발자이지 좋은 동료가 되고자 계속해서 노력하고 있다. 현재는 잡다한 사이드 프로젝트를 개발하는 것을 즐기며, 테스트 주도 개발을 실천하기 위해 고군분투하고 있다. 

 

문동욱

동국대학교 전산원에서 멀티미디어 공학을 전공하였고, 과거 연예기획사에서 사운드엔지니어로 일하며 음악계에서 일하다 우연한 기회로 개발에 관심을 가지게 되어 전향한 대표적인 비전공 출신 개발자이다. 

현재 브레이브 모바일에서 숨고라는 서비스를 Vue, Typescript, Express 등을 사용하여 개발하고 있다. 비전공 출신 개발자의 메리트를 살려 다른 분야의 지식을 접목한 융합형 프로그래밍을 즐겨한다. 웹 개발뿐 아니라 물리와 음악에도 관심이 많아 사이드 프로젝트로 그래픽 시뮬레이션과 웹 오디오 편집 프로그램도 개발하고 있다. 

 

추천사

저자가 SPA 제작 중 습득한 지식을 초행자를 위해서 정리한 책. 

vue.js란? vuex, vue-router를 사용해야 하는 이유는? 전체적으로 어떻게 만들어야 하는지? 의문에 대한 저자의 생각이 담겨있습니다. 특정 기능에 대한 방대한 설명보다는 SPA 제작에 필요한 개념과 그 이유에 대한 저자의 생각이 녹아있어서 처음으로 SPA 형태의 개발을 진행할 때 많은 도움이 될 것으로 생각합니다. 

-이지만(쿠팡, 프론트엔드 개발자)-

 

Vue.js를 즐겁게 학습하고 싶은 분들께 추천하고픈 책! 

이 책을 따라가며 자연스럽게 생기는 호기심과 이어지는 저자의 해설은 저자와 함께하는 듯하여 책을 읽어가는 내내 즐거움을 느꼈습니다. 제가 경험한 즐거웠던 이 과정을 많은 분들이 나누면 좋겠습니다. 쉽게 따라갈 수 있는 예제는 저자의 친절한 해설과 실무 팁으로 입문자와 Vue.js를 이미 사용하고 있는 개발자에게도 도움을 줍니다. 이 책 곳곳에 Javascript의 문법에 대한 설명과 웹프론트 개발을 위한 기초 내용도 있어 프론트 개발을 하고자 하는 분들에게 추천해 드리고 싶습니다. 

-김지영(위드이노베이션, 프론트엔드 개발자)- 

 

Vue.js는 ‘가장 인기 있는 컴포넌트 기반 프레임워크’로 많은 주목을 받는 기술 중 하나입니다.  “커피 한 잔 마시며 끝내는 Vue.JS”는 현대적인 개발 환경에서 Vue.js의 기초부터 비전공자도 쉽게 이해를 할 수 있도록 친절하게 작성되어 편하게 읽을 수 있습니다! 그리고 Vue.js 뿐만 아니라 Front End 최신 개발 환경에 대한 내용까지 수록되어 있어서 책 내용을 깊이 이해하는 데 많은 도움을 받을 수 있습니다. 또한, 챕터의 앞부분에서는 Vue.js의 기반 지식을 자세하게 설명하고 있고, 이후 챕터에서는 실제 돌아가는 애플리케이션을 만들어보면서 Vue.js를 사용해볼 수 있도록 구성되어있기 때문에 재미있게 읽을 수 있습니다. 마지막으로 오랜만에 좋은 책을 읽을 수 있는 경험을 갖게 해주신 점 감사드립니다. 

-박철현(티몬, 프론트엔드 개발자)-

 

Vue.js의 학습이 필요한 시기에 베타 리더라는 좋은 기회를 주셔서 감사드립니다! 이 책은 무엇보다도 현재도 Vue.js로 실무를 하고 계신 분들이 저자라는 점이 강점입니다. 다소 어렵거나 따분할 수 있는 설명들이지만, 경험을 바탕으로 예제를 구성하여 이해가 쉽고, 실습하는 과정이 아주 매끄러워 점진적으로 완성도가 높아져 가는 애플리케이션을 보며 성취감도 느끼실 수 있습니다. 예제 코드의 친절한 설명은 덤입니다! 그리고 중간중간 바로 실무에 적용하기 좋은 꿀팁들을 많이 담고 있어서 쿡북으로도 손색이 없는 책으로 추천해 드리고 싶습니다. 

-박은정(드림어스 컴퍼니, 프론트엔드 개발자)- 

 

 

 

목차

 

Chapter 1. 개발 환경 세팅  

1.1 IDE 선택하기 

    1.1.1 Vetur Extension 

    1.1.2 Vue Peek Extension 

    1.1.3 Vue 2 Snippets Extension 

1.2 NodeJS(노드제이에스) 환경 구축하기 

1.3 Vue 환경 구축하기 

    1.3.1 Vue Devtools 

    1.3.2 Vue CLI 

      1.3.2.1 설치방법 

      1.3.2.2 각 옵션 살펴보기 

1.4 Vue CLI로 생성된 파일 살펴보기 

    1.4.1 .babelrc 

    1.4.2 .editorconfig 

    1.4.3 .eslintrc.js 

    1.4.4 .eslintignore 

    1.4.5 .gitignore 

    1.4.6 .postcssrc.js 

    1.4.7 build 

    1.4.8 config 

    1.4.9 index.html 

    1.4.10 node_modules, package.json 

    1.4.11 src 

    1.4.12 static 

    1.4.13 test 

1.5 RESTful API 서버 세팅하기 

 

 

Chapter 2. 알면 보이는 Vue  

2.1 Vue의 필수 요소 

    2.1.1 Vue 인스턴스 

    2.1.2 Vue 인스턴스의 옵션 

    2.1.3 Vue 인스턴스의 생명주기 

    2.1.4 Vue 템플릿 문법 

    2.1.5 디렉티브 

    2.1.6 Vue 인스턴스의 속성과 메소드 

2.2 Vue를 똑똑하게 사용하기 

    2.2.1 단일파일컴포넌트(Single File Component) 

    2.2.2 Vue 컴포넌트의 설계의 일등공신, FIRST 원칙 

    2.2.3 가상 DOM의 원리 

    2.2.4 범위 컴파일 사용하기 

 

Chapter 3. Vuex란 무엇일까?

3.1 MVC 패턴 

3.2 Flux 패턴 

    3.2.1 액션(Action) 

    3.2.2 디스패처(Dispatcher) 

    3.2.3 스토어(Store) 

    3.2.4 뷰(View) 

3.3 Vuex 

    3.3.1 상태(State) 

    3.3.2 게터(Getters) 

    3.3.3 변이(Mutation) 

    3.3.4 액션(Actions) 

    3.3.5 Vuex 모듈 관리 

3.4 마치며 

 

Chapter 4. Vue Router 

4.1 Vue Router는 왜 필요한가요? 

    4.1.1 전통적인 방법의 라우팅 

    4.1.2 단일 페이지 애플리케이션의 라우팅 

4.2 Vue 애플리케이션에서 Vue Router 사용하는 법 

4.3 Vue Router의 라우트 설정의 속성들 

4.4 동적 라우트 매칭 

    4.4.1 동적 세그먼트란 무엇인가? 

    4.4.2 동적 세그먼트의 변경에 반응하기 

    4.4.3 매칭 우선순위 

4.5 중첩된 라우트 

    4.5.1 중첩된 라우트란 무엇인가? 

    4.5.2 중첩된 라우트 기능을 사용하지 않고 만들어보기 

    4.5.3 중첩된 라우트 사용하기 

4.6 프로그래밍 방식 내비게이션 

    4.6.1 router.push 

    4.6.2 router.replace 

    4.6.3 router.go 

4.7 이름을 가지는 뷰 

4.8 리다이렉트와 별칭 

    4.8.1 리다이렉트 

    4.8.2 별칭 

4.9 라우트 컴포넌트에 속성 전달 

4.10 해시 모드와 히스토리 모드 

    4.10.1 해시 모드 

    4.10.2 히스토리 모드 

4.11 네비게이션 가드 

    4.11.1 전역 가드 

    4.11.2 라우트별 가드 

    4.11.3 컴포넌트별 가드 

 

Chapter 5. 메모 관리 애플리케이션 만들기  

5.1 메모 관리 애플리케이션을 만들기에 앞서 

5.2 컴포넌트 구조 

5.3 프로젝트 구성 

    5.3.1 프로젝트 생성하기 

5.4 헤더 컴포넌트 생성하기 

5.5 메모 데이터 생성 기능 구현하기 

5.6 메모 데이터 노출 기능 구현하기 

5.7 메모 데이터 삭제 기능 구현하기 

5.8 메모 데이터 수정 기능 구현하기 

5.9 서버와 API 연동하기 

    5.9.1 API란 무엇인가? 

    5.9.2 axios란? 

    5.9.3 RESTful API 확인하기 

    5.9.4 RESTful API 연동하기 

    5.9.5 추가 요구 사항 기능 구현하기 

 

Chapter 6. 커뮤니티 애플리케이션 만들기  

6.1 커뮤니티 애플리케이션 요구 사항 확인하기 

    6.1.1 인증되지 않은 사용자를 포함한 모든 사용자는 타인의 게시물과 댓글을 조회할 수 있다 

    6.1.2 인증된 사용자만 게시물이나 댓글을 작성할 수 있다 

    6.1.3 사용자는 자신의 게시물이나 댓글만 수정, 삭제할 수 있다 

    6.1.4 사용자는 다른 사용자의 게시물에 댓글을 남길 수 있다 

6.2 프로젝트 세팅 

    6.2.1 프로젝트 생성 

    6.2.2 커뮤니티 애플리케이션의 API 서버 확인 및 스타일 적용하기 

6.3 커뮤니티 게시글 읽기 기능 구현하기 

6.4 커뮤니티 게시물 데이터 스토어로 옮기기 

6.5 커뮤니티 게시글 상세보기 페이지 구현하기 

    6.5.1 에러에 대한 설명 

6.6 회원가입 페이지 구현하기 

6.7 로그인 페이지 구현하기 

    6.7.1 페이지 및 폼 컴포넌트 작성 

    6.7.2 애플리케이션에서 사용자를 인증하는 방법 

    6.7.3 애플리케이션에서 JWT 토큰 사용하기 

    6.7.4 로그인 로직을 스토어로 옮기기 

    6.7.5 저장된 토큰을 기반으로 현재 로그인된 사용자의 정보 가져오기 

6.8 애플리케이션의 헤더 컴포넌트 작성하기 

    6.8.1 헤더 컴포넌트 작성하기 

    6.8.2 헤더 컴포넌트를 라우트에 등록하기 

    6.8.3 헤더 컴포넌트 기능 추가하기 

6.9 게시물 생성 페이지 작성하기 

    6.9.1 게시물 생성 페이지 컴포넌트 작성하기 

    6.9.2 게시물 생성 폼 컴포넌트 작성하기 

    6.9.3 게시물 생성 API 연동하기 

    6.9.4 게시물 생성 페이지 내비게이션 가드 구현하기 

    6.9.5 애플리케이션 초기화 시 발생하는 통신 동기화 버그 수정하기 

    6.9.6 게시물 리스트 페이지에 글쓰기 버튼 추가하기 

6.10 게시물 수정 페이지 작성하기 

    6.10.1 게시물 수정 페이지 컴포넌트 작성하기 

    6.10.2 게시물 수정 페이지 내비게이션 가드 구현하기 

    6.10.3 게시물 수정 폼 컴포넌트 작성하기 

6.11 게시물 삭제 기능 작성하기 

6.12 게시물에 대한 댓글 기능 추가하기 

    6.12.1 댓글 노출 기능 추가하기 

    6.12.2 댓글 생성 기능 추가하기 

    6.12.3 댓글 수정 기능 추가하기 

    6.12.4 댓글 삭제 기능 추가하기

 

 

Chapter 7. 알면 좋을 자바스크립트 

7.1 Truthy 값과 Falsy 값 

    7.1.1 Truthy 값 

    7.1.2 Falsy 값 

7.2 자바스크립트의 이벤트 

    7.2.1 이벤트 전파 버블링 

    7.2.2 이벤트 캡처링 

    7.2.3 이벤트 처리 단계 

7.3 값에 의한 호출, 참조에 의한 호출 

    7.3.1 값에 의한 호출(Call by value) 

    7.3.2 참조에 의한 호출(Call by reference) 

    7.3.3 호출 방식에 따라 달라지는 비교 결과 

7.4 자바스크립트의 유용한 메소드들 

    7.4.1 배열 메소드 

    7.4.2 객체 메소드 

 

 

출판사 리뷰 

Vue.js는 React.js와 더불어 가장 핫한 자바스크립트 프레임워크 중 하나입니다. Vue.js는 React.js에 비해 진입 장벽이 낮으며, 쉽고 빠르게 개발을 할 수 있다는 것이 가장 큰 장점입니다. 무엇보다 한국의 수많은 개발자의 노력으로 인해 공식 문서 역시 번역이 잘되어 있을 뿐만 아니라 많은 커뮤니티에서도 좋은 정보를 손쉽게 얻을 수 있습니다. 앞으로도 Vue.js는 꾸준히 발전해 나갈 것이며, 수많은 Vue.js관련 커뮤니티 역시 점점 더 성숙해지고 있어 성장하는 Vue.js 생태계 속에서 Vue.JS를 이용하여 개발하면 얻을 수 있는 이점은 충분합니다. 

 

이 책은 프로그래밍을 시작하기 위해 첫걸음을 떼는 입문자와 Vue.js를 사용하고 있는 개발자를 위한 책이라고 볼 수 있습니다. 실제 예제를 따라 해보면서 Vue.js를 더욱더 쉽게 만들어 어디서부터 어떻게 공부해야 할지 모르겠다고 생각하는 사람들에게 가이드가 될 책입니다.