joshua1988 / doit-vuejs Goto Github PK

View Code? Open in Web Editor NEW

216.0 17.0 219.0 822 KB

'Do it! Vue.js 입문' 책 예제 코드 저장소

Home Page: http://www.yes24.com/24/Goods/58206961?Acode=101

HTML 45.26% JavaScript 41.00% Vue 13.74%

javascript do-it vue

doit-vuejs's Introduction

Do it! Beginning Vue.js

This repository contains all the code samples, quizzes and projects for Do it! Beginning Vue.js book.

이 리포지토리는 Do it! Vue.js 입문 도서의 예제, 직접 해보세요, 종합 프로젝트 코드가 포함되어 있습니다.
책에 안내된 번호에 따라 코드를 활용해보세요 :)

예제

2장

Hello Vue.js

3장

4장

5장

직접해보세요

종합프로젝트

입문 책을 보고나서 보면 좋은 온라인 강좌

추천 학습 로드맵 : Do it! Vue.js 입문 -> Vue.js 시작하기 -> Vue.js 중급 -> Vue.js 완벽 가이드

진행 예정인 오프라인 강좌

Vue로 구현하는 PWA 캠프
- 기간 : 19.08.24(토) ~ 19.11.02(토) 8주
- 일정 : 매주 토요일 14시 ~ 19시
- 장소 : 패스트 캠퍼스 (강남역 4번 출구 앞)
Vue.js 정복 캠프
- 기간 : 19.10.14(월) ~ 19.11.20(수) 6주
- 일정 : 매주 월/수 20시 ~ 23시
- 장소 : 패스트 캠퍼스 (강남역 4번 출구 앞)

License & Copyright

Copyright © 2018 Captain Pangyo

This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 4.0 Unported License.

doit-vuejs's People

Contributors

Stargazers

Watchers

Forkers

threeon hepark gingeraebi workmj melonpan0130 geunheekim nasky987 songjein tnmtkr wj-soft jueyini rayxcl kor-haru jisou fureweb-com kunhwanahn hij281 jhsbeat shindongri diorhack3r rohdi migolmigol zonadak higgs1022 gayeoni jungsangun dynang2k kentrein nmhjnm chanho100 be4ter calla987 denicekim bomeekim swonjiny hec8897 donghoon-song sooyounglim peakaton soyeonz mrkwon minsikmoon milk57618 dyingangnam inpyokim gitsuoo swat018 easymon02 youngho05 dmsal325 kim-seung-joon jaeyeolkim wlsfldlqj mysm0722 yangseungin solbi0802 paperclip510 vxggangxv hivelabscmc kaeunchoi katie0809 wimblet anoint thekingdomofheaven smartkuk hhy5277 joamashi returnfirst devsujinkim studigen jammama jung-wook-heo hwangseongwoo hunkydory824 kyleoh81 jjangjong eeunheechoi wood08 allbefree itkim jiwonyooo leekyunghee plqamz jonghunjang jangjur hyunii12 msminsu danatec1 deok0726 hyungsbi rockbell89 giinie zzins jungeunlee95 junhee0720 helloms4 smash009 javara92 noahhwang swarthypig

doit-vuejs's Issues

Todo List 애플리케이션을 제작중입니다.

할일을 클릭했을 때 모달이 나오게 하여 수정을 하려고 하는데 어떤식으로 구현을 해야할지 감이 안잡힙니다. 책에는 깃허브를 참고하라고 되어있는데 따로 코드가 보이지 않아서 질문 드립니다.

04/04-5 예제 XSS 오류

뷰 리소스에서는 에러가 나지 않는데, 엑시오스로 진행 시에는 XSS에러가 발생합니다.
- console : Uncaught Error: URL contains XSS injection attempt

해당 에러가 발생하는 위치를 찾아본 결과는 아래와 같습니다.

path : webpack\lib\helpers`isURLSameOrigin.js`

source :

   var isValidXss = require('./isValidXss');
... 중략
   if (isValidXss(url)) {
     throw new Error('URL contains XSS injection attempt');
   }

Chrome 및 Edge에서 Test 했습니다.
어느 부분을 수정해야 할 지 몰라 이슈로 등록합니다. 확인 부탁드릴게요 :)

화면 리로딩하면 최초에기본행이 localStorage에 저장됩니다.

안녕하세요. 작가님, 책에서 6장을 실습 중인데요.
TodoInput.vue 파일 작성 중인데요. 최초화면을 로딩하면 디폴트로 하나의 행이 localStorage에 들어가 있습니다.(위 그림 참조)

코딩 중 제가 잘 못한 부분이 있을까요? 이건 어디를 잡아야할까요.
피드백 부탁드립니다.

안녕하세요 작가님, Do it! Vue 입문 독자입니다.

안녕하세요 작가님, Do it! Vue 입문 독자입니다.
예제 내용을 따라하다가 잘 안되는거나 궁금한점은 혹시 작가님 메일로 여쭤봐도 괜찮을까요?
메일 주소를 알려주시면 이따금씩 여유 있을실때 답변해 주시면 정말 도움이 많이될것 같아서요.

실전 애플리케이션 프로젝트 만드는데, 화면이 안나오길래
예제파일을 다운받아서 봤는데, 책에는 없는 코드가 있었습니다.

해당 내용이 빠진건가요? 위 내용을 추가하니까 화면이 나오던데,

작가님 안녕하세요 책보다 질문이 있어서 질문 남깁니다.

책 99쪽 콧수염괄호 보시면 data 속성의 message값이 바뀌면 뷰 반응성에 의해 화면이 자동으로 갱신됩니다. 라는 문구가 있는데요 message값을 소스코드에서 변경해서 소스를 저장하면 웹브라우저 화면에서 자동으로 변경된 message 값이 출력된다는 말인가요? 아니면 소스코드를 수정하고 저장하고 웹브라우저를 수동으로 refresh를 해야지만 자동으로 변경된다는 말씀이신가요?
data 속성의 message값이 바뀌면 뷰 반응성에 의해 화면이 자동으로 갱신됩니다. 이문구에 대한 정확한 의미를 모르겠습니다. message값을 소스코드에서 수정했는데 자동으로 갱신이 안되는거 같아서요 웹브라우저를 수동으로 refresh 했을때는 변경한 message값이 나오긴합니다. 답변부탁드립니다~!

페이지 115쪽 예제 코드 에러 확인 요청

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <my-component></my-component>
        <your-component></your-component>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script>
        Vue.component('my-component', {
            template: `<div><h5>complex markup</h5><ul><li><button>can you figure this syntax out?
                </button></li><li><p style="color:blue;">this is the second list item</p></li><li>
                <strong>continue on adding more items</strong></li></ul></div>`
        })

        Vue.component('your-component', {
            template:`<div><span style="font-size:1.2em;"><button>{{ message }}</button></span>
                </div>`
        })

        new Vue({
            el: '#app',
            data: {
                message: 'click this button'
            }
        })
    </script>
</body>
</html>

위 코드를 통해 HTML 파일에서 뷰 코드 작성 시의 한계점을 설명하셨습니다.

해당 코드에서 'your-component' 내부에서 message 데이터를 사용하고 있습니다.
해당부분은 props 를 활용해서 데이터를 받아와야 하는게 아닐까요?
다만 실제 책에서는 윗부분 코드를 '...'을 통해 생략하고 있어서
다른 코드가 있다면 동작할 수도 있지만
단편적인 예제를 보면 에러라고 예상할 수가 있을것 같습니다.

또한 실제 위 코드를 돌려보면 에러가 발생하고 있습니다.
확인 부탁드립니다.

04-2 예제 오류

공부 하던중 vuejs 예제 04-2번 예제가 브라우저에 표시가 되지 않습니다.
크롬과 사파리 둘다 제대로 표현되지가 않네요 어디가 잘못 된 건지 모르겠습니다.
예정 수정 좀 부탁 드립니다.

Vue.js 입문 도서 오탈자

오늘 도서를 구입해서 차근차근 보면서 하고 있습니다. (github 소스 등 X)
도서 내용 중 55P에 doit-vuejs/exam/03/03-4/index.html에서

new Vue({ el: '#app' components: { 'my-local-component': cmp } });

이렇게 인쇄되어있는데 '#app' 뒤에 , (콤마)가 빠져있네요~ :)

Input Box에 데이터 입력 시 오류(한글, 영문)

안녕하세요.
한글이나 영문을 입력하면 Data에는 0으로 처리됩니다.
숫자만 들어갑니다.

var value = this.newTodoItem & this.newTodoItem.trim();

윗 부분 거치면서 데이터에 문제가 있습니다.

환경: macOS 10.14.3 + 크롬

Todo list 실습 중 리스트 아이템이 잘 못 나타나는 경우도 있을까요?

안녕하세요, 해당 도서를 통해 Vue.js에 한걸음씩 입문 중인 초보 개발자 입니다.

다름이 아니라, 제목과 같이, 첨부한 이미지와 같이 {{todoItem}}과 휴지통 아이콘이 잘 못 된 위치에 나타나는 현상이 있어서 문의 드립니다.

제가 작성한 코드와 공개 된 코드를 diff로 비교해도 당췌 다른 부분을 찾질 못하고 있어서 꽤나 답답한 상황입니다만, 혹시 첨부 된 이미지를 통해 짐작가는 부분이 있으실까 싶어서 문의 드려 봅니다.

안녕하세요..장기효 님....질문 있습니다.

웹 개발 초보에 더불어 뷰 는 처음 접하고 있습니다.
Page132에 보면 vue init webpack-simple 해서 프로젝트 정보를 넣는 부분이 있는데요..
Vue-CLI 버전이 달라서 그런지 에러가 납니다.
(제게 설치된 버전은 3.4.1 입니다.)

그래서 이리 저리 해봤더니 vue-init를 설치 해서 책에 나온데로 시작은 했는데요..
제가 궁금한것은 vue init로 만드는 프로젝트와 vue create로 만드는 프로젝트의 차이는 뭔지 알수 있을까요?