묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
actions / mutations 에 대하여
안녕하세요. 현업에서 vue를 사용하고 있습니다. 부족한것을 채우려 처음부터 정주행 하고 있습니다. 덕분에 몰랐던것과 여러 팁 얻어가고 있습니다. 감사합니다. 질문이 있습니다. 예를들어 지금까지는 아래와같이 const userStore = { namespaced: true, state: { username: '', }, getters: { GET_USER_NAME: state => state.username, }, mutations: { SET_USER_NAME: (state, payload) => { state.username = payload.username; }, }, actions: { SET_USER_NAME({ commit }, payload) { commit('SET_USER_NAME', payload); }, }, }; export default userStore; this.$store.commit을 사용해 mutations를 직접 건드리는것이 아니라 this.$store.dispatch를 사용하여 actions를 건드려서 mutations 커밋으로 state의 상태 를 변경해왔습니다. - 직접 mutations을 건드리는것의 이점이 있는가? - 대부분 actions를 사용해 mutations 커밋하는것을 권장하던데 이유가 있는가? 에 대해 알고 싶습니다. 단지 비동기 비즈니스 로직을 actions에서 수행할 수 있기에 권장하는것인가 하는 생각도 듭니다. 그렇다면 - 비동기 로직이 없는 string 저장등을 위한 로직은 actions를 거치는것보다 mutations를 바로 건드리는게 더 효율적일까요? 답변 잘부탁드립니다
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
this의 scope
안녕하세요! this의 scope가 이해되지 않아 문의드립니다~ 모든 컴포넌트가 App.js에 등록되어 있고, App.js가 똑같은 Vue instance를 가르키고 있기 때문에 this를 거슬러 올라가면 똑같은 instance를 가르키고 있기 때문에 input에서 가르키는 this는 TodoInput 컴포넌트를 가르킨다. 이렇게 말씀하셨는데, 어떤 컴포넌트에서 this를 사용하면 거슬러 올라가면서 해당 객체(newTodoItem)를 찾는데 가장 가까운 객체를 찾는건가요? 아니면 해당 객체가 포함된 컴포넌트 안에서 찾는건가요? 만약 컴포넌트 안에서 찾는거라면 모든 컴포넌트가 App.js를 참조하고, App.js가 Vue instance를 참조하는 것과 무슨 관련이 있는건지 이해가 되지 않습니다. 답변 부탁드립니다^.^
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
버전 차이!
현재 vuejs.org 에 접속하면, vue3 기준으로 나오기 때문에 아래 링크를 강의 하단에 첨부하셔서 강사님과 같은 코드를 사용할 수 있게 해주시면 감사하겠습니다:) https://v2.vuejs.org/v2/examples/modal.html
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
순서가 뒤죽박죽
등록도, 삭제도 잘 되는데 새로고침하면 등록했던 순서대로 보여지는 것이 아니라 위치가 바뀌기도 하네요. 이런 건 어떻게 수정해주는 게 좋은가요?
-
미해결웹 게임을 만들며 배우는 Vue
Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor
위의 script_vue 디렉토리는 1강에서 했던 작업물들입니다. vue 버전과 vue-template-compiler(2.6.14) 버전을 동일 하게 하고 나서 webpack을 실행하니, [webpack-cli] Failed to load '/Users/joo/Desktop/zero_view/webpack.config.js' config [webpack-cli] Error: Cannot find module 'vue/compiler-sfc' 이런 에러가 나서 vue/compiler-sfc을 설치 한 후, 다시 vue는 (3.2.31)최신버전으로 하고 vue-temp는 (2.6.14)버전으로 하고 나서 웹팩빌드 하니 에러 없이 app.js 파일을 생성했습니다. 그리고 numberbaseball.html 파일을 실행하니, Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor at eval (main.js:7:1) at Object../main.js (app.js:19:1) at __webpack_require__ (app.js:153:41) at app.js:205:37 at app.js:207:12 위에 내용과 같은 에러가 크롬콘솔창에 뜹니다. 관련해서 검색 해도 잘 나오질 않네요 ㅜ
-
미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
vue.config.js 질문드립니다.
vue 5.0.1 node 12.14.0 nvm 0.39.2입니다. 서버와 같이 10.16.3.으로 하려고 했는데 vue cli가 node 버 전을 12이상 요구해서 그냥 12.14.0으로 하였고 vue create 하면 vue.config.js 파일에 이와 같이 있어 eslint 설정을 할 수 가 없네요 방법이 있을까요? const { defineConfig } = require("@vue/cli-service"); module.exports = defineConfig({ transpileDependencies: true, });
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
unknown mutation type: addOneItem
안녕하세요 좋은강의 감사합니다 다름이 아니라 잘되고 있었는데 모듈화 하고 난뒤부터 unknown mutation type: addOneItem 이에러가 나는데 혹시 어떻게 해결하면될까요? store.js todoApp.js 감사합니다
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
api 정리할때 store에 안넣고 api폴더에
api함수를 vuex store에 안넣고 api폴더로 따로 빼는게 낫나요?? 아직 강의를 다 듣지는 않았지만 전역으로 사용하려면 store에 넣고 쓰는게 나은거아닌가해서 여쭤봅니다!
-
미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
버전이 너무 다릅니다...
이거 버전이 너무 달라서 따라가기 어렵습니다ㅜ최신버전으로 다시 만들어 주세요ㅜ
-
미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
400에러질문
판교님 400에러 관련해 다음 강의 진행이 안되어 도움을 찾고자 글 올리게 되었습니다. /post에 get으로 빈 [] 을 가지고 오는 것은 되는데 다음 부분인 /post에 post하여 게시물 생성하는 것은 안되네요 ㅠ
-
미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
source-map?
안녕하세요, 파일 절대경로 @관련해 에러 코드가 나와 질문드려요! 추가적으로 설정해 줘야 하는 부분이 있는 것 같아 구글링 해 보았는데 잘 안나오더라구요 ㅠ우선 스크린샷 올리도록 하겠습니다, 급한건 아니니 넘어가도록 할게요.
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃헙 브랜치 경로 문의
안녕하세요! 좋은 수업 늘 감사히 잘듣고 있습니다. 궁금한 점이 있어서 문의드립니다. 저는 지금 Todo App - 프로젝트 구현에서 깃헙 브랜치 안내 해주시는 부분 강의 듣고 있습니다. 깃 권한도 승인받았고, 강의해주신 경로대로 진행했는데 수업내용 올려주신 자료가 없더라구요. (TodoFooter.vue, TodoHeader.vue, TodoInput.vue, TodoList.vue) 저는 위 4가지 파일이 없고 HelloWorld.vue 파일만 있더라구요.. 터미널에 git checkout todo-app/components-implementation 하면 덮어씌워진다고 하셔서, 혹시나 제코드가 날아갈까봐 시도해보지는 못했어요. 제가 경로를 잘못타고 들어간건가요? 확인부탁드립니다.
-
미해결프로젝트로 배우는 Vue.js 3
{ id: 1, subject: "휴대폰 사기", completd: false },
{ id: 1, subject: "휴대폰 사기", completd: false }, 위 처럼 작성된 코드를 강사님 처럼 자동으로 아래처럼 바꾸고싶은데 어떻게 하는지 검색을 해도 잘 모르겠어요... vscode 사용하고 있습니다. {. id: 1, subject: "휴대폰 사기", completd: false },
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
24:53 spacebar 예외처리
addTodo 함수 내부에 if문 예외처리 시 연속된 space bar를 누르면 추가가 되는 부분이 있습니다, js로직으로 어떻게 예외처리가 가능할 지 답변 가능할까요?
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
4:56 새로운 객체를 반환
판교님, 질문있습니다. data는 function()에 다시 새 객체를 반환하는데, methods는 바로 객체를 열어서 addTodo: ... 로 작성하는 이유를 알 수 있을까요?
-
해결됨Vue.js 끝장내기 - 실무에 필요한 모든 것
선생님 cli 4.5이상은 default Vue2로 설치하면 test내용이 없습니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 선생님 강의 아래 이미지에 vue cli 4.5x는 default vue2를 선택해서 프로젝트를 생성하라고 나왔는데요. 그럼 관련된 test는 안깔립니다. npm i -g jest로 설치했는데요. jest외에 더 설치해야 하는게 있나요?
-
미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
Vue js Postman 오류 질문드려요
다음주이나 다다음주에 vue.js 프로젝트를 구현하게 되는데 이 강의 공부하는 중에 아래 코드가 회사 노트북에서는 되는데 집 노트북에서는 안 되네요..
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
모달창 관련 질문입니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. vue transition을 활용하여 강사님 강의 내용과 동일하게 Modal을 적용하였습니다. 그런데 modal창이 처음 등장할 때 애니메이션 효과는 적용되지 않네요. 강사님 코드는 다른가해서 클론받아 확인해봤는데, 마찬가지로 모달창이 처음 등장했을 때 애니메이션은 적용되지 않은상태입니다. 이 부분 관련해서 확인해주실수 있으실까요?
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
질문이 있습니다.
1. 리스트를 순서대로 1, 2, 3, 4로 추가 한 뒤, 페이지를 새로고침 하면 2,4,1,3 으로 순서가 변경되어서 나타납니다. 어떤 이슈가 있는 것인가요? 2. 리스트에 1을 추가한 뒤, 다시 또 1을 추가하면 Duplicate keys detected 에러가 나타납니다. 이부분은 어떻게 해결해야 할까요?
-
미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
vuex은 일반 홈페이지에서 session과 같나요?
vuex의 경우 만약 회원이 로그인을 한후에 사이트를 이용하고 브라우저를 닫으면 사라지는 것이라고 볼수 있으며 일반 홈페이지에서의 session기능과 동일하다고 무방할까요? 아니면 Local storage와 같은 기능인가요?