개발자 도담씨

Vue.js를 사용하면서 jQuery Ui인 Timepicker을 사용했어야 했는데 같이 사용해보니 발생했던 이슈가 있어 정리하고자 한다 🤔 input태그를 클릭시 timepicker가 나타날텐데 input태그에 값이 들어가있는것 처럼 보이지만 실제로 v-model의 변수값이 변경되고 있지 않았다. 코드를 보면서 자세히 설명해보겠다 :) 📋 기존코드 vue를 사용한다면 기본적으로 아래와같이 적어줄 것이다. 여기서 문제가 timepicker가 선택됐을때 time이라는 변수의 값이 변경되지 않는다는거다. vue객체안에서 timepicker을 설정해주고 onSelect 함수를 추가해줘도 똑같은... 그래서 열심히 구글링하다가 vue의 component를 사용해보기로 했다. 📋 수정코드 Vue.component..

jQuery.noConflict() 함수명 그대로 jQuery 충돌을 막기 위한 함수다. 이 친구는 또 처음본다. ( 안녕..? ) 친구를 만나게 된 계기는... 카페24 쇼핑몰을 제작해보면 외부 스크립트 및 스타일시트를 불러올때 script태그랑 link태그를 사용하지 않고 자체 문법으로 불러오고 있는데 자체 문법을 사용한 파일들을 한데 묶어 optimizer이라는 이름으로 하나만 불러오고 있다. ( 디버깅할때 넘 힘들다 ) 그리고 레이아웃에 떡하니 이런 주석을 적어놨다. 스마트디자인에서는 JQuery 1.4.4 버전이 내장되어있습니다. 추가로 호출하면 충돌이 생길 수 있습니다. 하지만 그냥 script로 불러온 나로썬 내장 jQuery가 당연히 먹힐리 없고 ( 실행 순서가 다르기 때문에... ) 나는..

jQuery에 컬러피커를 지원해주는게 있어 포스팅해본다. 깃허브 - https://github.com/claviska/jquery-minicolors 참고 - https://labs.abeautifulsite.net/jquery-minicolors/#instantiation 깃허브에서 zip파일을 받아 압축을 풀어 여느 플러그인처럼 자바스크립트 min파일과 스타일시트 min을 넣어줬더니... 이렇게 나온다... 컬러피커의 색상이 제대로 표시되지 않는다 ㅠㅠ... 아니 다들 스크립트랑 스타일시트만 넣어주더만 왜 나한테만 이러는거야? 했더니 안되는데엔 다 이유가 있는 것이여라^-^;; 콘솔 에러와 폴더를 다시보니 이미지 하나를 못 불러오는 듯 했다. 폴더에 보면 jquery.minicolors.png 라는 ..

카페24 모바일 쇼핑몰 제작 인스타그램 그래프 API 연동 ( 완료 : 검수 난이도 실화..ㅠ ) 메일발송 관련 관리자 페이지 - 프론트엔트 웹사이트 관리자 페이지 리뉴얼 - 프론트엔드 웹사이트 병원소개 페이지의 관리자 페이지 제작 - 풀스택 웹사이트 관리자 페이지 유지보수 예약통계, 상담통계 내기 ( 그래프 관련 자바스크립트 사용 ) - 풀스택 베트남 웹 사이트 및 관리자페이지 제작 - 프론트엔드 ( 기존의 사이트 복사후 변형 ), 다국어 지원 슬라이드 팝업 ( 관리자/사용자 ) 추가 선택된 이벤트 리스트를 불러와 캔버스 저장 ( 페이지 추가, 그룹 추가 예외처리 스크립트의 난이도가 어려웠음 ) 캔버스 url생성후 백단에서 zip파일 생성및 다운 병원고객관리 페이지 유지보수 및 추가 개발

검색해보면 좋은 원페이지 스크롤 플러그인들이 많다... 잘 만들었지만.. 내가 원했던건 원페이지 스크롤과 일반 스크롤이 합쳐진 것.. 그러니까 원페이지로 잘 가다가 특정 부분에선 일반 스크롤이 되었으면 했던 것🤔 (할꺼면 다 똑같은 원페이지로 하지 ㅠㅠ) 유명했던 fullpage.js랑 하나 더 사용해봤지만 원페이지 스크롤에서 일반 스크롤로 넘어갈때 자연스럽지 않고 덜덜 거리는 현상이 생겨서 처음에 직접만들다가 실패하고 이번에 다시 차근차근 생각해서 만들어봤다. 매번 말하지만 아직 초보라 미흡한 부분이 많다. 피드백은 항상 감사하다 :) 전체 코드 ✌️ var total_section = 0; //전체 원페이지 수 var current_idx = 0; var screen_h = 0; // 화면 높이 va..

[Web Programming] - [jQuery] 슬라이드 배너와 스크롤 탐지 메뉴바 만들기[Web Programming] - [ jQuery ] 슬라이드 배너 만들기 2편 이전에는 플러그인을 써서 만들어봤다면드디어 슬라이드(캐러셀)를 만들어봤다. 내가 생각한 알고리즘은 아래와 같다. 처음 슬라이드에서는 0번째 친구만 보여지고 나머지 친구들은 1번다음에 쌓여서 대기하고있다.그다음 슬라이드가 왼쪽으로 이동하는데 현재 인덱스와 ( 0 ) 그다음 나타날 인덱스 ( 1 )이 왼쪽으로 이동한다.그리고 나서 지나간 0번의 친구가 다시 대기 중인 영역에 와서 기다리고있는 것! Colored by Color Scriptercshtml은 위와 같이 간단하다, bxSlider을 참고로 div안에 목록태그를 사용해서 틀을..

[Web Programming] - [jQuery] 슬라이드 배너와 스크롤 탐지 메뉴바 만들기 이전 슬라이드 배너에서는 플러그인을 사용했었는데 사용하다보니 문제점이 하나 있었다! 반응형이 안되던것... 처음 웹 브라우저의 크기를 인식해서 되는 것 같았다. 😓그래서 책을 보고 우선 반응형으로 만들어보고 슬라이드 애니메이션을 추가해 보았다. ① 일정한 시간에 한 번씩 배열에 들어있는 이미지를 순차적으로 전환② 전환 시간 설정 가능③ 이미지 무한 롤링④ 함수 활용 html + css 부분123456789101112131415161718192021222324252627282930313233343536373839 banner body{ margin: 0px; } #banner{ width: 100%; height..

jQuery 이벤트를 공부하다 세부적으로 돌아가는 부분에 대해 정리해보고자 한다 ! 우선 "이벤트"라고 하면 이름만 들어도 감이 올 듯한데 책에서는 일종의 "알림 기능"이라 설명하고 있다.이벤트 종류로는 크게 마우스 이벤트, 키보드 이벤트, 태그요소 고유 이벤트, 사용자 정의 이벤트 이렇게 4종류로 나뉜다.*태그요소 고유 이벤트 : 엘리먼트마다 발생하는 고유 이벤트(ex. img 태그 요소 경우 이미지가 모두 로드 될 시 load 이벤트 발생 ) 그리고 가장 중요한 이벤트 단계에 대해 자세히 알아보자. 책의 그림이 명확히 이해되도록 되어있어 첨부하고 싶은데 스캔할 수가 없다...😥 1단계 "캡쳐 단계"는 가장 먼저 실행 되는 이벤트 단계로써, 흐름은 가장 최상위 노드(document)부터 순서대로 htm..

물고기 움직이기버튼을 누르면 물고기가 랜덤한 위치로 움직이되 패널 ( 파랑 바탕 )을 벗어나지 않도록 합니다. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 button{ margin: 10px; } .panel{ width: 600px; height: 400px; border: 1px solid #999; position: relative; background-color: blue; margin: 10px; } #fish{ position: absolute; left: 250px; top: 150px; } window.onload = function(..

동적 로딩을 할려면 스크롤의 하단 부분을 체크할 수 있어야 하기에 ! 아래부분 인식부터 해보자사실 구글에 검색하면 바로 나오는 간단한 (?) 조건문이지만한번도 제대로된 설명을 보지 못했고 정확하지 않은 부분을 발견해서 포스팅하게 되었다. 😖 HTML 부분을 참고하고자 첨부한 사진이다.크게 볼 건 없지만 혹시나 자바스크립트 삐약이인 나같은 사람들을 위해.. 햇갈리지 말라고 올려본다! 👍( 화질이 왜이렇게 안좋지..? ) 123456 /** list부분을 스크롤시 발생하는 함수 **/ $("#list").scroll(function(){ if ($(this)[0].scrollHeight - Math.round($(this).scrollTop()) == $(this).outerHeight()){ alert('..