Three.js 처럼은 아니어도 마우스에 따라 움직이는 UI 요소들을 하나씩 넣고 싶을 때가 종종 있다. 꼭 이 웹사이트 처럼! https://www.nytimes.com/paidpost/allbirds/the-view-from-above.html PAID POST by Allbirds — The View From Above Why our future may depend on the fate of birds www.nytimes.com 잘 보면 마우스의 움직임에 따라 저 돌이랑 솔방울들이 약간은 반대 방향으로 움직이는 걸 확인할 수 있다. 이 정도면 나도 만들 수 있지 않을까..? 하는 생각에 한 번 만들어봤다. 일단 먼저 결과물부터 보여주는 걸로 1. Today's TO-DO 올해 4월, 5월..? 한..

간혹 정부 관련된 홈페이지에서 많이 보이는 효과인 hover 시 밑에 줄이 생기는 애니메이션 입니다. css 만으로도 구현이 가능합니다. 방법은 정말 여러 개가 있을 수 있겠습니다. box-shadow로 transition을 줘도 되구요. 저는 저 선이 좀 둥글둥글 했으면 좋겠어서 pseudo element를 추가해줘서 구현했습니다. 1. Pseudo Element 가끔 개발자 도구로 보다보면 저렇게 ::after나 ::before 같은 걸 볼 수 있는데 저게 바로 의사 요소(pseudo element) 입니다. 우리가 자주 쓰는 hover나 active와 같은 클래스는 의사 클래스(psudo class)라고 하는데요. 마찬가지로 내장되어 암시적으로 사용할 수 있는 css 요소입니다. 어떤 클래스를 기준..

그냥 클릭할 때 애니메이션 넘기면서 조작하는 거야 아주아주 쉽지만, url params를 바꿀 때 애니메이션과 함께 넘어가는 건 한 번 생각해볼만 하다. 간혹 이런 사이트들이 있다. https://pvoznyuk.github.io/react-update-url-on-scroll/ react-update-url-on-scroll pvoznyuk.github.io 스크롤을 내릴 때 url params가 바뀌는 웹사이트들이 종종 있다. 회사의 소개 페이지나 포트폴리오 관련 페이지들이 종종 그러는데, react-router v5 시절에는 hashRouter를 이용해서 간단하게 구현이 가능했지만.. 이제 없어져버렸다. router 설정도 결국엔 body 태그 하단의 JSXElement를 모두 바꿔주는 역할이기 때..

Typescript로 작업을 하게 되면 당연하지만, window.ethereum을 올바르지 않은 객체 접근이라고 뜬다. 그간 Theme를 설정하느라 XXXX.d.ts에 대해서 배워왔다. 이번에도 똑같이 설정해주면 되지않을까? 근데 어디에서 선언을 해줘야하는걸까? Trying to use window.ethereum.request in Typescript errors out with Property 'request' does not exist on type 'EthereumProvider' Except for one unanswered question from last November, I cannot find anything . . . . I am revamping some typescript code ..

슬랙을 쓸 때 저 멘션이 뭔가 참 너낌 있었는데 의외로 되게 쉽게 만들 수 있었다. 당연히 라이브러리를 썼고, React-mentions라는 라이브러리다. https://www.npmjs.com/package/react-mentions react-mentions React mentions input. Latest version: 4.4.7, last published: 2 months ago. Start using react-mentions in your project by running `npm i react-mentions`. There are 101 other projects in the npm registry using react-mentions. www.npmjs.com DT 패키지이니, Typ..

안녕하세요! 프로젝트를 세팅하다보면 이런 요구 사항을 받는 경우가 종종 있습니다. 한글은 Noto Sans KR로, 영어는 Arial로 가능한가요? 1. @font-face의 기본 당연히 가능하죠! css에서는 @font-face라는 문법을 지원한답니다. @font-face { font-family: Noto Sans KR; font-style: normal; font-weight: normal; // 여기에서 url로 지정해주면 됩니다. src: url("YOUR_FONT_PATHS"); } 기본적으로 이 스타일을 font-family로 지정해주고, style(Italic, oblique 등), weight(bold, bolder 등)도 지정해줄 수 있습니다. 만약 요청사항 처럼 다른 유니코드로 지정해..