분류 전체보기51 유효성 검증을 위한 vee-validate 플러그인 설치 version 3.4.10 npm install vee-validate // main.js import veeValidate from 'vee-validate'; new Vue({ veeValidate }).$mount('#app'); 적용 // in component import {ValidationObserver, ValidationProvider, extend} from 'vee-validate'; import * as rules from 'vee-validate/dist/rules'; import {messages} from 'vee-validate/dist/locale/ko.json'; import {configure} from 'vee-validate'; // configure 통해 각 .. 2021. 7. 15. vue에서 textarea의 줄바꿈 글을 표현할 때 vue에서 textarea로 입력받은 값을 textarea 안에서가 아닌 일반 html에서 보여줄 때의 방법을 정리해본다. 줄바꿈이 들어간 경우 바로 html에 값으로 넣어주면 줄바꿈이 표시되지 않는데 이럴땐 아래 계산식 즉, computed를 이용하여 값을 정제해준다. computed: { content() { return this.content.split('\n').join(' '); //return this.content.replace(/(?:\r\n|\r|\n)/g, ' '); 정규식 }, }, copputed를 작성 후, 해당 html이 들어간 content 값을 dom에 넣어야하는데 {{ 값 }}으로 넣어주면 string으로 표현되기 때문에 v-html을 같이 써줘야한다. 이렇게 하면 br 속.. 2021. 7. 15. vue-awesome-swiper 의 IE issue Syntax error vue-awesome-swiper 설치 후 IE11 에서 안보이는 이슈가 발생하였다. 코드는 아래와 같이 작성하였다. import {Swiper, SwiperSlide, directive} from 'vue-awesome-swiper'; import 'swiper/css/swiper.css'; export default { name: 'test', components: { Swiper : Swiper, SwiperSlide : SwiperSlide }, directives: { swiper: directive, } //...생략 } 뭐 대강 이런식으로.. 그런데 확인겸 IE를 확인해보다가 구문오류 이슈를 확인한 것이다. IE 꼭 맞춰야하나.... 내년이면 아웃인데.... 찾고찾고찾고. 이것때문에 아까운 .. 2021. 7. 7. 숫자 카운팅 모션 (정한 숫자와 시간에 맞게 올라가는 모션) 가끔 UI 작업을 하다보면 정해져있는 숫자만큼 0부터 숫자를 올리고 싶을 때가 있는데 이때를 위해 만들어둔 함수이다. function numberCount(element, num, time) { var element = $(element), maxNumber = Number(num), startNumber = 0, spd = time; element.animate({val : maxNumber}, { duration: spd, step: function() { var currentNum = parseInt(this.val); element.text(currentNum); }, complete : function() { var completeNum = parseInt(this.val); element.te.. 2021. 7. 5. Youtube API 다중 동영상 제어 Youtube 영상을 다중으로 이리저리 제어하는 프로젝트 중이라. 본의 아니게 Youtube API를 열심히 만지고 있다. 지금까지 내가 알게된 바는.. local 작업시, IE에서는 playVideo()와 같은 명령어가 듣지 않는다. - ftp 에 업로드 후 확인 결과 정상으로 나온다. chrome 은 최근 업데이트를 통해 playVideo()를 막아버렸다. - iframe으로 동영상을 추가한 경우, 웹접근성과 관련하여 이번 업데이트가 이뤄진 것으로 추정된다. 무조건 클릭이 되어야만 재생이 되는데. 한가지 꼼수는 mute (음소거) 상태로 재생시에는 playVideo()가 먹힌다. - iframe 으로 넣어서 api를 연결해준 경우가 아닌, api 내에서 iframe을 만들어버린 경우엔 unMute상태.. 2021. 7. 1. Youtube API - html을 삽입하는 두가지 방법 유튜브 영상을 메인에 거는 일이 많은 편인데 그 유튜브 영상을 제어하기 위해 컨트롤 버튼을 만들어 쓰는 경우가 생겨 정리합니다 . 더 자세히는 유튜브에서 제공하는 API 설명 사이트를 통해 알아보실 수 있습니다. https://developers.google.com/youtube/iframe_api_reference?hl=ko iframe 삽입에 대한 YouTube Player API 참조 문서 | YouTube IFrame Player API Embed a YouTube player in your application. developers.google.com 1. 첫번째 방법 - 동영상 js 로 넣기 // 유튜브 영상이 자리 할 곳입니다. html 내에 해당 동영상이 들어갈 자리를 만듭니다. 아이디 값.. 2021. 7. 1. Instagram AIP - 웹사이트에 피드 로드하기. instagram API 를 이용해서 내 웹사이트에 피드 로드하기를 구현해볼까합니다. 여기서 전제조건은 해당 인스타그램 계정이 공개계정이여야 한다는 점입니다. 그리고, 아무 계정이나 가져오진 못합니다. 해당 계정의 주인이 계정의 공개 토큰을 가져와야하기 때문입니다. 1. Instagram developer site 로그인 아래 첨부한 사이트에서 인스타 계정 로그인을 합니다. 단, 아무 계정이 아닌 피드를 가져올 해당 계정이여야 합니다. instargraim developer site URL : https://www.instagram.com/developer/ 2. Manage Clients 클릭 예시 캡쳐본에 따라 해당 버튼을 클릭합니다. 3. Register a New Client 클릭 4. 데이터 채.. 2021. 7. 1. [카카오API] 카카오 로그인, 로그아웃, 연결끊기 (JDK, javascript 방법) 로그인 /** * 카카오톡 로그인 * response 값으로 유저의 snsKey, snsType는 필수로 form안에 append 처리합니다. */ function kakaoLogin(params) { Kakao.init(params.key); Kakao.isInitialized(); $(params.button).on('click', function() { loginWithKakao(); }); function loginWithKakao() { Kakao.Auth.login({ success : function(response) { Kakao.API.request({ url:'/v2/user/me', success: function(result) { var accessToken = Kakao.Auth... 2021. 7. 1. 페럴렉스 스크롤링(Parallax Scrolling) 차근차근 읽고 공부하기 (이 포스팅은 공부를 위해 원문사이트를 정리한 것 입니다.) 원문 사이트 : https://dev.classmethod.jp/articles/html5-x-css3-x-jquery-6-parallax/ 페럴렉스(Parallax)란? 영어 단어 그대로 "시차" 를 뜻한다. 시차에 따라 모션을 다르게 줌으로써 움직이는 모션효과를 주는 것. UX-UI 적인 말이 많지만, 개인적인 소견으로는 UX적으로 짧은시간 가장 큰 효과를 주는 UI 인 것 같다. 1. JavaScript - jQuery 에서 페럴렉스 효과 첫번째 단계. 가장 기본이 되는 함수 알기 $(window).scroll(function(){}) var value = $(this).scrollTop(); // 현재 스크롤 값 .. 2021. 6. 30. 이전 1 2 3 4 5 6 다음
