월 22,000원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
로그아웃 할때 질문
안녕하세요 ! ㅎㅎ 궁금한 점이 생겨 질문 드립니다. clearUsername, clearToken 두개의 함수로 스토어를 초기화 하시는데, 두 state를 하나의 함수로 초기화하지 않은 이유가 무엇인지 궁금합니다! ex) clearState() { this.username = '', this.token = '', }
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
Authorization 값 질문
안녕하세요! 수강중인 학생입니다. 현재날짜 기준으로 Authorization: store.state.token 으로 값 입력시 Network 패널에 RequestHeaders 부분에 값이 잘 들어가는데 Vue 자체적으로 수정해준거라 생각하면 될까요?
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
자식 컴포넌트의 스타일을 부모 컴포넌트에서 수정할 때에 대한 질문
안녕하세요! 캡틴판교님의 강의를 전부 수강하고 또 새로운 강의를 기다리고 있는 1인입니다. 바로 질문들어가겠습니다 최근에 고민중인게 다양한 화면에서 쓸 수 있게 만든 컴포넌트를 만들었지만, 화면에 따라 디자인이 조금씩 달라져서 그걸 각각 부모에서 조정하지 않으면 안되는 상황일 때, 캡틴판교님은 부모에서 자식 컴포넌트에 따로 class를 붙여서 디자인을 조정해 주시나요? 저는 따로 클래스를 붙이지 않고 그 자식컴포넌트의 루트태그에 붙여놓은 클래스를 바로 이용해서 합니다. 예를들면 bookThumbnailLink라는 컴포넌트가 있고 <template> <nuxt-link class="book-thumbnail-link" :class="styles" :to="to"> <book-thumbnail :size="size" :src="src" :loading="loading" :alt="alt" /> </nuxt-link> </template> <script> import { defineComponent, computed } from '@nuxtjs/composition-api' import BookThumbnail from '@/components/BookThumbnail.vue' export default defineComponent({ components: { BookThumbnail, }, props: { }, setup(props) {} <style lang="scss" scoped> .book-thumbnail-link { display: inline-flex; flex-direction: column; text-decoration: none; } </style> 위의 bookThumbnailLink의 리스트인 bookThumbnailLinkList 컴포넌트에서 자식 컴포넌트의 스타일을 수정할 때 book-thumbmail-link라는 클래스를 바로 이용하는 방법입니다. <template> <div class="book-thumbnail-link-list"> <BookThumbnailLink v-for="(book, i) in bookList" ></BookThumbnailLink> </div> </template> <script> import { defineComponent } from '@nuxtjs/composition-api' import BookThumbnailLink from './BookThumbnailLink.vue' export default defineComponent({ components: { BookThumbnailLink, }, setup() {}, }) </script> <style lang="scss" scoped> .book-thumbnail-link-list { display: flex; .book-thumbnail-link { display: flex; } } </style> 주위에 조언을 구할만한 곳이 없어서 질문드립니다!! 혹시 어떻게 부모에서 자식컴포넌트의 스타일을 수정하시나요?
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
vue 버블링
안녕하세요. 뷰 강의를 듣고 뷰로 프로젝트를 진행중입니다. 뷰 버블링에 관해서, 질문들 드리고 싶습니다. 이런구조인데 checkbox때문에 @change를 쓸수 밖에 없는 상황에서 checkbox를 클릭할때 버블 효과를 막을수는 없나요??? stop. prevent등.... 다 써봤는데 상위 @click이 동작합니다. <tbody v-if="readList.length > 0"> <tr v-for="(item,index) in readList" @click.stop="openPop('detail')" style="cursor: pointer"> <td><input type="checkbox" :name="'chk_'+index" v-model="checkArr" :value="item.id" @change="checkFnt"></td> <td>{{item.a}}</td> <td>{{item.b}}</td> <td>{{item.c}}</td> <td>{{item.d}}</td> <td>{{item.e}}</td> <td>{{item.f}}</td> <td>{{item.g}}</td> <td><p class="btnWrap"><a href="" class="btnRslt" :class="item.h === '1' ? 'on' : ''">{{item.h === '1' ? '양성' : '음성'}}</a></p></td> </tr></tbody>
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
API 호출 할 때, then ~ catch를 사용하지 않은 이유가 궁금합니다.
완벽가이드에서는 API 호출할 때,then ~ catch 문을 사용하셨는데 끝장내기에서는then~catch를 사용하지 않은 이유가 궁금합니다. 1. Vue.js 끝장내기 강의에서 API 호출 방법 // api/index.jsimport axios from 'axios'; function registerUser(userData) { retrun axios.post('http://localhost:3000/signup', userData);} export { registerUser }; // SignupForm.vueimpor { registerUser } form '@/api/index'; submitForm() { const userData = { username: this.username, password: this.password, nickname: this.nickname, }; registerUser(userData);} 2. Vue.js 완변가이드 강의에서 API 호출 방법 // NewsView.vuecreate() { axios.get('https://api.hbpwa.co/v0/jobs/1.json') .then( response => { this.users = response.data }) .catch( error => { console.log(error) })}
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
baseURL을 http://localhost:3000/sample/ 처럼 할 수 있나요?
baseURL을http://localhost:3000/sample/ 처럼 할 수 있나요? 상황) 저의 경우 url이 아래와 같습니다.http://localhost:3000/sample/signuphttp://localhost:3000/sample/loginhttp://localhost:3000/sample/error baseURL이http://localhost:3000 이면, API 호출할 때axios.get('/sample/signup');axios.get('/sample/login');axios.get('/sample/error');처럼 해야되는데, /sample 이 중복이어서, /sample까지 baseURL로 하고 싶은데, 어떻게 구현할 수 있을까요?
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
router url
첫번째 질문 ) index.js에서 { path : '/login', component : LoginPage } 이런식으로 쓰고 App.vue페이지에서 <router-link to="/login">로그인</router-link> 로 써주셨는데 path에 들어가는 내용과 router-link의 to 들어가는 내용이 일치해야 하나요? ===================================== 두번째 질문 ) 한 페이지 내에서 링크가 여러개 있는 경우가 있는데 그런 경우 router-link와 router-view를 어떤식으로 배치해야하는지 궁금합니다. ===================================== 세번째 질문 ) 이때까지 배운 내용으로만 보면 router-link가 일반 HTML의 a태그의 대용으로 쓰이는것 같습니다. 만약 이 router-link태그의 스타일을 주려면 router-link에 다른 속성을 추가해서 주나요 아니면 다른 방법이 있는건가요?
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
코드 스플리팅과 meta 데이터
안녕하세요. 해당 강의 영상을 듣고 문의사항이 있어서 글을 작성합니다. 코드 스플리팅이라는 개념초기 로딩시에 모든 웹 자원을 다운받지 않고 필요한 시점에 다운 받아 성능 상의 이점이라고 생각해서 적용을 할려다가 로그인 페이지, not found 페이지 등 공통 페이지는 meta 데이터로 App.vue에서 해당 meta 데이터를 통해 기능을 동작하고 있습니다. 그러나, 초기 로딩시 코드스플리팅을 적용하니 mounted 시점까지 route 정보를 받아올수 없는것이 확인이 되는데 혹시 그에따라 가능한 방법이 있을지 궁금합니다. 예) -- router.js route = { url: '/login', component : () => import ('./login') meta: { commonPage: true } } -- App.vue mounted() { console.log(this.$route) // 결과 { name: null, fullPage: '/', page: '/', query: {}, params: {} ... } }
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
vue-til-server npm 버전
node 버전을 10.16.3으로 변경 후 npm run dev로 빌드하면 해당 Npm 버전을 지원하지 않는다는 에러가 뜹니다. 지금 2회차 수강인데 전에는 잘 되었던 부분입니다. 해결 방법이 무엇인지 문의드려요
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
jquery_calendar.min 파일 사용....
JS파일을 import해서 사용하려고 하는데 방법을 모르겠습니다ㅠㅠjquery_calendar.min.js파일을 import 해서 사용하려고 하는데 elint로 띄어쓰기 Tap 등 문법에 걸려서 사용을 못하는데어떻게 사용해야 하나요...ㅠㅠ
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
nvm issue
nvm 관련 issue가 있네요 기존에 node 10.. 버전을 사용하다보니 vue 명령어가 실행이 안됩니다. nvm 을 사용하여 적어도 12 이상의 버전으로 바꿔주어야하는데 이 때, cmd 창을 관리자 권한으로 열어서 nvm install <version> nvm use <version> 으로 바꿔주시면 되겠습니다.
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
질문있습니다~
코드 스플리팅을 사용할 수 없는 경우는 어떤 경우 인가요??
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
실습 답안 링크
Jest 실습 답안 Sign up 테스트코드 실습 답안이 없습니당.. 혹시 어디서 볼 수 있는지 알수있을까용
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
interceptor 파일 질문
안녕하세요 api 파일에서 createInstance가 실행되어 instace에 담기는 시점에는 interceptor에서 Authorization에 값을 넣을 때 빈 값이었는데, 로그인 후 vuex에 토큰이 저장된 후에는 interceptors파일의 setInerceptors 함수는 vue처럼 자동변경감지가 발생하지 않는데 로그인 이후에 axios 요청을 할 때 Authorization에 바뀐 토큰값이 실려서 요청이 나가는 것인가요?
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
예시 질문
안녕하세요 로그인 api 실행 할 때 Authorization이 있어야 한다는 부분을 잘 모르겠습니다. 로그인 하기전에는 토큰값이 vuex에 없는 상태고 로그인이 성공해야 성공 인증 결과로 토큰을 받아서 vuex에 저장하도록 로직이 되어있는데 로그인 하기전에는 authorization이 없으니 login request날릴 때는 Authorization이 빈 값인게 맞지 않나요?
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
nvm으로 node버전을 10.16.3으로 내리고 vue create가 안되요.
node version보면 10.16.3으로 nvm이용해서 내리고 vue cli를 깔았느데요 깔고 나서 vue create vue-till을 해보려 하니 이 cli버전은 12이상을 요구하는데 node version을 업그레이드 하라는데 해야하나요?
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
14강
스웨거에 질문이 있는데요 vue-til-server 랑 이 스웨거사이트랑은 무슨상관인가요? 제가 알기로 스웨거 접속해서 저렇게 api만들고 다 할 수 있는데 지금 3000번을 연동한 이유가 뭐에요? vue-til-server 이 프로젝트를 왜깔며 어떻게 사용되는지에 대해 설명을 안해주셔서 그냥 api 프로젝트라고만 해서 이해가 안가요.
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
computed 버튼 disabled관련 질문
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. validation.js를 만들어 이 로직을 넣었습니다 그럼에도 버튼에 :disabled를 넣으면 유효성 검사를 패스해도 disabled가 안풀려서 로그인 버튼이 눌리지가 않습니다. 어떻게 해야 할까요? computed가 혹시 methods보다 아래에 위치해서 그런가 해서 computed도 data 바로 밑까지 올렸는데도 disabled가 조건이 맞아도 풀리지가 않습니다 function validateEmail(email) { var re = /\S+@\S+\.\S+/; return re.test(email); } export { validateEmail }; -------------------------------------- computed: { isUsernameValid() { return validateEmail(this.username); }, },
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
actions / mutations 에 대하여
안녕하세요. 현업에서 vue를 사용하고 있습니다. 부족한것을 채우려 처음부터 정주행 하고 있습니다. 덕분에 몰랐던것과 여러 팁 얻어가고 있습니다. 감사합니다. 질문이 있습니다. 예를들어 지금까지는 아래와같이 const userStore = { namespaced: true, state: { username: '', }, getters: { GET_USER_NAME: state => state.username, }, mutations: { SET_USER_NAME: (state, payload) => { state.username = payload.username; }, }, actions: { SET_USER_NAME({ commit }, payload) { commit('SET_USER_NAME', payload); }, }, }; export default userStore; this.$store.commit을 사용해 mutations를 직접 건드리는것이 아니라 this.$store.dispatch를 사용하여 actions를 건드려서 mutations 커밋으로 state의 상태 를 변경해왔습니다. - 직접 mutations을 건드리는것의 이점이 있는가? - 대부분 actions를 사용해 mutations 커밋하는것을 권장하던데 이유가 있는가? 에 대해 알고 싶습니다. 단지 비동기 비즈니스 로직을 actions에서 수행할 수 있기에 권장하는것인가 하는 생각도 듭니다. 그렇다면 - 비동기 로직이 없는 string 저장등을 위한 로직은 actions를 거치는것보다 mutations를 바로 건드리는게 더 효율적일까요? 답변 잘부탁드립니다
- 미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
배포는 어떻게 해야할까요.?
안녕하세요 선생님 완강한 학도입니다 지난 강의처럼netlify에 vue-til을 배포하긴했는데 당연히 안되었고 혹시 vue-til-server를활용해 vue-til 배포하려면 어떤부분을 공부해봐야할까요? 배포까지 알게되면 활용해서 여러 프로젝트를 연습해볼수있을것같은데 힌트라도 가르쳐주시면 감사하겠습니다