강의 처럼 안됩니다~!

안녕하세요. 캡틴판교님. allowJs를 추가해도 마찬가지로 router 부분과 store 부분에 에러가 발생했습니다. 라이브러리 버전으로 인한 문제인거 같아 테스트를 해봤는데요, 지금 제가 실습하는 시점의 vue-router, vuex 버전이 각각 4.0.12, 4.0.2 버전이고 강의시점 vue-router, vuex 버전이 3.4.9, 3.6.0인데, 강의시점 버전으로 다운그레이드하니까 에러없이 잘 동작했습니다. 아무래도 주버전이 업데이트되면서 코드 작성방식에서 변화가 있었던건지.. 좀 더 조사를 해봐야겠지만.. 여튼 그런거 같습니다. 일단 다운그레이드한 후 실습 진행하려고합니다. 답변 감사하고 항상 좋은 강의 해주셔서 감사합니다.

모달창 관련 질문입니다.

아.. 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.3s ease;}.modal-wrapper { display: table-cell; vertical-align: middle;}.modal-container { width: 300px; margin: 0px auto; padding: 20px 30px; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33); transition: all 0.3s ease; font-family: Helvetica, Arial, sans-serif;}.modal-header h3 { margin-top: 0; color: #42b983;}.modal-body { margin: 20px 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: 50px; line-height: 50px; border-radius: 5px;}.inputBox input { border-style: none; font-size: 0.9rem;}.addContainer { float: right; display: block; background: linear-gradient(to right, #6478fb, #8763fb); width: 3rem; border-radius: 0 5px 5px 0;}.addBtn { color: #ffffff; vertical-align: middle;}.closeModalBtn { color: #42b983;}

그대로 쳤는데 에러가나네요 ㅠㅠ

아.. 해결했습니다.. (사진) 위 localhost:3000 뒤에 / 슬래시 붙였었는데 그거때문에 에러가 났던거네요...;; https://studio.apollographql.com 뒤에서 / 슬래시 붙어있어서 cors 에러 해결안돼서 하루종일 고민했었는데... 이것도 이 문제일줄이야... ㅠㅠ 여튼 해결했습니다. 슬래쉬를 조심해야겠네요..

빌드 후 브라우저에서 Uncaught ReferenceError: exports is not defined 에러

안녕하세요. 캡틴판교님~! 저도 이 문제 어떻게 해결하셨는지 궁금합니다~! 알려주실 수 있으실까요?