월 22,000원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨Vue.js 끝장내기 - 실무에 필요한 모든 것
쿠키 질문 드립니다.
1. Vuex의 store는 화면을 새로 고침하면 초기화가 되는 것인가요? 2. token을 쿠키말고 브라우저가 살아 있는 동안에는 계속 사용하게 저장하는 방법은 없을까요? 혹여나 악성코드로 쿠키가 탈취당할 경우에는 문제가 될 수도 있을거 같아서요 새로고침을 해도 store를 유지해서 token을 유지하는 방법이 없나 궁금합니다.
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
npm run dev가 안되네요 ㅜ_ㅜ
Error: .sourceMaps must be a boolean, "inline", "both", or undefined at assertSourceMaps (C:\Users\seoun\sw_git\VUE-ENDGAME\vue-til-server\node_modules\@babel\core\lib\config\validation\option-assertions.js:65:11) at Object.keys.forEach.key (C:\Users\seoun\sw_git\VUE-ENDGAME\vue-til-server\node_modules\@babel\core\lib\config\validation\options.js:107:5) at Array.forEach (<anonymous>) at validateNested (C:\Users\seoun\sw_git\VUE-ENDGAME\vue-til-server\node_modules\@babel\core\lib\config\validation\options.js:83:21) at validate (C:\Users\seoun\sw_git\VUE-ENDGAME\vue-til-server\node_modules\@babel\core\lib\config\validation\options.js:74:10) at loadPrivatePartialConfig (C:\Users\seoun\sw_git\VUE-ENDGAME\vue-til-server\node_modules\@babel\core\lib\config\partial.js:66:50) at loadFullConfig (C:\Users\seoun\sw_git\VUE-ENDGAME\vue-til-server\node_modules\@babel\core\lib\config\full.js:43:39) at process.nextTick (C:\Users\seoun\sw_git\VUE-ENDGAME\vue-til-server\node_modules\@babel\core\lib\transform-file.js:50:33) at process._tickCallback (internal/process/next_tick.js:61:11) at Function.Module.runMain (internal/modules/cjs/loader.js:834:11) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! server@1.0.0 build: `babel src --out-dir dist --source-maps inlnpm -vine --copy-files` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the server@1.0.0 build 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\seoun\AppData\Roaming\npm-cache\_logs\2020-03-08T09_58_10_628Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! server@1.0.0 restart: `rimraf dist && npm run build && npm run start` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the server@1.0.0 restart 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\seoun\AppData\Roaming\npm-cache\_logs\2020-03-08T09_58_10_663Z-debug.log [nodemon] app crashed - waiting for file changes before starting... ------------------------------------------- nvm list로 명령 날려보면 버전은 10.16.3으로 잘 되어있는거 같습니다... ...\VUE-ENDGAME\vue-til-server>nvm list 13.3.0 * 10.16.3 (Currently using 64-bit executable)
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
vuex 질문드립니다
만약에 대메뉴 4개 중메뉴 각각 5개 소뉴 각각 4개 이런식으로 모듈이 많으면 vuex 에 많이 담기게 될텐데 그럼 이럴 때는 vuex객체를 여러개 생성해서 관리하나요?
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
url 질문입니다
mode 가 history일 경우는 url에 직접 입력하면 이동이 안되는 것으로 알았는데.. 방금 강의에서 /main으로 바로 가셔서 질문드립니다.
- Vue.js 끝장내기 - 실무에 필요한 모든 것
validation시 eslint 오류 문의드립니다.
삭제된 글입니다
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
eslint.validate 설정관련해서 좀더 간단히 가능합니다.
// ESLint "eslint.validate": [ "javascript", "javascriptreact", "html", "typescriptreact" ], 이렇게만 설정해도 autoFix 가 default 설정이 true 라서 가능합니다. 지글지글 거리는 밑줄이 눈에 거슬리시는 분들은 이렇게 하세요^^ 캡틴 장샘, 진정한 경험과 지식을 나누어 주셔서 항상 감사 드립니다. 강의 아주 유익하게 보고 있습니다.
- 해결됨Vue.js 끝장내기 - 실무에 필요한 모든 것
authorization인 빈값으로 출력됩니다.
질문입니다. 결론부터 말씀드리면 로그인 한 후에 network 텝에서 보면 request header의 authorization에 토큰 값이 안들어오고 빈 값으로 "" 확인이 됩니다. 콘솔로 찍어 봤을 때도 마찬가지로 interceptors.js 파일 안에 config가 먼저 출력이 되고 export function setInterceptors(instance) { // Add a request interceptor instance.interceptors.request.use( function(config) { // Do something before request is sent console.log(config); config.headers.Authorization = store.state.token; return config; }, function(error) { // Do something with request error return Promise.reject(error); }, ); 그 다음 LoginForm.vue에서 console.log(data.token)이 출력이 됩니다. 이를 통해 예상 되는 것은 request.headers의 authorization 안에 토큰 값이 담기기 전에 출력이 되는 것으로 보입니다. 코드의 문제점이 어디에서 잘못된 걸 까요??? store의 store.state.token은 원래 빈 값인데 setToken 함수를 LoginForm.vue에서 submitForm 버튼을 눌러서 setToken을 commit으로 호출해서 store.state.token에 토큰 값이 담겨져 있어서 이거를 interceptors에서 import로 부른 다음 store.state.token을 가져올 꺼라고 생각했는데 토큰 값이 state에 실리기 전에 interceptor가 실행된 것 같습니다... 맞을까요?? }, methods: { async submitForm() { try { // 비즈니스 로직 const userData = { username: this.username, password: this.password, }; const { data } = await loginUser(userData); console.log(data.token); this.$store.commit('setToken', data.token); this.$store.commit('setUsername', data.user.username); this.$router.push('/main'); } catch (error) { // 에러 핸들링할 코드 console.log(error.response.data); this.logMessage = error.response.data; } finally { this.initForm(); } }, console.log(data.token);
- 해결됨Vue.js 끝장내기 - 실무에 필요한 모든 것
try catch 질문입니다.
안녕하세요, 지난 고급 강좌 때 try catch 를 api/index.js 파일에서 처리 했던 것이 생각나서 이 부분도 아래와 같이 적용해보려고 했는데요, 에러 처리가 안되고 console 도 찍히지 않네요.. 방법이 잘못된 것일까요?api 호출 하는 쪽에서 에러 status만 넘겨주고 화면 단에서 status를 받아서 공통 에러 처리 컴포넌트를 호출 해주는 케이스를 생각해봤거든요. 이 부분에는 적절하지 않은 것일까요? // api/index.js // 학습 노트 데이터 생성 API function createPost(postData) { try { return instance.post('posts', postData); } catch (error) { console.log('1', error); return error.response.data.message; } } // PostAddForm.vue async submitForm() { const response = await createPost({ title: this.title, contents: this.contents, }); console.log('response', response); },
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
router.push 질문
<div @click="$router.push('/pages/profile').catch(() => {})"> </div> 라는 코드가 있는데요. 그럼 어떤 것을 클릭 했을 때 /pages/profile로 넘어 가라고 했는데 여기서 catch(() => {})로 에러 핸들링을 하는데 catch 파라미터로 인자도 안들어가 있는데 이건 잘못된건가요?? 아니면 저렇게 catch(() => {}); 이렇게만 적어 놔도 어떤 것을 클릭했을 때 /pages/profile 넘어가지 않으면 에러를 표시해주나요???
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
깃헙에 올리려면
지금 현재는 git clone을 해와서 git checkout 으로 이동을 해서 git remote -v 가 캡판님의 깃 주소로 나오는데 만약 저의 깃헙 주소로 바꿀려면 어떻게 해야 하나요? 저도 피쳐 하나 만들 때 마다 깃에 기록을 하고 싶거든요. 그래야지 나중에 가서 보기 쉬울꺼 같아서
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
LoginPage.vue에서의 경로
LoginPage.vue에서의 LoginForm을 import로 가져올 때 import LoginForm from '@/components/LoginForm' 으로 들고 왔는데 원래는 components 밑에 common밑에 LoginForm이 있어야 하는거 아닌가요? 아래와 같이요 import LoginForm from '@/components/common/LoginForm' 그런대도 에러가 안나는 이유가 뭔가요??
- 해결됨Vue.js 끝장내기 - 실무에 필요한 모든 것
Token 값 관련 이슈
안녕하세요, 제가 지난번에 강의를 한번 쭉 듣고 이번에 한번 더 따라서 실습을 해보고 있는 중인데 강의화면 처럼 네트워크 패널에 login 을 클릭했을 때 Authorization 값이 들어가지 않드라구요. 코드를 이것 저것 만지다가 가끔 될 때도 있는거 같은데 다시 돌아가구요.. 그래서 git checkout 7_til-list 브렌치로 테스트를 해봤는데 ㅇ이거 역시 Authorization 값을 login 에서 불러들이지 못하는 것 같아요. 학습 노트 데이터를 조회하는 (posts) 에서는 어찌된 일인지 Token 값을 잘 불러들이는데 말이죠. 그래서 8_til-create 를 확인해보니 store.state에 쿠키 관련된 코드들이 있어서 그걸 주석 처리하고 해보니 login에서 Authorization 값을 불러오지 못하드라구요. 정말 쿠키 문제인지 다른 문제인지 한번 확인 부탁드릴게요 ㅎㅎ
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
Option 관련 부분 질문입니다.
Authorization에 들어갈 token은 login에 대한 response으로 들어오는 것 같은데 맞는지요? 강사님이 예시로 보여주실 때, 로그아웃 상태였는데 로그인 요청을 할 때 Authrization이 들어갔는데요. 제가 작성한 소스에서는 들어가지 않고 있어서요! 강사님의 요청과 제 요청에서 다른 부분은 Option?? Login 요청할 때, 강사님은 2개의 Login이 한번에 있고 밑에부분을 보여주셨는데요. 그 부분이 다른 것 같아요. 제가 Authorization이 없는 이유는 Option 때문인가요? 또 혹시 Option은 이전의 강의에서 설명해 주셨었나요? 회원 가입 API 호출과 주의 사항에서 Option에 관한 언급이 잠깐 있었는데, 혹시 제가 강의에서 놓쳤나 해서 질문 드립니다 :)
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
토큰 받기
알려주신대로 인터셉터를 이용해서 헤더 설정을 했습니다만. 돌아오는 headers의 Authorization에는 ''값만 찍히네요.. 뭐가 문제인지 알아보다가 토큰값을 response하기도 전 store.state.token에 있는 ''값을 불러와서 그런거같은데 그래서 실험을 해봤습니다. 1. console에 store.state.token 그대로 찍어보기 instance.interceptors.request.use( function(config) { // Do something before request is sent console.log('getData: ', store.state.token); config.headers.Authorization = store.state.token; return config; }, 결과는 ''이 나옵니다. 2. console에 store.state를 찍어보기 instance.interceptors.request.use( function(config) { // Do something before request is sent // console.log(config); console.log('getData: ', store.state); config.headers.Authorization = store.state.token; return config; }, 이렇게 한 경우는 콘솔창에 token이 정상적으로 찍혀있습니다. 혹시나 접근 루트가 이상한가 싶어 store.token으로 접근을 해봐도 결과는 같았습니다.. 제가 생각하기는 token값을 response받기 전까지 기다려 준 다음 -> config.headers.Authorization에 store의 token을 넣어야 한다고 생각합니다. 그래서 비동기 처리 과정에서 토큰을 가져오는거보다 인터셉터가 먼저 실행되어서 이런 결과를 도출하는거 같습니다. 선생님께서 작성하신 코드를 보면, async await같은 구문은 보이지 않습니다만, 정상적으로 작동하는 모습을 모여주고 있습니다만. 저는 결과가 다릅니다 :(.. 이런 경우 뭐가 잘못된건가요?
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
최신 노드 버젼을 사용하면 안되나요?
최신 버젼 노드 버젼을 사용하면 충돌이 일어나나요?? 충돌이 일어나면 어디서 일어나고 왜 일어나는 걸까요??
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
강사님이 설명해준 모든 방법하였지만 eslint 안될 때 참고
visual studio code의 폴더를 저와 같은 경우 아래와 같이 열었습니다. * /endgame/ /endgame/vue-til /endgame/vue-til-server /endgame/을 루트로 지정하고 vue-til을 실행 시키는 경우 eslint가 말을 듣지 않습니다.ㅠㅠ /endgame/vue-til/로 vscode 오픈하세요! mac 기준입니다!
- 해결됨Vue.js 끝장내기 - 실무에 필요한 모든 것
response를 콘솔창에 찍어봤을때 undefined 가 뜹니다
네트워크에서는 200 이떠서 통신에 성공했다고 뜨는데 콘솔찍어보면 데이터가 undefined 로 뜹니다.
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
설치시 => error: unable to create file test/fast/Aliases/"nvm alias" should not accept aliases with slashes: Invalid argument 에러가 발생해서 찾아보던중 windows 에서 git-bash 를 사용하지 말라고 하여 setting.json 에서 "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe", 했는데 같은 에러가 발생 curl 설치가 안됩니다...ㅠ 조언 부탁드립니다.
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
jsconfig.json이 안먹히네요...
다른 강의(eslint)도 몇개 그런데 이강의에서 설명해주신 jsconfig.json도 잘 안되네요;; vscode 버전은 1.42.1을 사용중인데 에러는 나지 않는데 적용이 안되네요;; 안정버전인데 왜그런걸까요.; 강사님과 같이 맥으로 사용중인데 잘 안맞는 부분이 있네요ㅠㅠ; 로그에 This dependency was not found: * @/ in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-load er-options!./src/components/common/AppHeader.vue?vue&type=script&lang=js& To install it, you can run: npm install --save @/ 이런식으로 남는데 물론 라이브러리는 저런건 없더군요.. 답변좀 부탁드리겠습니다.
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
eslint 빨간줄...
안녕하세요.. node는 강사님 버전이랑 같은버전이며 vue cli는 4.2.2 를 사용중입니다. eslint 에 의해 var a = 10; 에서 빨간줄이 전 안뜬더라구요. 자막에 설정에서 찾아보라고하는데 잘 모르겠습니다. 안뜨는게 정상인지 뜨는게 정상인지 잘 모르겠네요;; vue.config.js에서 오버레이가 안뜨게 설정하기전에도 마찬 가지입니다. 브라우저상에선 오버레이가 떠서 로그들을 보여 주었지만 vscode상에선 발생하지 않던데..설명 좀 부탁 드립니다. 감사합니다. -추가- 다른 분의 질문에서 해결은 했는데 자동으로 고쳐지는건 되질 않네요.. 아래 스샷 처럼 수동으로 해야 수정이 됩니다..ㅠㅠ