Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

(93개의 수강평)

1335명의 수강생
Taek Taek 프로필

섹션 14. Vuex - 프로젝트 구조화 및 모듈화 질문 Taek Taek 17시간 전

스토어 모듈화 강좌에서 마지막 부분에서 다음 시간에 정리하고 마무리 하겠습니다. 라고 하셨는데,

스토어 모듈화 강좌가 마지막 강좌인 건가요?

아님 다른 강좌가 더 있는건가요?

0
이경민 프로필

function 리팩토링시 function expression 형식으로 리팩토링하면 동작이 안되나요? 이경민 3일 전

App.vue 파일에서

methods: {
addOneItem(todoItem) {
const obj = { completed: false, item: todoItem };
localStorage.setItem(todoItem, JSON.stringify(obj));
this.todoItems.push(obj);
},
removeOneItem(todoItem, index) {
localStorage.removeItem(todoItem.item);
this.todoItems.splice(index, 1);
},
toggleOneItem(todoItem, index) {
this.todoItems[index].completed = !this.todoItems[index].completed;
// localStorage.removeItem(todoItem.item);
localStorage.setItem(todoItem.item, JSON.stringify(todoItem));
},
clearAllItems() {
localStorage.clear();
this.todoItems = [];
}
}

강의에서는 위와 같은 형식으로 리팩토링을 진행하셨는데

저는 처음에 아래와 같이 리팩토링을 해봤었습니다.

methods: {
addOneItem: (todoItem) => {
const obj = { completed: false, item: todoItem };
localStorage.setItem(todoItem, JSON.stringify(obj));
this.todoItems.push(obj);
},
removeOneItem: (todoItem, index) => {
localStorage.removeItem(todoItem.item);
this.todoItems.splice(index, 1);
},
toggleOneItem: (todoItem, index) => {
this.todoItems[index].completed = !this.todoItems[index].completed;
// localStorage.removeItem(todoItem.item);
localStorage.setItem(todoItem.item, JSON.stringify(todoItem));
},
clearAllItems: () => {
localStorage.clear();
this.todoItems = [];
}

하지만 에러가 나고 실행이 되지 않았습니다.

저는 두 방식이 같은것인줄 알았는데 뭔가 착각을 하고 있던것 같습니다. 혹시 두 방식이 어떤 차이점이 있는지 알려주실 수 있나요?

1
정종범 프로필

CSS scoped 속성 관련 질문 정종범 3일 전

강의 중 1:30초 부분에서 CSS의 scoped를 이용하는 이유에 대해서 설명해주셨는데,  잘 이해가 가지가 않네요.

추가적으로 자세한 설명을 해주시면 감사하겠습니다.

1
원윤희 프로필

splice 원윤희 6일 전

오류는 뜨지 않는데 목록이 나타나질 않아요.

어떻게 해야 할까요?

splice 주석 달고 실행하면 목록이 나타나는데 주석을 지우면 목록이 나타나질 않아요.

4
ㅇㅁㅇ 프로필

댓글 확인 부탁드립니다~ ㅇㅁㅇ 11일 전

부탁드릴게요~

1
jungwon 프로필

gist 댓글 확인 부탁드립니다~ jungwon 14일 전

감사합니다.

좋은하루 되세요~

1
원윤희 프로필

npm I 오류 원윤희 17일 전

> fsevents@1.2.11 install /Users/yun-ali/Desktop/vue-intermediate/vue-todo/node_modules/fsevents

> node-gyp rebuild

No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!

gyp ERR! configure error 

gyp ERR! stack Error: `gyp` failed with exit code: 1

gyp ERR! stack     at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)

gyp ERR! stack     at ChildProcess.emit (events.js:210:5)

gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)

gyp ERR! System Darwin 19.3.0

gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"

gyp ERR! cwd /Users/yun-ali/Desktop/vue-intermediate/vue-todo/node_modules/fsevents

gyp ERR! node -v v12.14.0

gyp ERR! node-gyp -v v5.0.5

gyp ERR! not ok 

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules/fsevents):

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 install: `node-gyp rebuild`

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

audited 9992 packages in 3.987s

19 packages are looking for funding

  run `npm fund` for details

found 3 vulnerabilities (1 low, 1 moderate, 1 high)

  run `npm audit fix` to fix them, or `npm audit` for details

yun-aliui-MacBook-Pro:vue-todo yun-ali$ 

4
Hyung 프로필

index.html 아이콘,폰트 CDN 입력하였으나 개발자 도구에서 보이지 않습니다. Hyung 19일 전

index.html에서 fontawesom, googlefont CDN을 입력 후 npm run serve 후 브라우저를 실행하니 버튼이 보이지 않고 

개발자 도구를 실행하였는데 Elements에 입력한 CDN이 보이지 않습니다.

개발자 도구에서 Edit as HTML을 통하여 CDN을 입력했더니 버튼이 노출되기 시작합니다. 

npm run serve 후 버튼이 노출되지 않는 이유가 있을까요? 해결이 되지 않아 문의드립니다. ㅜㅜ

4
이창환 프로필

export관련하여 질문드립니다!! 이창환 20일 전

안녕하세요 개인적으로 궁금한게있어서 질문드립니다 아직 너무 초보라 바보같은 질문일지 모르겠네요 ㅠㅠ

제가 궁금한부분은 app.vue 파일에서 import를 하면 그 경로 에 있는 파일의 내용 전체가 그부분으로 삽입된다고 생각하면 된다고 알아들었는데 각 컴포넌트 내에서 script태그 부분만 export default로 감싸져있고 나머지는 export하지 않았는데 어떻게 template와 style태그의 내용도 다 넘어가는지 궁금합니다. 또한 TodoHeader.vue파일에서는 export하는 내용 조차없는데 어떻게 import를 해서 사용할수있는지 궁금합니다.

아니면 혹시 export default 로 감싸져있는 script태그 부분만 app.vue파일로 넘어가는건가요??

1
박경실 프로필

VScode theme 박경실 20일 전

강의에서 사용하셨던 VScode theme 이름이 궁금합니다.

영상을 작게해서 보니까, 제가 사용하는 테마와 코드 색이 달라서 가끔 헷갈리는 일이 있더라구요 ㅎㅎ

2
my-way 프로필

css가 이상합니다. my-way 24일 전

<template>
<div class="inputBox shadow">
<input type="text" v-model="toDoItem" v-on:keyup.enter="addItem">
<span class="addContainer" v-on:click="addItem">
<i class="fas fa-plus addBtn"></i>
</span>
</div>
</template>

<script>
export default {
data: function() {
return {
toDoItem: ''
}
},
methods: {
addItem: function() {
localStorage.setItem(this.toDoItem, this.toDoItem)
this.cleanInput();
},
cleanInput: function() {
this.toDoItem = '';
}
}
}
</script>

<style scoped>
input:focus {
outline: none;
}
.inputBox {
background: white;
height:50px;
line-height: 50px;
border-radius: 5px;
}
.inputBox input {
border-style:none;
font-size: 0.9rem;
}
.addContainer {
float: right;
background: linear-gradient(to right, #6478FB, #8763FB);
display:block;
width: 3rem;
border-radius: 0 5px 5px 0;
}
.addBten {
color: white;
vertical-align: middle;
}
</style>

모두 똑같이 했는데 인풋이 들어가는 곳이 왼쪽이 아닌 가운데에 있는데 이게 body에 text-align:cener; 로 되어 있어서 그런 것 같은데 이걸 지우면 font icon plus도 가운데가 안되서 위치가 이상해집니다. 

코드가 분명히 똑같은데 왜 input 타입하는 곳이 가운데서 시작하고 input 크기가 작습니다. 

2
viveloper 프로필

data 변경에 방법에 대해 질문드립니다. viveloper 1달 전

todoItems의 원본 데이터 변경 측면에서 slice가 아닌 splice 사용을 강조하셨는데, 리액트와 비교해서 궁금증이 생겨서 질문드립니다. 리액트에서는 state변경시 이전 state의 불변성을 유지하기 위해 새로운 객체를 생성하여 넣는 방식을 사용하는데 뷰에서는 이와는 반대되는 개념인가요? 저는 this.todoItems = [선택된 아이템이 제거된 새로운 배열] 이렇게 구현할거라 생각했었는데 예상과 달라서 질문드립니다. 두 가지 방법 모두 정상적으로 동작하는 것처럼 보입니다만 후자의 경우 제가 모르는 잠재적 문제가 있는것인가요?

2
yang9202 프로필

vue-intermediate 소스 확인 불가 yang9202 1달 전

안녕하세요.

권한 받았고, 다른 소스는 모두 확인 가능한데,  todo-app/components-implementation 소스만 확인이 불가능 합니다.

처음에는 소스가 아예 없더니, 지금은 404에러가 뜹니다.

확인 부탁드립니다. 

1
chunghan.yi 프로필

index is defined but never used 이라고 오류가 나타납니다. chunghan.yi 1달 전

강의 보면서 그대로 따라했는데 'toggleComplete: function(todoItem, index)...'함수부분에 있는 index에 값이 없다고 

index is defined but never used라고 화면 오류가 뜨네요ㅜㅜ

함수안에 window.console.log(index)하면 오류가 사라지기는 하는데 콘솔사용하는 방법말고 다른 방법있을까요?

저오류가 왜 뜨는지 모르겠습니다ㅠ

6
박굿뜨 프로필

안녕하세요 질문드립니다~! 박굿뜨 1달 전

mutations이든 actions든 어찌보면 component가 늘어남에 따라 수 많은 state 값 변경 연산이 있을텐데, 그걸 역할?로 나눠서 나중에 버그찾기나 유지보수 하기 쉽게 해 놓았다는 말씀이신가요?(그림으로 설명해주신것이 뭔가 와 닿지 않아서 질문드립니다. actions에 시간차를 두고 state를 변경하는 mutations을 여러개 요청하든 mutations에서 바로 시간차를 두는 state값 변경을 요청하든 값 변화 추적하는건 똑같지 않을까? 생각이 듭니다..)

1
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스