월 22,000원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
npm i 명령어 수행 중 ETIMEDOUT 오류
[작업 수행 순서] 1. vue-til-server 터미널 창 열기 (bash) 2. node -v 확인 (v10.16.3) 3. npm i 명령어 입력 4. 아래 로그 출력 후 오랜 시간 대기 \ extract:swagger-ui-express: verb lock using C:\Users\USER\AppData\Roaming\npm-cache\_locks\staging-cb9e5be181eeb2af.lock for C:\Users\USER\Desktop\스터디\vue\workspace\vue-endgame\vue- 5. 아래 오류 로그 확인 npm WARN server@1.0.0 No repository field. npm ERR! code ETIMEDOUT npm ERR! errno ETIMEDOUT npm ERR! network request to https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz failed, reason: connect ETIMEDOUT 104.16.20.35:443 npm ERR! network This is a problem related to network connectivity. npm ERR! network In most cases you are behind a proxy or have bad network settings. npm ERR! network npm ERR! network If you are behind a proxy, please make sure that the npm ERR! network 'proxy' config is set properly. See: 'npm help config' npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\USER\AppData\Roaming\npm-cache\_logs\2021-08-01T10_14_53_029Z-debug.log [질문] 위 오류 관련 대처 방법 알려주시면 감사하겠습니다! 현재 네트워크는 핸드폰 핫스팟을 통해 와이파이 사용중입니다!
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
api instance 관련되서 질문드립니다.
안녕하세요. 강사님... 좋은 강의 항상 감사합니다. 다름이 아니라 강의때 배운거 실전에 써먹어보려고 합니다. 아래 코드 처럼 인터셉터에서 access토큰이 만료가 되었을때 refresh 토큰을 통해 새로은 access 토큰을 받아오거든요. 새로은 access 토큰을 세팅한 뒤에 이전에 요청했던 url을 받아서 사용자가 요청했던 화면 끊겨 보이지 않게 이동하도록 하려고 구글에서 검색해서 아래코드처럼 사용해봤습니다. 참고했던 자료에서 axios.create 구성이 비슷해서 토큰을 연장해서 다시 재요청까지는 성공합니다. response에서 데이터도 잘 받아어구요. 그런데 화면의 데이터가 변하지 않습니다. 강의의 메인화면을 페이징 처리해서 계속 불러오는건데 response에서 데이터는 받아왔지만 제대로 화면에 나타나지 않고 있는데요.. 어디부분을 더 수정을 해야할까요? 그리고 error.response.config을 axios의 newInstance를 매배변수로 받았을때 이전 url이 다시 요청되는게 왜 그러는걸까요? 원리가 궁금합니다. 답변 부탁드립니다. 감사합니다. import store from '@/store/index'; import router from '@/routes/index'; import axios from 'axios'; import { saveAuthToCookie, deleteCookie } from '@/utils/cookies'; import { instance as newInstance } from '@/api/index'; axios.defaults.withCredentials = true; 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 = 'Bearer ' + store.state.token; return config; }, function (error) { // Do something with request error return Promise.reject(error); }, ); // Add a response interceptor instance.interceptors.response.use( function (response) { // Any status code that lie within the range of 2xx cause this function to trigger // Do something with response data return response; }, function (error) { // Any status codes that falls outside the range of 2xx cause this function to trigger // Do something with response error const originalConfig = error.response.config; console.log('originalConfig : ', originalConfig); const status = error.response.status; const message = error.response.data.message; //토큰 만료시 refreshtoken으로 토큰 연장 if (status == 401 && message == 'TokenExpiredError') { axios .post(`${process.env.VUE_APP_API_URL}auth/refreshToken`, {}) .then(function (response) { deleteCookie('til_auth'); saveAuthToCookie(response.data); store.commit('setToken', response.data); // originalConfig._retry = true; originalConfig.headers.Authorization = `Bearer ${response.data}`; return newInstance(originalConfig); }) .catch(function (error) { console.log(error.response); alert('인증이 완료되었습니다. 로그인 해주세요'); //state 삭제 // store.commit('clearUsername'); // store.commit('clearToken'); // //쿠키값 삭제 // deleteCookie('til_auth'); // deleteCookie('til_user'); //refreshtoken 만료 또는 없을때 로그인 화면으로 이동 if (error.response.status == 500) { router.push('/login'); } }); } else if (status == 403) { console.log('403 에러'); alert('권한이 없습니다.'); } return Promise.reject(error); }, ); return instance; }
- 해결됨Vue.js 끝장내기 - 실무에 필요한 모든 것
swagger UI 회원가입 부분 409 에러 현상
인강 들으면서 계속 공부중인데 swagger UI 쪽에서 회원가입 시도를 여러번해도 409 에러가 떠 api를 불러오지 못해 앞으로 나아가지 못하고 있습니다 ㅜㅜ 구글에 검색해도 해결이 안되는데 왜 뜨는 걸까요?? 답변 부탁드립니다!!! 1. swagger UI 화면 2. 서버 연결시 터미널 오류 Warning: Current Server Discovery and Monitoring engine is deprecated, and will be removed in a future version. To use the new Server Discover and Monitoring engine, pass option { useUnifiedTopology: true } to the MongoClient constructor.
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
[해결했음] 어떻게 아이디를 입력해도 409 에러가 떠요.
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler (Promise/async): "Error: Request failed with status code 409" found in ---> <SignupForm> at src/components/SignupForm.vue <SignupPage> at src/views/SignupPage.vue <App> at src/App.vue <Root> 안녕하세요~ 아이디가 겹치지 않는데도 계속 이런 에러가 뜨는데 이 경우는 아이디 중복밖에 없나요? 아니면 다른 경우가 있을까요? . [해결] 공용와이파이에서 사용하고 있을 때 나는 오류였네요ㅠ 공용이 아닌 와이파이 사용 시 문제없이 작동합니다! 같은 오류 겪으신 분은 공용 와이파이인지 확인해주시면 좋을 것 같아요.
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
store, event bus, props&event 질문
각각 실무에서 어떤 방식으로 적용하는지 궁금합니다. store 같은 경우는 로그인한 사람의 정보에 대해 저장하는 것 같은데 event bus나 (props와 event)는 다른 컴포넌트에 전달하는데 차이점이 뭔지 궁금합니다. 실무에서 각각 어떤 상황에서 사용하는지 대략적인 분류를 말해주실 수 있으신가요?
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
swagger 질문입니다!
springboot으로 백엔드를 구현했을 때에도 swagger 연결이 가능할까요? 지금강의 소스코드를 예시로 들었을 때 springboot로 구현한 swagger와도 연결이 가능하다면 til-server의 app.js 설정값들을 바꾸는거 이외에 필요한 설정이 있나요,,?
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
Duplicated Data
안녕하세요. 강의 중에 Backend쪽에 "Duplicated Data" 라는 것이 뜨는데 어떻게 해야하나요? *참고로 Backend 소스를 건든적은 없고 , Posts 데이터는 한건도 없었습니다. Error post 데이터 결과
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
강의 순서 관련입니다,,!
안녕하세요 강의를 듣기전에 질문이 있어서 글 남깁니다.. vue-news 강의를 모두 수강하지 않은 상태에서 이 강의를 듣는 것에 큰 부족함이 있을까요..? 다음주부터 sns서비스를 만들어보는 프로젝트를 시작하는데 vue로 crud를 구현하는 부분을 모르는 상태라,, 우선적으로 들어보려고 합니다. 기존에는 백엔드를 공부했었기 때문에 백엔드에서 CRUD를 구현해본 경험이 있고, 스프링부트를 사용했지만 swagger가 어떻게 작동하는지와 DB에 대한 이해도는 있는 상태입니다. 강의 관련은 아니지만 시간이 급해 이렇게 질문드립니다ㅠ
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
vue-cli 4.5이상버전으로 설치시 eslintrc.js 파일은 직접 작성하면되나요?
vue-cli 4.5이상버전으로 설치시 eslint 파일이 없던데 영상보고 eslintrc.js 파일은 직접 작성하면되나요?
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
이전 'API 함수 모듈화' 를 작업하지 않고 데이터 삭제를 바로 진행해봤는데
강의를 완강하고, 기억이 제대로 나는지 알아보기 위해서 목차만 보고 혼자 작업중이였습니다. 위의 강의 'API 함수 모듈화'를 건너뛰고 작업중이였습니다. 때문에 api/index에는 기존의 instance 내용을 가지고 삭제 API 함수 및 기능구현을 작업해봤는데요. function createInstance() { const instance = axios.create({ baseURL: process.env.VUE_APP_API_URL, }); return setInterceptors(instance); } const instance = createInstance(); function deletePost(postId) { return instance.delete('posts', postId); } 와 같이 url을 인자로 넘겨서 작업을 하니 404 [에러]게시글을 찾을 수 없습니다 에러가 발생합니다. 강의에 있는 방법(baseURL에 url인자를 넣어서 하는 방법)으로 삭제가 가능한것은 확인했으나 차이를 알고싶어서 질문 남깁니다.
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
프로젝트 설정하는부분에서 윈도우사용하는사람에 배려가 전혀없네요..
맥사용자보다 윈도우사용자가 많을텐데 설정관련부분에서 윈도우 언급도 안하시면 그것도 모르고 돈주고 강의구매한 윈도운사용자는 어떻게하나요..
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
안녕하세요.
컴포넌트를 shallowMound 로 받고 . 으로 vm 을 접근하셨는데 vm 이 무엇일까요?? 해당 컴포넌트 안에 접근할수 있는 모든것이라고 봐도 될까요??
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
컴포넌트 중복에 대한 질문입니다.
안녕하세요 항상 강의 잘 듣고 있습니다. 강의를 듣다가 생각해 보니 PostEditForm과 PostAddForm이 거의 비슷하게 생겼고 하는 일도 조금의 차이가 있어서 저는 PostForm.vue를 만들고 this.$router.id의 존재 유무에 따라서 기존 데이터를 받아올지 말지 혹은 포스트를 create, edit할지를 결정하도록 만들었습니다. 다 만들고 생각해 보니 컴포넌트는 하나로 사용해서 좋긴 한데 하나의 컴포넌트에서 두 가지 일을 하는 느낌이 들어서 좋은 코드가 아니라고 생각이 들어서 질문드립니다. ( 물론 동작은 정상적으로 동작합니다. ) 위와 같은 현상일 때는 하나의 컴포넌트에서 분기 처리하기보다는 Mixin이나 하이 오더 컴포넌트로 하는 것이 맞는 거겠죠? 맞는다면 Mixin이나 HOC 중에 어떤 걸 사용하는 게 더 좋을까요?
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
포스트생성 문제
삭제된 글입니다
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
쿠키에 저장이 안되는 이유
methods: { async submitForm() { try { // 비즈니스 로직 const userData = { username: this.username, password: this.password, }; const { data } = await loginUser(userData); // token 확인 및 store에 저장(commit) console.log(data.token); this.$store.commit('setToken', data.token); // username을 store에 저장하고 메인 페이지로 push this.$store.commit('setUsername', data.user.username); saveAuthToCookie(data.token); saveUserToCookie(data.user.username); this.$router.push('/main'); } catch (error) { // 에러 핸들링할 코드 console.log(error.response.data); this.logMessage = error.response.data; } finally { this.initForm(); } }, initForm() { this.username = ''; this.password = ''; }, }, 7_til-list 브랜치에서 강의 따라가고 있는데 cookies.js를 import 해서 로그인 폼 제출시 saveAuthToCookie와 saveUserToCookie를 사용했는데 브라우저의 쿠키에 저장이 되질 않습니다. 해결 방법을 알 수 있을까요? 7_til-list 브랜치에서 강의 진행 내용 외에 따로 건드린 것은 없습니다.
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
no-console 설정이 prettier 설정을 한 이후로 적용되지 않습니다.
.eslintrc.js 파일에서 rules를 아래와 같이 작성했습니다. prettier/prettier 을 붙이기 전에는 value never used 오류가 안나도록 정상동작이 되는데, prettier 설정을 붙이면 오류가 나네요. 어느 부분을 확인해야 할까요? rules: { "no-console": "off", // "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", // "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", "prettier/prettier": ['error', { singleQuote: true, semi: true, useTabs: false, tabWidth: 2, trailingComma: 'all', printWidth: 80, bracketSpacing: true, arrowParens: 'avoid', }], },
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
파일 경로 alias
수업을 잘 보고 있습니다. 혹시 vue.config.js 에 경로 alias를 안주는 이유가 있으신가요? 개인프로젝트 때 인텔리제이에서 할려고 하는데 거기서는 vue.config.js에서 경로 alias를 줘도 크게 문제가 없는건가요? 답변 주시면 감사하겠습니다.
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
editor.formatOnSave: false/true 관련
안녕하세요 개인적으로 진행하는 프로젝트에서는 editor.formatOnSave: true로 해야지 저장시 코드 포맷이 설정되는데 강의에서는 false로 해야지 저장시 코드 포맷이 설정되네요. 이 차이를 알 수 있을까요? 개인 프로젝트할 때와 강의에서 진행하는 프로젝트를 할 때마다 editor.formatOnSave 설정을 false/true 바꿔줘야 하니 조금 번거로운 느낌이 듭니다. { "workbench.editorAssociations": [ { "viewType": "jupyter.notebook.ipynb", "filenamePattern": "*.ipynb" } ], // "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe", "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe", "terminal.integrated.shellArgs.windows": ["--login"], "workbench.colorTheme": "Night Owl", "[yaml]": { "editor.insertSpaces": true, "editor.tabSize": 2, "editor.autoIndent": "advanced" }, "[javascript]": { "editor.tabSize": 2, }, "[html]": { "editor.tabSize": 2 }, "prettier.printWidth": 200, "liveServer.settings.donotShowInfoMsg": true, "editor.formatOnPaste": true, // "editor.formatOnSave": true, 이 부분이 "true"로 되어 있어야 개인 프로젝트에서는 저장시 포맷팅 설정이 되고, "editor.defaultFormatter": "esbenp.prettier-vscode", "C_Cpp.updateChannel": "Insiders", // don't format on save "editor.formatOnSave": false, // 이 부분이 "false"로 되어 있어야 강의에서 진행하는 프로젝트에서 저장시 포맷팅 설정이 됩니다. "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.workingDirectories": [{ "mode": "auto" }], "eslint.validate": ["vue", "javascript", "javascriptreact", "typescript", "typescriptreact"], "eslint.alwaysShowStatus": true }
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
안녕하세요 질문입니다.
강의 듣는데 노드 버전 14로 하고 들으면 문제 생기는 일이 많을지 궁금해서 질문 드립니다. 버전 꼭 맞춰줘야 할까요
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
data.username과 data.user.username의 차이는 무엇인가요?
회원가입할 때는 data.username으로 등록했습니다. 회원가입한 id와 pw를 입력한 뒤 로그인 버튼을 누르고 콘솔의 data를 보면 user안에 username이 있기 때문에 data.user.username로 불러오는 것으로 이해했습니다. 둘 다 회원가입, 로그인 된 유저이름을 가져오는 것 같은데 로그인할 때는 data.user.username이고 회원가입할 때는 그냥 data.username인가요? 로그인을 누른뒤 콘솔창에서 꼭 data를 확인하고 적어야되기 때문에 달라진 건가요??