55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
백엔드 API 호출 에러
안녕하세요 선생님, 백엔드 API 호출시 아래와 같은 에러가 나는데 해결방법이 있을까요..?터미널에서lecture-vue-trello-server 에서 npm run dev 은 되는데curl localhost:3000/health (인터넷에서 찾은 명령어 포함)입력시 아래와 같이 뜹니다.여기서 해결이 안 되어 문의드립니다.
- 해결됨트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
watch와 computed
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.동적 라우팅을 사용하고, $route 파라미터의 변경에 따라 특정 API를 호출 해야 한다면 watch를 쓰는게 의도적으로 적합할 것 같은데 맞을까요?computed의 경우 파생된 데이터의 계산값을 미리 선언해놓고 캐싱까지 되어서 편리하지만 계산된 값의 대해서일 경우이고, 아직 '중첩 라우트' 강좌까지 밖에 못들었지만 bid, cid에 따라 해당 데이터의 정보를 요청해야 한다면 watch로 파싱하는게 좋을 것 같습니다.. 라고 생각해봅니다api호출의 대해서 componentDidMount 처럼 created 에서 호출해주면 될거라 생각했는데 route의 변경에 감지되지 않는건 처음 알았네요
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
nextTick 관련 질문
ref 태그로 특정 input 태그를 가져와 focus를 주는 과정에서 nextTick 프로퍼티를 통해 작업 순서를 앞당겨주는 것으로 focus를 곧바로 실행시키는 부분은 이해하고 있습니다( nextTickQueue와 MicroTaskQueue는 이벤트루프상 특정 큐의 실행을 마치기 직전 실행하고 종료하는 것으로 알고 있습니다) 그런데 왜 여기서 ref로 잡아낸 태그에 focus를 주는 과정의 렌더링 사이클이 뒤로 밀리는건지 이해를 못했습니다.클릭이벤트 실행시 onAddList 함수를 실행하게되면 해당 click 이벤트가 큐로 빠지고, focus 이벤트도 큐로 빠져서 실행하게 될텐데, 그러면 렌더링 순서에는 문제가 없다고 보아야 하지 않을까요? 이게 단순 자바스크립트 이벤트루프 문제로 보아야할지 뷰 라이프사이클 개념에서 별도의 렌더링 단계가 있다고 보아야할지, 아니면 아예 제가 감을 잘못 잡고 있는건지 헷갈립니다.
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
a 태그에 href를 빈 값으로 계속 주는 이유
강의에서 계속 a태그에 href를 빈값으로 주시는 이유가 따로 있을까요??
- 해결됨트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
함수에서 _를 사용하셨는데 어떨때 쓰이는 건가요?
안녕하세요 강사님!강의 재미있게 잘 듣고있습니다.다름이 아니라 actions.js에서 _를 인자값으로 받거나 함수로 불러오셨던데 _가 vuex의 데이터들을 가져오는 건가요?? 어떨때 사용되는건지 궁금합니다.
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
watch로 router 감시할 때
안녕하세요!watch: { '$route' () { this.fetchData() },},$route' 에 작은 따옴표를 쓰는 이유는 무엇인가요?? $route 로 적어도 잘 작동하는데 궁금합니다!
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
보드 아이템 배경색 변경 관련 질문
안녕하세요. 강사님 강의 잘 듣고 있습니다! 지금은 updated 훅에서 컴포넌트의 데이터가 변경될 때마다 DOM에 접근하여 보드 아이템의 배경색을 바꾸는 것으로 알고 있습니다. 하지만 인라인 스타일 바인딩으로 아래 코드처럼 배경색을 변경해도 정상적으로 동작하는 데 updated 훅에서 보드 아이템의 배경색을 바꾸시는 다른 이유가 있을까요? <div class="board-item" v-for="b in boards" :key="b.id" ref="boardItem" :style="{ backgroundColor: b.bgColor }" >
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
NavigationDuplicated 에러
NavigationDuplicated: Avoided redundant navigation to current location Login failure를 띄우기 위해 비밀번호를 다르게 입력했더니 Login failure가 잘 노출되긴 하는데 콘솔에 위와 같은 에러가 뜹니다. 어떤 부분에서 잘못되었는지 모르겠습니다 ㅜㅜ
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
vue-router 설치 중 계속해서 오류가 발생합니다.
해당 오류가 계속 발생하여 검색해 보았더니 --legacy-peer-deps 인자를 사용하면 된다하여 설치는 했지만 디펜던시를 빌드하지 않는 것 같습니다.. 아무리 찾아도 어떻게 해야할지 잘 모르겠습니다 ㅠㅠ
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
로컬 스토리지 관련 질문입니다!
안녕하세요. 강의 잘 듣고 있습니다! 듣다가 궁금한 점이 있어서 이렇게 질문을 드립니다. 현재 저희가 만들고 있는 트렐로에는 로그인할 때 로컬스토리지에 토큰값을 넣잖아요! 근데 로컬스토리지는 직접 지워주지 않는 이상 데이터가 영구적으로 남아서 브라우저 끄고 다시 킬때도 토큰값이 남아서 로그인이 되어있는데요..!! 만약 브라우저를 끌 때는 로그인된 부분이 취소 되고, 다시 로그인 할 수 있도록 하려면..로컬 스토리지말고 세션스토리지를 사용해야 하나요??? 실무에서도 로컬스토리지로 로그인 값을 저장해서 하는지.. 한다면 브라우저 종료시에는 어떻게 처리하는지 궁금합니다.
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
<router-link> 질문
<router-link to=""> 와 <router-link :to=""> 차이점이 to라는것을 props으로 전달해준다는건가요? 잘 이해가 안가서 질문 드립니다!
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
(재질문/Vuex 적용 - 인증 1) 강의에서 8분 18초 부분 질문 있습니다.
강의에서 "뷰 어플리케이션이 구동되었을 때 브라우저 저장소를 확인한다. localstorage에 token이 있는지 없는지 체크한다." 라고 말씀해주셨습니다. 그래서 하단의 코드를 보시면, const store = new Vuex.Store({ ... }); const { token } = localStorage; store.commit("LOGIN", token); export default store; store라는 Vuex의 저장소 컨테이너를 선언해주었고, 밑에 localStorage에서 token을 불러왔습니다. 그리고 store의 commit 메소드를 이용하여 LOGIN mutations에 token을 전달하였죠. 제가 궁금한 건 1. 상태의 저장소를 담당하는 Vuex store에서 위와 같은 로직을 넣은 이유입니다. 쓸데 없는 질문일 수도 있지만 export default store; 전 저기에 선언을 해주면 Vuex의 store를 이용(e.g., state.isAddBoard, commit, ...)하는 모든 컴포넌트는 항상 localStorage에서 token을 받아 LOGIN mutations에게 전달하는 건가(?)라는 궁금증이 떠올랐습니다. 여기 챕터와는 무관하지만 아래 코드에 대해 질문이 있습니다. export const setAuthInHeader = token => { axios.defaults.headers.common["Authorization"] = token ? `Bearer ${token}` : null; }; const { token } = localStorage; if (token) setAuthInHeader(token); 답변을 찾아보는 도중 강사님께서 브라우져를 새로고침하면 메모리에 있는 토큰 정보가 초기화 되기 때문에 위의 코드를 넣어주셨다 하였습니다. 그렇다면 setAuthInHeader라는 함수안의 axios.defaults.headers.common이라는 함수(?)를 설정하고 아래의 코드 처럼 setAuthInHeader(token)을 선언해주면, 밑에 있는 auth의 login request api, board의 fetch, create request api를 사용할 때 자동으로 axios 헤더에 토큰을 장착하여 보내지게 되는 것인가요?
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
router-link 와 router-view 의 차이를 모르겠습니다!
카드는 router-view로 표현하는데 router-link 와의 차이가 무엇인지 궁금합니다
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
왜 index.js를 바로 볼 수 있나요?
- 어떤 이유로 index.js 파일을 라우터에서 바로 찾아낼 수 있는지 궁금합니다!
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
리스트 내 카드 이동 오류
현재 섹션 7의 추가 요구사항 구현 - 리스트 이동까지 강의를 수강했습니다. 그런데 카드 이동 시 오류가 발생합니다. 카드가 존재하는 리스트에서 카드가 존재하지 않는 리스트로 카드를 이동하려 하면 오류가 발생하는 것 같습니다. [테스트] 1. Home 에서 Create new board 버튼을 클릭해 새로운 보드를 생성한다. 2. Todo 리스트에 Card 1과 Card 2라는 타이틀을 가진 카드 2개를 생성한다. 3. Doing 리스트에 Card 3라는 타이틀을 가진 카드 1개를 생성한다. 4. Card 3을 Todo 리스트에 drag하여 옮긴다. 5. Card 1을 Doing 리스트에 drage하여 옮긴다. 1~5번의 과정을 진행하면 아래와 같은 오류 메시지가 console에 출력됩니다. [오류 메시지] vue.esm.js?efeb:628 [Vue warn]: Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node." DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. 강의를 여러차례 다시 들으면서 어느 부분을 빠트렸을까 찾아 봤지만, 도저히 해결이 되지 않아 문의 드립니다! 어느 컴포넌트에서 발생하는 문제인지 파악이 어려워 git 주소 남깁니다 :D https://github.com/itschool94/vue-trello 좋은 강의 감사합니다...!
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
보드를 추가했을 때 추가한 보드에 대한 화면 업데이트(?) 갱신(?)에 관한 질문입니다.
혼자서 복습하던 중 AddBoar.vue는 화면에 보드를 추가하는 것이고 Home.vue에서는 추가한 보드를 포함한 모든 보드를 갱신하는 역할이라고 생각하여 코드를 짰습니다. 아래와 같은 코드로요. // Home.vue fetchData() { this.loading = true; this.FETCH_BOARDS().finally(data3 => { console.log("data3 =", data3); this.loading = false; }); }, // Board.vue addBoard() { this.SET_IS_ADD_BOARD(false); this.ADD_BOARD({ title: this.input }) } 여기서 문제점이 보드를 추가하자마자 추가한 보드는 화면에 갱신이 안됩니다. 그리고 새로 고침이나 다른 컴포넌트를 갔다가 들어오면 추가한 보드가 화면에 갱신이 됩니다. 그래서 기존의 소스 코드를 참고하여 틀린 부분을 고친 후, 보드를 추가했을 때 Vuex의 actions에 FETCH_BOARD하는 부분에 대한 로그를 찍어봤습니다. // Home.vue fetchData() { this.loading = true; this.FETCH_BOARDS().finally(data3 => { console.log("data3 =", data3); this.loading = false; }); }, // Board.vue addBoard() { this.SET_IS_ADD_BOARD(false); this.ADD_BOARD({ title: this.input }).then(data1 => { console.log("data1 =", data1); this.FETCH_BOARDS().then(data2 => { console.log("data2 =", data2); }); }); } 화면 상에서 Create new board...라는 보드를 클릭하였을 때, 추가한 보드가 바로 화면에 갱신이 되고 console.log를 찍어보면 data3, data1, data2 순으로 출력이 됩니다. 왜 이러는 지 이유를 혹시 알 수 있을까요? 자식 컴포넌트에서 무언가가 바뀌면(?) 이와 관련된 상위 컴포넌트부터 해당 자식 컴포넌트까지 가상 돔 트리가 생성이 되고, 상위 컴포넌트부터 자식 컴포넌트까지 순차적으로 바뀌니까 이런 현상이 발생한 건가요?
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
(Vuex 적용 - 인증 1) 강의에서 8분 18초 부분 질문 있습니다.
강의에서 "뷰 어플리케이션이 구동되었을 때 브라우저 저장소를 확인한다. localstorage에 token이 있는지 없는지 체크한다." const store = new Vuex.Store({ ... }); const { token } = localStorage; store.commit("LOGIN", token); export default store; Vuex라는 것은 별도의 저장소이고 이 저장소를 컴포넌트 레벨에서 필요한 상태나 로직들을 불러와서 처리하는 것으로 알고 있는데, 위와 같이 localStorage에서 토큰을 가져와 LOGIN mutations에 전달하는 로직을 왜 Vuex의 store 부분에 선언한 이유가 무엇인가요?
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
npm install 시 에러
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. trello-server를 다운 받고 npm 설치 시 아래와 같은 오류가 발생합니다. node-gyp, windows build toos 등 cmd 관리자 모드로 실행하여 설치를 하고 다시 실행하였습니다. 하지만 계속 아래와 같은 오류가 발생합니다. 해결 방법을 알려주시면 감사하겠습니다. npm WARN deprecated har-validator@5.1.5: this library is no longer supported npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated npm WARN deprecated terraformer@1.0.12: terraformer is deprecated and no longer supported. Please use @terraformer/arcgis. npm WARN deprecated terraformer-wkt-parser@1.2.1: terraformer-wkt-parser is deprecated and no longer supported. Please use @terraformer/wkt. npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies. npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 npm WARN deprecated node-pre-gyp@0.11.0: Please upgrade to @mapbox/node-pre-gyp: the non-scoped node-pre-gyp package is deprecated and only the @mapbox scoped package will recieve updates in the future npm WARN deprecated sequelize@4.44.4: This version will no longer receive security fixes per our security policy. Please update to sequelize@5 or above. npm ERR! code 1 npm ERR! path C:\Users\Administrator\Documents\trello-backend\lecture-vue-trello-server-master\node_modules\sqlite3 npm ERR! command failed npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node-pre-gyp install --fallback-to-build npm ERR! Failed to execute 'C:\Program Files\nodejs\node.exe C:\Users\Administrator\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\Administrator\Documents\trello-backend\lecture-vue-trello-server-master\node_modules\sqlite3\lib\binding\napi-v3-win32-x64\node_sqlite3.node --module_name=node_sqlite3 --module_path=C:\Users\Administrator\Documents\trello-backend\lecture-vue-trello-server-master\node_modules\sqlite3\lib\binding\napi-v3-win32-x64 --napi_version=8 --node_abi_napi=napi --napi_build_version=3 --node_napi_label=napi-v3' (1) npm ERR! node-pre-gyp info it worked if it ends with ok npm ERR! node-pre-gyp info using node-pre-gyp@0.11.0 npm ERR! node-pre-gyp info using node@16.4.1 | win32 | x64 npm ERR! node-pre-gyp WARN Using request for node-pre-gyp https download npm ERR! node-pre-gyp info check checked for "C:\Users\Administrator\Documents\trello-backend\lecture-vue-trello-server-master\node_modules\sqlite3\lib\binding\napi-v3-win32-x64\node_sqlite3.node" (not found) npm ERR! node-pre-gyp http GET https://mapbox-node-binary.s3.amazonaws.com/sqlite3/v5.0.2/napi-v3-win32-x64.tar.gz npm ERR! node-pre-gyp WARN Pre-built binaries not installable for sqlite3@5.0.2 and node@16.4.1 (node-v93 ABI, unknown) (falling back to source compile with node-gyp) npm ERR! node-pre-gyp WARN Hit error self signed certificate in certificate chain npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@7.1.2 npm ERR! gyp info using node@16.4.1 | win32 | x64 npm ERR! gyp info ok npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@7.1.2 npm ERR! gyp info using node@16.4.1 | win32 | x64 npm ERR! gyp info find Python using Python version 3.9.6 found at "C:\Users\Administrator\AppData\Local\Programs\Python\Python39\python.exe" npm ERR! gyp http GET https://nodejs.org/download/release/v16.4.1/node-v16.4.1-headers.tar.gz npm ERR! gyp WARN install got an error, rolling back install npm ERR! gyp ERR! configure error npm ERR! gyp ERR! stack Error: self signed certificate in certificate chain npm ERR! gyp ERR! stack at TLSSocket.onConnectSecure (node:_tls_wrap:1530:34) npm ERR! gyp ERR! stack at TLSSocket.emit (node:events:394:28) npm ERR! gyp ERR! stack at TLSSocket._finishInit (node:_tls_wrap:944:8) npm ERR! gyp ERR! stack at TLSWrap.ssl.onhandshakedone (node:_tls_wrap:725:12) npm ERR! gyp ERR! System Windows_NT 10.0.19042 npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "configure" "--fallback-to-build" "--module=C:\\Users\\Administrator\\Documents\\trello-backend\\lecture-vue-trello-server-master\\node_modules\\sqlite3\\lib\\binding\\napi-v3-win32-x64\\node_sqlite3.node" "--module_name=node_sqlite3" "--module_path=C:\\Users\\Administrator\\Documents\\trello-backend\\lecture-vue-trello-server-master\\node_modules\\sqlite3\\lib\\binding\\napi-v3-win32-x64" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=3" "--node_napi_label=napi-v3" npm ERR! gyp ERR! cwd C:\Users\Administrator\Documents\trello-backend\lecture-vue-trello-server-master\node_modules\sqlite3 npm ERR! gyp ERR! node -v v16.4.1 npm ERR! gyp ERR! node-gyp -v v7.1.2 npm ERR! gyp ERR! not ok npm ERR! node-pre-gyp ERR! build error npm ERR! node-pre-gyp ERR! stack Error: Failed to execute 'C:\Program Files\nodejs\node.exe C:\Users\Administrator\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\Administrator\Documents\trello-backend\lecture-vue-trello-server-master\node_modules\sqlite3\lib\binding\napi-v3-win32-x64\node_sqlite3.node --module_name=node_sqlite3 --module_path=C:\Users\Administrator\Documents\trello-backend\lecture-vue-trello-server-master\node_modules\sqlite3\lib\binding\napi-v3-win32-x64 --napi_version=8 --node_abi_napi=napi --napi_build_version=3 --node_napi_label=napi-v3' (1) npm ERR! node-pre-gyp ERR! stack at ChildProcess.<anonymous> (C:\Users\Administrator\Documents\trello-backend\lecture-vue-trello-server-master\node_modules\node-pre-gyp\lib\util\compile.js:83:29) npm ERR! node-pre-gyp ERR! stack at ChildProcess.emit (node:events:394:28) npm ERR! node-pre-gyp ERR! stack at maybeClose (node:internal/child_process:1067:16) npm ERR! node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5) npm ERR! node-pre-gyp ERR! System Windows_NT 10.0.19042 npm ERR! node-pre-gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Administrator\\Documents\\trello-backend\\lecture-vue-trello-server-master\\node_modules\\node-pre-gyp\\bin\\node-pre-gyp" "install" "--fallback-to-build" npm ERR! node-pre-gyp ERR! cwd C:\Users\Administrator\Documents\trello-backend\lecture-vue-trello-server-master\node_modules\sqlite3 npm ERR! node-pre-gyp ERR! node -v v16.4.1 npm ERR! node-pre-gyp ERR! node-pre-gyp -v v0.11.0 npm ERR! node-pre-gyp ERR! not ok npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Administrator\AppData\Local\npm-cache\_logs\2021-07-02T02_08_55_146Z-debug.log
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
안녕하세요 리스트 이동 관련 질문이 있습니다.
보드를 처음 생성하고 나서 2번째 위치에 있는 doingList를 3번째 위치인 doneList로 이동하고 나서 ADD ANOTHER LIST로 리스트를 추가하면 새로운 리스트가 맨 마지막 리스트가 아닌 Todo 리스트 옆인 2번째 위치에 추가가 되는데 왜 그런건가요?? 새로고침하면 제대로 마지막으로 리스트가 이동되어지는 것으로 나오는데 새로고침 안할 경우에 그렇게 보여지는 이유가 뭔지 궁금합니다.
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
질문이 있습니다.
export const store = new Vuex.Store({ export const store = new Vuex.store({ state: { count: 1, } }); 이렇게 하면 오류가 안 나오는데 export default store = new Vuex.store({ state: { count: 1, } }); 이렇게 하면 오류가 나옵니다. const와 default의 차이인데, 문법 상으로 어떤 차이가 있길래 오류가 나오는 것인가요? 찾아봐도 이해가 잘 안 되어서 문의드립니다.