와 착시!

옆집바보·2023년 3월 24일
0
post-thumbnail

뭐하다 이걸 만들게 된거지?

Nuxt3에 대해서 찾아보다가 Nuxt Modules를 알게 되었다.
좋은게 많아서 여러 개 찾아보다가 VueUse를 가지고 놀게 됐다.

예전 Vue를 이용한 프로젝트 때 이벤트 관련해서 구현하기 귀찮은적이 많았는데, 이놈은 별의별 걸 지원해준다.

다음 프로젝트 때는 VueUse를 쓸 것이다.


근데 VueUse로 이걸 왜 만듦?


사실 VueUse를 알기 전에 이모지가지고 놀고 있었음.

그러다가 많은 이모지를 원 형태로 배치하고, 회전시키면 뫼비우스의 띠처럼 보이지 않을까?라는 의문의 탄생하게 된 것이다.

그리고 아이콘이랑 원의 지름, 아이콘 개수 등 옵션들을 어디서 변경하게 해주지? 생각하다가 아까보던 VueUse로 간단한 모달 하나 띄워서 변경할 수 있게 해야지 생각한거고 ^___^ b

사용한 것들

  • Nuxt3
  • TailwindCSS
  • VueUse
  • Vercel (배포 겁나 편해)

기능

  • 영롱한 착시
  • 간단한 모달창 (아이콘 클릭하면 나옴 ^___^ b)
    - Draggable
    - OutsideClick
  • 아이콘, 지름, 개수, 투명도 변경 가능! (와 정말 쩐다)

여담

사실 저 혼자 툭 튀어나와 있는 아이콘을 자연스럽게 다른 아이콘들과 마찬가지로 겹쳐지게 하려 했는데, 실패 했음 하하하.
그리고 VueUse에 draggable을 쓰니까 모달창에 있는 range input이 정상 작동 안함... 어쩔? 난 VueUse쓰고 싶음 ㅅㄱ

VueUse 정말 좋은 듯?
아ㅋㅋ 그냥 좋은 거 가져다 쓰기만 해도 된다니까?
좋은 거 있으면 많이 알려주세요 ^___^ b

profile
오아리 최고

0개의 댓글