Vue

! npm install 시 에러 발생 - 회원 가입 폼의 유효성 검사를 위해 비벨을 설치하는 과정에서 에러가 발생했다 npm install vee-validate --save ! 해결 방법 - npm install 설치파일 ' --save --legacy-peer-deps '를 추가해주면 됨 npm install vee-validate --save --legacy-peer-deps - package.json에서 비벨이 설치된 것을 확인할 수 있다 참고 https://iancoding.tistory.com/154

Props & Emit 사용법 - Props : 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용 - Emit : 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 때 사용 ☆ 중요 1. 전달 키와 받는 키가 동일해야 한다. 2. 받는 키를 등록해줘야 합니다. Parent.vue ( 부모 컴포넌트 ) child 컴포넌트에서 받은 데이터: {{ value }} Parent2.vue ( 부모 컴포넌트 ) child 컴포넌트에서 받은 데이터: {{ value }} - Props -> 부모 컴포넌트에서 자식 컴포넌트에게 name이라는 키 값을 통해 값을 보냄 -> name은 키가 되고 "Parent", "Parent2"가 값이된다 -> 선택한 키를 자식 컴포넌트에 등록을 해야한다 - Emit -> Em..

1. Vue Router를 이용하여 특정 페이지 이동을 위해서 push 또는 replace 메소드를 이용함 // push this.$router.push({path:"./qna"}); // replace this.$router.replace({path:"./qna"}); 2. 동일페이지에서 query나 params의 값만 변경됐을 경우 페이지 갱신이 이루어지지 않는 경우가 발생함 // 동일한 페이지에서 query의 값이 변경될 경우 페이지 갱신이 이루어지지 않음 this.$router.push({path:"./detailculture",query:{contentid,contenttypeid,mapx,mapy}}); => 이러한 문제가 발생할 경우 해당 페이지를 호출하는 router view 값에 key값..

특정 Component만 비활성화 v-if="$route.name !== '특정라우터이름'" 라우터 이름이 home인 라우트만 제외하고 Searchbar Component가 나타남 (라우터 이름이 home인 경우는 아래 컴포넌트 부분이 생략됨) 2. 특정 Component만 활성화 data: () => ({ visiableRouter : ["Travel","Culture","Festival","Travelcourse","Leports","Accommodation","Shopping","Food"], }), 라우터 이름이 visiableRouter에 포함된 경우에만 Searchbar Component가 나타남 참고 https://github.com/vuejs/vue-router/issues/254 http..

코딩컨벤션 (coding convention) 코드를 작성할 때 추천하는 코딩 스타일을 제시하는 가이드라인 코드의 가독성을 높인다 버그가 줄어든다 유지보수가 원활해진다 1. editorconfig 설정 - 해당 파일은 editor나 IDE 툴에 관계없이 코드 스타일을 유지하기 위해 도와주는 설정 파일 1.1 EditorConfig for VS Code 플러그인 설치 1.2 .editorconfig 파일 생성 - 아래와 같이 코드 스타일을 지정 2. eslint-plugin-vuerify 설치 - vuetify를 위한 eslint 설정 - Eslint : 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일로 작성하도록 도와줌 2.1 터미널에서 아래의 명령어를 통해 eslint-plugi..

아래의 사이트에서 api를 가져왔습니다 https://reqres.in/ Reqres - A hosted REST-API ready to respond to your AJAX requests Native JavaScript If you've already got your own application entities, ie. "products", you can send them in the endpoint URL, like so: var xhr = new XMLHttpRequest(); xhr.open("GET", "https://reqres.in/api/products/3", true); xhr.onload = function(){ conso reqres.in POSTMAN으로 GET방식으로 호출 htt..

1. axios 란? Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 HTTP 클라이언트 라이브러리 중 하나 vue에서 공식적으로 권장하는 클라리어은트 라이브러리 Promise를 기반의 자바스크립트 비동기 처리 방식을 사용 JSON 데이터 자동변환이 가능 2. axios 설치 npm install --save axios main.js - 아래의 코드 추가 import axios from 'axios' // axios를 import Vue.prototype.$axios = axios // 다른 컴포넌트에서는 import 없이 this.$axios로 사용가능 3. axios 사용법 - axios는 REST을 별칭을 이용해서 쉽게 통신 axios.get(url[, conf..

1. Vuex 란? Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리 React의 Flux 패턴에서 기인함 Vue.js 중고급 개발자로 성장하기 위한 필수 관문 2. Vuex 상태관리 패턴 state : 컴포넌트 간에 공유할 data view : 데이터가 표현될 template actions : 사용자의 입력에 따라 반응할 methods new Vue({ // state data() { return { counter: 0 }; }, // view template: ` {{ counter }} `, // actions methods: { increment() { this.counter++; } } }); 3. Vuex..

1. Vuetify 란? - Vue 생태계에서 가장 활동적이며 다양한, 완벽한 기능을 갖춘 개발 프레임 워크이다. 쉽게 말해 vue에서 사용할 수 있는 용이한 UI toolkit이라고 할 수 있다. 퀄리티 있게 만들 수 있다. 생산성이 높다. 일관성이 있어 유지보수가 용이. 코드에 대한 재사용성이 높다. 2. Vuetify 설치 vue vue add vuetify npm npm install vuetify 3. Vuetify 사용 - 원하는 UI를 찾아서 소스 코드를 복사해 사용 https://vuetifyjs.com/ Vuetify — A Material Design Framework for Vue.js Vuetify is a Material Design component framework for Vu..

1. Vue에서 Router란? - vue에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리 - 라우팅이란? > 웹페이지간 이동방법 > SPA(Single Page Appliecation) - 기능 중첩된 라우트/뷰 매핑 모듈화된, 컴포넌트 기반의 라우터 설정 라우터 파라미터, 쿼리, 와일드카드 Vue.js의 트랜지션 시스템을 이용한 트랜지션 효과 세밀한 네비게이션 컨트롤 active CSS 클래스를 자동으로 추가해주는 링크 HTML5 히스토리 모드 또는 해시 모드(IE9에서 자동으로 폴백) 사용자 정의 가능한 스크롤 동작 2. Vue Router 설치 !중요 Vue2와 Vue3의 라우터 설치와 코드가 다르니 버전에 맞게 사용 (Vue3버전에 Vue2에서 사용하는 라우터 설치와 코드를 사용하여..