본문 바로가기

전체 글

 (364)
[Udemy Vue 완벽가이드 Section12] 152. 초기 앱 및 백엔드가 필요한 이유 기본적인 Vue앱이다. 위에 간단한 'learning experience'에 대한 설문조사를 작성하고 제출하면, 데이터가 저장되어 아래에 출력되는 앱. App.vue파일에는 두 개의 주요 컴포넌트가 있다. 설문조사 컴포넌트와 제출된 결과를 출력하는 컴포넌트. 그리고 제출된 설문조사결과 목록은 App.vue 컴포넌트에서 관리하고 있다. // App.vue data() { return { savedSurveyResults: [], }; }, 제출된 새로운 설문조사를 추가하는 메서드도 있다. methods: { storeSurvey(surveyData) { const surveyResult = { name: surveyData.userName, rating: surveyData.rating, id: new D..
화살표 함수의 this # 일반함수의 this 먼저, 일반함수 내부의 this는 어떻게 동작하는지 살펴보자. const object = { name: '별코딩', main: function () { console.log(this); }, }; object.main(); // object 객체 main이라는 메서드가 있다. - 메서드 : 객체의 속성으로 넣어진 함수 main이라는 함수는 function키워드를 사용한 일반 함수. 이렇게 function키워드를 사용해서 정의된 일반함수의 경우에는 함수를 어떻게 호출하느냐에 따라서 this값이 바뀐다. this는 함수를 호출한 객체가 된다. 그렇기 때문에 이 함수를 어떤 객체가 호출했느냐에 따라 this값이 달라진다. main함수를 호출했더니, main함수 안에 this값은 obje..
[Udemy Vue 완벽가이드 Section11] 148. 커스텀 컴포넌트에서 v-model 사용하기 rating-control 컴포넌트를 내장 input처럼 사용할 수 있다면 좋을 것 같다. 여기에 v-model을 사용해서 커스텀 컴포넌트인 rating-control이 내부적으로 가진 값을 TheForms.vue의 데이터 프로퍼티인 rating과 바인딩한다. input 요소에 쓰인 v-model은 결국 축약어일 뿐이다. input 이벤트를 수신하고, value 속성을 바인딩하는 코드의 축약어. 이걸 활용해볼 수 있다. 2023.07.03 - [Vue.js] - [Udemy Vue 완벽가이드 Section2] 27. 데이터 바인딩 + 이벤트 바인딩 = 양방향 바인딩 [Udemy Vue 완벽가이드 Section2] 27. 데이터 바인딩 + 이벤트 바인딩 = 양방향 바인딩 input태그에 있는 입력값을 re..
[Udemy Vue 완벽가이드 Section11] 147. 커스텀 컨트롤 컴포넌트 구축하기 지금까지는 내장된 input요소를 가지고 작업했다. 하지만 가끔은 커스텀 요소가 필요할 때가 있다. 그러니 커스텀 요소를 직접 만들어보자. components 폴더에 RatingControl.vue 파일을 만들자. 유저는 이 요소를 사용해서 평가를 할 수 있다. RatingControl.vue Poor Average Great 이제 이 RatingControl 커스텀 컴포넌트를 form에서 사용해보자. TheForms.vue에서 RatingControl을 지역컴포넌트로 등록하고 사용하자. ## button클릭 시, 양식 제출 막기 → type="button" 이제 평가 버튼이 생겼다. form내의 버튼이므로, 버튼을 클릭하면 submit이 된다(양식을 제출하게된다.) 이 현상을 막기위해, RatingCo..
[Udemy Vue 완벽가이드 Section11] 146. 기본 양식 유효성 검사 추가 지금까지 v-model을 사용해서 값을 추출하는 법을 배웠다. 대안으로 $refs를 사용할 수 있다는 것도 배웠다. $refs는 원리가 다르지만, 데이터를 한번만 읽어도된다면, $refs를 사용하는 것도 좋은 선택이다. 이번에는 입력 데이터 유효성 검사에 대해 알아보자. submitForm메서드에서 전체값을 확인해보고, 만약 만족해야하는 조건을 못 맞춘 값이 있다면 오류 경고를 표시해보자. 모든 키 입력 혹은 입력 데이터가 focus를 잃을 때 유효성 검사를 할 수도 있다. 예를 들어, user-name에 blur 이벤트가 발생하면, 즉 입력란이 포커스를 잃는 경우를 감시해서 저장된 값이 유효한지 확인할 수 있다. 만일 유효하지 않으면 사용자에게 오류 메시지를 보여준다. input요소에 blur이벤트(@..
[Udemy Vue 완벽가이드 Section11] 145. 체크박스 및 라디오 버튼과 함께 v-model 사용하기 체크박스와 라디오버튼도 form에 있다. ## 체크박스 vs 라디오버튼 차이 체크박스와 라디오버튼의 차이는, - 체크박스 : 한번에 여러 개 선택 가능. - 라디오버튼 : (name속성이 동일하다면) 한번에 한개만 선택 가능. **참고 [ 체크박스 ] HTML에서 체크박스는 type속성이 'checkbox'인 input태그로 만든다. - name : 체크박스의 이름. 같은 분류의 체크박스는 같은 이름으로 지정해준다. - value : 선택항목들이 가지는 고유한 값. submit하면 서버로 전송될 값 - id : label의 for속성값과 같으면 그 label과 연결된다. [ 라디오버튼 ] HTML에서 라디오버튼은 type속성이 'radio'인 input태그로 만든다. - name : 라디오버튼의 이름. ..
[Udemy Vue 완벽가이드 Section11] 144. v-model 및 드롭다운 어떻게 드롭다운으로부터 값을 가져올까? 더보기 **HTML에서 드롭다운은 태그와 태그를 사용하여 만들 수 있다. 태그를 사용하여 드롭다운 리스트를 만들고, 태그를 사용하여 드롭다운 리스트 내 항목들을 만든다. v-model은 input요소에서 작동하는 것처럼 select 요소에서도 작동한다. 그러니 똑같은 방식으로 v-model을 사용하면 된다. 새 data 프로퍼티로 'referrer'로 추가하여 select태그에 바인딩하자. Google Word of mouth Newspaper 여기 각 option태그에 설정한 value값은 선택값을 바꿀 때마다 data프로퍼티인 referrer에 저장된다. 지금 우리가 작업하는건 드롭다운이므로, 초기부터 referrerr값이 있는게 좋다. userName이나 us..
[Udemy Vue 완벽가이드 Section11] 143. v-model 수식어 및 숫자 사용하기 이번에는 age 입력란을 다뤄보자. 나이 입력란의 데이터타입은 숫자다. (input type="number") 하지만 type="number"라고 해서 입력한 데이터를 코드에서도 number타입으로 취급하는건 아니다. 분명히 number처럼 보이고, number말고는 입력할 수도 없는데 코드에서는 자동으로 number를 취하지 않는다. data 프로퍼티로 userAge 초기값을 null로 하자. Your Age (Years) Save Data 나이 입력란에 숫자를 적고 'Save Data'버튼을 클릭하면 submitForm메서드가 트리거된다. # v-model로 가져온 숫자 입력값 → number 콘솔을 보면 나이 입력란에 작성한 '30'과 console.log(31)로 찍은 '31'이 차이가 없다. 두..

티스토리툴바