개발자 도담씨

예전에 업무를 하면서 Vue를 이용해 우선 만들었던 기능을 순수 JavaScript로 만들 기회가 또 생겨 확장성을 더 생각해서 구현해 보았다. jQuery에 익숙해져있다가 순수 JavaScript로만 하려니 생각보다 힘들었다😥 내가 만들고자 한건 우리가 일반적으로 쓰는 select box를 사용하면 아래와 같이 검색 선택 박스로 바뀌는 것이다. 마우스 이벤트로도 구현을 했고 아래, 위 키를 눌러서 엔터를 누르면 선택 되도록 키이벤트도 구현했다! 코드 리뷰 function setCustomSelect (instance, list, width){ var box = document.createElement("span"); var input = document.createElement("input"); var..

해당 카테고리는 단순히 글쓴이가 공부 후 정리해놓기 위한 목적으로 글쓴이가 추후 이해하기 쉽게 자기 멋대로 정리한 글입니다 :) 참고1 : sujinlee.me/webpack-react-tutorial/ 참고2 : 3트째 참고한 블로그 저번에 혼자 맨땅에 헤딩으로 리액트를 하면서 DB붙이고 하려니 구조를 어떻게 해야하는지 혼동이 오면서 접었었는데... 해당 참고글을 보고 2트해본다! 1트는 버전 문제 때문에 잘 안됐는데 오늘은 다시 해결해보는걸로 😥 준비사항에 있는 node와 yarn을 설치해주고 React Route는 또 몰라서 공부해왔다... 살펴보고 역시 이렇게 있었어 라고 생각이 들었다. 나 역시도 이 친구를 모를때 다른 주소에 따라 다른 뷰를 보여주고싶은데 어떻게 하는지 몰라서 조건문으로 1번을..

해당 카테고리는 단순히 글쓴이가 공부 후 정리해놓기 위한 목적으로 글쓴이가 추후 이해하기 쉽게 자기 멋대로 정리한 글입니다 :) 호옥시 잘못된 정보를 공부하고있다면 알려주세요! 참고1: beomy.github.io/tech/javascript/javascript-runtime/ 참고2: geonlee.tistory.com/92 참고3: velog.io/@stampid/React%EB%9E%80 React 기초를 다시 한번 공부하려니 Node를 다시 알아야 했고 Javacript 런타임 기반이다보니 해당 부분까지 공부하게 됐다. 매번 1화만 보다가 끝나는 기분이야..😢 자바스크립트는 싱글쓰레드-논블로킹 언어로 쉽게 말해서 쓰레드 하나에 비동기식으로 작동한다. 하긴 단일쓰레드인데 동기식(블로킹) 형식이였으면..

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

"selectbox 꾸미기"라고 검색하니까 대부분 음... 말을 안해도 다들 아실 것 같지만 내가 생각하는 그런 이쁜 ui로써의 꾸미기가 아니었다. ( 물론 지원안해줘서 그런 것일 테지 음음..! ) 보통 이렇게 까지 selectbox와 option의 ui를 신경쓸 경우가 잘 없었지만 앞으로 내가 만드는 페이지엔 이렇게 이쁘게 할 것이다 😠! 구글링을 하던 도중 js로 나와 비슷하게 하신분 포스팅을 봤는데 나는 최근에 접한 vue의 template기능을 통해 구현하였다. ( name속성 및 value까지 정상 작동! ) 완성작✨ ( 이거 혹시 실제 작동하도록 넣는 방법 아시는분... html로 저장하니까 깨져용...😥 ) HTML코드에 딱히 볼건 없다. 일반 select사용하듯이 사용하면 된다. sele..

새로운 프로젝트?와 마주하게 되면서 구조를 파악중에 실시간으로 다른 웹에서도 동시에 이벤트를 발생해주어야 하는 기능이 필요했다. 그런 도중에 MQTT라는 친구와 마주하게 됐는데... ( 안녕.. 새친구 🤨 ) 친구의 소개는 "발행-구독(Publish-Subscribe) 기반의 메시지 송수신 프로토콜" 이라고 소개돼있다. ( mqtt 친구 소개 : underflow101.tistory.com/22 ) mqtt 구조를 정리하자면 발행과 구독 방식 그리고 비동기 방식이다. 또한 tcp/ip위에서 동작한다. 발행자가 어떠한 토픽을 publish한 후 중간에서 브로커가 해당 토픽을 subscribe한 구독자에게 해당 메시지를 중개하는 형태로 이루어져있다. 여기까지 간단하게 mqtt에 관한 설명을 하고 mosqui..

처음엔 스크립트로 직접 카운터 효과를 주었었는데 부드럽게 올라가지 않는 느낌이 없지 않아 있어서 TweenMax를 사용하기로 했다. 그리고 스크롤 할 때 마다 효과를 주기 위해 ScrollMagic이라는 친구도 사용했다 :) 먼저 결과물 부터! 움짤엔 찍히지 않았지만 다시 위로 갔다가 해당 카운터가 있는 위치로 오면 카운터가 재시작 된다. [ HTML ] data-count는 최대 카운트 숫자로 사용했다. 국내 프랜차이즈 지점 0개 해외 직영점 0개 [ JS ] const controller = new ScrollMagic.Controller(); $(".branch dd span").each(function(i) { let max_count = $(this).data("count"); // 카운트 될 ..

회사에서 로딩화면 애니메이션으로 텍스트에 차오르는 느낌을 줄 수 있냐기에 알겠다하고 구현한 애니메이션... 물결로 하려니 조콤 힘들었다 😭 방법이 두가지가 있었는데 1. 물결 배경을 넣어 배경을 움직이는 방법 2. clip path를 이용한 방법 이중에서 나는 1번 방법을 택했다. 이유는 1번, 2번 다 해봤는데 2번을 이용해 차오르는 느낌을 주려니 중간에 애니메이션이 끊어지는 느낌이 강해서 택하지 않았다. 아래 참고한 영상을 첨부할테니 2번 방법을 해보시고 싶으신 분은 한번 도전해 보시길 :) [ HTML ] 크게 복잡할 것 없다. 아래부분이 끝! EXAMPLE [ CSS ] body { margin: 0; padding: 0; } .loader { position:fixed; top: 50%; lef..

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

깃허브나 나무위키의 비교처럼 이전버전과 현재버전을 차이를 표시하는 라이브러리를 하나 가져왔다. 사실 php로 직접 만들어볼려고 발버둥치다가 60%까지 했는데 또또 똑같이 정리안하고 멘땅에 해딩하다 엎었다 ;( 추후에 한번 만들어봐야겠다. ( 이러고 또 안한다? ) 소개할 라이브러리는 jsdifflib라는 친구다. 어느곳이나 그렇듯 깃허브에 설명이 되어있지만 ( 물론 영어로 ) 다음에 편하게 사용하기 위해 사용법을 정리하려한다. 해당 깃허브에서 JavaScript와 css를 댕근 다운받아 import 해줘야한다. // IF( viewType == 0 ) // 두창을 두고 양쪽 비교 // ELSE IF ( viewType == 1 ) // 창하나에 달라진 부분 표시 function diffUsingJS(vi..