55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
local 프로토콜 관한 질문
수업 내용을 쭉 따라가보니 저의 Local : http://localhost:8081/ 이라고 되어있고 Network: unavailable 이라고 되어있는데, 초급강좌때 선생님께서 8081로 되어 있어서 뭔가를 끄고 8080으로 맞춰준다고 했던 기억이 있는데, 어디서 확인을 할 수 있는건가요? 그리고 선생님 화면에는 항상 network도 주소가 나와 있는데 왜 제꺼는 사용할수 없다고 나와있는건가요??
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
안녕하세요!
안녕하세요! 완강을하고 1가지 궁금한게 생겼는데.. 제가 생각하고 있는 flow는 어떤 게시판에들어가면 그 페이지에 있는 일정량( 예-10개 )만 비동기로 갖고와서 vuex에 저장을 시키고 서비스 로직을 처리하는걸로알고잇습니다. 또한 2페이지를 가면 또 거기에 걸맞는 일정량( 예-10개 )를 갖고와서 업데이트 시키고 렌더링시키구요. 1. 여기서 이 갖고오는 비동기를 todolist에서 created 훅을 이용해서 갖고온다음 action -> mutation -> state 이런식으로 가게만들면될까요? 2. 새로고침을 하면 vuex에 있던 list들 값이 없어지는걸로 알고있습니다. 이때 그 해당페이지에있는 모든 인스턴스들이 재생성되면서 todolist 인스턴스가 created를 다시 실행시킴으로 vuex에 다시 초기화를 시켜주는건가요? 일주일동안 선생님 웹팩,뷰강의를 수강했습니다. 굉장히 많이 배웠습니다. 감사합니다. 다음 강의도 기대하겠습니다.
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
git 권한부탁드립니다.
인프런 이메일 : unoons@gmail.com깃헙 아이디 : unoons@gmail.com깃헙 Username : suoons 입니다 감사합니다.
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
안녕하세요!
안녕하세요! import { store } from './stroe/store' 을 하셨는데 변수 이기때문에 이렇게 하셨다고 하셨는데 이제까지는 변수가 아닌 객체(+함수). 즉, 모듈이기 때문에 중괄호가 필요없었던거죠? 감사합니다
- Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브 private 레포 추가 관련 질문드립니다.
삭제된 글입니다
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
안녕하세요. App.vue shadow
안녕하세요! 각 인스턴스마다 scope를 줘서 각 인스턴스끼리 영향을 주지않게 했는데요. - 제가 이해한 흐름입니다. 맞는 흐름일까요? App.vue같은 경우 모든 인스턴스를 갖고와서 이제 조합하는 단계입니다. 그 App.vue에서 shadow를 갖는 모든 인스턴스에 적용하기위해 App.vue style에 shadow를 설정했다. 즉, a,b,c 라는 인스턴스에 루트 노드에 shadow를 갖는 모든 인스턴스는 app.vue의 shadow에 영향을 받는다. 맞나요? 항상감사합니다.
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
질문있습니다
안녕하세요 오늘 강의 수강중 속성명과 값이름이 동일할때 축약이 가능하다고 언급하셨는데 import TodoHeader from './components/TodoHeader.vue' import TodoInput from './components/TodoInput.vue' import TodoList from './components/TodoList.vue' import TodoFooter from './components/TodoFooter.vue' components : { 'todo-header' : TodoHeader, 'todo-input' : TodoInput, 'todo-list' : TodoList, 'todo-footer' : TodoFooter } 위와같이 저는 컴포넌트 태그명을 케밥케이스로 작성했는데 해당 태그명을 삭제해도 컴포넌트가 정상적으로 맵핑이 되고있습니다. 컴포넌트 이름과 내용이 동일해야지만 컴포넌트맵핑이 정상적으로 처리가 되야되지 않나요?
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
github 허가 부탁드립니다!
github gist에 남겼는데 허가 부탁드립니다! github mail : vmelove@naver.com 인프런 mail : kjm9596@gmail.com
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
git 허가 부탁드립니다~
git 허가 부탁드립니다~!!
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
todo 값 localStorage저장 시 질문드립니다
todo 화면 최초실행시 localStorage에 loglevel:webpack-dev-server 해당 값이 기본으로 저장된 상태로되어있습니다;; 어디서 생성된 값인지 잘 모르겠습니다
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
권한 부탁드립니다
어제 강좌내용처럼 댓글 작성 완료했습니다 권한부여 부탁드립니다
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
transition enter
최근 듣는 분들 중 enter 작동 안하시는 분들은 .list-enter -> .list-enter-from 으로 하니까 잘 작동하네여!
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
배포 후 확인
안녕하세요 캡틴! 리팩토링이 끝나고 실제로 배포할 때 잘 작동하는지 확인하기 위해서 npm run build를 하고 dist에서 index.html을 라이브 서버를 따로 열어서 확인해봤는데 아무 화면도 안뜨네요... 웹으로 직접 열어도 아무것도 안뜨고.. 어떻게 확인할 수 있는건가요?
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
snippet은 어떻게 만드셨나요?
fc를 쳐서 font: cursive를 하면 snippet이 나오던데 내장된 snippet을 직접 고치신건가요? 어떻게 하는지 궁금합니다!
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
CLI
vue cli와 webpack cli의 사용의 차이점은 무엇인가요? 개념이 조금 헷갈리네요..단순하게 프로젝트를 구성하는 방법의 차이인것인가요?
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
링크 2개 달아두었다고 하셨는데...
안녕하세요, actions란? 이라는 ppt 슬라이드에 Promise와 비동기 처리에 대한 부가 설명 링크를 달아두었다고 하셨는데 아무리 화면을 내려도 링크를 찾을 수가 없네요...ㅠㅠ
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃헙 레포문의드립니다!
여기까지 강의는 문제없이 완료했는데 콘솔창에 알 수 없는 신텍스오류가 자꾸떠서 캡틴판교님 코드를 참조하려합니다. 1강때 깃헙 인증요청드리고 승인이된후에 캡틴판교님 브랜치 vue-intermediate 로 접속하려했는데 없는 페이지라고 뜹니다 확인 부탁드려요!
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
component library 선택 질문
안녕하세요 캡틴! 한가지 질문이 있습니다. vue를 사용하면 css에 대한 고민을 줄이기 위해서 보통 material framework? component library 같은 걸 이용하잖아요? 시간을 아끼기 위해서 프레임워크 중 하나를 선택해 사용하려고 하는데 혹시 추천해줄 만한 게 있을까요? 예를 들면 quasar, vuetify, vue-material, element-ui 같은 거요!
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
중복 값을 넣었을 때 inputText 유지 하는 방법 좀 가르쳐 주세요.
안녕하세요 선생님 저는 inputText에 값을 넣고 이벤트를 실행 했을 경우중복 값이 있는 경우 : Modal 창 띄우고 inputText 값 유지중복 값이 없는 경우 : 기존 로직 실행을 하려고 합니다.TodoInput.vue에서 이벤트를 주고 App.vue에서 중복 체크 한 후 validate 값을 props를 통하여 TodoInput.vue에 전달 하였습니다. 화면에 보여졌을때나 devTools의 vue를 보면 props 값이 부모와 일치 한데 메소드에서 props를 사용하려고 하면 부모 데이터의 이전 값이 표시가 됩니다. 메소드에서 부모와 동일한 props 데이터를 받는 방법이 있을까요?소스 보시고 답변 해주시면 감사하겠습니다. App.vue <template> <div id="app"> <TodoHeader></TodoHeader> <TodoInput v-on:addTodoItem="addOneItem" v-bind:propsdata="validate" ></TodoInput> <!-- propsdata 선언 --> <TodoList v-bind:propsdata="todoItems" v-on:removeItem="removeOneItem" v-on:toggleItem="toggleOneItem"></TodoList> <TodoFooter v-on:clearAll="clearAllItems"></TodoFooter> <Modal v-if="showModal" @close="showModal = false"> <!-- you can use custom content here to overwrite default content --> <h3 slot="header"> 경고! <i class="closeModalBtn fas fa-times " @click="showModal = false"></i> </h3> <h3 slot="body"> {{ message }} </h3> </Modal> </div> </template> <script> import TodoHeader from './components/TodoHeader.vue'; import TodoInput from './components/TodoInput.vue'; import TodoList from './components/TodoList.vue'; import TodoFooter from './components/TodoFooter.vue'; import Modal from './components/common/Modal.vue' export default { data: function() { return { todoItems: [], showModal: false, message: '', validate: false //중복 체크 값 선언 } }, methods: { addOneItem: function(todoItem) { var obj = {completed: false, item: todoItem}; localStorage.setItem(todoItem, JSON.stringify(obj)); // todoItems에 이미 같은 값이 있는지 체크 if(!this.todoItems.some(data => data.item == todoItem)) { this.todoItems.push(obj) this.validate = false; // 중복 체크 값 입력 } else { this.message = '중복 데이터가 존재 합니다. 중복 데이터 : [' + todoItem + ']' this.showModal = !this.showModal; this.validate = true; // 중복 체크 값 입력 } console.log('App.vue data : ' + this.validate); // 중복 체크 값 Log 출력 }, removeOneItem: function(todoItem, index) { localStorage.removeItem(todoItem.item); this.todoItems.splice(index, 1); }, toggleOneItem: function(todoItem, index) { // todoItem.completed = !todoItem.completed; // 같은 동작 this.todoItems[index].completed = !this.todoItems[index].completed; // 로컬 스토리지의 데이터를 갱신 localStorage.removeItem(todoItem.item); localStorage.setItem(todoItem.item, JSON.stringify(todoItem)); }, clearAllItems: function() { localStorage.clear(); this.todoItems = []; } }, created: function() { if(localStorage.length > 0) { for(var i=0;i<localStorage.length;i++) { if(localStorage.key(i) !== 'loglevel:webpack-dev-server') { // console.log(JSON.parse( localStorage.getItem(localStorage.key(i)))); this.todoItems.push(JSON.parse(localStorage.getItem(localStorage.key(i)))); // this.todoItems.push(localStorage.key(i)); } } } }, components: { // 컴포넌트 태그명 : 컴포넌트 내용 'TodoHeader': TodoHeader, 'TodoInput': TodoInput, 'TodoList': TodoList, 'TodoFooter': TodoFooter, Modal: Modal } } </script> TotoInput.vue <template> <div class="inputBox shadow"> <input type="text" v-model="newTodoItem" v-on:keyup.enter="addTodo"> <!-- <button v-on:click="addTodo">add</button> --> <span class="addContainer" v-on:click="addTodo"> <i class="fas fa-plus addBtn"></i> </span> <Modal v-if="showModal" @close="showModal = false"> <!-- you can use custom content here to overwrite default content --> <h3 slot="header"> 경고! <i class="closeModalBtn fas fa-times " @click="showModal = false"></i> </h3> <h3 slot="body"> 아무것도 입력하지 않으셨습니다. </h3> </Modal> </div> </template> <script> import Modal from './common/Modal.vue' export default { props: ['propsdata'], // propsdata 생성 data: function() { return { newTodoItem: "", showModal: false, propsd: this.propsdata } }, methods: { addTodo: function() { if(this.newTodoItem !== '') { this.$emit('addTodoItem', this.newTodoItem); console.log('TotoInput.vue data : ' + this.propsdata); // propsdata Log 출력 // 중복이 아닐 경우에만 Text Clear if(!this.propsdata) { this.clearInput(); } } else { this.showModal = !this.showModal; } }, clearInput: function() { this.newTodoItem = ''; } }, components: { Modal: Modal } } </script> 결과
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
github 승인해주세요~
gist에 요청 남겼습니다 hyj2u 승인 부탁드립니다 강의와 관련있는 질문을 남겨주세요.• 강의와 관련이 없는 질문은 지식공유자가 답변하지 않을 수 있습니다. (사적 상담, 컨설팅, 과제 풀이 등)• 질문을 남기기 전, 비슷한 내용을 질문한 수강생이 있는지 먼저 검색을 해주세요. (중복 질문을 자제해주세요.)• 서비스 운영 관련 질문은 인프런 우측 하단 ‘문의하기’를 이용해주세요. (영상 재생 문제, 사이트 버그, 강의 환불 등) 질문 전달에도 요령이 필요합니다.• 지식공유자가 질문을 좀 더 쉽게 확인할 수 있게 도와주세요.• 강의실 페이지(/lecture) 에서 '질문하기'를 이용해주시면 질문과 연관된 수업 영상 제목이 함께 등록됩니다.• 강의 대시보드에서 질문을 남길 경우, 관련 섹션 및 수업 제목을 기재해주세요. • 수업 특정 구간에 대한 질문은 꼭 영상 타임코드를 남겨주세요! 구체적인 질문일수록 명확한 답을 받을 수 있어요.• 질문 제목은 핵심 키워드를 포함해 간결하게 적어주세요.• 질문 내용은 자세하게 적어주시되, 지식공유자가 답변할 수 있도록 구체적으로 남겨주세요.• 정확한 질문 내용과 함께 코드를 적어주시거나, 캡쳐 이미지를 첨부하면 더욱 좋습니다. 기본적인 예의를 지켜주세요.• 정중한 의견 및 문의 제시, 감사 인사 등의 커뮤니케이션은 더 나은 강의를 위한 기틀이 됩니다. • 질문이 있을 때에는 강의를 만든 지식공유자에 대한 기본적인 예의를 꼭 지켜주세요. • 반말, 욕설, 과격한 표현 등 지식공유자를 불쾌하게 할 수 있는 내용은 스팸 처리 등 제재를 가할 수 있습니다.