묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Vue.js 끝장내기 - 실무에 필요한 모든 것
강의 질문있습니다.
강의 초반부에 말씀하신 웹서비스는 동시성을 보장에 대해 헷갈려서 질문 드립니다. 제가 이해 하기로는 여러사람이 하나의 ID에 대해 수정을 할때, 중간에 수정된 최근정보를 제공하는것이 좋기때문에, 페이지 진입시 Id값을 이용해 최신 정보를 불러와야한다.라는 뜻으로 이해하는것이 맞을까요? 그리고 그 최신데이터 보장은 페이지의 성격에 따라 협의를 봐야한다?라고 이해하면 되는것일까요? 그리고 지금 강의 들으면서 드는 질문인데, 강의 초반부에 페이지 컴포넌트는 드라이하게 작성하는것이 좋다고 말씀하시면서 비즈니스 로직(form submit등)이 없이 작성하고 비즈니스 로직은 components안에서 작성하는것이 좋다고 하셨는데, 이번에 view폴더에있는 MainPage.vue에는 비즈니스로직을 작성을 하신 이유가 있을까요?
-
미해결웹 게임을 만들며 배우는 Vue
``<-- 안의 내용이 스트링
`` <-- 요거 안에서 자동완성 기능이 안되는데, 비주얼스튜디오 코드에서 작업중입니다. ``<-- 요것들 안에 있는내용은 스트링으로 됩니다. 방법이 있을까요?
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
i 태그에 v-on:click 이벤트랑 v-bind:class가 적용되지 않습니다.
강의를 보면서 따라서 타이핑하고 있는데, i 태그에서 이벤트랑 클래스 바인딩이 안됩니다. 아래에 span태그에서는 적용되는데, 이유가 뭔지 알 수 있을까요? <template> <div> <ul> <li v-for="(todoItem, index) in todoItems" v-bind:key="index" class="shadow"> <span v-on:click="toggleComplete(todoItem, index)"> <i class="checkBtn fas fa-check" v-bind:class="{checkBtnCompleted: todoItem.completed}"></i> </span> <span v-bind:class="{textCompleted: todoItem.completed}">{{todoItem.item}}</span> <span class="removeBtn" v-on:click="removeTodo(todoItem, index)"> <i class="fas fa-trash-alt"></i> </span> </li> </ul> </div> </template> <script> export default { data: function() { return { todoItems: [], } }, methods: { removeTodo: function(todoItem, index) { console.log('ffff'); localStorage.removeItem(todoItem); this.todoItems.splice(index, 1); }, toggleComplete: function(todoItem) { todoItem.completed = !todoItem.completed; } }, created: function() { if(localStorage.length > 0) { for (var i = 0; i < localStorage.length; i++) { this.todoItems.push(JSON.parse(localStorage.getItem(localStorage.key(i)))); } } } } </script> <style scoped> ul { list-style-type: none; padding-left: 0px; margin-top: 0; text-align: left; } li { display: flex; min-height: 50px; height: 50px; line-height: 50px; margin: 0.5rem 0; padding: 0 0.9rem; background: white; border-radius: 5px; } .removeBtn { margin-left: auto; color: #de4343; } .checkBtn { line-height: 45px; color: #62acde; margin-right: 5px; align-self: center; } .checkBtnCompleted { color: #b3adad; } .textCompleted { text-decoration: line-through; color: #b3adad; } </style>
-
미해결웹 게임을 만들며 배우는 Vue
npm run build
npm run build 한 후 localhost에서 어떻게 확인하나요...?
-
미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
bcrypt vs bcryptjs
안녕하세요 강사님!아래 댓글에 코멘트 남겨주신 강사님 댓글 중에서, bcrypt 로 진행하면 된다고 하시길래 npm 공식 사이트를 들어가 봤더니, 비슷한 이름의 라이브러리가 "2개" 있다는 것을 확인했습니다. bcrypt github wiki에서 kelektiv 제작자님 코멘트를 보면bcrypt 가 더 성능상 우수하지만, 브라우저에서 동작하지 않기 때문에 웹 브라우저 환경에서는 bcryptjs 를 사용하라고 하는데, 여기서 질문있습니다.1. 어떤 라이브러리로 설치하나요?(순간, swagger 문서를 웹 브라우저를 통해 확인하는 것이니 bcryptjs 가 아닌가 했었는데, 정확히 어떤게 맞나요?)
-
해결됨Vue.js 끝장내기 - 실무에 필요한 모든 것
jest 오류
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. 학습중에 JEST오류가 있어서 오류 메세지와 package.json 스샷 첨부합니다. 좋은 강의 감사합니다.
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
favicon 경로 질문
파비폰 아이콘을 index.html과 같은 경로인 public폴더에 넣고 태그 경로를 ./favicon.ico로 설정하면 잘 적용이 되는데 강의에서처럼 src/assets/경로에 넣고 (index.html이 public폴더에 있으므로 이에 접근하기위해) ../src/assets/favicon.ico로 설정하면 왜 정상적으로 적용이 되지 않을까요? 그리고 npm돌릴때 local로 들어갈때는 파비콘이 안뜨고 network로 들어갈땐 파비콘이 뜨는 이유도 알려주세요
-
미해결프로젝트로 배우는 Vue.js 3
에러 질문입니다 !
안녕하세요 코지코더님 ! 유튜브 부터 시작해서 코지코더님의 Vue 강의를 완강한지 어언 3달째 입니다. 다름이 아니라 오랜만에 소스코드를 확인해보고 싶어서 실행해 보았더니 분명 처음 완강했을 당시에는 잘 동작했는데 오랜만에 돌려보니까 사이트는 잘 접속 되는데 데이터는 연결되지 않고 오류가 발생하여 몇 시간 가까이 구글링을 해보았지만 소득이 없어 결국 여기까지 돌아오게 되었네요 Failed to load resource: net::ERR_CONNECTION_REFUSED -> npm run serve 입력 후 사이트가 실행되고 몇 초 후 발생하는 에러 POST net::ERR_CONNECTION_REFUSED -> Create Todo를 이용하여 Todo를 생성했을때 뜨는 에러 GET net::ERR_CONNECTION_REFUSED -> Todo 생성 실패 후 To-Do List로 넘어온 후 실행되는 에러 혹시 어떤 문제인지 또 어떤 방법을 사용하여야 오류를 고칠 수 있을지 싶어서 질문 남깁니다 !
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
권한 요청드립니다
인프런 아이디 : guinness987@gmail.com 인프런 이메일 : guinness987@gmail.com 깃헙 아이디 : guinness987@gmail.com 깃헙 Username : kimchulyeon
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
Vuex state 속성 적용 시 다음과 같은 오류가 발생합니다.
콘솔 창에서 다음과 같은 오류가 발생하는데 원인이 뭘까요? 구글링해도 자세한 내용이 안 나오네요 ㅠㅠ 코드는 다음과 같습니다. store.js 코드 TodoHeader.vue 코드
-
미해결Vue.js 시작하기 - Age of Vue.js
vuex와 route에 대해…
안녕하세요. vuex가 새로고침을 하면 state가 날아가버리기 때문에 action이나 mutation을 컴포넌트의 created훅에 넣어서 쓰고 있습니다. 이렇게 하면 해당 컴포넌트에는 문제 없이 state가 유지되는데, getters를 불러들인 뒤 해당 컴포넌트의 하위 컴포넌트에 props데이터로 넘겨주면, vue개발자 도구로 보기에는 분명히 값이 존재하는데 하위 컴포넌트에서는 값이 존재하지 않게 됩니다. console.log를 작동시켜 보면 빈 값이 나오네요. 하위 컴포넌트가 라우팅에 따라서 다르게 보여져야 할 부분이라 <router-view :gettersData="gettersData"/> 이런 식으로 넣었는데 혹시 router-view 태그는 props를 받지 못하는 건지 궁금합니다. 만약 문제 없이 받을 수 있다면, 혹시 router-view가 중첩되서 발생하는 문제가 아닐까 싶네요. 지금 컴포넌트 구조가... //parent comp<router-view/> //child comp <div></div> //repetitive comp<router-view :gettersData="gettersData"/> 이런 모양새라서 혹시 router-view 태그가 중첩 되면 안되는 건가 싶기도 하고 그렇네요. 질문을 요약해보자면, 1. Getters를 하위 컴포넌트의 props로 넘겨도 되는지? 2. Router-view 태그로도 props를 보낼 수 있는지? 3. router-view 태그를 부모와 자식 태그에서 중첩해서 사용해도 되는지? 정도가 될 것 같습니다. 감사합니다!
-
미해결웹 게임을 만들며 배우는 Vue
안녕하세요. vue-loader 오류 질문드립니다.
npm run build 잘 되다가 vue-loader를 설치하고 나서 오류가 납니다. 왜 모듈을 찾을 수 없다고 나올까요?
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
vue emit과 vuex 활용 질문입니다. 화면 랜더링이 되지 않습니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요, vue 강의를 들으면서 프로젝트를 진행하고 있는 예비개발자입니다. 두가지 질문이 있어 질문드립니다! 상단에 캠핑장 필터를 선택해 화면에 띄워주는 과정입니다. 1. 우선 컴포넌트를 나누는 기준을 잘 모르겠습니다. 1번에 해당하는 CampsiteFilter.vue와 부모 컴포넌트인 Campsite.vue로 구성되어 있습니다. 하지만, 기존에 다른 사람들이 제작해놓은 사이트의 경우 코드를 보니, 정말 세세하게 컴포넌트를 구성해놨더라구요. 어떤 상화에서 컴포넌트를 나누어야하는지 궁금합니다. 2. 컴포넌트간의 vuex와 emit사용 시 차이입니다. 그림의 왼쪽 필터 부분에서 먼저, vuex의 store를 활용해 데이터를 주고받으면 필터링을 선택하고 적용을 눌러 데이터를 받아오고자하면 데이터가 화면에서 랜더링 되지가 않습니다. 하지만, 자식컴포넌트에서 emit을 활용해 데이터를 보내주면 화면에 랜더링이 됩니다. 원인이 무엇일까요? 바쁘신 와중에 긴 내용 읽어주시고 답변해주시면 정말 감사하겠습니다!
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
Component name "Modal" should always be multi-word. 에러
Vue 버전이 달라서 그런지 이제는 Vue파일을 생성할때 한 단어로는 파일 생성이 안되면서 Component name "Modal" should always be multi-word. 이러한 에러가뜹니다;; "Modal" 뒤에 다른 단어를 하나더 써 주었더니 해결되긴 하였습니다만 앞으론 이 규칙을 지키면 되는 건가요? 아님 헤제가 가능할까요?
-
미해결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.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 감사합니다