트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술

트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술

(30개의 수강평)

691명의 수강생
55,000원
지식공유자 · 김정환
55회 수업· 총 7시간 29분수업
평생 무제한 시청
수료증 발급 강의
수강 난이도 중급
남상우 프로필

mapState 쪽 소스 질문입니다. 남상우 29일 전

이전 소스에서는 'isAddBoard'로 끝났지만
이번 소스에서는 isAddBoard : 'isAddBoard'로 바뀌었더군요.
어떤 차이점이 있나요?

1
ABC abc 프로필

Board.vue 질문드립니다. ABC abc 1달 전

2.라우팅 - 중첩 라우팅 강의 듣고 질문드립니다. 

Card.vue 에서 Created hook의 특성상 watch 속성을 사용하여 cid 변수 값을 변경해주어야 한다는 것을 이해하였습니다. 

Board.vue에 bid 변수의 경우도 동일하게 created hook에서 그 값을 할당하는데 watch 속성을 사용하지 않아도 그 값이 변경되 정확한 이유가 궁금합니다.

혹시 card가 board의 children 라우트인거랑 관계가 있을까요?

아니면 Board 같은 경우에는 Board 1을 클릭하고 Board 2를 클릭하기위해 Home으로 뒤로가기 버튼을 누른 후 Board 2 버튼을 누르기 때문에 다시 랜더링이 되면서 Created가 재실행 되기 때문인가요?

1
남상우 프로필

개인블로그에 정리해서 올려도 될까요? 남상우 1달 전

안녕하세요.

현재 수업을 듣는 사람인데.

현재 트렐로 수업을 들으면서 흐름을 파악하고 작업자 기준으로 생각하기 위해서 블로그에 정리해서

개인공부를 하고 싶은데

그렇게 해도될까해서 질문드립니다.

1
Hyunchul Ma 프로필

안녕하세요, 질문이 있습니다. Hyunchul Ma 1달 전

강의 잘 들었습니다. 도움이 많이 되었습니다.

궁금한 사항이 있는데, 보통 api나 web단에서 경우에 따라 오류가 발생할 수 있는데

오류 처리를 보통 vuejs 환경에서는 어떻게 하는지 궁금합니다.

전역적으로 처리하는 방법에 대해 대략적인 관례나 좋은 케이스가 있을까요?

1
이소현 프로필

로컬서버 오류 발생이요ㅜㅜㅜ 이소현 2달 전

아래분은 11일인데 아직 해결이 안된건가요ㅜㅜㅜ

node-pre-gyp WARN Using request for node-pre-gyp https download

node-pre-gyp WARN Tried to download(403): https://mapbox-node-binary.s3.amazonaws.com/sqlite3/v4.0.2/node-v72-win32-x64.tar.gz

node-pre-gyp WARN Pre-built binaries not found for sqlite3@4.0.2 and node@12.14.0 (node-v72 ABI, unknown) (falling back to source compile with node-gyp)

node-pre-gyp WARN Pre-built binaries not installable for sqlite3@4.0.2 and node@12.14.0 (node-v72 ABI, unknown) (falling back to source compile with node-gyp)

node-pre-gyp WARN Hit error Connection closed while downloading tarball file

gyp ERR! find Python

gyp ERR! find Python Python is not set from command line or npm configuration

gyp ERR! find Python Python is not set from environment variable PYTHON

gyp ERR! find Python checking if "python" can be used

gyp ERR! find Python - "python" is not in PATH or produced an error

gyp ERR! find Python checking if "python2" can be used

gyp ERR! find Python - "python2" is not in PATH or produced an error

gyp ERR! find Python checking if "python3" can be used

gyp ERR! find Python - "python3" is not in PATH or produced an error

gyp ERR! find Python checking if the py launcher can be used to find Python 2

gyp ERR! find Python - "py.exe" is not in PATH or produced an error

gyp ERR! find Python checking if Python is C:\Python27\python.exe

gyp ERR! find Python - "C:\Python27\python.exe" could not be run

gypgyp ERR! find Python  checking if Python is C:\Python37\python.exe

ERR!gyp  find PythonERR!

 gypfind Python  - "C:\Python37\python.exe" could not be run

ERR!gyp  find PythonERR! Python is not set from command line or npm configuration

 gypfind Python

ERR!gyp  find Python Python is not set from environment variable PYTHON

ERR!gyp  find PythonERR! **********************************************************

 gypfind Python  checking if "python" can be used

gypERR!  ERR!find Python  You need to install the latest version of Python.

find Pythongyp - "python" is not in PATH or produced an error

 gypERR!  ERR!find Python find Python Node-gyp should be able to find and use Python. If not,

 checking if "python2" can be used

gypgyp  ERR!ERR!  find Pythonfind Python you can try one of the following options:

 - "python2" is not in PATH or produced an error

gypgyp ERR!  ERR!find Python  - Use the switch --python="C:\Path\To\python.exe"

find Pythongyp checking if "python3" can be used

 gypERR!  ERR!find Python    (accepted by both node-gyp and npm)

find Pythongyp - "python3" is not in PATH or produced an error

 gyp ERR!ERR!  find Pythonfind Python - Set the environment variable PYTHON

 checking if the py launcher can be used to find Python 2

gypgyp  ERR!ERR!  find Pythonfind Python - Set the npm configuration variable python:

 - "py.exe" is not in PATH or produced an error

gypgyp  ERR!ERR!  find Pythonfind Python   npm config set python "C:\Path\To\python.exe"

 checking if Python is C:\Python27\python.exe

gyp gypERR!  ERR!find Python  For more information consult the documentation at:

find Pythongyp - "C:\Python27\python.exe" could not be run

 gypERR!  ERR!find Python  https://github.com/nodejs/node-gyp#installation

find Pythongyp checking if Python is C:\Python37\python.exe

 gypERR! ERR!  find Pythonfind Python **********************************************************

 - "C:\Python37\python.exe" could not be run

gypgyp  ERR!ERR!  find Python

find Python

gyp gyp ERR!ERR!  find Pythonconfigure error **********************************************************

gyp ERR!gyp  find PythonERR! You need to install the latest version of Python.

 gypstack  Error: Could not find any Python installation to use

ERR!gyp  find PythonERR! Node-gyp should be able to find and use Python. If not,

 gypstack      at PythonFinder.fail (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:307:47)

ERR!gyp  find PythonERR!  you can try one of the following options:

stackgyp     at PythonFinder.runChecks (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:136:21)

 gypERR!  ERR! find Pythonstack - Use the switch --python="C:\Path\To\python.exe"

gyp     at PythonFinder.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:225:16)

 gypERR!  ERR!find Python    (accepted by both node-gyp and npm)

stackgyp     at PythonFinder.execFileCallback (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:271:16)

 gyp ERR! ERR!find Python  - Set the environment variable PYTHON

stackgyp     at exithandler (child_process.js:302:5)

 gypERR!  ERR!find Python  - Set the npm configuration variable python:

stackgyp     at ChildProcess.errorhandler (child_process.js:314:5)

 gypERR!  ERR!find Python    npm config set python "C:\Path\To\python.exe"

stackgyp     at ChildProcess.emit (events.js:210:5)

 gypERR!  ERR!find Python  For more information consult the documentation at:

stackgyp     at Process.ChildProcess._handle.onexit (internal/child_process.js:270:12)

 gypERR!  ERR!find Python  https://github.com/nodejs/node-gyp#installation

stackgyp     at onErrorNT (internal/child_process.js:456:16)

 gypERR!  ERR!find Python  **********************************************************

stackgyp      at processTicksAndRejections (internal/process/task_queues.js:80:21)

ERR! find Python

gyp ERR! System Windows_NT 10.0.18362

gypgyp  ERR!ERR!  commandconfigure error "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "configure" "--fallback-to-build" "--module=C:\\Users\\user\\lecture-vue-trello-server\\node_modules\\sqlite3\\lib\\binding\\node-v72-win32-x64\\node_sqlite3.node" "--module_name=node_sqlite3" "--module_path=C:\\Users\\user\\lecture-vue-trello-server\\node_modules\\sqlite3\\lib\\binding\\node-v72-win32-x64" "--napi_version=5" "--node_abi_napi=napi"

gyp ERR!gyp  cwdERR! C:\Users\user\lecture-vue-trello-server\node_modules\sqlite3

 gypstack  Error: Could not find any Python installation to use

ERR!gyp  node -vERR! v12.14.0

 gypstack      at PythonFinder.fail (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:307:47)

ERR!gyp node-gyp -v ERR! v5.0.5

 stackgyp     at PythonFinder.runChecks (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:136:21)

 gypERR! ERR!  not okstack

     at PythonFinder.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:225:16)

gyp ERR! stack     at PythonFinder.execFileCallback (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:271:16)

gyp ERR! stack     at exithandler (child_process.js:302:5)

gyp ERR! stack     at ChildProcess.errorhandler (child_process.js:314:5)

gyp ERR! stack     at ChildProcess.emit (events.js:210:5)

gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:270:12)

gyp ERR! stack     at onErrorNT (internal/child_process.js:456:16)

node-pre-gypgyp  ERR! ERR!build error stack

     at processTicksAndRejections (internal/process/task_queues.js:80:21)

node-pre-gyp gyp ERR!ERR!  stackSystem Error: Failed to execute 'C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\user\lecture-vue-trello-server\node_modules\sqlite3\lib\binding\node-v72-win32-x64\node_sqlite3.node --module_name=node_sqlite3 --module_path=C:\Users\user\lecture-vue-trello-server\node_modules\sqlite3\lib\binding\node-v72-win32-x64 --napi_version=5 --node_abi_napi=napi' (1)

node-pre-gyp Windows_NT 10.0.18362

 gypERR!  ERR!stack      at ChildProcess.<anonymous> (C:\Users\user\lecture-vue-trello-server\node_modules\node-pre-gyp\lib\util\compile.js:83:29)

commandnode-pre-gyp  "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "configure" "--fallback-to-build" "--module=C:\\Users\\user\\lecture-vue-trello-server\\node_modules\\sqlite3\\lib\\binding\\node-v72-win32-x64\\node_sqlite3.node" "--module_name=node_sqlite3" "--module_path=C:\\Users\\user\\lecture-vue-trello-server\\node_modules\\sqlite3\\lib\\binding\\node-v72-win32-x64" "--napi_version=5" "--node_abi_napi=napi"

ERR!gyp  ERR!stack      at ChildProcess.emit (events.js:210:5)

cwdnode-pre-gyp C:\Users\user\lecture-vue-trello-server\node_modules\sqlite3

 gypERR!  ERR!stack     at maybeClose (internal/child_process.js:1021:16)

 node-pre-gyp node -vERR! v12.14.0

 gyp stackERR!     at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)

 node-gyp -vnode-pre-gyp v5.0.5

 gypERR!  System Windows_NT 10.0.18362

ERR!node-pre-gyp  not okERR!

 command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\user\\lecture-vue-trello-server\\node_modules\\node-pre-gyp\\bin\\node-pre-gyp" "install" "--fallback-to-build"

node-pre-gyp ERR! cwd C:\Users\user\lecture-vue-trello-server\node_modules\sqlite3

node-pre-gyp ERR! node -v v12.14.0

node-pre-gyp ERR! node-pre-gyp -v v0.10.3

node-pre-gyp ERR! not ok

Failed to execute 'C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\user\lecture-vue-trello-server\node_modules\sqlite3\lib\binding\node-v72-win32-x64\node_sqlite3.node --module_name=node_sqlite3 --module_path=C:\Users\user\lecture-vue-trello-server\node_modules\sqlite3\lib\binding\node-v72-win32-x64 --napi_version=5 --node_abi_napi=napi' (1)

npm WARN lecture-vue-trello-server@1.0.0 No description

npm WARN lecture-vue-trello-server@1.0.0 No repository field.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! sqlite3@4.0.2 install: `node-pre-gyp install --fallback-to-build`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the sqlite3@4.0.2 install script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

npm ERR!     C:\Users\user\AppData\Roaming\npm-cache\_logs\2020-01-28T07_36_52_640Z-debug.log

2
남상우 프로필

에러가 떠서 현재 진행이 힘들지경인데요 ㅠㅠ 남상우 4달 전

node 쪽 오류같은데 git clone 후에 했더니 영상처럼 npm run dev 했을 시 에러뜨면서 서버가 다시 닫히네요.

git clone 하지말고 처음부터 그냥 webpack - simple 하여서 하는게 나을까요?

2
쀼뷰 프로필

쌤 도와주세요 쀼뷰 7달 전

11:40 부터 진행하는 '폼의 바깥을 누르면 닫히는기능'을 하고 있는데요.. (제 코드에 오타가 있을까봐) AddCard.vue와 List.vue를 전부 복붙도 해봤습니다. 복붙을 해도 안된다면 어디에서 문제가 있는걸까요? 저것만 적으면 잘되던 Add Card도 펼쳐지지 않습니다 ㅠㅠ. 오류를 해결할수있는 방법을 알려주셨으면 합니다.

mounted() {
    this.setupClickOutside(this.$el)
  },
  methods: {
    setupClickOutside(el) {
      document.querySelector('body').addEventListener('click', e => {
        if (el.contains(e.target)) return 
        this.$emit('close')
      })
    }
  }

3
naanaceshare 프로필

scafloding-init 브랜치를 언제 작성했나요? naanaceshare 7달 전

git clone 한 후 master 브랜치밖에 없었는데 scafloding-init 브랜치가 어떻게 생긴거죠? 제가 못 본건지.. scafloding-init 브랜치를 언제 작업했나요?

1
naanaceshare 프로필

Git 에 올리면서 작업하려고 하는데 webpack-simple 레이아웃은 security error 가 발생합니다. naanaceshare 7달 전

레이아웃 버전이 너무 낮은 것 같아요. ㅠ

1
s3ong ha 프로필

vue lecture Trello server ,npm install 에러 s3ong ha 7달 전

npm install시 에러가납니다.

 

node-pre-gyp WARN Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.2.4/fse-v1.2.4-node-v72-darwin-x64.tar.gz

node-pre-gyp WARN Pre-built binaries not found for fsevents@1.2.4 and node@12.6.0 (node-v72 ABI, unknown) (falling back to source compile with node-gyp)

  SOLINK_MODULE(target) Release/.node

  CXX(target) Release/obj.target/fse/fsevents.o

In file included from ../fsevents.cc:6:

In file included from ../../nan/nan.h:202:

In file included from ../../nan/nan_converters.h:67:

../../nan/nan_converters_43_inl.h:22:1: warning: 'ToBoolean' is deprecated: ToBoolean can never throw. Use Local

      version. [-Wdeprecated-declarations]

X(Boolean)

^

../../nan/nan_converters_43_inl.h:18:12: note: expanded from macro 'X'

      val->To ## TYPE(isolate->GetCurrentContext())                            \

           ^

<scratch space>:202:1: note: expanded from here

ToBoolean

^

 

 

중략...

 

 

gyp ERR! stack     at ChildProcess.emit (events.js:203:13)

gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)

gyp ERR! System Darwin 18.6.0

gyp ERR! command "/usr/local/Cellar/node/12.6.0/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--module=/Users/has3ong/Desktop/GitHub/Vuejs-Trello/lecture-vue-trello-server/node_modules/sqlite3/lib/binding/node-v72-darwin-x64/node_sqlite3.node" "--module_name=node_sqlite3" "--module_path=/Users/has3ong/Desktop/GitHub/Vuejs-Trello/lecture-vue-trello-server/node_modules/sqlite3/lib/binding/node-v72-darwin-x64" "--napi_version=4" "--node_abi_napi=napi"

gyp ERR! cwd /Users/has3ong/Desktop/GitHub/Vuejs-Trello/lecture-vue-trello-server/node_modules/sqlite3

gyp ERR! node -v v12.6.0

gyp ERR! node-gyp -v v3.8.0

gyp ERR! not ok

npm WARN lecture-vue-trello-server@1.0.0 No description

npm WARN lecture-vue-trello-server@1.0.0 No repository field.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 install: `node install`

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

 

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! sqlite3@4.0.2 install: `node-pre-gyp install --fallback-to-build`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the sqlite3@4.0.2 install script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

 

npm ERR! A complete log of this run can be found in:

npm ERR!     /Users/has3ong/.npm/_logs/2019-08-07T15_34_20_764Z-debug.log

 

 

어떻게 해결하죠

2
루트원 프로필

sass 를 안쓰는 이유가 혹시 있으신가요? 루트원 8달 전

이유도 듣고 싶었는데 강의 내에서 이유는 언급해주시 않으셔서 질문드립니다!

1
qudgk0006@naver.com 프로필

Node JS 와 Vue CLI 버전을 추천해주실 수 있나요? qudgk0006@naver.com 9달 전

안녕하세요. 이제 막 강의를 듣게 된 학생입니다.

그런데 기존에 Node.js 를 사용해본 경험이 없어서

시작하기 카테고리에서

4 번째 강의인 코드 스캐폴딩 강의를 듣던 중,

윈도우에서 Node js 를 설치하고 명령 프롬프트 창을 연 뒤 Vue CLI  를 설치하는 것 까진 됐으나

vue init webpack-simple 명령어를 실행했을 때

프로젝트 이름까지만 적어지고 그 다음부터는 아예 콘솔창이 반응을 하지 않게 되더군요..

구글링을 해보니 버전 때문이라는 말이 있던 것 같습니다. 그래서 다운그레이드를 해보고

뷰CLI 공식문서에 있는 추천 버전도 사용해보았으나, 해결이 되질 않았습니다.

 

혹시 문제가 발생하지 않는 버전을 추천해주실 수 있을까요?

 

 

1
이유정 프로필

강사님 이유정 9달 전

cDragger를 처음에 초기화할 떄 null로 설정하면 

setCardDraggable() 의 로직을 돌 때
 
if(this.cDragger) this.cDragger.destory()
이 코드가 오류가 나지 않나요?
 
처음 초기값이 drgaula객체를 할당 해준것도
아니지 않나 싶어서요.
제가 실제로 저 코드 부분에서 오류가 계속 나는데
작동은 해서 질문드립니다.
아 참고로 카드 이동할 때 마다도 오류가 납니다 ㅠ_ㅠ
 
<오류> - 이런식으로 납니다
TypeError: this.cDragger.destory is not a function
 

1
임국태 프로필

컨텍스트 객체 외 질문1 임국태 9달 전

1. ctx로 받는 '컨텍스트 객체'가 무슨 의미인가요?

2. action의 함수는 왜 대문자로 네이밍을 하는건가요?

0
홍태환 Hong 프로필

강의에서 나온 backend api 개발에 대해서 강의 제작된게 있을까요? 홍태환 Hong 9달 전

강의에서 제공된 API에 대해서 강의 제작된게 있을까요?? 또는 혹 참고할만한 강의가 있을까요?

2
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스