개발자 도담씨

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

이번엔 오랜만에 자바스크립트에 관련 된 개념을 가져왔다 ;D Debound와 Throttle이라는 친구들이다. 마켓팅 부서에서 사용자들이 페이지 스크롤을 얼마나 내려보는지 알고싶다해서 scroll event를 추가하던중에 만나게됐다.🖐 . . . [ Throttle ] Throttle을 검색해보니 뜻은 "조절판"이라고 되어있었다. 역시 이름을 참 잘 짓는 것 같다 :D Throttle은 이벤트를 일정 주기마다 발생하도록 만들어주는 친구다. 위에서 적었다 시피 난 스크롤 이벤트를 발생 시켜야했는데 window에 scroll 이벤트를 추가하니 스크롤 할 때 마다 이벤트가 발생하게 되면서 엄청난 양의 이벤트가 만들어 졌다. 이럴때 throttle을 사용하게 되면 일정시간 마다 스크롤이 발생하게 되니 부하가 덜..

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

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

자바스크립트 중 의사를 묻는 confirm boolean 형식의 return 값을 가지고 있다 :) var result = confirm('알림 문장'); if( result ) { // yes } else { // no }

제목에서도 적어 놨듯이 자바스크립트에서 클래스 패턴을 크게 3가지 알아 보려고한다!처음 디자인 패턴을 볼 때 인터넷에 있는 글을 프린트 해서 읽었었는데..정말 하나도 이해 못했었다...두번째 시도로 책을 읽고 공부한 것을 바탕으로 글을 쓰려고한다. 클래스 만드는 방법은 크게 오브젝트 리터럴 방식, 함수형 방식, 프로토타입 방식으로 총 3가지로 설명한다. 첫번째로 오브젝트 리터럴 방식부터 소개하겠다. 12345678var 인스터스 = { 프로퍼티: 초깃값, 메서드: function(){ }}cs 리터럴 방식은 객체 리터럴의 의미하는 { } 내부에 프로퍼티와 메서드를 정의하는 구조다.변수나 메서드를 만들때 ' : '을 사용하며 끝에는 세미콜론이 아닌 콤마( , )로 구분하니 주의 해야한다.리터럴 방식은 클래..

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

물고기 움직이기버튼을 누르면 물고기가 랜덤한 위치로 움직이되 패널 ( 파랑 바탕 )을 벗어나지 않도록 합니다. 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('..

간단한 페이지 틀 하나 만드는데도 초보인 나에게는 시간이 엄청 걸리는지라 오랜만에 이렇게 글을 쓰게 된다. 😥이전글 - [Web Programming] - CSS 속성 정리편 + 추가 기타 속성과 키워드이전글에서 포스팅했던 CSS 속성 외에도 웹 페이지를 만들다 보면 새로운 친구들을 만나게 되어 응용하면서 정리했었다.로그인 & 회원가입 페이지에 이어서 게시글이 나타나는 '메인 페이지'를 만들면서 새로 만난 속성들을 정리하는 시간을 가져보고자 한다 ! 우선 이번 메인페이지에서는 CSS와 조금 더 동적인 부분을 구현해보고자 JQuery를 사용해봤다.그리고 요즘 반응형 웹이라는걸 많이 사용해서 ( 내 블로그 또한 그렇고 ! ) 깊게 공부한건 아니지만 구글을 통해 흉내만 내봤다...👶좌측 초록색 부분은 내가 만..