Hello,

kok nae-ga ha-myun an-dweneun MAGIC...🧚

전체 글 156

~ 2024.08
[ Vue.js ] 를 이용한 select box 꾸미기

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

2021.01.08 ﹒ 18:49
~ 2024.08
MQTT 프로토콜 그리고 Mosquitto ( 너 뭐야 처음봐 >﹏<)

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

2020.11.04 ﹒ 12:56
~ 2024.08
TweenMax를 이용한 카운터 효과 ( feat. ScrollMagic )

처음엔 스크립트로 직접 카운터 효과를 주었었는데 부드럽게 올라가지 않는 느낌이 없지 않아 있어서 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"); // 카운트 될 ..

2020.08.07 ﹒ 10:47
~ 2024.08
[CSS] 물결이 차오르는 텍스트 ( 로딩 효과 )

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

2020.08.05 ﹒ 10:52
~ 2024.08
[JavaScript] 스로틀(Throttle ) & 디바운스(Debounce)

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

2020.07.13 ﹒ 17:13
~ 2024.08
[JS] 달라진 텍스트 표시 라이브러리

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

2020.06.17 ﹒ 17:47
~ 2024.08
[CSS] CSS 가속화라는게 있었어..?

오늘 또 새로운 정보를 알았다! (흥분) 회사의 다른 부서에서 사용중인 페이지가 너무 기니까 랙을 먹어 불편하다고 말이 나와 고민중에 옆 선배한테 물으니 CSS 가속화 작업을 한번 해보라고 하셨다! CSS 가속화요...?😬 문제된 페이지는 sortable을 많이 사용한 페이지였다. 그렇다 보니 Reflow와 Repaint 작업이 많이 발생 할 수 밖에 없었다😫 Reflow와 Repaint를 모르고 계시다면 CSS랜더링에 관한 정보를 참고하시면 된다 :) 나는 위치가 이동될 수 있다고 미리 알려주는 css속성인 will-change를 걸어주었다. will-change:top, left; 다른 필요 지식이 더 있지만 아래의 참고 블로그에 너무 잘 정리해주셔서 기타 필요한 상세 내용은 적지 않겠다. 꼭 참고 ..

2020.05.27 ﹒ 18:16
~ 2024.08
[Node.js / React.js ] 나 했다 도전! 리엑트 튜토리얼

웹팩 해야하는데 또 새로운거 하고싶어서 리액트 찾다가 튜토리얼만 해봐야지 하고 시작한 리액트 튜토리얼 도전기🤤 틱택토를 만들어 본다구 한다 :) https://reactjs-kr.firebaseapp.com/tutorial/tutorial.html Tutorial: Intro to React – React A JavaScript library for building user interfaces reactjs.org react를 전역설치 하고 my-app이라는 react app을 하나 생성해 주었다. npm install -g create-react-app create-react-app my-app 해당 명령어를 실행하면 src폴더가 하나 생겼을 텐데 src하위 파일들을 모두 삭제한 후, /src/inde..

2020.05.20 ﹒ 18:15
~ 2024.08
[emailJS] 자바스크립트로 이메일을 보내보자✍

포트폴리오를 만들때 보통 이메일 주소를 적어 놓는데... 항상 이메일을 그냥 보낼 수 있도록 하고싶은데 고작 포폴에 이기능 넣자고 php나 jsp의 백단을 구축해서 서버를 24시간 돌리고 싶진 않아서 구글링 하던중 찾은 emailJS라는 친구를 오늘 한번 소개해보려한다. https://www.emailjs.com/ Send email from Javascript - no server code required | EmailJS Send email directly from your client-side Javascript code – no server side code required. Add static or dynamic attachments, dynamic parameters, captcha code ..

2020.04.20 ﹒ 14:51
~ 2024.08
여태 사용한 양키캔들 리뷰 ((끄적끄적))

오랜만에 일기장 카테고리를 꺼내들었다 👋👋 처음엔 향수를 좋아하다가 그다음 디퓨저 섬유향수 그리고 지금은 향초를 좋아하고 있다 :) 아마 계속해서 향수처럼 뿌리는 것 보다는 향초를 계속 좋아하게 될 것 같다. 그러면서 향초도 만들어보고 하나씩 향초를 사 모으고 있다. 아직 몇가지 안되지만 써봤던 양키캔들 리뷰를 끄적여 보기로 한다 🙆 사실 양키캔들 향 맡으러 가보면 다들 나한텐 강한거 같아서 초반엔 선듯 못샀었는데 막상 발향해보면 브랜드는 브랜드구나 하면서 하나 둘씩 사게됐던 친구들 XD 🧡 레몬라벤더 이건 사실 남자친구에게 라벤더바닐라라고 계속해서 말했는데 결국 잘못시켜서 레몬라벤더가와서 썼던 향초... 많이 추천하는 향이지만 나에겐 그냥 레몬향 에프킬라냄새의 향이였다. 💛 라벤더바닐라 라벤더향을 좋아..

2020.04.07 ﹒ 11:22