[ 사용 환경 : Vue.js, tailwind css ] Vue.js 에서 daum address api (kakkao map) 를 사용하는 방법을 포스팅 하겠습니다. 기존 html css js 에서 사용하는 것과 달리 조금은 번거로운 작업이 존재합니다. Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.net 위 링크를 통해 실제 예제가 존재합니다. 이를 변형하여 vue에 맞게 제작하겠습니다. 팝업(pop up)을 이용한 웹 (Web application) 전용으로 제작하도록 하겠습니다. ■ 작업 순서 1. index.ht..

FrontEnd/Vue.js 2021. 11. 18. 17:55

Vue.js 에서 회원 로그인 정보를 php 로 axios를 통해 보내고 200 success response를 받았다. 하지만 그 내용을 오류로 넘기고 싶을 때 처리하는 방법 .then((response) => { if( response.data == false ) { throw new Error('no data from server'); } else { console.log('success'); } }) .catch((error) => { console.log(error); this.errors.push("회원정보가 존재하지 않습니다."); }); then() 내에서 new Error로 넘겨주면, 아래 catch(error) 에서 해당 에러를 출력해준다. 그리고 this.errors.push 를 통해..

FrontEnd/Vue.js 2021. 11. 18. 09:29

사용환경 : Linux, Ubuntu, Vue.js 3, vue-cli, axios - post, php Vue-cli port : 8081 PHP Apache server port : 8080 Vue.js 3 에서 axios를 이용해 php 에 데이터를 송신하는 방법을 포스팅하도록 하겠습니다. 3일째 이거 만지다가 어쩌다 됐습니다. 억울.. [버전은 상관없지만] @vue/cli 4.5.15 에서 적용하였습니다. ■ 1. Vue-cli project 설정 1/2 /src/views/Account/AxiosTest.vue 제가 form을 이용해 post data 를 송신할 Vue 페이지는 위와 같습니다. AxiosTest.vue => input 태그 2개로, id 와 password를 전달하려고 합니다. ..

FrontEnd/Vue.js 2021. 11. 12. 15:44

REST API를 적용하고, Vue.js 혹은 React.js에서 Axios를 사용할 때에 초보자는 도대체 backend 를 담당하는 파일을 어디에다가 놓아야할지 모를 경우가 생깁니다. 네 그게 바로 접니다. 환경 및 사용 : Linux (Ubuntu) , Apache , vue - cli project , php , axios 예시) axios .get('http://urlExample:8080/phpFileName') .then(function(response) { console.log(response); }) .catch(function(error) { console.log(error.response.data); }) get 방식으로 axios를 사용해보겠습니다. apache 서버는 8080포트를 ..

FrontEnd/Vue.js 2021. 11. 11. 15:23

Vue.js 에서 Component (컴포넌트)를 3가지 방법으로 선언할 수 있다. 1. Global (전역 선언) 2. Local (지역 선언) 3. 파일 분리 1,2번의 방법은 사실 별로라고 생각한다. 그 이유인즉슨, 특정 컴포넌트 내에 또 다른 컴포넌트를 작성하여 적용시키는 방법이라 생각하면 되는데, 가독성이 좋지 않다. 물론 컴포넌트를 한 개의 파일에서 관리할 수 있다는 매력이 있지만, 애초에 `template` 속성 내에 전부 때려 넣다보니 편리함보다는 오히려 보기가 너무 불편하다. Syntax Highlight 지원도 받기 어렵다. (혹시 있나?) ■ Global [전역] 예시) 이렇게 ' component 명' 을 먼저 선언하고, 그 뒤에 template 속성을 선언하여 ` ` 속에 html..

FrontEnd/Vue.js 2021. 11. 10. 17:39

Vue.js 3 프로젝트에서 Vuex를 설치하려고 했는데 해당 에러가 발생하였다. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: kiosk@0.1.0 npm ERR! Found: vue@3.2.21 npm ERR! node_modules/vue npm ERR! vue@"^3.0.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer vue@"^2.0.0" from vuex@3.6.2 npm ERR! node_modules/vuex npm ERR! vuex@"..

FrontEnd/Vue.js 2021. 11. 10. 11:39

Linux, Ubuntu, Vue-cli, axios를 사용하는데, proxy 에러가 출력되었다. Proxy error: Could not proxy request ■ 해결 방법 해당 에러는 root 경로의 vue.config.js 에서 proxy 관련 정보를 수정하면 된다. /vue.config.js module.exports = { devServer: { proxy: { "/api": { target: "https://localhost:8081/", }, }, } 기본 경로(/root)가 될 port 번호와 정보를 작성하면 된다. proxy 문제가 해결된것을 확인하실 수 있습니다. 이렇게 axios를 이용해서 데이터를 올바른 경로에서 뽑아오면 되겠습니다. Form Handling | Cracking ..

FrontEnd/Vue.js 2021. 11. 9. 18:08

Vue.js - axios를 설치하고 바로 사용하려고 하는데 에러가 발생하였습니다. 'Axios' is not defined no-undef 당황하였다. ■해결 방법 해당되는 컴포넌트(component)에 import 해주시면 됩니다. 이상입니다. [오류해결] 'Axios' is not defined no-undef 해결방법 '해당라이브러리' is not defined no-undef 오류가 났을 때는 import를 해주면 간단히 해결된다. import Axios from 'axios'; iancoding.tistory.com

FrontEnd/Vue.js 2021. 11. 9. 16:43