본문 바로가기

분류 전체보기

(364)
[Udemy Vue 완벽가이드 Section16] 250. 수신 요청(메시지) 출력하기 일단 단순하게 모든 요청을 표시해보자. script에는 Vuex에 액세스하기위해 computed 프로퍼티를 사용하자. 현재는 거기에 있는 모든 요청을 가져오자. // RequestsReceived.vue computed: { receivedRequests() { return this.$store.getters['requests/requests']; }, hasRequests() { //v-if를 이용해 true인 경우 ul을 표시하고, false인 경우 h3태그 return this.$store.getters['requests/hasRequests']; } } // requests > getters.js export default { requests(state) { return state.requests..
[Udemy Vue 완벽가이드 Section16] 249. Vuex로 요청(메시지) 저장하기 메시지를 생성하려면 Vuex 저장소에 데이터를 저장해야한다. 지금까지는 "Coaches 모듈"만 만들어보았다. 이제 요청을 관리하려면 "Requests 모듈"을 만들어야 한다. # Request 모듈 Request모듈에서도 네임스페이스를 사용하자. 전역 저장소에 그냥 합칠 수도 있지만, 이번에는 그렇게 하지 않았다. state는 요청을 관리해야한다. import mutations from './mutations.js'; import actions from './actions.js'; import getters from './getters.js'; export default { namespaced: true, state() { return { requests: [], }; }, mutations, acti..
[Udemy Vue 완벽가이드 Section16] 248. 연락처 양식 작업하기 Coach부분은 잘 구현했다. 이제 Requests로 넘어가보자. form요소를 만들어보자. 그리고 이 양식에는 두 개의 입력값을 제공하자. 1/ 코치가 유저에게 연락할 방법을 알려주기위한 유저 이메일주소(email) 2/ 코치에게 전할 메시지 적는 곳(message) Your E-Mail Message Send Message email과 message에 대한 입력값을 가져와야한다. 유효성 검사도 추가하자. 유효성 검사 자체는 있는 편이 좋다. methods: { submitForm() { console.log('this.$route', this.$route.params.id); this.formIsValid = true; if (this.email === '' || !this.email.includes..
[Udemy Vue 완벽가이드 Section16] 247. 양식 유효성 검사 추가하기 양식을 제출할 때 단계를 하나 추가하려고 한다. 바로 유효성 검사. → 이를 위해 validateForm 메서드를 추가해보자. 로직을 두 메서드로 나누어서 메서드 하나가 너무 길어지지 않게 해보자. 그리고 submitForm의 시작부분에서 this.validateForm 메서드를 호출하여 모든 입력값을 검토해서 유효한지 아닌지 확인하자. 1/ 먼저, 새로운 데이터 프로퍼티를 추가하자. formIsValid : true 처음에는 true이지만, 입력값이 하나라도 거짓이면 false가 된다. 다른 데이터는 더이상 특정 프로퍼티의 값이 아니라, 객체가 된다. 2/ validateForm함수로 유효한지 아닌지 확인하게 된다. validateForm() { this.formIsValid = true; if(thi..
약수의 개수 구하는 방법 숫자 N의 약수의 개수를 구하는 문제가 주어졌을 때, 1부터 N까지 모두 탐색을 하게 되면, N이 100,000같이 크기가 클 경우 시간이 많이 걸린다. 약수 개수를 구할 때, 시간을 줄이는 방법은 2가지가 있다. 1/ 소인수분해를 이용하는 방법 N을 소인수분해하여 각 소수의 지수를 구한 후, (각 지수+1) 값들을 곱하여 약수의 개수를 구한다. ex) N이 24일 경우 24 = 2³ * 3¹ → (3 + 1) * (1 + 1) = 4 * 2 = 8 즉, 24의 약수의 개수는 8이 된다. (1, 2, 3, 4, 6, 8, 12, 24) 2/ N의 제곱근으로 범위를 좁혀 탐색 만약 N이 24일 경우, 24의 제곱근(√24)은 4.xxxx이다. 따라서 1~24가 아닌, 1~4까지만 탐색해도 [ 1, 2, 3..
[Udemy Vue 완벽가이드 Section16] 246. Vuex에 코치 추가하기 CoachForm 컴포넌트 내부에서 formData를 CoachRegistration 컴포넌트에 노출시키기만 하면 된다. 이론적으로는 CoachForm 내부에서 Vuex저장소에 직접 접근할 수도 있다. 어느 컴포넌트에서든 Vuex저장소와 통신이 가능하므로. 그러나 이 CoachForm 컴포넌트를 재사용가능하고 개별적으로 작동하며 부모컴포넌트와 함께 작동하도록 해보자. (개인적인 취향일 뿐이다.) 입력된 데이터를 부모컴포넌트(CoachRegistration.vue)에게 알리도록 해보자. 그러면 부모 컴포넌트인 CoachRegistration컴포넌트가 Vuex와 통신하게 된다. 이건 여러 방법 중 하나일 뿐이다. // CoachForm.vue submitForm() { this.validForm(); if ..
[Udemy Vue 완벽가이드 Section16] 245. 코치 등록하기:양식 CoachRegistration.vue 이 컴포넌트는 이후에 HTTP요청을 추가하면 크기가 너무 커지므로 양식은 별개의 컴포넌트에서 아웃소싱하자. coach폴더에 CoachForm파일을 만들어 이 파일에 실제 양식을 넣어준다. 양식에 firstName, lastName, areas, descript과 같은 입력 필드가 포함되어야 한다. - h3대신 label태그를 써서 Firstname로 하고, for속성을 설정하여 id를 가리키도록 한다. - description을 쓰는 곳에는 textarea태그를 사용해 여러 줄을 입력할 수 있도록 설정하자. 행(row)은 5로 지정하자. - hourly rate는 type이 number이 되어야한다. - 마지막으로 사용자들이 자신의 전문 분야를 선택할 수 있게 만들..
[Udemy Vue 완벽가이드 Section16] 244. 코치 필터링하기 필터링 양식과 관련된 모든 마크업과 로직은 CoachesList.vue를 간단하게 유지하기 위해 별도의 컴포넌트에 포함시킬 거다. span을 wrapper로 사용. input요소에 checked로 한다. 왜냐하면 모든 필터 옵션, 즉 입련란에 처음에는 체크가 되어있고, 사용자가 필요에 따라 체크 해제하거나 체크할 수 있도록 만든다. label에 for속성을 추가해 이 label이 frotend input을 가리키도록 하자. 라벨을 클릭해도 해당 입력이 체크되도록. Frontend Backend Career 이제 사용자가 checkbox를 클릭했을 때의 반응에 대한 로직이 필요하다. script을 추가하고, data 프로퍼티를 추가해보자. CoachFilter컴포넌트 내에서 관리해야하는 내부 데이터가 있다..