1. 스플래시를 한 번만 나오게 할 순 없을까? 란 생각 문득 문서를 만들다가 이런 생각이 들었다. (이 내용은 어쩌면 개발보다는 약간 기획에 더 가까울 지도 모르겠다.) 나는 메인 화면인 "/" 경로에서 스플래시를 무조건 한 번 돌리고, 그 다음에 안에 문서를 네비게이션을 클릭해서 들어가게 설계했다. 그리고 이 서비스의 가장 main contents인 메타마스크와 nft 민팅에 관한 정보를 담은 아티클을 볼 수 있다. 누군가 이걸 보고 세상 비효율적인 구조라고 피드백을 할 수 있겠지만, 애초에 그게 여기의 그라운드 룰이니.. 아무튼 웬만한 건 다 참을 수 있겠는데 이건 못참겠다. 사실 저 스플래시는 사이트에 처음들어올 때, "어떤 콘텐츠가 있을지에 대해 기대감을 주는 장치"이다. 그렇기 때문에 이미 메..

Web3.0을 작업할 때 가장 좋은 점은 프론트엔드만 써도 꽤 그럴 듯하게 만들 수 있다는 점이다. 예를 들어, 저기있는 "Link With MetaMask" 저 버튼을 누를 때 크롬 확장프로그램인 메타마스크에 아무 조건(특히 CORS 같은 거 없이!) 접근할 수 있다. 생각보다 되게 쉬워서 놀랐다. 1. window.ethereum.request() const connectWithMetaMask = useCallback(async() => { // check the envs with hooks. if (!isMetaMaskInstalled && !isMobile) return; try { const account = await window.ethereum.request({ method: "eth_req..

window.etheruem에 대해서 아는가? 이 객체는 메타마스크를 설치한 사람만 볼 수 있는 정말 신기한 객체이다. 별다른 패키지 설치 없이 메타마스크를 설치했는지, 설치했다면 주소를 가져올 수도 있다. 다만 이건 오로지 데스크탑에 한정된다. chrome의 확장 프로그램으로 있는 메타마스크가 모바일 브라우저에선 당연히 없기 때문이다. 따로 meta mask 앱을 실행시켜서 인증을 받아야한다. 메타마스크의 window.ethereum 객체에 관해서 Best Practices | MetaMask Docs Best Practices If this page doesn't answer your question, please feel free to open an issue in our repository (op..

드디어 메인 페이지에서 벗어났다! 무한한 감사를....🙏 이제는 우리 웹사이트에서 가장 중요한 콘텐츠인 docs를 만들어야 한다. 우리나라 웹 특성상 kr/en을 제공해야 할 일들이 종종 있다. 보통 우리나라와 해외 타깃으로 하는 UI 감성이 꽤나 다르게 때문에 아예 페이지를 다르게 파는 경우도 많다. 예를 들어, 메타콩즈를 살펴보자! 메타콩즈(for korean) MetaKongz Welcome to Kongz Universe ! themetakongz.com 메타콩즈(for global) MetaKongz Welcome to Kongz Universe ! www.themetakongz.com 막상 쓰고 보니 큰 차이가 있는 것 같진 않지만, 콘텐츠를 말하려는게 아니니.. 잘 보면 아예 url을 다르게..

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 요소입니다. 어떤 클래스를 기준..