안녕하세요 강사님 좋은 강의 언제나 감사드립니다. 강사님의 강의 덕분에 기존 jsp를 뷰로 전환을 성공적으로 적용할 수 있었습니다. 다만 한 가지 여쭤보고 싶은 점이 있는데, axios를 사용하게 될 시에, 만일 뷰의 컴포넌트 하나가 로딩될 때 자식 컴포넌트 3개를 import해서 해당 자식 컴포넌트의 created시점에 api를 호출하도록 설정을 했는데, 이 경우에 서버에서 토큰 만료가 되었음을 리턴받게 되었을 때 나머지 api들을 요청 취소 할 수 있는 방법은 없을까요? 아니면 제가 아키텍쳐 설계를 잘못한 걸까요? 자식 컴포넌트는 단순 prop으로 데이터 전달 받아서 동작할 뿐, 컴포넌트에서 api를 호출 하지 않는 방식으로 가야 할까요? 혹시 강사님은 실제 프로젝트를 하실때 해당 이슈에 대해 어떻게 처리하시는 지 궁금합니다. 단순히 제가 생각했을때는 위에 이야기 한 것 처럼 컴포넌트에서는 api를 날리지 않고 부모 컴포넌트에서 코드를 async await로 api여러개 조회 후 try catch문으로 에러가 발생하면 그 이후 코드는 실행하지 않도록 한 뒤 자식 컴포넌트에게 데이터를 prop으로 넘겨주는 방식밖에 생각이 나지 않는데 제 생각이 잘못되었거니 더 좋은 방법이 있는 것인지 궁금합니다.
안녕하세요 판교님! 강의 들으면서 열심히 따라가고 있습니다 다른게 아니라 처음 소스 작업할때부터 계속 발생한 오류문제인데 어떻게 해결해야될지 몰라서 질문드리는데요.. toggleOneItem: function(todoItem, index) { todoItem.completed = !todoItem.completed; localStorage.removeItem(todoItem.item); localStorage.setItem(todoItem.item, JSON.stringify(todoItem)); }, 이부분에 index매개변수때문에 'index' is defined but never used no-unused-vars 이라고 오류가 발생하는데 원인을 잘 모르겠습니다.. index를 제거하면 작동이 잘되고 아니면 서버를 계속 종료시켰다가 다시 돌리면 오류없이 작동이 되더군요.. index를 제거하는게 좋을까요??
해쉬를 없애기 위해서 다음과 같이 작성하였습니다. var router = new VueRouter({ mode: 'history', // 페이지의 라우팅 정보 routes: [ // 페이지의 개수만큼 객체 개수가 필요하다. { // 페이지의 url path: '/login', // 해당 url 에서 표시될 컴포넌트 component: LoginComponent }, { path: '/main', component: MainComponent } ] }); 그런데 링크가 .../original/path/to/login, .../original/path/to/main 이 되는 것이 아니라 /login, /main 으로 변해버립니다. (앞의 기존 path 가 사라져서 router.html 파일이 아닌 login, main 이라는 존재하지 않는 파일에 접근하게 됩니다.) 따로 서버를 띄운 것은 없고 크롬 브라우저에서 실행하였습니다. 무슨 실수를 한 것일까요? ㅠㅠ
아래 질문과 동일한 질문인데.. 이렇게 뜨는데... 혹시 다른 걸로 대체할 수 있는 방법이 있을까요? 음 해결했습니다.. 좀 이상하긴 한데 변수값?이 v가 아니기만 하면 되는 거 같아요.. v 를 text로 바꾸니까 에러 없이 잘 동작합니다. (참고로 기존 에러에서는 서버는 동작하는데 해당 에러가 title에 뜨고, 박스에 입력 자체가 불가능했습니다. 검색해봤는데 이유는 모르겠네요... )
안녕하세요! 캡틴판교님 :) 4/10 Live방송때 router-view관련해서 질문드리고 답변받았던 학생입니다! 다름이 아니라 캡틴판교님 말씀대로 오탈자와 router를 정의한 부분들(path나 component)을 살펴봤을 때 별 다른 문제는 없으나 아직 제대로 동작하지 않습니다.ㅠ 또한 캡틴판교 블로그의 '질문을 잘하는 개발자'글을 읽고 제가 처한 상황을 명확히 알려드려야 질문을 받는 입장에서도 편할거 같다고 생각해서 다시 질문드립니다! :) 1. 개발환경: 에디터는 VS코드 를 사용하고 있고, npm으로 vue-cli 를 설치해서 vue init webpack-simple 로 프로젝트를 만들었으며, npm run dev 를 통해서 개발하고 있는 내용을 확인하고 있습니다. 2. 문제상황: 싱글파일컴포넌트를 사용 해서 컴포넌트들을 분리했으며, router에 관한 파일도 router.js로 따로 만들어서 main.js에서 import해서 사용 했습니다. npm run dev를 통해서 실행시 console과 cmd창에서 모두 오류가 발생하지 않고 동작됩니다. 다만 App.vue의 template부분에 router-view를 통해서(5.참고) 나타내고 싶은 부분이 있는데 그 부분이 표시되지 않습니다.(7.참고) nav부분에서 router-link를 통해서 URL을 변경하는 부분을 구현했는데(6.참고) 해당 부분은 잘 동작됩니다. 실행된 웹에서 해당 버튼을 누르면 알맞게 URL이 /, /menu2, /menu3 ...으로 변경됩니다. (다만 Section컴포넌트가 뜨지 않는 것은 동일) 3. 다음은 router.js 내용입니다. 4. 다음은 main.js 내용입니다. 5. 다음은 App.vue 내용입니다. 6. 다음은 PlandNav.vue 내용입니다. 7. 다음은 실제로 동작하는 웹화면과 개발자도구에서 확인한 실제 렌더링 결과입니다. (footer내용은 가렸습니다!) 위의 사진과 같이 router-view를 통해서 나타내고 싶은 PlandSection1~4부분이 알맞게 렌더링되지 않고 <!---->로 표현됩니다 :( 혹시 제가 실수한 부분이나 발견하지 못한 오류가 있나요?? 제가 구글링하면서 찾은 제 문제와 가장 가깝다고 생각되는 문서입니다. https://stackoverflow.com/questions/60238731/vue-router-showing-blank-page-when-built https://router.vuejs.org/guide/essentials/history-mode.html
제가 입문부터 강의를 보고 있습니다. 지금 강의를 보면 Destructuring 을 말씀하셨다고 하셨는데.. 어느 강의에서 말씀하셨었나요..? 참고 URL 외엔 설명된 부분이 없는 것 같아서요.. 참고 URL 주신 사이트를 보면 context 처럼 response 를 인자로 무조건? 당연하게 받기 때문에 context.commit => { commit } response.data => { data } 로 표현한게 맞을까요?? 제가 이해한 부분이 맞는 지... 궁금해서 문의합니다.
vue-cli에서 data에 이중객체 구조로 만들 때 this가 통하지 않는데 이럴땐 어떻게 해야하나요? 아래의 그림은 data의 chartData 객체에서 label 값으로 computed의 tagNames를 사용하려고 한 부분인데요, chartData가 이미 객체라서 그런지 this를 하면 뷰 인스턴스를 가리키지 않는 것 같습니다. 그래서 tagNames도 사용이 안되구요.
TypeError: Cannot set property '__VUE_DEVTOOLS_UID__' of null backend.js:1414 Uncaught (in promise) TypeError: Cannot set property '__VUE_DEVTOOLS_UID__' of null at registerAppJob (backend.js:1414) 도움이 필요합니다.
Vue 의 data에 selectedTab을 초기화하지 않아도 created를 통해 selectedTab을 이용하는 것이 가능했는데 data에 selectedTab이 없으면 onClickTab을 만들어도 클릭했을 때 변화가 없더라고요. 두 상황에 어떤 차이점이 있는건가요?
안녕하세요 수강 중 궁금한 사항 질문드립니다~ 질문1) FormView.js 파일 아래 코드에서 import View from './View.js' ; const tag = '[FormView]' ; const FormView = Object . create ( View ); // 객체를 생성함 FormView . setup = function ( el ) { // el 받아서 내부적으로 속성으로 갖게할꺼임 this . init ( el ) this . inputEl = el . querySelector ( '[type=text]' ) this . resetEl = el . querySelector ( '[type=reset]' ) this . showResetBtn ( false ); // 숨길꺼니깐 false로 넘겨줌 } const FormView = Object.create(View) 로 객체?를 생성 후 여기서 this로 메서드를 추가하셨는데 혹시 그냥 View.init(el) 이런식으로 하면 안되는건지 질문드립니다! 질문2) View.js 에서 throw el 은 어떤 역할인건지 궁금합니다.. 그럼 답변부탁드릴게요 감사합니당
안녕하세요. 라우트를 적용해서 netlify로 배포를 해봤었는데 로컬환경에서는 /jobs 이렇게 주소창에 적으면 이동이 되는데 배포된 사이트에서는 꼭 router-link 클릭으로만 이동이 가능하던데 왜 이렇게 되는건지 궁금하고 주소창에 적어서도 이동이 가능하게 하려면 어떻게 해야하는지 궁금합니다!
