날짜 입력시 자동 하이폰 추가 input에서 날짜 입력하면 입력한 길이 계산해서 하이폰 추가하기! inputDate(event){ let date = event.target.value date = date.replace(/-/g,"") let tempDate = '' if(date.length < 5){ return tempDate = date }else if(date.length WEB/JS 2020.12.24
open_now is deprecated as of November 2019. Use the isOpen() method from a PlacesService.getDetails() result instead. vue2-google-map 에서 gmap-authocomplete를 사용중에 하단의 오류가 발생했다. utc_offset의 지원이 중단되었으며, 2020년 11월에 사용이 중단되니 사용하지 말라는 뜻인데 나는 아무리 봐도 사용하고있지않는듯 한데 다음과 같은 오류에 어리둥절해서 구글링을 해보니 쉽게 해결 할 수 있었다! :options="{fields: ['geometry', 'formatted_address', 'address_components']}" 위에 옵션만 추가해주면 해결된다! FRAMEWORK/VUE 2020.11.23
나도 할수있는 페이스북 pixel 연동하기 (결제 정보 포함) 전에 구글 애널리틱스 연동하는 방법을 포스팅했었다! 오늘은 페이스북!! 구글 애널리틱스 연동이 궁금하신분은 참고하시면될거같아요! 2020/11/18 - [WEB] - 구글 애널리틱스 시작하기(전자 상거래 이용 포함) 구글 애널리틱스 시작하기(전자 상거래 이용 포함) 오늘은 google analytics를 이용해볼거다! google ananlytics? 웹 사이트 트래픽을 추적하고 보고하는 google에서 제공하는 웹 분석 서비스로 마케팅을 하거나 상품을 판매하는 사람들에게 매우 유용한 플 become-a-developer.tistory.com Facebook Pixel? Facebook에서 게재한 광고에 대한 효과를 측정하고, 타겟을 분석하기 위해 웹사이트에 설치하는 추적 코드입니다. 구글 애널리틱스와 .. WEB 2020.11.19
구글 애널리틱스 시작하기(전자 상거래 이용 포함) 오늘은 google analytics를 이용해볼거다! google ananlytics? 웹 사이트 트래픽을 추적하고 보고하는 google에서 제공하는 웹 분석 서비스로 마케팅을 하거나 상품을 판매하는 사람들에게 매우 유용한 플랫폼 말만 들었을때는 엄청 어려운거같지만 구글에서 잘 만들어놨기때문에 엄청 어렵지만은 않다. 먼저 내 사이트를 등록하자 기본 설정 설정>관리자>속성>데이터 스트림에 들어가서 스트림 추가를 눌러 추가할 수 있다. 나는 웹을 사용하기 때문에 웹을 선택했다. 웹사이트 url과 스트림 이름만 입력하고 스트림 만들기를 하면 생성이된다! 생성된 스트림을 누르면 스트림 상세페이지가 나오는데 하단에 있는 태그하기에 대한 안내, 새로운 온 페이지 태그 추가에서 전체 사이트 태그를 눌러 나오는 소스코.. WEB 2020.11.18
vue에서 클릭 이벤트시 class 포함여부확인 javascript에서 event.target.hasClass('classname') 으로 클릭한 div에 내가 찾으려고하는 div가 포함되어있는지 없는지 확인 했었다. vue에서는 조금 다르게 선언해주어야된다! @click="clickFunc($event)" 우선 클릭 함수는 다음과 같이 $event를 매개변수로해서 넘겨준다 clickFunc(event){ if(event.target.classList.contains('classname')){ console.log('포함되어있다.') }else{ console.log('포함되어있지않다.') } } event.target.classlist.contains으로 확인하면된다. 포함되어있으면 true를 반환하고 포함되어있지않으면 false를 반환한다! FRAMEWORK/VUE 2020.11.13
Vue js 트랜지션 알아보기(단일 엘리먼트/컴포넌트) 이글은 vuejs 진입/진출 그리고 트랜지션 글을 나중에 제가 보려고 작성한 글이기 때문에 정보가 부족할 수도 있고 잘못 이해한 부분이 있을 수 있습니다. :) 또한 이 글에는 단일 엘리먼트/컴포넌트에 대한 정보만 작성되어있습니다. 다른 부분이 필요하신 분은 공식 문서 및 다른글을 참고바랍니다. 감사합니다 kr.vuejs.org/v2/guide/transitions.html 진입/진출 그리고 리스트 트랜지션 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org Vue에서 DOM에 삽입, 갱신 또는 제거될 때 트랜지션 효과를 어떻게 지원하는지에 대해 알아보았다. 기존 HTML과 같은 JAVASCRIPT나 JQUERY에서와 달리 vue에서 지원하는데 지원하는 조건은 다음.. FRAMEWORK/VUE 2020.11.04
동적으로 vue 컴포넌트 선언하기 vue에서 화면을 이동할때 컴포넌트를 변경하는데 렌더링이 아닌 값에 따라 동적으로 컴포넌트를 선언해서 변경하는 방법을 알아보았다! 1. 컴포넌트 갈아끼우는 방법 모든 컴포넌트들을 선언 한 뒤, 값에 따라 가져오는것이다. 만약 부모 컴포넌트로 받은 auth가 있을경우 마이페이지 컴포넌트로 이동하고 아닐경우 로그인 화면으로 이동한다. auth 값에 따라 component 엘리먼트의 is 속성에 바인딩 된 값이 변경된다. 2. 필요한 컴포넌트만 로딩하여 사용하기 로딩해야하는 컴포넌트가 한두개가 아닌 여러개일 경우에 위의 방식보다 더 효율적인데 필요한 컴포넌트만 import 하여 사용하는 방식이다. 위와 같이 하면 동적으로 필요한 컴포턴트 마다 import 할 수있다. 출처 및 참고자료 lovemewithout.. FRAMEWORK/VUE 2020.11.03
VUEJS Laravel Sass 연동하기 개발환경 laravel vue.js sass 안녕하세요 오랫만에 글을 쓰는거같아요! 이번에는 라라벨/뷰에서 sass를 연동해보았습니다. 먼저 resources/sass 디렉토리가 있는지 확인합니다. 저는 없어서 만들어야했어요 처음엔 그냥 수기로 만들려다가 이건 좀 아닌거같아서 구글링 해보았습니다. composer require laravel/ui --dev php artisan ui vue 코드를 다음과 같이 입력하면 이렇게 디렉토리가 생기는걸 볼수있어요! 그리고 webpack.mix.js 를 확인해보니 코드가 이렇게 바껴있는걸 볼 수있었어요 여러개의 Sass 파일을 대응하는 css 파일로 컴파일 할 수있으며, CSS 결과 파일의 위치를 커스텀마이징 할 수있대요! 그리고 만들어진 app.scss 파일을 .. FRAMEWORK/VUE 2020.10.29
JAVASCRIPT 정규식으로 text에 있는 html 태그 제거하기 ckeditor로 작성한 문서를 tag만 제거하고 출력하고싶을때 ?? 정규식으로 태그만 제거하자! text = text.replace(/ /ig, "\n"); text = text.replace(/]*)?(\s)*(\/)?>/ig, ""); text = text.replace(/(]+)>)/gi, ""); text = text.replace(/ /gi,""); console.dir(text) return text; 출처 구글선생님들 🙇🏻♀️ WEB/JS 2020.08.06
VUE 자식컴포넌트에서 부모 컴포넌트로 값 전달하기 할때마다 헷갈리는 자식 컴포넌트에서 부모 컴포넌트로 값 전달하기 그제했는데 또 헷갈려서 검색하는걸 보고 절레절레하고 적기로했다🤦🏻♀️ . . . . . . . . . . . 이렇게하면 부모 컴포넌트로 값이 전달되어 alert이 출력된다 :) (이거쓰면서도 적어놓은거 참고한거 안비밀ㅠㅠ) 출처 구글 친구들 🙇🏻♀️ FRAMEWORK/VUE 2020.07.28