전체 글 (445) 썸네일형 리스트형 hands on vue3 - 데이터가 없을 때 v-if를 사용하여 처리 [목표] v-if를 사용하여 data가 없을 때 문구를 잘 보여주자 [UserExperiences.vue] Submitted Experiences Load Submitted Experiences There's no data. Start Adding Experinece. Rest API error catch 부분 추가 Submitted Experiences Load Submitted Experiences fetching error. try it again. There's no data. Start Adding Experinece. hands on vue3 - checkbox $event로 받기 [목표] checkbox는 true, false 값을 가진다. input 태그처럼 $event.target.value로 받지 못한다. checkbox는 $event만 받으면 true,false 값을 얻을 수 있다. hands on vue3 - vue에서 arrow function 쓰는 특징 1가지 [목표] function 대신 arrow function을 쓰는 이유 중 한가지를 알아보자 arrow function을 안쓴다면 오류가 발생한다. 그 이유는 this의 차이다. arrow function을 안쓰고 일반 function을 쓴다면 함수 내부를 this로 가리킨다. 만약 arrow function을 쓰고 this를 사용한다면 함수 외에 있는 전역의 this로 사용하는 특징이 있다. hands on vue3 - firebase를 이용하여 db에 넣은 값 가져오기 [목표] firebase에 저장된 DB내용을 불러오기 기본 셋팅은 아래의 포스팅에서 하면 된다. hands on vue3 - DB를 무료인 firebase를 사용해보자-DB연결편 [목표] firebase로 DB생성을 성공적으로 마쳤다. 이제 vue 안에서 firebase가 만든 DB에 어떻게 접근하는지 보자 접근하는 방법은 크게 두가지다 1. npm에서 제공하는 axios 이용하기 2. 기본 browser가 제공 tomhoon.tistory.com Load Submitted Experiences 버튼을 클릭하면 저장된 내용을 불러올 수 있도록 한다. [UserExperiences.vue] Submitted Experiences Load Submitted Experiences hands on vue3 - DB를 무료인 firebase를 사용해보자-DB연결편 [목표] firebase로 DB생성을 성공적으로 마쳤다. 이제 vue 안에서 firebase가 만든 DB에 어떻게 접근하는지 보자 접근하는 방법은 크게 두가지다 1. npm에서 제공하는 axios 이용하기 2. 기본 browser가 제공하는 fetch 메소드 사용하기 먼저 fetch메소드를 이용하여 접근해본다. 접근하기 전 현재 글쓰는 시점과 동일한 환경을 구성해보자 vue3 프로젝트를 생성하여 다음 소스를 넣으면 된다. 폴더를 유심히 확인하여 생성한 후 소스를 넣어야 한다. src폴더 : App.vue, main.js src/components/survey폴더 : LearningSurvey.vue, SurveyResult.vue src/components/UI폴더 : BaseButton.vue, Bas.. hands on vue3 - DB를 무료인 firebase를 사용해보자-DB생성편 [목표] : google에서 제공하는 서비스인 firebase를 사용하여 backend에 데이터를 저장하여 연습해보자 이번 시간에는 firebase를 통하여 DB생성까지만 하고 다음 포스팅에서 어떻게 vue에서 firebase DB에 접근하는지 보자 다음 사이트에 들어가 구글 로그인을 한 뒤 아래 그림을 보고 진행 https://firebase.google.com/?hl=ko 1. 로그인 후 콘솔로 이동 2.프로젝트 만들기 3. 프로젝트명 지어서 생성하기 4. 체크하고 생성하기 5. 기다림.. 6. DB 생성하기 7. 데이터베이스를 만들기 클릭하여 다음을 눌러 만들면 된다. 8. 다 만들면 빨간 박스가 요청을 보낼 주소다 hands on vue3 - 주어진 소스를 갖고 custom component에 v-model 적용하기 [목표] : custom component에 v-model를 적용할 경우 자식 컴포넌트에서 props, emit메소드명에 대한 이해와 익숙함을 만들자. 저번 포스팅에서 TheForm 컴포넌트 안에 RatingControl 컴포넌트를 생성했다. RatingControl 컴포넌트 내의 data에 평가에 대한 데이터인 Poor, Average, Great가 있었다. 이번 포스팅에서는 다음의 조건을 만족시키는 기능을 구현해보자 먼저 알아야 할 것은 TheForm(부모) -> RatingControl(자식) 관계이다. RatingControl은 사용자가 평가를 선택하는 컴포넌트다. 첫째) TheForm 안에 선택한 평가 데이터를 추가하기 (Poor, Average, Great) 둘째) 평가데이터를 TheForm .. hands on vue3 - 주어진 소스를 갖고서 버튼 클릭시 highlight해보기 [목표] 1. 클래스의 동적변화에 대해 연습해보자. 추가로 기본적인 CSS를 이해해보기. 다음 조건을 만족시켜서 주어진 소스를 수정하여 완성해보기 첫째) RatingControl이라는 컴포넌트를 새로 생성한다.(RatingControl의 모습은 다음 사진과 같다.) 둘째) 생성한 컴포넌트를 TheForm 컴포넌트 내부에 넣는다 셋째) 클릭했을 때 클릭한 버튼만 색상 진하게 나타낸다. 주의할점! Form 태그 안에 button 요소가 있을 경우 버튼 클릭시 submit가 된다. submit 버튼이 아니라는 것을 알려주기 위해 타입을 아래 처럼 버튼이라고 선언해주어야 submit가 안된다. 수정 전 소스 [App.vue] [TheForm.vue] Your Name Please Check Your Name I.. 이전 1 ··· 42 43 44 45 46 47 48 ··· 56 다음
