Client/Vue (21) 썸네일형 리스트형 [vue] event.preventDefault() 사실 이건 vue 포스팅보단 html 이나 javascript 포스팅이 맞는 것 같지만, 무심코 넘어가던 v-on:click="event" .. 같은 함수 뒤에 .prevent 가 붙는게 신경쓰여서 이게 뭐지 하고 싶어 찾아보는 김에 기록용으로 포스트 작성. 기본적으로 form에서 onSubmit()을 통해 submit 하면 이벤트 완료 후 refresh된다고 한다. 근데 리엑트나 vue 같은 SPA앱에서는 리프레쉬를 하는건 다시 데이터를 로드하는데 많은 시간과 용량이 필요한 법.. 그래서 event.preventDefault() 를 활용해서 기본적인 이벤트와 리프레쉬 등 별도의 브라우져 이벤를 멈추고 원하는 이벤트만 실행할 수 있도록 하는 것 같다. 결국 form 태그와 submit 버튼(onSubmi.. [vue] 우정국 api를 활용한 주소찾기 우정국 api의 경우 return은 jsonp형으로 넘겨주고, 데이터 자체는 검색형의 경우 json과 xml을 모두 지원하지만 팝업형의 경우 xml밖에 지원하지 않기 때문에 다운받은 모듈을 적극 활용했다. 데이터만 넘겨받기 때문에 ui를 직접 설계해야 한다는 부분에서 굉장히 귀찮고, 헤멘 부분이 없지 않아 있음 특히 pagination 부분.. [ HTML ] 검색하기 지번 주소 검색 예) 가산동 12-3 도로명 주소 검색 예) 남부순환로, 가산디지털2로 건물명 검색 예) 전쟁기념관, 스타타워 {{parseInt(tot/countPerPage)}} {{tot%countPerPage}} pageScope : {{pageScope}} pagination : {{pagination}} current : {{c.. [vue] jsonp 데이터 & xml to json 결국 어제 작성한 daumpost 이슈를 해결하지 못하고 우정국 api를 사용하기로 결정했는데, 우정국 api의 경우에는 데이터를 json이 아니라 jsonp형태로 return 하고, 데이터도 xml 로 작성돼있어서 parsing 처리를 위해 모듈을 몇 개 찾아서 깔아봤다. 처음에는 그냥 axios jsonp로 서치해서 해봤는데 왠지 자꾸 not function 오류가 떠서 뭔가 싶었는데 vue가 아니라 react용 모듈이었다.. 삽질만 얼마나 한 건지 정신이 아득한데, 아무튼 vue-jsonp 모듈로 재설치 한 다음 코드처리 진행함. 아래는 jsnop으로 데이터 전달 받은 후 parsing 처리하는 과정 1. 설치한 vue-jsnop 모듈을 사용할 수 있도록 main.js 파일에 등록 import Vu.. [vue][Issue] daumPost redirect 이슈 현재 npm에서 설치할 수 있는 daumPost api이슈 해결이 안 되는 중. 우편번호 모듈을 팝업(modal)으로 띄워서 사용하려 했는데 검색 후 뒤로가기, $router.go(-1) 등을 수행하면 내 vue페이지의 url path가 아니라 스크립트를 호출하려 하는지 redirect되며 이전 작성 데이터가 날아간다. 이 상황이 단일 페이지면 상관이 없는데, 단계적으로 정보를 입력받아 데이터를 vuex에 저장 후 최종 단계에서 저장한 데이터들을 서버로 넘겨주는 방식이라 redirect가 되면 이전 vuex에 저장한 데이터까지 모두 초기화되는 문제가 발생. console창을 열심히 뒤져봤을 때 router hook에서 원하는 페이지로 이동하는게 아니라 replace()를 시켜버리는 것 같음 코드를 보면 .. [vue] 외부 js에서 vue fucntion() 호출 vue 프레임 워크를 사용해서 프로젝트를 진행하다 보니, api 연동 등으로 인해 vue 파일 내 스크립트 코드가 아니라 .js 파일을 작성해서 개발을 진행해야 하는 경우가 생겼는데, js 파일 내 함수에서 해야 할 작업을 완료 한 이후에 vue 파일(현재 보이는 화면)의 함수를 호출해야 했음. 아니 근데 세상에 js파일은 굳이 따지면 vue 프레임워크 외부의 파일이다 보니 this 로도 접근이 안되고 어떻게 접근 방법이 없어서 어찌어찌 맨땅에 헤딩 하다가 찾은 외부 js 파일에서 vue 함수 호출하는 방법. 서두는 여기까지 하고 아래부터 적용하는 방법. +) 2021.06.09 추가 plugin을 활용해서 더 간결하고 안정적으로 처리하는 방법을 찾음! 링크는 게시글 하단에 링크 달아뒀으니 필요하다면 참.. 이전 1 2 3 다음
