쬬의 Vue12 Vue로 kakao map API 사용하기 회사에서 좋은기회가 생겨 vue로 카카오맵 api 를 사용하게 되었다. 지도는 프론트엔드에게 꽃이나 다름없다고 하셨는데 ㅋㅋㅋ 맞는말인지 모르겠지만 어쨌든 1년차도 안된 내게는 좋은기회라고 생각했다 카카오 주소 https://apis.map.kakao.com/ https://apis.map.kakao.com/web/sample/ 밑에 주소는 샘플링 주소이다. 개발을 하면서 정말 많이 들어갔던.. 물론 문서도 중요하지만 샘플링을 통해 어떤식으로 구현되는지 한번 확인을 거친 뒤 문서를 읽으면 확실히 금방 습득이 가능했다. vue에 카카오맵 설치 및 확인 여러 시도를 거쳐봤는데 key값이 노출되지 않은 채로 전역으로 설치해주는것은 불가능해 보였다. (만약 찾으신분이 있다면 알려주시길..👀 ) 그래서 지도를 사.. 2023. 8. 3. [Vue] Echart 쉽게 사용하기 1. Echart 사용기 구글링을 하면서 정말정말 안나오는게 바로 이 차트에 관련된 설명이였는데, 실제로 사용자 화면에선 많이 보여주지 않지만 관리자 화면에선 무조건 들어가야하는 요소이기때문에 초반에 너무너무 고생했던게 기억이 난다. 사실 amChart 나 echart , chartjs 등등 너무 좋은 라이브러리가 있지만, 기본적이 스타일의 차이나 핸들링에 대한 차이가 있었다. 코드 길이로 보면 amChart가 가장 길고 복잡하고 까다롭지만 개인적으론 개발하는 입장에서 특정 이벤트를 주기에 가장 용이했다. echart 경우에는 개별적 범례 이벤트같은 복잡한 설정은 불가능했다(이거때문에 한 2주는 고생한듯) 그럼에도 불구하고 차트가 매우 예쁘기 때문에 특별한 기능이 있지 않는 경우에는 매우매우 애용하는 차.. 2023. 7. 31. [Vue] firebase logEvent 연동하기 + Realtime 최근 하이브리드 앱을 적용하면서 기존에 사용하던 firebase 에 web 이벤트도 트래킹을 적용해야 했다. 사실 겉만 보면 좀 어렵게만 느껴지겠지만 개념만 간단하게 생각하면 매우 간단하다. (그냥 로그 찍는거다) 추후 서비스 업데이트를 위해 사용자들이 어떤 이벤트, 어디로 검색했는지를 보는것이 가능하다. 해당 코드는 Vue 내에 적용하기 쉽게 작동하도록 만들었다. 👉 firebase 설치 npm install firebase 👉 main.js const app = initializeApp(firebaseConfig(/* firebaseConfig key */)); const analytics = getAnalytics(app); const AnalyLog = (value) => { logEvent(an.. 2023. 2. 12. [Vue] innerWidth 감지해서 resize 이벤트 생성 우선 resize 이벤트를 실행하려면 nextTick을 알아야한다 VueJs - $nextTick() 이란? doozi316.github.io $NextTick으로 갱신형 이벤트를 사용할때 사용합니다. 자바스크립트는 비동기로 처리되는 특성을 가지기 때문에 vue 내부에서 data가 업데이트 되고 난 직후 Vue 가 DOM을 찾지 못하는 경우가 종종 발생하며 이와같은 문제를 해결해주는 vue에서 제공해주는 콜백함수입니다 data() { return { windowWidth:0 } } 우선 window width 데이터를 담을 변수를 선언해줍니다. 👀 mounted this.$nextTick(() => { window.addEventListener("resize", this.onResize); }); 👀 m.. 2022. 11. 16. [Vue] 이미지 data로 넣는 방법 정리 + vuetify 활용예시 (v-img) 이미지를 상태에 따라 이미지와 관련된 작업을 하다보면 [ active | defult | error ] 등 상태값에 따라 다르게 보여줘야 하는 경우가 있다. 최소한의 코드를 작성하고 최대 효율을 내고 싶어하던 와중에 여태까지 경험해본 이미지 리소스에 대한 활용예시를 공유해보려고 한다. (물론 개발자마다 처리하는 방식이 다르기때문에 이 방법은 공유차원에서만 쓰는 글이다) 우선 기본적으로 v-for 문을 통해 아래처럼 배열 형식으로 소스 닉네임을 가져왔다. 보통 value가 아닌 id 값을 사용하긴 하지만 대충 적어봤다. 아래 예시는 참고용으로만 봐주시길 바랍니다. 👉 script data sortItem: [ { value: 1, active: false, }, { value: 2, active: fals.. 2022. 11. 14. [Vue] Cookie 설정으로 하루보지 않기 설정 + 테스트 방식 공유 Vue2 에서 Cookie 설정하기 쿠키 있나 없나 확인 > 오늘하루보지않기 클릭액션 > 쿠키 저장 > 테스트 쿠키 저장에 대한 테스트는 1분으로 잡고 1분 뒤, 쿠키가 정상으로 작동되면서 팝업창의 여부를 체크하면된다! 그리고 다시 하루로 잡고 애플리케이션 > 쿠키 에서 정상적으로 값이 들어가 있는지 확인..! mounted(){ this.getCookie(); }, methods:{ //쿠키확인 getCookie() { let cookiedata = document.cookie; if (cookiedata.indexOf("todayCookie=done") < 0) { this.floatingInfo = true; //쿠키 없으면 띄우기 } else { this.floatingInfo = false; /.. 2022. 10. 4. [Vue] mycure/vue-wysiwyg 기본편집기 활용하기 (default 값 넣기) Vue2로 작업 중, edit 기능을 사용해야 한 경우가 생겼다. 물론 Vue 기능을 사용해 에디터 기능을 내멋대로 구현하면 너무나도 좋겠지만.. 기획 요구사항 날짜를 맞춰야하기때문에 사용한 라이브러리다 ! 사실 에디터 기능을 갖춘 라이브러리가 많은데 일단 사용할때 직관적이지가 않고 vue 전용으로 나온 라이브러리라 예시도 간결해서 너무 좋았다. 간단하게 사용하고 싶은 기능만 추가해서 구현이 가능한 라이브러리라 여기저기 유용하게 사용이 가능 할 것 같다. npm 설치 npm install @mycure/vue-wysiwyg main.js import Vue from 'vue'; import VueWysiwyg from '@mycure/vue-wysiwyg'; Vue.use(VueWysiwyg); test.. 2022. 9. 20. [Vue] vue-cli-serve production 빌드 시 스타일 문제 해결과정 문제를 접하다 기존 dev 환경에서 빌드하고 배포할땐 전혀 문제가 되지 않았는데 이상하게 production 빌드 시 특정 스타일이 무너지기 시작했다. 여러가지 시도를 거쳤지만 뭐가 문젠지 찾지 못하고 요소 하나하나 뒤져보다 발견한게 해당 css 파일 중 reset.css 로 저장된 파일이 컴포넌트 스타일 적용을 막고있는 문제였다. ㅠㅠ (대체 왜..) 여러번의 빌드로 테스트를 해보니 production으로 빌드되면서 min 파일 변환되면서 스타일이 적용되는 순서에서 문제가 있다는것을 발견했다. 프로젝트 기획부터 문제 사실 중소에 다니는 여러 개발자들이 겪는 가장 큰 문제라고 생각하는게, 바로 프로젝트 기획이다. 아무래도 개발자는 적고 앱,웹 사업을 하고싶어하는 회사는 많으니 적은 인원으로 여러가지 사업.. 2022. 9. 16. [Vue] interceptors(인터셉터) 구현으로 axios 통신 공통으로 관리하기 axios 문서 https://axios-http.com/kr/docs/interceptors 인터셉터 | Axios Docs 인터셉터 then 또는 catch로 처리되기 전에 요청과 응답을 가로챌수 있습니다. axios.interceptors.request.use(function (config) { return config; }, function (error) { return Promise.reject(error); }); axios.interceptors.response.use(f axios-http.com axios를 활용한 통신이 많아지다보면 통신 전처리, 후처리에 대한 고민이 쌓여만간다.. interceptors는 원래는 요청이 주고받을때 통신 틈새에 액션을 취하는 역할이지만 ㅎㅎ 작업을 하다보.. 2022. 8. 17. [Vue] 모바일/웹 분기설정 정규식예제 환경 : Vue2 + vue-router@3.5.4 + vuex@3 main.js const isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent ) ? true : false; //전역설정 Object.defineProperty(Vue.prototype, "$isMobileDevice", { value: isMobileDevice, }); //this.$isMobileDevice 로 활용이 가능하다 Test.vue if (this.$isMobileDevice === true) { url = res.data.mobile_url; } else { url = res.da.. 2022. 8. 17. 이전 1 2 다음 반응형
