Thumbnail
BEST 개발 ・ 프로그래밍 웹 개발
트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
(4.8)
48개의 수강평 ∙ 960명의 수강생

55,000원

지식공유자 : 김정환
총 55개 수업˙총 7시간 29분
평생 무제한 수강
수료증 발급 강의
중급이상 대상
내 목록 추가 618 공유
nimble9 프로필

안녕하세요. 서버에서 에러가 생기는데 이유를 모르겠습니다. nimble9 6일 전
TypeError: res.status is not a function 새로 고침하면 저 에러가 계속 생기네요. 테스트 아이디로 로그인을 시도해도 같은 에러가 생깁니다. https://github.com/Nimble9/lecture-vue-trello.git

2
wkdejrtlr 프로필

npm error 문의드립니다 wkdejrtlr 8일 전
안녕하세요. 강의 열심히 수강하고 있습니다. 다름이 아니라 npm run dev로 실행하면 에러가 나는데 해결이 안되어서 문의 드립니다. 터미널 캡쳐한부분입니다.

1
알 프로필

prev, next 변수가 사용되지 않아서 에러가 나는데 이건 어떻게 해야할까요? 1달 전
안녕하세요~ 어렵지만 열심히 따라해보면서 공부하고있습니다 ㅠ_ㅠ dragger.js 파일에서 prev, next 변수가 이렇게 에러가 나는데 추천해주실 처리방법이 있을까요?

1
dayone 프로필

4:50초 쯤 설명이 잘못된 것 같습니다 dayone 1달 전
안녕하세요 강의 오늘 구매하여 잘 듣고 있습니다. 질문이 있는데요, 4분 50초 쯤 설명에서, '초기화면에는 loading 이 false 니까 loading board 라는 문장이 출력되고' 라고 하셨는데, false니까 v-else 안이 출력되는 것이 맞지않나요? fetchData() 안에서 this.loading을 다시 true라고 해서 보이기도 전에 바뀌는 것이 아닌지 궁금해서 질문 남깁니다.

1
알 프로필

pos값은 임의의 값인가요?? 1달 전
안녕하세요 pos 질문드립니다~ 초기값이 65535인데 이 값은 위치에 영향을 주는 값(예를들어 리스트의 위치가 65535에 위치)이 아닌  그냥 기준이 되는 임의의 값을 넣어준건가요???

2
알 프로필

모달 닫을때 oncClose() 관련 질문입니다 1달 전
안녕하세요 강사님은 모달을 닫으실때 애니메이션이 들어가는데 저는 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">&times;</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>

1
Patrick Min 프로필

DOM selector 대신 style binding 이용 Patrick Min 1달 전
안녕하세요 강사님 저는 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>

1
알 프로필

!! 느낌표 두개 질문입니다 2달 전
질문1) 자바스크립트에서 ! (느낌표 하나)는 NOT 연산자인건 알고있는데 작성하신것처럼 !! (느낌표 두개) 두개를 붙이면 어떤 의미가 되는건가요..? 질문2) 로그아웃 버튼 클릭시 로그아웃되고 버튼이 로그인으로 변경되려면 새로고침을 해야하는데 로그아웃과 동시에 버튼도 '로그인'버튼으로 변경하려면 어떻게 해야할까요..? 

1
알 프로필

then 질문입니다 2달 전
 api/index.js 에서 axios의 then() 로직을 이미 작성했는데 Home.vue에서 다시 import 후 또 then() 이 작성되었습니다. promise 객체라서 다시 then()으로 작성이 가능 한건가요..? 그렇다면 api/index.js 에서 작성된것과 Home.vue에서 작성된 것 모두 실행되는거 맞나요???

3
Patrick Min 프로필

AddBoard가 닫히는 시점의 API 호출 Patrick Min 2달 전
강의에서 사용하신 코드에서 보드를 추가하는 API의 응답을 확인하지 않고 팝업을 닫은 후에 보드를 조회하는 API를 호출하고 있어서 보드를 추가하는 API의 응답보다 보드를 조회하는 API의 응답이 더 빠르게 온다면 추가한 보드가 화면상에 나타나지 않을것 같은데요. 그래서 코드를 수정을 한다면 이렇게 하는 편이 좋을것 같은데 addBoard() { this.ADD_BOARD({title: this.input}) .then(() => { this.SET_IS_ADD_BOARD(false); this.$emit('submit'); }); } 혹시 제가 잘못 이해하고 있는지 부분이 있는지 궁금합니다. 이전 기초 Vue 강의에 이어 이번 강의도 잘 수강하고 있습니다. 좋은 강의 만들어주셔서 감사해요.

2
nicolas83 프로필

계속 로그인이 안되고 있습니다. nicolas83 2달 전
기본 플로우 구현 에서 카드 생성을 하던중이였습니다. 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한것입니다.

1
김승우 프로필

9:12 에러 예외처리에 대해서 궁금합니다 김승우 3달 전
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를 이용하면 될까요??강사님의 경우에는 어떻게 작성하시는지 여쭤보고싶습니다.

1
nicolas83 프로필

알려주신 두가지 방안이 잘 안되고 있습니다. nicolas83 3달 전
빠른 답변 감사합니다. 알려주신 버전 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 정도만 깔려있습니다.

2
nicolas83 프로필

api 통신에서 에러가 나고 있습니다. nicolas83 3달 전
api 통신 첫번째 강의에서 clone은 해왔는데 npm install      npm i   두가지 다 해봤는데 에러가 납니다.  zip 를 다운로드 하고 npm install 을 해도 똑같습니다. 원래 있던 lecture-vue-trello 폴더 밖에다 따로 폴더 만들어 하고 있습니다. 이렇게 인스통 하면 진행 할때 문제되거나 하는일은 없나요? 아님 다르게 인스톨을 해야 하나요? npm run dev 를 쳐도  pleas install sqlite3 parckage manually 라고 뜹니다  waiting 이라 고 뜨면저 진행은 한되고 있습니다. 

1
박정근 프로필

안녕하세요. 강의 너무 잘보고 있습니다. 박정근 3달 전
PS D:\trello\lecture-vue-trello-server> curl localhost:3000/health api 서버 명령을 하였습니다. 그런데 curl : URI 접두사를 인식할 수 없습니다. 위치 줄:1 문자:1 + curl localhost:3000/health + ~~~~~~~~~~~~~~~~~~~~~~~~~~     + CategoryInfo          : NotImplemented: (:) [Invoke-WebRequest], NotSupportedException     + FullyQualifiedErrorId : WebCmdletIEDomNotSupportedException,Microsoft.PowerShell.Commands.InvokeWebRequestCommand 위와 같은 에러가 나서 해결방법좀 알 수 있을까요?

1

55,000원

내 목록 추가 618 공유
지식공유자 : 김정환
총 55개 수업˙총 7시간 29분
평생 무제한 수강
수료증 발급 강의
중급이상 대상
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스