게시글
질문&답변
2022.02.07
강의 처럼 안됩니다~!
안녕하세요. 캡틴판교님. allowJs를 추가해도 마찬가지로 router 부분과 store 부분에 에러가 발생했습니다. 라이브러리 버전으로 인한 문제인거 같아 테스트를 해봤는데요, 지금 제가 실습하는 시점의 vue-router, vuex 버전이 각각 4.0.12, 4.0.2 버전이고 강의시점 vue-router, vuex 버전이 3.4.9, 3.6.0인데, 강의시점 버전으로 다운그레이드하니까 에러없이 잘 동작했습니다. 아무래도 주버전이 업데이트되면서 코드 작성방식에서 변화가 있었던건지.. 좀 더 조사를 해봐야겠지만.. 여튼 그런거 같습니다. 일단 다운그레이드한 후 실습 진행하려고합니다. 답변 감사하고 항상 좋은 강의 해주셔서 감사합니다.
- 1
- 3
- 276
질문&답변
2021.09.27
모달창 관련 질문입니다.
아.. Modal.vue 컴포넌트에 v-if 속성을 주고 TodoInput.vue 컴포넌트에서 v-bind로 props를 내려주는 형태로하면 등장할때도 트랜지션이 잘 적용되네요. 흐음... 강사님 강의에선 왜 된건지 궁금하네요. 버전업되면서 바뀐건지.. 여튼 다음과 같이 수정하니까 잘 작동되었습니다! name ="modal" > class ="modal-mask" v-if =" propsdata " > class ="modal-wrapper" > class ="modal-container" > class ="modal-header" > name ="header" > default header class ="modal-body" > name ="body" > default body export default { name : "Modal" , props : [ 'propsdata' ] } scoped > . modal-mask { position : fixed ; z-index : 9998 ; top : 0 ; left : 0 ; width : 100 % ; height : 100 % ; background-color : rgba ( 0 , 0 , 0 , 0.5 ) ; display : table ; transition : opacity 0.3 s ease ; } . modal-wrapper { display : table-cell ; vertical-align : middle ; } . modal-container { width : 300 px ; margin : 0 px auto ; padding : 20 px 30 px ; background-color : #fff ; border-radius : 2 px ; box-shadow : 0 2 px 8 px rgba ( 0 , 0 , 0 , 0.33 ) ; transition : all 0.3 s ease ; font-family : Helvetica , Arial , sans-serif ; } . modal-header h3 { margin-top : 0 ; color : #42b983 ; } . modal-body { margin : 20 px 0 ; } . modal-default-button { float : right ; } /* * The following styles are auto-applied to elements with * transition="modal" when their visibility is toggled * by Vue.js. * * You can easily play with the modal transition by editing * these styles. */ . modal-enter { opacity : 0 ; } . modal-leave-active { opacity : 0 ; } . modal-enter . modal-container , . modal-leave-active . modal-container { -webkit-transform : scale ( 1.1 ) ; transform : scale ( 1.1 ) ; } class ="inputBox shadow" > type ="text" v-model =" newTodoItem " v-on :keyup.enter =" addTodo " > class ="addContainer" v-on :click =" addTodo " > class ="fas fa-plus addBtn" > v-bind :propsdata =" showModal " > slot ="header" > 경고! class ="fas fa-times closeModalBtn" @click =" showModal = false " > slot ="body" > 무언가를 입력하세요. import Modal from "@/components/common/Modal" ; export default { name : "TodoInput" , data : function () { return { newTodoItem : "" , showModal : false, } } , methods : { addTodo : function () { if ( this . newTodoItem !== '' ) { this . $emit ( 'addTodoItem' , this . newTodoItem ) ; this . clearInput () ; } else { this . showModal = ! this . showModal ; } } , clearInput : function () { this . newTodoItem = '' ; } , } , components : { Modal , } } scoped > . input : focus { outline : none ; } . inputBox { background-color : #fff ; height : 50 px ; line-height : 50 px ; border-radius : 5 px ; } . inputBox input { border-style : none ; font-size : 0.9 rem ; } . addContainer { float : right ; display : block ; background : linear-gradient ( to right , #6478fb , #8763fb ) ; width : 3 rem ; border-radius : 0 5 px 5 px 0 ; } . addBtn { color : #ffffff ; vertical-align : middle ; } . closeModalBtn { color : #42b983 ; }
- 3
- 2
- 315
질문&답변
2021.09.14
그대로 쳤는데 에러가나네요 ㅠㅠ
아.. 해결했습니다.. (사진) 위 localhost:3000 뒤에 / 슬래시 붙였었는데 그거때문에 에러가 났던거네요...;; https://studio.apollographql.com 뒤에서 / 슬래시 붙어있어서 cors 에러 해결안돼서 하루종일 고민했었는데... 이것도 이 문제일줄이야... ㅠㅠ 여튼 해결했습니다. 슬래쉬를 조심해야겠네요..
- 0
- 1
- 185
질문&답변
2021.08.21
빌드 후 브라우저에서 Uncaught ReferenceError: exports is not defined 에러
안녕하세요. 캡틴판교님~! 저도 이 문제 어떻게 해결하셨는지 궁금합니다~! 알려주실 수 있으실까요?
- 3
- 3
- 236