고양이도 할 수 있는 Vue.js

코드와 동작 데모에 대해서

이 페이지는 "고양이도 할 수 있는 Vue.js"에서 설명하는 샘플 코드와 동작 데모를 제공하는 페이지입니다. 주로 긴 코드의 복사해서 붙여넣기를 위한 용도, 동작 데모를 확인하기 위한 용도로 만들었으므로, 코드의 내용과 기능에 대해서는 따로 설명하지 않습니다. 자세한 내용은 책을 읽어 주시면 감사하겠습니다.

헤더에 있는 검색 입력 양식에 절 제목을 입력하면 쉽게 찾을 수 있습니다. 다만 절의 내용이 너무 적을 경우, 별도로 항목을 만들어두지 않았으므로 찾을 수 없는 경우도 있습니다.

학습 포인트

이 책은 어떤 과정에 따라 최종적으로 무엇인가를 완성하는 책이 아닙니다. 기본적으로 각 절의 코드는 기능을 설명하기 위한 단편적인 내용입니다. 단순히 코드를 옮겨 적고 동작을 확인하지만 말고, '오류가 발생해도 괜찮아'라는 마음 가짐으로 속성 또는 메서드를 추가하거나, 템플릿을 자유롭게 변경하며 살펴보세요. 그리고 이때 오류가 발생하면, 콘솔에서 어떠한 오류 메시지가 출력되고 있는지 확인해 봅시다. 어떤 코드가 어떤 오류를 일으키는지 아는 것도 매우 중요합니다.

오류가 발생했을 경우

일단 콘솔을 보고 어떤 메시지가 출력되는지 확인해 보세요. 대부분의 경우 여기에 출력되는 파일 이름, 줄 번호, 메시지를 기반으로 오류를 해결할 수 있습니다.

추가로, 공부할 때 자주 발생하는 오류들의 원인은 일반적으로 다음과 같습니다.

  • 불필요한 템플릿 또는 속성이 남아 있다.
  • 속성과 메서드의 작성 위치가 잘못되었다.

기본적으로 각 절의 코드를 추가하면서 진행한다면 괜찮겠지만, 절에 따라서는 사용하는 속성 이름이 중복되어 버리는 경우도 있습니다. 오류가 발생한 경우, 변경된 부분의 코드를 지운 뒤 코드를 다시 차근차근 작성하며 오류가 어디에서 생기는지 확인해 보세요.

... undefined라는 오류는 '○○가 정의되어 있지 않습니다'라는 내용입니다. '분명 제대로 쳤는데 왜 오류가 발생하는 거지?'라는 생각이 들 때가 있습니다. 출력되는 오류를 잘 보면, '산출 속성을 methods 내부에 써버렸다', '코드에서 어떤 속성을 지웠지만, 템플릿 쪽에서는 지우지 않았다'라는 실수가 분명 있을 것입니다. 잘 찾아보며 확인하세요.

책과 지원 페이지의 차이

이 책에서는 코드의 핵심만을 보여 드리기 위해서 설명과 직접적인 관계가 없는 옵션을 생략했습니다. 다만 이 페이지에서는 생략 없이 최대한 모든 것을 적었습니다.

추가로 스타일을 적용해서 외관을 조정한 경우가 있습니다. 따라서 책에 있는 코드와 완전히 같지 않은 경우도 있으므로 양해 부탁 드립니다.

책의 코드를 모두 담고 있지는 않으며, 짧은 코드들의 경우는 아예 싣지 않았습니다.

온라인 에디터 활용하기

Fork해서 사용하세요.

Vue.js 버전에 대해서

책의 예제는 현재 2.X 버전에서는 모두 정상 작동하며, 호환성 이슈는 없습니다. 추가적으로 Vue CLI 3.X 버전과 관련된 내용은 예제 페이지에서 다룹니다.

머릿말 →