55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
마지막 부분에 로그아웃 해서 로그인 화면으로 돌아왔을 때
마지막 부분에 로그아웃 해서 로그인 화면으로 돌아왔을 때 오른쪽 상단에 Logout 부분도 바꿔줘야 하지 않을까요?
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
소스 공유 받을수 있을까요?
소스 공유 받을수 있을까요?
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
setAuthInHeader 했는데 오류가 발생합니다.
로그인 후 setAuthInHeader()로 토큰을 넘겨주어서 직후 홈에는 boards fetch가 잘 되었는데요! 새로고침을 하면 또 오류가 납니다! ㅠ
- 해결됨트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
복습 중 질문드립니다 ㅠ
안녕하세요 다시 한번 복습중에 질문드립니다.. 드래그하면 pos값이 변경돼서 데이터에는 잘 반영이 되는데 html에 data-pos속성의 값에는 변경되지 않아서 card를 드래그로 이동하고 drop시 연산이 일어날때는 html에 있는 date-pos 속성(고정되어있는)의 값으로 더하거나 곱하거나 해서 계산이 맞지않습니다 ㅠ 강사님 코드를 참고해보긴 했는데 강사님도 data-pos="data.pos" 이런식으로 하시더라구요.. 제가 놓치고 있는 부분이 있을까요..? 질문드립니다! <li class="list_item" v-for="(row, index) in rowData" v-bind:key="index"> <div :data-idx="row.idx" :data-pos="row.pos"> <input type="text" :value="row.subject" readonly> {{row.idx}} <button type="button" class="memo_delete" @click="deleteList(row.idx)">×</button> </div> ... ... ... const targetList = { idx: el.firstElementChild.dataset.idx*1, pos: el.firstElementChild.dataset.pos*1 }; // 순서 비교는 배열의 index값으로 할꺼임 Array.from(document.querySelectorAll('#memoList .list_item')).forEach((el, idx, arr) => { // 배열의 index로 target의 위치 확인 const cardId = el.firstElementChild.dataset.idx; let prevList = null; let nextList = null; if(cardId == targetList.idx) { prevList = idx > 0 ? { idx: arr[idx-1].firstElementChild.dataset.idx*1, pos: arr[idx-1].firstElementChild.dataset.pos*1 } : null; nextList = idx < arr.length-1 ? { idx: arr[idx+1].firstElementChild.dataset.idx*1, pos: arr[idx+1].firstElementChild.dataset.pos*1 } : null; if(!prevList && nextList) { targetList.pos = nextList.pos / 2; // 첫 번째 자리 console.log('첫 번째 자리'); } else if(!nextList && prevList) { targetList.pos = prevList.pos * 2; //마지막 자리 console.log('마지막 자리'); } else { targetList.pos = (nextList.pos + prevList.pos) / 2; //중간 자리 console.log('중간 자리 ===',prevList.pos,'====',nextList.pos, arr[idx+1]); } vm.$http({ method: 'PUT', url: '/memo/update', data: { pos: targetList.pos, idx: targetList.idx } }) } })
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
@submit 미동작
Home.vue <template> <div> Home <div>Personal Books</div> <div ref="boardList"> <div v-for="b in boards" :key="b.id" > <router-link :to="`/b/${b.id}`"> <div>{{ b.title }}</div> </router-link> </div> <div> <a href="" @click.prevent="addBoard"> 새 게시판 생성... </a> </div> </div> <AddBoard v-if="isAddBoard" @close="isAddBoard=false" @submit="onAddBoard" /> </div> </template> methods: { fetchData() { this.loading = true; // 게시글 조회 후 결과값 저장 board.fetchData().then((result) => { // this.boards = result; this.boards = result.list; // API 호출 후 로딩중.. 끄기 }).finally(() => { this.loading = false; }); }, addBoard() { console.log('addBoard()'); this.isAddBoard = true; }, onAddBoard(title) { console.log(title); console.log('아무것도 안찍히네 ㅠㅠ'); board.create(title).then(() => { this.fetchData() }) } }, 소스코드 일부만 첨부했는데요, <AddBoard v-if="isAddBoard" @close="isAddBoard=false" @submit="onAddBoard" /> 이 부분에서 onAddBoard 함수를 정의해줬는데도 불구하고 실제 클릭 시 전혀 반응이 없어요. 버전 차이나 그런 문제도 있는지요?
- 해결됨트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
slot interface에서 있는 button태그는..
안녕하세요 수강중 slot 관련하여 질문드립니다~ 예를들어, 아래와 같은 slot이 정의 되어있고, <slot name="footer"> <button type="button">버튼입니다.</button> </slot> 아래와 같이 활용을 하게되면 <div slot="footer"> footer내용입니다. </div> slot interface에 있던 button태그는 사라지고 'footer내용입니다' 라는 내용으로 바뀌게 되는데 정의 되어있는 버튼을 활용하는 방법은 없을까요..? slot태그 안에 작성되어있는 내용을 눈으로 확인하고 slot사용시 수동으로 button태그를 다시한번 작성해줘야하는걸까요..?
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
안녕하세요. 서버에서 에러가 생기는데 이유를 모르겠습니다.
TypeError: res.status is not a function 새로 고침하면 저 에러가 계속 생기네요. 테스트 아이디로 로그인을 시도해도 같은 에러가 생깁니다. https://github.com/Nimble9/lecture-vue-trello.git
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
npm error 문의드립니다
안녕하세요. 강의 열심히 수강하고 있습니다. 다름이 아니라 npm run dev로 실행하면 에러가 나는데 해결이 안되어서 문의 드립니다. 터미널 캡쳐한부분입니다.
- 해결됨트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
prev, next 변수가 사용되지 않아서 에러가 나는데 이건 어떻게 해야할까요?
안녕하세요~ 어렵지만 열심히 따라해보면서 공부하고있습니다 ㅠ_ㅠ dragger.js 파일에서 prev, next 변수가 이렇게 에러가 나는데 추천해주실 처리방법이 있을까요?
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
4:50초 쯤 설명이 잘못된 것 같습니다
안녕하세요 강의 오늘 구매하여 잘 듣고 있습니다. 질문이 있는데요, 4분 50초 쯤 설명에서, '초기화면에는 loading 이 false 니까 loading board 라는 문장이 출력되고' 라고 하셨는데, false니까 v-else 안이 출력되는 것이 맞지않나요? fetchData() 안에서 this.loading을 다시 true라고 해서 보이기도 전에 바뀌는 것이 아닌지 궁금해서 질문 남깁니다.
- 해결됨트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
pos값은 임의의 값인가요??
안녕하세요 pos 질문드립니다~ 초기값이 65535인데 이 값은 위치에 영향을 주는 값(예를들어 리스트의 위치가 65535에 위치)이 아닌 그냥 기준이 되는 임의의 값을 넣어준건가요???
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
모달 닫을때 oncClose() 관련 질문입니다
안녕하세요 강사님은 모달을 닫으실때 애니메이션이 들어가는데 저는 onClose() 에 적힌대로 링크 이동으로만 처리가 돼서 애니메이션이 없는데요.. 무슨차이일까요..? <template> <div> <Modal> <div slot="header" class="moadl-card-header"> <div class="modal-card-header-title"> <input type="text" class="form-control" :value="card.title" readonly> </div> <a href="" class="modal-close-btn" @click.prevent="onClose">×</a> </div> <div slot="body"> <h3>Description</h3> <textarea name="" id="" cols="30" rows="3" class="form-control" placeholder="Add a more derailed description..." readonly v-model="card.description"></textarea> </div> <div slot="footer"></div> </Modal> </div> </template> <script> import Modal from './Modal.vue'; import {mapActions, mapState} from 'vuex'; export default { components: { Modal }, computed: { ...mapState([ 'card', 'board' ]) }, created() { const id = this.$route.params.cid this.FETCH_CARD({id}) }, methods: { ...mapActions([ 'FETCH_CARD' ]), onClose() { this.$router.push(`/b/${this.board.id}`) } } } </script> <style> .moadl-card-header { position: relative } .modal-card .modal-container { min-width: 300px; max-width: 800px; width: 60%; } .modal-card-header-title { padding-right: 30px; } .modal-close-btn { position: absolute; top: 0px; right: 0px; font-size: 24px; text-decoration: none; } .modal-card-header { position: relative; } </style>
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
DOM selector 대신 style binding 이용
안녕하세요 강사님 저는 DOM selector를 이용해 theme color를 변경하는 대신, v-bind를 이용해 theme을 지정해주는 방식을 사용해보았는데 잘 동작하는것 같습니다. style binding을 이용했을 때에는 코드량이 줄고, theme이 지정된 컴포넌트에 관련 코드가 있어서 조금 더 동작을 파악하기 좋아 보였는데, 혹시 이렇게 작성했을 때 문제가 될 수 있거나 주의해야할 점이 있는지 궁금합니다. 좋은 강의 해주셔서 감사합니다! <!-- Navbar.vue --> <template> <nav class="header" :style="{backgroundColor: navbarColor}"> ...... </template> <script> export default { computed: { ...mapState(['navbarColor']) } ....... } </script> <!-- App.vue --> <template> <div id="app"> <Navbar /> <router-view class="container" :style="{backgroundColor: bodyColor}"></router-view> </div> </template> <script> export default { ....... computed: { ...mapState([ 'bodyColor' ]), }, updated() { const body = document.querySelector('body'); if(body) body.style.backgroundColor = this.bodyColor; }, ...... } </script>
- 해결됨트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
!! 느낌표 두개 질문입니다
질문1) 자바스크립트에서 ! (느낌표 하나)는 NOT 연산자인건 알고있는데 작성하신것처럼 !! (느낌표 두개) 두개를 붙이면 어떤 의미가 되는건가요..? 질문2) 로그아웃 버튼 클릭시 로그아웃되고 버튼이 로그인으로 변경되려면 새로고침을 해야하는데 로그아웃과 동시에 버튼도 '로그인'버튼으로 변경하려면 어떻게 해야할까요..?
- 해결됨트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
then 질문입니다
api/index.js 에서 axios의 then() 로직을 이미 작성했는데 Home.vue에서 다시 import 후 또 then() 이 작성되었습니다. promise 객체라서 다시 then()으로 작성이 가능 한건가요..? 그렇다면 api/index.js 에서 작성된것과 Home.vue에서 작성된 것 모두 실행되는거 맞나요???
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
AddBoard가 닫히는 시점의 API 호출
강의에서 사용하신 코드에서 보드를 추가하는 API의 응답을 확인하지 않고 팝업을 닫은 후에 보드를 조회하는 API를 호출하고 있어서 보드를 추가하는 API의 응답보다 보드를 조회하는 API의 응답이 더 빠르게 온다면 추가한 보드가 화면상에 나타나지 않을것 같은데요. 그래서 코드를 수정을 한다면 이렇게 하는 편이 좋을것 같은데 addBoard() { this.ADD_BOARD({title: this.input}) .then(() => { this.SET_IS_ADD_BOARD(false); this.$emit('submit'); }); } 혹시 제가 잘못 이해하고 있는지 부분이 있는지 궁금합니다. 이전 기초 Vue 강의에 이어 이번 강의도 잘 수강하고 있습니다. 좋은 강의 만들어주셔서 감사해요.
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
계속 로그인이 안되고 있습니다.
기본 플로우 구현 에서 카드 생성을 하던중이였습니다. npm run dev 를 치면 우선 로그인 페이지 는 뜹니다. test@test.com 치고 페스워드를 치면 성공은 우선 못하고 실폐로 view 상은 나타나지 않고 있습니다. 개발자 도구 console에는 로그인 실패라 뜨면서 ERR_CONNECTION_REFUSED 로그인 클릭하면 반복적으로 뜹니다.혹시나 해서 이전 LECTURE 들도 다시 방문에 로그인을 해보니 제가 방문한 로그인 포함된 강좌들은 모두 실패로 뜨고 있습니다. trello-server 폴더 가서 npm run dev 를 치면 우선 api document 페이지는 뜨고 거기 있는 명령어중 첫번째 health 는 time이 제대로 뜨고 나머지들은 post / 401 로 뜨고 있습니다. 전에 하던거와 특별히 환경이 바뀐건 없고 npm i sqlite3 를 치면 sqlite3@5.0.0 로 버전이 뜨고 따로 버전 체크로 sqlite3 --version 이라고 치면 3.32.3 라고 뜨고 있습니다. 그리고 node 12.19.0 LTS 이고 npm 도 v 6.14.8 입니다. 이전에도 cherry pick 이 안깔리거나 로그인 안되는 2-3개 강의가 있었지만 그냥 진행해 왔는데 연속적으로 login 안되서 coding 문제가 아니다 판단되어 혼자 고칠질 못하고 있습니다. 아래는 trello-server에 package.json 과 error 당시 개발자 도구를 capture한것입니다.
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
9:12 에러 예외처리에 대해서 궁금합니다
try { if (!this.inputTitle) { throw new Error("타이틀 제목을 입력해주세요!"); } const id = this.list.id; const title = this.inputTitle; if (title === this.list.title) return (this.isEditTitle = false); this.UPDATE_LIST({ id, title }).then(_ => (this.isEditTitle = false)); } catch (err) { alert(err.message); return; } finally { } 현재는 title이 공백일 경우, 변경이 없을 경우 return; 을 이용해서 함수를 종료시키고 있습니다.여기서 추가적인 예외처리를 통해 사용자에게 오류가 났다는 정보를 전달하고 싶은데, 이렇게 try catch를 이용하면 될까요??강사님의 경우에는 어떻게 작성하시는지 여쭤보고싶습니다.
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
알려주신 두가지 방안이 잘 안되고 있습니다.
빠른 답변 감사합니다. 알려주신 버전 14.4.0 과 mysql 시도해 보았습니다. 저는 12.18.0 LST 였는데 14.4.0 은 찾아보니 current여서 우선 sql쪽 을 lts 체로 해보았습니다. npm install mysql npm install mysql2 다 해보았는데 이전과 같게 에러가 발생하였습니다. 그리고 lst 삭제하고 14.4.0 Current 로 깔았는데 같았습니다. trello-server 에 sqlite3 관련게 들어있는지 그쪽으로 치지도 않았는데 sqlite3 관련되 error가 나왔습니다. 그리고 이전에 삭제한 visual studio 2015 2017 내용과 ERR! node -v 14.4.0 node-pre-gyp v0.10.3 not ok node 쪽 초로라 node-pre-gyp 는 잘 모르겠고 정확한 코드는 모르겠지만 이 버전이 맞지 안다는 말인거 같고 ERR! sqlite3@4.0.2 install node-pre-gyp install fallback to build 이 외에도 많은 error messages 들이 나왔습니다. 이전과 변한게 없습니다. 우선 현제는 LTS 최신 12.19.0 으로 다시 깔은 상태이고 windows10 64 입니다. 최근 format을 했어서 node 외에 Visul Studio Code 와 Anaconda , Python3.8 , Git , Chrome 정도만 깔려있습니다.
- 미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
api 통신에서 에러가 나고 있습니다.
api 통신 첫번째 강의에서 clone은 해왔는데 npm install npm i 두가지 다 해봤는데 에러가 납니다. zip 를 다운로드 하고 npm install 을 해도 똑같습니다. 원래 있던 lecture-vue-trello 폴더 밖에다 따로 폴더 만들어 하고 있습니다. 이렇게 인스통 하면 진행 할때 문제되거나 하는일은 없나요? 아님 다르게 인스톨을 해야 하나요? npm run dev 를 쳐도 pleas install sqlite3 parckage manually 라고 뜹니다 waiting 이라 고 뜨면저 진행은 한되고 있습니다.