Vue.js 완벽 가이드

vuex binding undefined 국민대소프트웨어학부_최락준 4일 전

안녕하세요! 중간정리 및 스타일링 과정까지 끝마친 수강생입니다! 강의가 너무 좋아 열심히 듣고 있어요ㅎㅎ

실습을 진행하던 도중 문제가 발생하였는데 맨 처음 localhost:8080/news, localhost:8080/jobs, localhost:8080/ask 으로 요청을 보내면 전부 빈 페이지를 보여주고 toolbar에 있는news, jobs, ask를 눌러서 두번째로 요청을 보내면 제대로 된 페이지를 응답해주는 기이한 현상이 발생하였습니다... vue dev tool로 보았을 때에 분명 vuex store state에 수십개의 객체가 들어있는 배열을 저장은 정확히 해주지만 컴포넌트 자세히보기를 누르면 vuex binding부분에 있어야할 배열이 없고 undefined를 잡고 있네요... 제 스타일대로 좀 더 간소화시켜서 코드를 정리했던게 잘못일까요..

 아래는 제 코드와 문제발생 페이지입니다!

<NewsView.vue>

<actions.js>

<mutations.js>

<states.js>

<routes/index.js>

<problems>

<두번째 클릭하였을 때에는 잘 작동하는 화면>

제 견해로는 api로 데이터가 불러와지고 state에 넣는 것까지의 과정이 컴포넌트가 로딩되는 시점보다 느려서 처음 요청때에는 아무것도 안보이고 두번째 요청부터 보이는게 아닐까싶습니다...(비동기처리)  막연하게 이런 생각은 들지만 실제 코드상으로 어느 곳에서 문제인지를 파악 못하겠네요ㅠㅠ

scopedSlots.default is not a function?? pjok1122 6일 전

renderless component 강의 내용 중..

gist에 있는 소스 코드를 그대로 작성했는데, 제목과 같은 에러가 발생하네요.

왜이럴까요

해당강의 하단 링크 Ryan.Lee 20일 전

페이지를 찾을 수 없습니다 나옵니다.

slot을 쓰게 되면.. pdt 24일 전

UserView와 ItemView에서 더 이상 UserProfile로 props를 넘길 필요가 없게 되는거죠?

[강의 시간 01:00] 미야옹랑이 28일 전

[강의 시간 01:00]

actions.js에서

fetchNewsList().then( response => {

   context.commit('SET_NEWS', response.data);

   return response;

}) 이부분의 경우 굳이 return response를 적지않아도

NewsView.vue에서

this.$store.dispatch('FETCH_NEWS').then(() => {})으로

구현이 가능한데 return response를 써줘야 then함수 체이닝이된다고 말씀하신거는 잘못 말씀해주신건가요? action에 등록한 함수들을 dispatch 하면 promise객체가 반환되기때문에 then체이닝이 가능한건가요?

이벤트 버스 부분 질문있습니다. YoungGeun Kwon 1달 전

이벤트를 $on로 등록하고나서 이벤트객체가 쌓이면 안돼서 반드시 $off로 없애야 한다고 하셨는데,

어떠한 경우에도 등록했던건 다 제거를 해야하는 건가요??

이벤트 리스너 등록하고 안지우는 경우도 몇번 봤는데 이런 경우는 대부분 실수인건가요??

https://stackoverflow.com/questions/6033821/do-i-need-to-remove-event-listeners-before-removing-elements

이 글 보니 지워야만 하는게 맞는것 같은데.. 일부러 안지우는 경우도 있는지, 있다면 예를 들어 어떤 경우인지

알려주시면 감사하겠습니다!

gist 권한 요청 했는데 추가 부탁드립니다. elegy74 1달 전

.

gist 주소가 없습니다. Study SNULife 1달 전

gist.github.com/joshua1988

로 들어갔을 때는

gist가 vue.js 정복 캠프 2기 gist 제외하고는 아무것도 없는데 어떻게 vue-advanced repo 접근 가능할까요?

python & vuejs 연동? poptato 1달 전

안녕하세요 강의잘 들었습니다.

제가 python에서 분석한 결과는 vuejs에서 연동하고 싶은데 이때 data를 어떻게 vuejs로 전달할수있을가요?현재는 python에서 csv나 graph로 생성하여 보고 있는데 어떤 형태로 생성해서 vuejs에서 가져올수있을가요?

netlify 배포에서 에러가 발생합니다ㅠ YoungGeun Kwon 1달 전

드디어 끝까지 완강을 해서 배포단계에 들어갔는데, 배포에서 오류가 납니다 ㅠㅠ

yarn build로 빌드를 하였습니다.

아래가 로그입니다.

이미지 경로를 못찾는거 같은데, 로컬에서 앱실행시 이미지를 잘 불러옵니다 ㅠ 캐시를 지우고 새로고침해도 잘 나와요..

아래가 해당 에러부분 코드입니다.

위와 같이 img태그의 src 속성에 쓰일 데이터들을 컴포넌트 스크립트 코드에 정의를 하고,

위와 같이 v-for을 사용하여 각 이미지 태그에 src 속성에 바인딩하였습니다.

로컬 실행시 아주 잘 나오는데 ㅠ netflify 배포할땐 저부분에서 에러가 나네요..

행여나 npm run build로도 해봤는데...안됩니다ㅠ 

'require()'를 사용하면 이미지를 못불러오는 것 같은데 무슨 문제일까요.. 

mapState, mapGetters 그리고 computed의 역할이 혼란스러워요 Soyoung Park 1달 전

안녕하세요. 강의 잘 듣고 있습니다 :)

강의 중에 this.$store.state.user 부분을 줄이기 위해 computed를 사용하시면서 템플릿 부분 텍스트를 깔끔하게 하기 위해 computed를 거치는 것은 Vue.js 공식가이드에 나와있는 방식이라고 하셨는데, 그러면 mapState나 mapGetters는 언제 써야 하는것인가요?

물론 모든 방법이 다 의도한대로 작동할 것임은 알지만 제가 vuex 공식문서에서 본 바로는

"컴포넌트가 여러 저장소 상태 속성이나 getter를 사용해야하는 경우 계산된 속성을 모두 선언하면 반복적이고 장황해집니다. 이를 처리하기 위해 우리는 계산된 getter 함수를 생성하는 mapState 헬퍼를 사용하여 키 입력을 줄일 수 있습니다."

이렇게 보았기 때문에 계산된 데이터가 아닌 단순히 텍스트를 줄이기 위한 방법으로는 mapState가 가장 공식에서 제안하는 방식이라고 생각했습니다. 그러나 해당 강의를 듣고 약간 혼란스러워졌네요.

개발자 성향에 따라서 다르게 쓰는 것인지, 또는 프로젝트마다 아니면 속성마다 언제 사용해야 효율적이다... 라는 것이 있는 것인지 궁금합니다.

console창에 에러가ㅠ.. 이한별 2달 전

영상 기준으로 4분 20초까지 따라했으나 

화면에서 에러가 떨어지내요 ㅠ 왜 그럴까요?

약간의 키워드라도 주시면 참고해서 고쳐보겠습니다

==============================

이렇게 수정하니 정상 동작하였습니다!!
{store} 의 문제였던것 같습니다.

깃헙 URL 안들어가집니다... JoonHo Kim 2달 전

https://github.com/joshua1988/vue-advanced

netlify에서만 실행이 되요 pirates27 2달 전

netlify로 업로드해 빌드한거는 웹에서 잘 실행되는데,

왜 VS Code에서 npm run build로 생성된 dist 폴더 안에 있는 index.html을 단순히 더블클릭해서 실행했을때는 흰색 빈 페이지만 뜨는걸까요ㅠ

서버를 통하지 않고 실행하면 왜 안되는건지 알려주실 수 있나요?

빌드후 생성된 자원의 구성에 대해 Wonda Jeong 2달 전

서비스 배포를 위한 명령어 소개 및 실습 강의에서 폴더 구성이 잘 이해가 안가서요.

VUE에 작성한 html소스가 html파일로 분리되어서 html 폴더 밑에 들어갈줄 알았는데 실질적으로 html파일은 index.html밖에 없어서요.  여기서 3가지 궁금한게 있는데 

1. vue파일에 작성한 html 템플릿 소스는 js를 통해 삽입되는거나요? 

2. 1이 맞다는 전제하 ) 이 프로젝트가 스터디 프로젝트라 그런건가요? 아니면 vue(또는 webpack?)으로 빌드한 모든 프로젝트는 하나의 index.html을 가지고 다른 template 소스는 js로 삽입하는게 일반적인가요?

3. 1이 맞다는 전제하 ) 그리고 js에 모든 html소스가 적혀있으면 길어져서 오히려 로딩에 시간이 걸릴텐데 라우팅에 맞춰서 html 파일을 리퀘스트 하는 방식보다 더 좋은 방식인건가요?  

질문 내용이 vue보다는 웹팩 관련 질문일 것 같기도 한데...질문이 다소 난잡한 점 양해부탁드립니다.